Windows アプリのアイコン

  • [アーティクル]

グリッド上のクラウド アイコンの例。

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

優れたアイコンは、文字体裁やその他のデザイン言語と調和するものです。 メタファーは混在せず、必要なものだけを迅速かつ可能な限り簡単に伝えます。

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

アプリ内のアイコン

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

アプリ外部のアイコン

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

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

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

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

緑色のチェック マークと [切り取り]、[コピー]、[貼り付け]、[保存] の各アイコンを示すスクリーンショット。

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

赤い X と Education、Touch、Calendar のアイコンを示すスクリーンショット。

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

緑色のチェック マークと シンプルで使い慣れたショッピング カート アイコンのスクリーンショット。

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

赤い X と 複雑でなじみのないショッピング カート アイコンのスクリーンショット。

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

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

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

定義済みのアイコン

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

定義済みの Segoe アイコンの大きなグループを示すスクリーンショット。

フォント

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

Wingdings アイコンの大きなグループのスクリーンショット。

SVG ファイル

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

SVG ショッピング カート アイコンの拡大と縮小のアニメーション。

ジオメトリ オブジェクト

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

ジオメトリ オブジェクトの作成を示すスクリーンショット。

ビットマップ 画像

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

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

X と ショッピング カートのピクセル化されたビットマップ アイコンのスクリーンショット。

アイコンに何かをさせる

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

[共有]、[編集]、[削除] アイコンが表示されたコマンド バーと、オーバーフロー メニューの省略記号を示すスクリーンショット。

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

アイコン ボタンの作成

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

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

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

再生ボタンのアイコンのスクリーンショット。

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

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

再生ボタンのアイコンのスクリーンショット。

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

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

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

アイコンを含むコマンド バーの例。

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

<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>

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

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

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

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