Windows アプリのアイコン

アイコンによって、アクション、概念、または製品を簡略化したビジュアルが提供されます。 意味をシンボリックイメージに圧縮することで、アイコンは言語の障壁を越え、貴重なリソースである画面スペースを節約するのに役立ちます。

優れたアイコンは、文字体裁やその他のデザイン言語と調和するものです。 彼らは比喩を混ぜず、必要なものだけをできるだけ迅速かつ簡単に伝えます。

アイコンは、アプリ内およびアプリの外部に表示できます。

アプリ内のアイコン

アプリ内では、アイコンを使用して、テキストのコピーや設定ページへの移動などのアクションを表します。

アプリ外部のアイコン

アプリの外部では、Windows はアイコンを使用して、[スタート] メニューとタスク バーのアプリを表します。 ユーザーがアプリを [スタート] メニューにピン留めすることを選択した場合、アプリのスタート タイルにアプリのアイコンを表示できます。 タイトル バーにアプリのアイコンが表示され、アプリのロゴを含むスプラッシュ スクリーンを作成できます。

この記事では、アプリ内のアイコンについて説明します。 アプリ外のアイコン (アプリ アイコン) の詳細については、「 Windows のアイコン図 」の記事を参照してください。

アイコンを使用するタイミングを把握する

アイコンを使用すると、領域を節約できますが、どのような場合に使用しますか?

切り取り、コピー、貼り付け、保存などの操作、またはナビゲーション メニューの項目にアイコンを使用します。

表す概念にアイコンが既に存在する場合は、アイコンを使用します。 (アイコンが存在するかどうかを確認するには、Segoe アイコン一覧を確認します)。

アイコンが意味する内容をユーザーが理解しやすく、小さいサイズでもはっきりとわかるほどシンプルな場合は、アイコンを使用します。

アイコンの意味が明確でない場合、または明確にするには複雑な図形が必要な場合は、アイコンを使用しないでください。

適切な種類のアイコンを使用する

アイコンを作成する方法は数多くあります。 Segoe MDL2 Assets などの記号フォントを使用できます。 独自のベクターベースの画像を作成できます。 ビットマップ画像も使用できますが、お勧めしません。 アプリにアイコンを追加する方法の概要を次に示します。

定義済みのアイコン

Microsoft では、Segoe MDL2 Assets フォントの形式で 1,000 個を超えるアイコンを提供しています。 フォントからアイコンを取得するのは直感的ではない場合がありますが、Windows フォント表示テクノロジは、これらのアイコンが任意のディスプレイ、任意の解像度、および任意のサイズで鮮明に見えるということです。 手順については、「 Segoe MDL2 Assets アイコン」を参照してください。

フォント

Segoe MDL2 Assets フォントを使用する必要はありません。 Wingdings や Webdings など、ユーザーがシステムにインストールした任意のフォントを使用できます。

SVG ファイル

スケーラブル ベクター グラフィックス (SVG) リソースは、常に任意のサイズや解像度でシャープに見えるので、アイコンに最適です。 ほとんどの描画アプリケーションは、SVG にエクスポートできます。 手順については、SVGImageSourceに関するページを参照してください。

Geometry オブジェクト

SVG ファイルのように、ジオメトリはベクトルに基づくリソースであるため、常に鮮明に表示されます。 しかし、それぞれの点と曲線を個々に指定する必要があるため、ジオメトリの作成は複雑です。 これは、アプリの実行中にアイコンを変更する必要がある場合 (たとえば、アニメーション化する場合) にのみ適しています。 手順については、ジオメトリのコマンドの移動と描画に関するページを参照してください。

ビットマップ イメージ

ビットマップ イメージ (PNG、GIF、JPEG など) は使用できますが、お勧めしません。

ビットマップ画像は特定のサイズで作成されるため、希望するアイコンの大きさと画面の解像度に応じて拡大縮小する必要があります。 イメージを縮小 (縮小) すると、ぼやけて表示されることがあります。 スケールアップすると、ブロックされてピクセル化されて表示される可能性があります。 ビットマップ イメージを使用する必要がある場合は、JPEG で PNG または GIF を使用することをお勧めします。

アイコンに何かをさせる

アイコンを作成したら、次の手順では、それをコマンドまたはナビゲーション アクションに関連付けることによって何かを行います。 最適な方法は、アイコンをボタンまたはコマンド バーに追加することです。

アイコンをアニメーション化して、チュートリアルの次のボタンなどの UI コンポーネントに注意を引いたり、アイコンに関連付けられているアクションを面白く興味深い方法で反映したりすることもできます。 詳細については、「 AnimatedIcon」を参照してください。

アイコン ボタンの作成

標準ボタンにアイコンを配置できます。 さまざまな場所でボタンを使用できるため、この方法でアイコンを使用すると、アクション アイコンが表示される場所の柔軟性が少し向上します。

ボタンにアイコンを追加する 1 つの方法を次に示します。

ステップ 1
ボタンのフォント ファミリを に Segoe MDL2 Assets 設定し、そのコンテンツ プロパティに、使用するグリフの Unicode 値を設定します。

<Button FontFamily="Segoe MDL2 Assets" Content="&#xE102;" />

ステップ 2
Icon 要素オブジェクトのいずれかを使用します。 BitmapIcon、 FontIcon、 PathIcon、 ImageIcon、 SymbolIcon のいずれかです。 この手法では、より多くの種類のアイコンを選択できます。 また、アイコンやテキストなどの他の種類のコンテンツを組み合わせることもできます。

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play" />
        <TextBlock>Play the movie</TextBlock>
    </StackPanel>
</Button>

コマンド バーに一連のアイコンを作成する

切り取り/コピー/貼り付け、写真編集プログラムの描画コマンドのセットなど、一連のコマンドが一緒に行われる場合は、 コマンド バーにまとめて配置します。 コマンド バーでは、1 つまたは複数のアプリ バーのボタンまたはアプリ バーのトグル ボタンが取得されます。それぞれがアクションを表します。 各ボタンには、表示する アイコン を制御するために使用する Icon プロパティがあります。 アイコンを指定するには、さまざまな方法があります。

最も簡単な方法は、定義済みのアイコンの一覧を使用することです。 [ 戻る ] や [停止] などのアイコン名を指定するだけで、システムによって描画されます。

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
</CommandBar>

アイコン名の完全な一覧については、「 シンボル列挙リファレンス」を参照してください。

コマンド バーのボタンのアイコンを指定する方法は他にもあります。

• FontIcon: アイコンは、指定したフォント ファミリのグリフに基づいています。
• BitmapIcon: アイコンは、指定された URI を持つビットマップ イメージ ファイルに基づいています。
• PathIcon: アイコンは Path データに基づいています。
• ImageIcon: アイコンは、Image クラスがサポートする イメージ ファイルの種類に基づいています。

コマンド バーの詳細については、コマンド バー に関する記事を参照してください。

関連記事

• アプリのアイコンとロゴ
• AnimatedIcon