Windows 11 のアイコン
アイコン化は、ユーザーがアプリを理解して移動するのに役立つ一連の視覚的な画像とシンボルです。 アイコンは、概念、アクション、または状態を表す視覚的なメタファーとして、ユーザー インターフェイス全体で使用されます。
Windows 11 では、アプリケーション、システム、ファイルの種類の 3 種類のアイコンが使用されます。 この記事では、最初の 2 つを中心に説明します。
この記事では、 Fluent Design 言語 を Windows アプリに適用する方法について説明します。 詳細については、「 Fluent Design Iconography」を参照してください。
アプリケーション アイコン
アプリケーション アイコンは、Windows シェル内のアプリを表します。 これらは主にアプリケーションを開くために使用されますが、Windows シェル内のどこに表示される場合でもアプリを表します。
アプリ アイコンでは、メタファーを通してアプリのコア機能を表すようにする必要があります。 アプリのアイコンの設計と構築の詳細については、「 App アイコン」を参照してください。
システム アイコン
コマンド バー、ナビゲーション、状態インジケーターなどの項目には、アプリ UI 内のシステム アイコンを使用します。 Windows 11 では、新しいシステム アイコン フォントである Segoe Fluent アイコンが導入されています。 この新しいフォントは、Windows 11 の geometry を補完します。
Segoe Fluent Icons のすべてのグリフは、モノライン スタイルで描画されます。 つまり、1 epx の単一ストロークで作成されます。
Segoe Fluent アイコンのグリフは、次の 3 つの美的な原則に従います。
- 最小: グリフには、概念を伝えるために必要な詳細のみが含まれます。
- 調和: グリフは、単純な幾何学図形に基づいています。
- 進化: グリフでは、簡単に理解される最新のメタファーが使用されます。
アプリ UI でアイコンを使用する方法の詳細については、「windows アプリのアイコンを参照してください。
アイコンのサイズ
Segoe Fluent Icons のフォント メトリックは、デザイナーと開発者が SVG およびビットマップ アイコンの操作に慣れている方法と一致します。
各フォント グリフは、アイコンの占有領域が正方形になるようにデザインされます。 16 epx フォント サイズのアイコンは、サイズ設定と配置をより予測しやすくするために、16 x 16 epx アイコンと同等です。
修飾子
基本アイコンと修飾子アイコンを組み合わせることで、システム アイコン グリフを視覚的に構築できます。
基本アイコンは、視覚的なメタファーの主要な要素です。 基本要素は、アイコンのフットプリント全体を占める必要があります。
修飾子アイコンは、基本アイコンの意味を変更します。 修飾子要素は、アイコン占有領域の下部の四分円のいずれかに配置する必要があります。
基本アイコンのみ
紙のシート アイコン自体は、 fileの概念を伝えます。
基本アイコン + 修飾子アイコン
ファイル アイコンに上矢印を追加すると、 アップロードされたファイルを表すアイコンの意味が変。
レイヤー
アイコンレイヤーは、2 つのグリフを重ね合わせるために使用する手法です。 アイコン レイヤーを使用して、同じアイコンの別の状態 (アクティブな状態や選択した状態など) を作成することをお勧めします。
ローカリゼーション
シンボルの文化的な意味合いを理解する。 ほとんどの場合、アイコン作成ではローカライズは必要ありませんが、特定のアイコンは、あるカルチャでは許容されるが、別のカルチャでは受け入れられない場合があります。 アイコンの選択を、使用するコンテキストで検証します。
例
WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。
Windows developer