Windows アプリ アイコンの設計ガイドライン

次のガイドラインに従って、Windows で自宅にいるアプリ用の優れたアプリ アイコンを作成します。

設計ガイダンス: メタファー

アイコンは、アプリのメタファーである必要があります。これは、製品の価値提案、関数、および機能を視覚的に表現したものです。

[表記]

アイコンは、単純なフォームを使用して、単一の要素でアプリの概念を示す必要があります。

アイコンを作成するときは、明確なメタファーを使用し、主に理解されている概念 (メール用の封筒や検索用の虫眼鏡など) を活用します。 重要な概念は、アイコンのフォーカル ポイントである必要があります。メタファーをサポートしていない装飾的な要素を追加してアイコンを希釈しないでください。 コミュニケーションの明確さを高めるために、1 つのアイコンで 2 つ以下のメタファーを使用します。 単一のメタファーを使用できる場合は、さらに優れています。

リテラルメタファーは、明確な方法で目的と約束を明確に表現するのに最適です。 効果的なアイコンの優れたテストは、ユーザーがラベルなしで何を表しているのかを知ることができる場合です。

製品のコア機能を表すリテラルの自明なメタファーを見つけることが不可能な場合にのみ、抽象的なメタファーを使用します。

アイコンには、デザインの一部として文字体裁を含めないようにする必要があります。 アイコン上の文字や単語は避け、重要な場合にのみ使用する必要があります。 アプリの名前は、オペレーティング システム全体のアイコンと関連付けて表示されます。

設計ガイダンス: 図形

グリッドと丸い角

Microsoft は、アイコンを最初は 48 x 48 グリッドに揃えて、独特の形状とシルエットを維持しながら、使用可能なスペースを利用するバランスの取れたアイコンを確保します。 アイコンの特徴をグリッドに合わせて配置すると、周囲の他のアイコンとのバランスが取れた状態になります。

アプローチ可能性 は、Microsoft のパーソナリティの原則です。 この特徴を伝える方法の 1 つは、柔らかい角または丸い角を使用することです。 アプリの製品アイコンで使用される図形は、アイコン グリッドに合わせて構築する必要があります。 これらの図形の角は、アイコン グリッドの角を丸く一致させる必要があります。 丸い角が外部曲線に適用される場合は、48 x 48 の半径 2px を使用します。 丸い角が内部曲線に適用される場合は、代わりに半径 1px を使用します。

シルエット

視覚的にバランスの取れたシルエットは、優れたアイコンスケーラビリティを可能にし、太くて薄い形状の極端な形状も避けます。 グリッドを使用して、特徴的で、小さなサイズで読みやすいシルエットをデザインします。 Windows で自宅にいる状態で製品を区別するには、できるだけ少ない角を持つ図形を少なくします。

詳細

詳細を追加する場合は、小さなサイズで読みやすさを維持するように注意する必要があります。 アイコンの最も目立つレイヤーにのみリテラルの詳細を追加することをお勧めします。

デザイン ガイダンス: 色とグラデーション

色を慎重に選択し、意味を伝えるために色だけに依存しないようにします。 図形と比喩を色と共に使用して通信します。 さまざまなサイズでアイコンをスケーリングする際の複雑さを回避するには、色への処理を最小限に抑える必要があります。 色のグラデーション、さまざまな不透明度のオーバーレイ、色の濃淡は最小限に抑える必要があります。

ほとんどの場合、グラデーションは微妙である必要があります。 グラデーション ランプを水平方向と垂直方向の両方の 1 つまたは 2 つのステップのみに制限します。

グラデーションの既定の角度は 120 度です。 始点と終点は、それに応じて調整できます。 重要なのは、スムーズな移行であるということです。 反射や寸法のように感じる非常にタイトな遷移は避けてください。

モノクロ パレット

次の手順を使用してモノクロ パレットを作成します。

1. 同じ色合いから 3 色を作成します。 ほとんどの場合、明るい色と暗い色を飽和状態にするように調整する必要がありますが、もちろん最善の判断を使用する必要があります。
2. 各基本色の間に 3 つのステップを作成します。 これがプライマリ レーンになります。 ほとんどのアイコンは、これらの色で構成されている必要があります。
3. より広いパレットの場合は、手順 2 と同じ方法を使用して、白に濃淡を作成し、黒に網掛けを作成します。 これらの濃淡と色合いは、もう少しコントラストが必要な場合にのみ使用する必要があります。
4. 暗い色の色合いと明るい色の色合いは、通常役に立たず、ドラブです。 これらは削除できます。

モノクログラデーション

モノクログラデーションは、通常、左上から周囲の光の角度に向かって微妙なヒントを与えるために使用されます。 ただし、直接光源として扱うべきではありません。 アイデアは、あまりにも劇的にすることなく、図形に少し動きを与えるです。

類似パレット

類似のパレットを作成することは、モノクロパレットを作成するのとまったく同じですが、より多くの色を使用します。 この種類のパレットの鍵は、それをやりすぎないようにすることです。 色の切り替えに注意してください。

1. 1 つではなく 3 つのカラー セットを作成します。
2. 3 つのカラー セットすべてから垂直方向のランプを作成します。
3. 白と黒を使用して濃淡や網掛けを作成する代わりに、代わりに 2 番目と 3 番目の色を使用します。

類似のグラデーション

類似のグラデーションはモノクロと同じ角度にする必要がありますが、必ずしもである必要はありません。 通常、明るい色合いは、過度に劇的に見えないようにするために左上に配置する必要がありますが、モノクロと可能な限り一貫性を保つ必要があります。

設計ガイダンス: コントラスト、影、透視

色のコントラスト

アクセシビリティは Microsoft にとって優先度が高いです。 アプリ アイコンは、主に明るい背景と暗い背景のいずれかに表示されますが、デスクトップの背景画像とシステムのアクセント カラーの濃淡または網掛け上に表示されます。 すべての背景でアイコンに 100% アクセスできるようにすることは困難ですが、アイコンにできるだけアクセスしやすくするためにできることがいくつかあります。

• すべての 3 つの範囲、濃い、中、明るい色の値を使用します。
• アイコンの少なくとも半分が、明るいテーマと暗いテーマで 3.0:1 のコントラスト比を通過していることを確認します。
• 一部の色相値は、他の値よりも困難です。 黄色は、明るいテーマが茶色になるまで、アクセス可能なコントラスト比を渡すことはありません。 赤は暗いテーマでは難しくなります。
• 必須ではありませんが、タスク バー、スタート、および Windows の他のテーマに依存する領域に対して、明るいテーマと暗いテーマアセットを個別に提供するオプションがあります。

ハイ コントラスト

ヒント

Windows 11アプリ アイコンにハイ コントラストアセットが不要になった。

ハイ コントラスト アイコンは白黒で、アプリ アイコンを直接表現する必要があります。 多くの場合、ハイ コントラスト アイコンは、塗りつぶしと線を塗りつぶしてカラー バージョンから作成できます。 ハイ コントラスト アイコンではグラデーションを使用しないでください。 アプリ内エクスペリエンスに モノライン アイコン が必要な場合は、これらのガイドラインに従って設計する必要があります。

レイヤーとシャドウ

上/前面のビュー。

z 深度を示す等角投影図。 例示のみを目的とします。推奨されるデザイン オプションではありません。

アイコンは、その下のレイヤーの上に配置されたフラット オブジェクトで構成されます。

• できるだけ少ないレイヤーを使用し、図形間のスケールの極端なコントラストを最小限に抑えます。
• アイコン内のドロップ シャドウを使用して、オブジェクト レイヤー間の定義を作成し、アイコン デザイン内でコンポーネントを視覚的に相互に接続します。
• 一般に、光から暗い図形に投影される影が最適な結果を得られます。
• 内側の影は、周囲の背景ではなく、グラフィック シンボルにのみ影を付ける必要があります。
• 内側の影には 2 種類あり、どちらもそれぞれ 2 つの影を持っています

影の構築

これらの値はすべて 48 x 48 px でレンダリングされ、そこからスケールアップまたはスケールダウンされます。 これが準拠していない場合、アイコン システム全体で影に矛盾が生じます。 2 種類のオブジェクト シャドウがあり、どちらもそれぞれ 2 つの影を持ちます。 同じメタファー内のオブジェクトは影を持ち、ぼかしが少なくなります。

同じメタファー

この影は、ある程度の深さを必要とする単一のメタファー内にコンテンツがある場合に使用されます。 これを行う必要は必ずしもありませんが、単一のオブジェクトメタファーには、システムの一部のように感じる深さが必要です。 唯一の違いは、影 2 の青です。

別のメタファー

この影は、互いに重なり合っているが、必ずしも同じメタファーの一部ではない 2 つのオブジェクトがある場合に使用されます。 影は、その下の図形にマスクする必要があります。

パースペクティブ

左側のアイコンはかなり単純です。パースペクティブは推奨されませんが、ここでは適切な場合があります。 右側のアイコンはパースペクティブには複雑すぎるため、このアイコンに使用することはお勧めしません。

アイコンは、簡単にわかりやすい方法でメタファーを提示するために、直線的な視点で描画する必要があります。 例外は、メタファーが別の側面を表示しないとうまく読み取れない場合です。 たとえば、真上に表示される円柱は四角形であるため、上部を追加してボリュームがあることを示します。 もう 1 つの例外は、ディメンションを表示するのが理にかなっている 3d にアプリが関連している場合です。 どちらの場合も、フラット オブジェクトに関する以前のガイドラインが引き続き適用されます。 レイヤーは常にフラットで、表示角度に垂直である必要があります。