Windows 11 のアイコン

アイコンは、ユーザーがアプリを理解して移動するのに役立つ一連の視覚的な画像とシンボルです。 アイコンは、概念、アクション、または状態を表す視覚的なメタファーとして、ユーザー インターフェイス全体で使用されます。

Windows 11では、アプリケーション、システム、ファイルの種類の 3 種類のアイコンが使用されます。 この記事では、最初の 2 つを中心に説明します。

アプリケーション アイコン

アプリケーション アイコンは、Windows シェル内のアプリを表します。 これらは主にアプリケーションを開くために使用されますが、Windows シェル内のどこに表示される場合でもアプリを表します。

アプリ アイコンでは、メタファーを通してアプリのコア機能を表すようにする必要があります。 アプリのアイコンの設計と構築の詳細については、「 Windows でのアイコン作成」を参照してください。

システム アイコン

Windows 11 では、新しいシステム アイコン フォントである Segoe Fluent アイコンが導入されています。 この新しいフォントは、Windows 11のジオメトリを補完します。

Segoe Fluent Icons のすべてのグリフは、モノライン スタイルで描画されます。 つまり、1 epx の単一ストロークで作成されます。

Segoe Fluent アイコンのグリフは、次の 3 つの美的な原則に従います。

• 最小: グリフには、概念を伝えるために必要な詳細のみが含まれます。
• 調和: グリフは、単純な幾何学図形に基づいています。
• 進化: グリフでは、簡単に理解される最新のメタファーが使用されます。

サイズ変更

Segoe Fluent Icons のフォント メトリックは、デザイナーと開発者が SVG とビットマップ アイコンの操作に慣れている方法と一致します。

各フォント グリフは、アイコンの占有領域が正方形になるようにデザインされます。 16 epx フォント サイズのアイコンは、サイズ設定と配置をより予測しやすくするために、16x16-epx アイコンに相当します。

構造

基本アイコンと修飾子アイコンを組み合わせることで、システム アイコン グリフを視覚的に構築できます。

基本アイコンは、視覚的なメタファーの主要な要素です。 基本要素は、アイコンのフットプリント全体を占める必要があります。

修飾子アイコンは、基本アイコンの意味を変更します。 修飾子要素は、アイコン占有領域の下部の四分円のいずれかに配置する必要があります。

基本アイコンのみ
それ自体では、紙のシート アイコンはファイルの概念を伝 えます。

基本アイコン + 修飾子アイコン
ファイル アイコンに上矢印を追加すると、 アップロードされたファイルを表すアイコンの意味が変わります。

層の生成

アイコンレイヤーは、2 つのグリフを重ね合わせるために使用する手法です。 アイコン レイヤーを使用して、同じアイコンの別の状態 (アクティブな状態や選択した状態など) を作成することをお勧めします。

ローカリゼーション

シンボルの文化的意味合いを理解する。 アイコングラフィではほとんどの場合、ローカライズは必要ありませんが、あるカルチャでは特定のアイコンが受け入れられる可能性がありますが、別のカルチャでは受け入れられない場合があります。 アイコンの選択を、使用するコンテキストで検証します。

例

ヒント

WinUI 3 ギャラリー アプリを開き、「アイコンの原則」を参照してください。 WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。