webデザイナにとってのアイコン(とかピクトグラム)

webcre8はwebデザイナです。一応こだわりとして(と言うほどのものではないかもしれませんが)、アイコンやPhotoshopのレイヤースタイル、パターン等、制作物の中で使うパーツは極力自分で作るようにしています。時間さえ許せばフォントやブラシ、テクスチャまで作りたいところですが…それは場合に応じて、という感じですね。甘えるときもありますし、…という意味でも拘りと言うほどのものじゃないですかねｗ

アイコン使うのは便利！

アイコンがあるとテキストや写真のみの情報より気遣いの行き届いた印象を与えます。流行りのミニマルデザインなど、整理された情報の提供にアイコンでの表現は必須です。

アイコンは親しみも生んでくれる

アイコンにはよくコミカルでディフォルメされた図案が使われます。分かりやすい絵文字のようなものが配置されていることでユーザもテキストばかりの文書より、親しみを持てますよね。

アイコンを作りたいとき何を作ればいいの？

photo credit: YouAreWeb

サイトを作るたびにアイコンを作ったり、系列サイトの統一感を出す為に用意しておいた共通のアイコンを作ったりはしますけど、そういう時大体何を作っておけばいいのか。また、あらかじめアイコンセットを作りたいとき、何を揃えていればいいのか。

そう言う人の為に色んなアイコンサイトやアプリケーションを見まわって、どんなアイコンが必要なのか、作られているのかを調べてみました★

私自身は普通のwebデザイナですし、アイコンは単にサイトのデザインにしか使ってません。ですが[クリエイティブ]新しく追加！ WordPressやEvernote等のクッキー(webクッキー中級編)等の記事で過去にもアイコン素材なんか作ったりしてますし、WEBCRE8.jpにももうちょっと各所にアイコンをちりばめたいので、ついでにアプリケーションアイコン、ソフトウェアアイコン、ソーシャルアイコンに至るまで、思いつく限りを集めてみた感じです。

アプリケーション制作やインターフェースのデザイナにとっては多分リストとか持ってるだろうし役に立つものでもないかとは思いますが、ちょっとしたアイコン作りには役に立つんじゃないかなーと思います。多分…。

例えばこの辺を参考にしました

Google(webサイト)
Firefox(ブラウザ)
Windows(システム)

他には特定のサイトを見たわけでなく、google画像検索を眺めてただけですｗ

ざーっと挙げただけなので、漏れや微妙なセレクトも入っているかもしれません。コメントで「これが入ってないよ！」とか教えてもらえると助かります。ブログ記事は公開後に完成する！(ｷﾘｯ とか言ってみますｗ 多分後で追加もしますっ。

あと、代用の利くものはできる限り一つにまとめちゃってますし、「これはこのアイコンでもよくない？」というようなものも別個に入っちゃったりしてます。例えば「上」のアイコンは「アップロード」と「ページトップへ」と両方で使われるような気がしますが、別に作るか、ぜんぜん違うアイコンにするかは制作者次第です。

カッコ[]で囲んでいるものは数字とか国旗とかバリエーションが多すぎるので必要なもののみを作る感じのやつです。

基本機能のアイコン

• メール
• 開いたメール
• 動画
• 音楽
• ファイル
• 圧縮ファイル
• 添付ファイル
• 壊れたファイル
• フォルダ
• イメージ
• お気に入り
• 検索
• フラグ
• リンク
• 文字入力
• フレンド
• ウェイト
• ヘルプ
• ホーム
• コード
• 証明書
• セキュリティ
• 印刷
• ウィンドゥ
• 音声
• ゴミ箱
• アラート
• ネットワーク
• 全画面表示
• 最小化
• 通常サイズ
• ファイアウォール

ソフトウェア機能のアイコン

• 位置情報
• カレンダ
• ピン留め
• バッジ
• カラーピッカー
• レンズ
• ペイント
• ペン
• レタッチ
• アドオン/プラグイン
• コピー
• 貼り付け
• 切り取り
• 同期
• グラデーション
• 電卓
• リスト表示
• ブロック表示
• イコライザ
• ポインタ
• [カラーチップ]

webサイト機能のアイコン

• 外部リンク
• リンク
• サイトマップ
• タグ
• カテゴリ

絵文字のアイコン

• インターネット
• コメント
• 口コミ
• 人
• [顔]
• 折れ線グラフ
• 棒グラフ
• 円グラフ
• 電池残量
• 電波状況
• カギ
• 解錠したカギ
• 新しい
• 注目
• トロフィー
• 地図
• 地球
• [国旗]
• 電車
• 地下鉄
• バス
• 車
• 徒歩
• カヤック
• ハート
• 船
• 爆弾
• バルーン
• Like
• Dislike
• 朝食(コーヒー)
• 昼食(ファーストフード)
• 夕食(ディナー)
• 新聞
• 骸骨
• 目
• 宝石
• 地球

天気のアイコン

• 晴れ
• 曇り
• 雨
• 強風
• 雪
• 温度
• 雷

ソフト・アプリのアイコン

• Flickr
• RSS
• Delicious
• Youtube
• Twitter
• Google+
• Facebook
• Evernote
• Digg
• Linkedin
• Instagram
• Skype
• hatena Bookmark
• Gmail
• mixi
• Stumble Upon
• tumblr
• dribbble
• reddit
• blogger
• dropbox
• Livedoor
• Pinterest

ブラウザのアイコン

• Internet Explorer
• Firefox
• Opera
• Safari
• Google Chrome

PC・ハードウェアのアイコン

• PC
• ノートPC
• ディスプレイ
• マウス
• キーボード
• コントローラ
• プリンタ
• カメラ
• 電話
• スピーカ
• マイク
• ケータイ
• スマートフォン
• タブレット
• ポータブルプレーヤ
• スキャナ
• ハードディスク
• Windows
• Mac
• Linux
• XBOX
• PlayStation
• Wi-Fi
• 無線LAN
• USB

メディアのアイコン

• フロッピー
• USBメモリ
• CD-ROM
• CD-R
• CD-RW
• DVD-ROM
• DVD-R
• DVD-RW
• DVD-RAM
• Blu-Ray

ECのアイコン

• カート/買い物かご
• バーコード
• VISA
• MasterCard
• AMEX
• JCB
• PayPal
• 両替

ファイル・拡張子のアイコン

• txt
• zip
• html
• css
• xml
• mp3
• jpg
• gif
• png-8
• png-24
• php
• js

動画・音楽のアイコン

• 再生
• 一時停止
• 停止
• 巻き戻し
• 早送り
• スキップ
• バック
• 録画

動作のアイコン

• 電源ON
• 電源OFF
• 追加(新規作成)
• 削除
• 注意
• 保存
• アップロード
• ダウンロード
• 入力
• 設定
• 通信
• 更新
• 開く
• 閉じる

シンボル・記号のアイコン

• 右
• 左
• 上
• 下
• 左右
• 上下
• チェック
• ○
• ×
• ＋
• －
• [数字]
• [アルファベット]
• [ひらがな]
• [カタカナ]
• [漢字]

実際にアイコンを作る場合

アイコンには、「対象を表現するもの」と「動作を表すもの」「対象と動作を表すもの」があると考えています。

例えば「ファイル」というアイコンには「ファイルを作成する」「ファイルを削除する」等と言ったバリエーションが必要になりますよね。

アイコンを組み合わせて対応する

その場合大きな「ファイル」の右下に小さい「＋」のアイコンを重ねることで「ファイルの作成」、右下に小さい「×」のアイコンを重ねることで「ファイルの削除」が表現できます。

上記の表の大見出しで言えば主に「動作」「シンボル・記号」に分類したものを大小作っておけば色々なステータスに対応できるかと思います。アイコンの元画像をパスで作っておけば縮小でもイケるかもですし、割りきってドット絵で二個書くのもアリです★

でもアイコンだけで語ろうとしてはいけない

このように非常に便利なアイコンではありますが、それだけで何か重要なナビゲーションの役割を担わせるのはよくありません。

例えば我々にとってかなり身近なトイレのピクトグラムであっても男女の色や形が微妙に違うだけで戸惑ったりすることがあります。マークの下に「男子トイレ」と書いてあればより間違いはないですよね。

更には「下向きの矢印がダウンロード」「鎖のマークがリンク」等、web上のアイコンにおいては特に、我々web制作者が「当然伝わるだろ」と思っているようなことが一般の利用者には伝わらないことが少なくありません。

アイコンは基本的にテキスト等で明示された情報の捕捉として使うべきで、アイコンに情報を語らせようとしてはいけません。仮にテキストを配置しない場合も、マウスオーバーでツールチップを表記する、titleプロパティに名称を入れておくなどの工夫が必要です。ただこの辺スマートフォンとかのポインタの存在しないモバイルデバイスはどうやって解決していくのかな…とか最近良く考えます。

特にwebにはプロダクトなどと違って説明書がありません(あっても読まれなさそう)からね。触って覚えてもらうしかない以上、ユーザにはなるべく事前に情報を与えるようにしたいですね。

これだけアイコンのリストを作ったということは…

「おいアイコン素材は作ってないのかよ」とお思いの方、ごもっともですｗすみません今回はあまり見かけない、アイコン作りの為のキーワード集めが趣旨です！ まあWEBCRE8.jpのスタンスとしては「自分で作る」と言うものがありますので…はい、つまりこういう記事はほとんど「作りますよフラグ」ですね！後日配布用に制作したいと思います(多分)…あとクッキーもですかねｗ

アイコンの良質の素材なんて巷に溢れてるとは思いますが、その際は良ければ使ってやってください★