[デザイン]アイコンを作りたい人へ。WEBCRE8.jpウェブクリ8.jpwebデザイナーによる、デザインとwebを楽しむ情報ブログRSSABOUT調べる。備忘録としてwebやデザインについて調べたり新しく知ったことなどを書き残していくカテゴリです。[デザイン]アイコンを作りたい人へ。作るべきキーワードを集めました[デザイン]アイコンを作りたい人へ。デザインアプリケーションデザイナには及びませんが、webデザイナもアイコンとか作ります。色んなサイトを見て思いつく限りのアイコンに必要そうなキーワードを集めてみました。webデザイナにとってのアイコン(とかピクトグラム)webcre8はwebデザイナです。一応こだわりとして(と言うほどのものではないかもしれませんが)、アイコンやPhotoshopのレイヤースタイル、パターン等、制作物の中で使うパーツは極力自分で作るようにしています。時間さえ許せばフォントやブラシ、テクスチャまで作りたいところですが...それは場合に応じて、という感じですね。甘えるときもありますし、...という意味でも拘りと言うほどのものじゃないですかねwアイコン使うのは便利!アイコンがあるとテキストや写真のみの情報より気遣いの行き届いた印象を与えます。流行りのミニマルデザインなど、整理された情報の提供にアイコンでの表現は必須です。アイコンは親しみも生んでくれるアイコンにはよくコミカルでディフォルメされた図案が使われます。分かりやすい絵文字のようなものが配置されていることでユーザもテキストばかりの文書より、親しみを持てますよね。YouAreWebサイトを作るたびにアイコンを作ったり、系列サイトの統一感を出す為に用意しておいた共通のアイコンを作ったりはしますけど、そういう時大体何を作っておけばいいのか。アイコンセットを作りたいとき、何を揃えていればいいのか。私自身は普通のwebデザイナですし、アイコンは単にサイトのデザインにしか使ってません。WordPressやEvernote等のクッキー(webクッキー中級編)等の記事で過去にもアイコン素材なんか作ったりしてますし、WEBCRE8.jpにももうちょっと各所にアイコンをちりばめたいので、ついでにアプリケーションアイコン、ソフトウェアアイコン、ソーシャルアイコンに至るまで、思いつく限りを集めてみた感じです。アプリケーション制作やインターフェースのデザイナにとっては多分リストとか持ってるだろうし役に立つものでもないかとは思いますが、ちょっとしたアイコン作りには役に立つんじゃないかなーと思います。この辺を参考にしましたGoogle(webサイト)Firefox(ブラウザ)Windows(システム)他には特定のサイトを見たわけでなく、google画像検索を眺めてただけですwざーっと挙げただけなので、漏れや微妙なセレクトも入っているかもしれません。コメントで「これが入ってないよ!」とか教えてもらえると助かります。あと、代用の利くものはできる限り一つにまとめちゃってますし、「これはこのアイコンでもよくない?」というようなものも別個に入っちゃったりしてます。「上」のアイコンは「アップロード」と「ページトップへ」と両方で使われるような気がしますが、別に作るか、ぜんぜん違うアイコンにするかは制作者次第です。カッコ[]で囲んでいるものは数字とか国旗とかバリエーションが多すぎるので必要なもののみを作る感じのやつです。×+-[数字][アルファベット][ひらがな][カタカナ][漢字]実際にアイコンを作る場合アイコンには、「対象を表現するもの」と「動作を表すもの」「対象と動作を表すもの」があると考えています。大きく分けて三種類のアイコンがある例えば「ファイル」というアイコンには「ファイルを作成する」「ファイルを削除する」等と言ったバリエーションが必要になりますよね。アイコンを組み合わせて対応するその場合大きな「ファイル」の右下に小さい「+」のアイコンを重ねることで「ファイルの作成」、右下に小さい「×」のアイコンを重ねることで「ファイルの削除」が表現できます。上記の表の大見出しで言えば主に「動作」「シンボル・記号」に分類したものを大小作っておけば色々なステータスに対応できるかと思います。アイコンの元画像をパスで作っておけば縮小でもイケるかもですし、割りきってドット絵で二個書くのもアリです★でもアイコンだけで語ろうとしてはいけないこのように非常に便利なアイコンではありますが、それだけで何か重要なナビゲーションの役割を担わせるのはよくありません。我々にとってかなり身近なトイレのピクトグラムであっても男女の色や形が微妙に違うだけで戸惑ったりすることがあります。マークの下に「男子トイレ」と書いてあればより間違いはないですよね。間違ったサインによって混乱する更には「下向きの矢印がダウンロード」「鎖のマークがリンク」等、web上のアイコンにおいては特に、我々web制作者が「当然伝わるだろ」と思っているようなことが一般の利用者には伝わらないことが少なくありません。アイコンは基本的にテキスト等で明示された情報の捕捉として使うべきで、アイコンに情報を語らせようとしてはいけません。仮にテキストを配置しない場合も、マウスオーバーでツールチップを表記する、titleプロパティに名称を入れておくなどの工夫が必要です。この辺スマートフォンとかのポインタの存在しないモバイルデバイスはどうやって解決していくのかな...とか最近良く考えます。webにはプロダクトなどと違って説明書がありません(あっても読まれなさそう)からね。触って覚えてもらうしかない以上、ユーザにはなるべく事前に情報を与えるようにしたいですね。Buildingで知った上記のサイトのアイコンを参考にし、下記のアイテムをリストに追加致しました。dribbble,reddit,blogger,dropbox,ヘッドフォン,プラグ,両替,新聞,船,骸骨,目,宝石,地球,wi-fi,USB,朝食(コーヒー),昼食(ファーストフード),夕食(ディナー),Windows,Mac,Linux,XBOX,PlayStation,ファイアウォール,爆弾,バルーン,Like,Dislike,左右の矢印tweethatenafacebook_likewebcre8はTwitterを使っています。