アイコンデザイン 7つの原則、優れたアイコンをデザインするために

サイト構築 -デザイン

Post on:2020年2月20日

Clarity -アイコンは分かりやすく

アイコンの主な目的は、コンセプトをすばやく伝えることです。

Toyota プリウスプライムの計器クラスターのアイコン（Toyota）

上記のアイコンの中で、あなたにとって明らかに分かるものはどれですか？
ドライバーは時間の経過とともに学習しますが、これらのアイコンのいくつかは直感的ではありません。アイコンの意味を理解するためのマニュアルが必要です。

直感的に分かりやすいアイコンを順に並べてみます。

左: 分かりやすいアイコン、右: 分かりにくいアイコン

アイコンに見慣れないメタファを使用している場合、理解するのが困難です。左から3番目のシートベルトは文字通り、素早く理解できます。しかし、右端の電動パワーステアリングシステム警告灯は知らないと理解できないでしょう。

アイコンが不明瞭だと、ほとんどの場合イライラします。また車の運転では、警告表示を間違えると危険にもつながります。

多くの人に馴染みのあるアイコンを見てましょう。
左から、ラブ、警告、音楽、上矢印のアイコンです。

Phosphor Carbon

矢印は、経路探索で使用される強力なシンボルです。

NYC地下鉄サイン

アイコンの分かりやすさが最も成功している場合は、アイコンは1つのグループで理解しやすいだけではなく、文化・年齢・背景を超えて普遍的です。ビジターのことを考えて、彼らと共鳴するメタファやカラーを使用しましょう。

また、もし表現したいアイデアが抽象的すぎる場合は、アイコン単体で明瞭ではないことに注意してください。これを解決するには、アイコンにテキストを組み合わせるなど、別の解決策を見つけるとよいでしょう。

Readability -アイコンは見やすく

分かりやすいアイコンが完成したら、そのアイコンが見やすいか確認します。

Amtrakアプリのアイコン

上記のStationアイコンはディテールが細かすぎるため、見やすくありません。

下記のアイコンにも同様の問題があります。
ボードとクリップの間のスペースが小さすぎるため、クリップボードのアイコンはファイルに似たオブジェクトのように見えます。

Transitアプリのアイコン

スペースを広げると、わずかな調整で大きな改善が見られます。

調整されたクリップボードのアイコン

アイコンで複数の形を使用する場合は、あいだに十分なスペースを空けてください。線が細いほど、また線が多いほど、アイコンはこみ入って読みにくくなります。

Googleマップは乗換案内で、アイコンをうまく使っています。非常に小さなサイズですが、非常に読みやすいアイコンです。

Googleマップのアイコン

Alignment -アイコンにおける揃え

アイコンのバランスが取れていることを確認するには、要素を視覚的に調整します。

三角形は中央に配置したけど、ずれているように見える

上記のアイコンは三角形が円の中央に配置されていますが、わたし達の目では中央からずれているように見えます。この原因は三角形は幅の広い部分が重く感じられ、重心が左に傾いているからです。

もう一つ似たような例を見てましょう。
iとjの上にある点は中心から少し外されています。oの高さは他の文字より高くなっています。これは書体デザイナーが、文字のバランスのために目の錯覚を利用した微調整です。

文字のバランスを作るための微調整

同様にアイコンのデザイナーも、アイコンのバランスを取るために調整が必要です。前述のアイコンを修正するには、左のスペースを少し広くします。

三角形を視覚的に中央に配置

これで中央に配置されているように見えるようになりました！
学ぶべきことは数字に頼らず、目を使って成果物を確認してください。

Brevity -アイコンは簡潔にデザインする

少ない言葉でうまく表現されたアイデアは、効率的でエレガントに感じられます。
例えば、次の言葉を見てみてください。

Teaching what you know strengthens your own understanding of the subject.

知っていることを人に教えることは、それについて自分自身の理解も深まる。

同じことを、もっと簡潔に言うことができます（Robert Heinleinより）。

When one teaches, two learn.

1人が教える時、2人共が学ぶ。

見事ですね！

Material Designではシステムアイコンのガイダンスの簡潔さがよく示されています。例えば、ボードアイコンは下記の代わりに、

過度に複雑なボートのアイコン: material.io

Material Designのアイコンは非常に簡潔です。

簡潔なボートのアイコン: material.io

わたし達は通常小さなキャンバスで作業をすることが多いので、簡潔さはアイコンのデザインに適しています。アイコンには適切なディテールだけを使用し、必要以上に使用しないでください。

特にユーザーインターフェイスでは、簡潔なスタイルが要点を伝えることで、コンテンツへの道が繋がります。例えば、下記のTelegramのアイコンは、最低限の適切なディテールで素敵です！

Telegramのアイコン

場合によっては、UIアイコンはより説明的なスタイルが必要な場合があります。下記のYelpのアイコンは、人気のある食べ物を検索する時に表示されるアイコンです。

Yelpのアイコン: Scott Tusk

タイ料理アイコンのエビは、絶品ですね！

スマホやタブレットやデスクトップ用のアプリアイコンは適切なディテールによって、より深みのあるカラーになります。利用者はスマホのホーム・ドック・アプリストアでのコンテキストを理解しているので、アイコンはブランドやプロダクトをより表現することができます。

アプリに使用されるアイコン

Consistency -アイコンの一貫性

アイコンファミリーの調和を実現するには、全体を通して同じスタイルのルールを維持させることです。

例えば、AppleはiOS 13以前では、さまざまな種類のストローク・塗りつぶし・サイズをアイコンに使用しており、一貫性に欠けていました。

iOS 13以前のアイコン: apple.com

特定のアイコンには、ストローク・塗りつぶし・サイズ・形状などのパラメーターに特定の視覚的な重みがあります。アイコン全体でこれらのパラメーターを同じにすると、一貫性が構築されます。

パラメーターのバリエーション

AppleはSan Franciscoの仲間であるSF Symbolsを導入してこれらのアイコンを修正しました。SF Symbolsは、9つのウェイトと3つのスケールでよりグラフィカルなアイコンのスタイルを採用しています（おそらくもっと複雑で、徹底的です）。
これにより、すべてのアイコンが調和しているように感じます。

現在のAppleのアイコンapple.com

大規模なアイコンファミリー、特に複数の制作者が関与する場合、一貫性を維持するのは簡単な作業ではありません。明確な原則とルールを持つことが重要です。

例えば、Phosphorのアイコンパックは、同じガイドラインに沿って厳密にテストすることで、600以上のアイコンの一貫性を保っています。それぞれのアイコンは異なる形状ですが、ウェイトは同じで、うまくまとまっています。

Phosphorのアイコン: google.com

Personality -アイコンの個性

すべてのアイコンセットに味があります。何がアイコンをユニークにしていますか？ブランドについて何か書いてありますか？どんな雰囲気を作りだしていますか？

Wazeのアイコン

Wazeのインターフェイスは、アイコンデザインに大きく依存しています。カラフルでずんぐりしたアイコンは「わたし達は風変わりです！」と言っているかのようです。

Twitterのアイコンはソフトで、ライトで、鮮明です。

Twitterのアイコン

Sketchのアイコンは繊細で、風通しが良いです。

Janik BaumgartnerによるSketchのアイコン

Freemojisはキュートで、かわいいです。

Freemojis

Androidのアイコンパックは、ホーム画面をテーマにしたさまざまな雰囲気に対応しています。下記は、アブストラクト、ピクセル、バブル、ネオンのスタイルです。

左上から、iJUK、PixBit、Crayon、Linebit

Ease of Use -アイコンの使いやすさ

アイコンセットは、デザインが完成した後でも終わりではありません。コントリビューターが新しいアイコンを簡単に加えられること、デザイナーがアイコンをデザインで使いやすいこと、デベロッパーがアイコンをプロダクトにコード化しやすくするために、さらなるテストと準備が必要です。

質が高いアイコンセットは組織化されており、ドキュメントもあり、コンテキストでテストされています。嬉しいことに、アイコンマネージャーのようなツールもサポートされています。

アイコンの組織化

マスターファイルはクリーンに保ち、アセットに適切な名前を付けて、見つけやすいように配置します。分類する最善の方法を検討してください。アルファベット順？サイズ？タイプ？

NucleoのSketchファイル、ページ全体でタイプ別に整理

アイコンのドキュメント

アイコンファミリーの主要な原則を明確に説明します。

Phosphorのアイコンの原則の例

Clarity -分かりやすく。
何よりもまず分かりやすくしてください。それが、アイコンを認識および読み取り可能にします。アイコンが表すものの明瞭さを犠牲にしないでください。
Brevity -簡潔に。
アイコンにのディテールはできるだけ少なくしてください。Phosphorのスタイルは簡約的です。すべてのストロークを簡潔かつ意図的に行い、表現する内容の本質を伝えてください。
Character -キャラクター。
少し風変わりです。個性的なディテールを控えめに加えることで、温かみのある雰囲気を演出してください。

技術的なルールもリストにします。

Phosphorのアイコンの技術的なルール

48x48pxのキャンバスを使用する。
1.5pxの中央ストロークを使用する。
ストロークの端は丸にする。
壊れたセグメントが理解に役立つ場合を除き、連続したストロークを使用する。
可能な限り、直線セグメント、完全な円弧、15度の角度増分を使用する。
カーブを使用する場合は、デザインの原則を維持するよう調整する。
可能な限り、整数の増分を使用する。
基本の形: 28x28pxの円、25x25pxの正方形、28x22pxの横長の長方形、22x28pxの縦長の長方形。
6pxのトリムエリアを維持する。

必要に応じてドキュメントを公開してください。

アイコンのテスト

アイコンのテストは、整合性をチェックします。アイコンがコンテキスト内で適切なサイズで機能することを確認し、より大きな視覚システムと調和して動作することを確認します。

アイコンを並べて配置すると、明確さ、可読性、揃え、簡潔さ、一貫性、個性など、上記の原則を確認するのに役立ちます。

Phosphor

アイコン用のツール

最後に、もしリリースがある場合はアイコンの使用を簡単にするツールを作成します。

Materialのアイコンは、カスタムアイコンライブラリを使用してアイコンに簡単にアクセスできます。必要なアイコンを検索し、異なるスタイル（テーマ）、異なるカラー、異なるサイズを好みのファイル形式でダウンロードできます。

material.io

使用するアイコンセットは、生き物です。成功し、成長するために必要な愛とツールを提供してください。

アイコンのリソース

アイコンのライブラリ、アグリゲーター、マネージャーをいくつか厳選しました。

アイコンライブラリ

Feather、200種類以上のミニマルなアウトラインアイコンの豪華なセットです。
Material system icons、5つのスタイルが用意された1,000個以上の実用的なアイコン。
Nucleo、アウトライン、フラット・カラー、グリフの3つのスタイルに30,000個のアイコン。
Streamline、30,000個以上、3つのウェイトが揃った美しいラインのアイコン。

アイコンアグリゲーター

Noun Project、品質の点では混ざっていますが、スタイルとメタファのインスピレーションを探すには最適な方法です。

アイコンマネージャー

Nucleo appを使用すると、アイコンセットのインポート、表示、エクスポート、好みのデザインソフトウェアへのドラッグアンドドロップが可能です。

🙏 Thanks to: Toby Fried, Monica Chang, Darcy O’Donnell, Sara Thompson, Lonny Huff, Stephany Shigekuni, Clarissa Soto, Tate Chow, Christine Lee, Victor Vasquez, Chris Rodemeyer, David Landa, and Pawel Piekarski