UWP アプリのアイコン

優れたアイコンは、文字の体裁やその他のデザイン言語と調和するものです。 アイコンは比喩と混用しないようにします。優れたアイコンは、できるだけすばやくシンプルに、必要なことのみを伝えます。

線形のスケーリングのサイズの見本

16 ピクセル x 16 ピクセル 24 ピクセル x 24 ピクセル 32 ピクセル x 32 ピクセル 48 ピクセル x 48 ピクセル
有効ピクセル 16 x 16 のアイコン 有効ピクセル 24 x 24 のアイコン 有効ピクセル 32 x 32 のアイコン 有効ピクセル 48 x 48 のアイコン

一般的な形状

アイコンは通常、余白を少なく、スペースを最大限に使用します。 下記の図形は基本的な形状のサイズを決めるためのヒントとなります。

32 ピクセル x 32 ピクセルのグリッド

アイコンの向きに対応した図形を使用して、これらの基本的なパラメーターをヒントとして構成します。 アイコンは必ずしも図形内側に完全に合わせて埋める必要はありません。最適なバランスを取るために適宜調整します。


円形 正方形 三角形
円形 正方形 三角形
横型の長方形 縦型の長方形
横型の長方形 縦型の長方形

角度

同じグリッドや線の太さなどをはじめ、アイコンは共通的な要素で構成されています。

これらの共通の角度を使って図形を作成すると、Microsoft のすべてのアイコンとの一貫性を保つことができ、アイコンが正しくレンダリングされます。

これらの線の組み合わせ、合体、回転、反転を使って、アイコンを作成します。


1:1
45°
1:2
26.57° (垂直)
63.43° (水平)
1:3
18.43° (垂直)
71.57° (水平)
1:4
14.04° (垂直)
75.96° (水平)
1:1 1:2 1:3 1:4

例をいくつか紹介します。

1:1 の角度の例 1:2 の角度の例 1:3 の角度の例 1:4 の角度の例

曲線

曲線は円の一部から構成します。ピクセル グリッドにスナップするために必要な場合以外は、ゆがめて使用しないようにします。


円形の 1/4 円形の 1/8
円形の 1/4 円形の 1/8
円形の 1/4 の例 円形の 1/8 の例

幾何学図形の使用

アイコンを作成する場合には、純粋な幾何学図形のみを使用することをお勧めします。

幾何学図形のオーバーレイを使ったギターのアイコン

図形の塗りつぶし

アイコンは、必要な場合は、塗りつぶされた図形を含めることができますが、32 ピクセル × 32 ピクセルの場合、4 ピクセルを超えないようにします。 円形の塗りつぶしは 6 ピクセル × 6 ピクセルを超えないようにします。

5 ピクセル x 8 ピクセルの塗りつぶし

バッジ

「バッジ」は、元になるアイコンの要素との統合を意図することなくアイコンに追加された要素を記述するために使用する一般的な用語です。 これらは通常、状態や操作など、元になるアイコンに関連する情報を示すために使用します。 この他に一般的に使われる用語には、オーバーレイ、注釈、修飾子などがあります。

状態を示すバッジ

操作を示すバッジ

状態を示すバッジでは、塗りつぶして色を付けたオブジェクトが、元となるアイコンの上で使用されています。操作を示すバッジでは、同じモノクロ スタイルと線の太さでアイコンに統合されています。

一般的な状態を示すバッジ 一般的な操作を示すバッジ
状態を示すバッジ 操作を示すバッジ

バッジの色

色のバッジは、アイコンの状態を示す場合にのみ使用する必要があります。 状態を示すバッジに使用される色は、ユーザーに特定の感情的なメッセージを伝えます。

緑 - #128B44青 - #2C71B9黄 - #FDC214
ポジティブ: 終了、完了 中立: ヘルプ、通知 注意: 警報、警告
緑の状態青の状態 黄色の状態

バッジの位置

状態または操作を示すバッジの既定の位置は、右下です。 その他の位置は、デザイン上やむを得ない場合にのみ使用します。

バッジのサイズ変更

バッジは 32 ピクセル × 32 ピクセル グリッドで、10 ~ 18 ピクセルのサイズで使用します。