誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
ウェブでも紙でも電子書籍でもOK、全500種ベクターで作られたフリーのアイコン素材 -Freepik
個人でも商用でも利用できる全500種類のアイテムが揃った、汎用性に優れたシンプルなデザインのアイコン素材を紹介します。 500 Vector Mega Icon Pack ダウンロードできるアイコン素材のフォーマットは、2種類です。 .ai 素材の修正・紙にも使えるIllustratorのベクター素材 .png すぐに使いたい人用の128x128の透過PNG アイコンは全部で500種類！ さまざまなアイテムが揃っています。
ファビコン（favicon）とは？代表的なサイズと基本の作成方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ファビコンはサイト閲覧時のタブ以外にも、多くの場所で使われていることがわかります。 また、上記以外にも検索結果画面にも表示されるため、そのサイトを表す適切なアイコンを設定するようにしましょう。 作成時のサイズは512px × 512pxのみでOK これだけサイズがあると、全て用意するのかと不安になってしまいますが、WordPress4.3以降のバージョンであれば512px × 512pxのPNG形式ファイルを作成すれば全てに対応してくれるようになりました。 複数作成する必要はないので安心してください。 WordPress以外の場合 WordPressを利用しておらず上記のような自動適用の機能がない場合、またはWordPressが4.3以前のバージョンの場合は、各サイズのアイコンを用意する必要があります。 各ブラウザのファビコン表示サイズは先ほどの表の通り16px × 16px が一般的です
商用利用無料、小さいながらも細部まで丁寧に作りこまれたアイコン素材 -Crisp Icon Set
シンプルでくっきりしたデザインのアイコンのベクター素材を紹介します。 カスタムシェイプやRetinaディスプレイ用も完備です。 アイコン全108種類 ダウンロードできる素材のフォーマットは、ウェブ制作者に嬉しいさまざまなものが揃っています。 .psd -プレビュー・シェイプ・Retinaディスプレイ用の3種 .png -そのまますぐにアイコンとして使う用 .csh -Photoshop用のカスタムシェイプ .psd, .pngは、16x16, 32x32, 48x48の3サイズが完備。 PSDはアイコンごとにレイヤーが保持されています。
６００以上のシンプルなベクターアイコンが入手できる「iconmonstr」:phpspot開発日誌
iconmonstr ６００以上のシンプルなベクターアイコンが入手できる「iconmonstr」。 次のようなシンプルなベクターアイコンが６００種類以上公開されています。 Twitterだと公式アイコンもありますし、若干アレンジしたデザインのものもあります。 とにかく種類が豊富でベクターなのでリサイズ可能というところでのアイコンをお探しの方には調度良いかも。 全体的にクオリティは統一されていて使いやすそうです 関連エントリ RetinaディスプレイOKなアプリ用PSDアイコン350 綺麗にデザインされたピクトグラムアイコン100個セット iOSのAppアイコン作成用PSDテンプレート フリーのアイコンフォント１０まとめ
リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量：10で追加します。これが同心円状のヘアラ
1 Click Config Ver 2.0.0 リリース
Ver 2.0.1 緊急リリース ローカルキャッシュが正常に動作しない問題があり、それを修正したバージョンを公開しました。すでに利用済みの方は「設定」画面から「最新版を確認する」ボタンを押して下さい。ショートカットの再作成は不要です。 これから利用される方は最初から Ver 2.0.1 になるので特に何もしなくて構いません。 例の、iPhone の設定画面へのショートカットを無料で簡単に作成するサービスをバージョンアップして Ver 2.0.0 としました。 なんだか冗長なので、サービス名称から "for iOS" も取っちゃいました。 前の Ver.1 はいわばβ版で、本バージョンからが実質的な正式版になります。 URL も正式版らしくなりました。 https://www.otchy.net/1cc/ (閉鎖済) を iPhone で開いてご利用下さい。 QR コードはこちら。 使ってい
Facebook、Twitterなどのソーシャルアイコン
Picons | Vector Icons an... / Dribbble - Grungy social... / Dark Social Icons Set | ...他...全16件
【iOS 5】超絶便利で捗りますぞ！ホーム画面から「Wi-Fi」や「明るさの設定」まで一瞬でいく方法 | NANOKAMO BLOG
Wi-Fiのオン・オフをしょっちゅうイジる男、くろじ（@kuroji1987）です。こんにちは。 僕だけじゃないと思うんですが、Wi-Fiのオン・オフってけっこー頻繁に入れかえません？ でも設定から入っていくとちょっと面倒くさいんですよね。 ということで、今回は一瞬でそこまでぶっ飛んでいける夢のような方法をご紹介します！ 設定も簡単だ、すぐできるぜ！ この方法には『URLスキーム』と『Touch Icon Creator』というアプリを使用します。 それぞれがどういうものかはやりながら説明します。とりあえずやってみましょう！ まずコチラのアプリをダウンロードしましょう。 Touch Icon Creator カテゴリ: ユーティリティ 価格: ￥85 『Touch Icon Creator』は、電話番号やメールアドレス、ホームページのURLを登録してアイコンを作成し、ホーム
これだけあればシンプルアイコン探しには困らないかも！全部フリーのシンプルアイコンを一挙紹介！ | バンクーバーのうぇぶ屋
僕はとにかくシンプルなデザインが大好きです。無駄が無く、伝えることだけを伝えるあの潔さと、目的意識の高さが気持ちがいいです。もはや愛してます。 そんなミニマル変態な僕が集めたシンプルアイコン集。Evernoteのノートにびっしりになっていたので、せっかくだからここで全部ご紹介出来ればと思います！これだけあれば、まぁ今年は困ることは無いでしょう（たぶん）。自称ミニマル変態の僕は、まだまだ追加していくつもりなので、何か知っていれば是非教えてください！ なんだか一部、別にシンプルじゃないアイコンも混ざった気がしますが、その辺は軽く流してあげてください。僕のEvernoteの中は、人に見せられないくらい乱雑な分け方なので、整理整頓かねて、ちょっとこういう投稿増やしていこうかなと思います！ あと、大半は僕も商用利用を確認して利用したので、ほとんどはCommerciallyであることは確認していますが
TwitterやFacebook等、フリーで使えるソーシャルメディアアイコンセット４０:phpspot開発日誌
40 Sets of Free Social Media Icons | Vandelay Design Blog TwitterやFacebook等、フリーで使えるソーシャルメディアアイコンセット４０。 次のような、デザインに嫌なクセがなくて汎用に使えそうなアイコン〜個性的なものまで色々なアイコンセットが紹介されています。 サイトデザインに合ったアイコンが選べそうなので覚えておいてもよさそう。 Linked.inも日本で開始するそうですが、どうなっていくのか楽しみです 関連エントリ 選びたい放題のフリーのソーシャルアイコンセット色々 シンプル白黒がいい感じのソーシャルアイコン37個セット「LinkDeck」 白黒シンプルがいい感じのベクター形式のソーシャルアイコンセット 246種類のクリアで美しいソーシャルアイコンセット
はてなブックマーク開発ブログ
いつもはてなブックマークをご利用いただき誠にありがとうございます。はてなブックマーク開発チーム、ディレクターのid:yone-yamaです。 はてなブックマークにおける「人気コメント」の名称を「注目コメント」に変更しましたのでお知らせします。 変更の背景 はてなブックマークは「より豊かで多様な価値観が集まるプラットフォーム」を目指しています。 この考えのもと、人気コメントはスター数をはじめとした複合的な要素を組み合わせたスコアリングを行い、継続的に調整を加えてきました。 直近では以下の告知でお知らせしたように、人気コメント全体の健全性・多様性という観点を加味する新たな変数を追加するような取り組みも行っています。 bookmark.hatenastaff.com 上記のような改善を続けていることもあり、人気コメントはスター数などの単純な「人気度」のような評価により決定されるものではなく、実際
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Octicons Your project. GitHub's icons.
商用利用も無料、今時のシンプルながらディテールにこだわったUIエレメントとアイコンのPSD素材 -Impressionist UI
29000個以上もの膨大な数のアイコンが揃ったサイト「Free Icons Web」 | つーる亭
https://miqata.com/t/14
iPhoneの設定画面をサクッと開く方法 -『Touch Icon Creator』でURLスキーム対応アイコンを簡単に作る
Photoshop VIP ☞ 商用可、豊富すぎる711個のピクトグラムアイコンを無料公開している「Noun Project」
国内のWeb制作に役立ちそうな無料の写真素材やフォント、Webデザインギャラリー等のリソースサイトいろいろ・2011
