アプリのアイコンとロゴApp icons and logos

すべてのアプリにはそのアプリを表すアイコンやロゴがあり、Windows シェルの複数の場所でそのアイコンが表示されます。Every app has an icon/logo that represents it, and that icon appears in multiple locations in the Windows shell:

  • スタート メニューのアプリ一覧The app list in the start menu
  • タスク バーとタスク マネージャーThe taskbar and task manager
  • アプリのタイルYour app's tiles
  • アプリのスプラッシュ スクリーンYour app's splash screen
  • Microsoft Store 内In the Microsoft Store

windows 10 start and tiles

この記事では、アプリ アイコンの作成の基本、およびアプリ アイコンを Visual Studio で管理する方法と手動で管理する方法 (必要な場合) について説明します。This article covers the basics of creating app icons, how to use Visual Studio to manage them, and how manage them manually, should you need to.

(この記事は、特にアプリ自体を表すアイコンを対象としています。一般的なアイコンに関するガイダンスについては、アイコンに関する記事をご覧ください。)(This article is specifically for icons that represent the app itself; for general icon guidance, see the Icons article.)

アイコンの種類、場所、および倍率Icon types, locations, and scale factors

Visual Studio では、既定でアイコン アセットがアセット サブディレクトリに格納されます。By default, Visual Studio stores your icon assets in an assets subdirectory. 以下に示すのは、各種のアイコン、それが表示される場所、およびその名前の一覧です。Here's a list of the different types of icons, where they appear, and what they're called.

アイコン名Icon name 表示される場所Appears in アセット ファイル名Asset file name
小さいタイルSmall tile スタート メニューStart menu SmallTile.pngSmallTile.png
普通サイズのタイルMedium tile スタート メニュー、Microsoft Store 登録情報*Start menu, Microsoft Store listing* Square150x150Logo.pngSquare150x150Logo.png
ワイド タイルWide tile スタート メニューStart menu Wide310x150Logo.pngWide310x150Logo.png
大きいタイルLarge tile スタート メニュー、Microsoft Store 登録情報*Start menu, Microsoft Store listing* LargeTile.pngLargeTile.png
アプリのアイコンApp icon スタート メニューのアプリ一覧、タスク バー、タスク マネージャーApp list in start menu, task bar, task manager Square44x44Logo.pngSquare44x44Logo.png
スプラッシュ画面Splash screen アプリのスプラッシュ スクリーンThe app's splash screen SplashScreen.pngSplashScreen.png
バッジ ロゴBadge logo アプリのタイルYour app's tiles BadgeLogo.pngBadgeLogo.png
パッケージ ロゴ/Microsoft Store ロゴPackage logo/Store logo アプリ インストーラー、パートナー センター、Microsoft Store の [Report an app](アプリを報告)\ オプション、Microsoft Store の [Write a review](レビューを書く)\ オプションApp installer, Partner Center, the "Report an app" option in the Store, the "Write a review" option in the Store StoreLogo.pngStoreLogo.png

* アップロードした画像のみを Microsoft Store で表示することを選択しなかった場合に使用されます。* Used unless you choose to display only uploaded images in the Store.

これらのアイコンがどの画面でも鮮明に表示されるようにするには、同じアイコンに、異なる表示倍率に対応する複数のバージョンを作成します。To ensure these icons look sharp on every screen, you can create multiple versions of the same icon for different display scale factors.

倍率によって、テキストなどの UI 要素のサイズが決まります。The scale factor determines the size of UI elements, such as text. 倍率の範囲は 100% から 400% までです。Scale factors range from 100% to 400%. 値が大きいほど UI 要素も大きくなり、高解像度ディスプレイで見やすくなります。Larger values create larger UI elements, making them easier to see on high-DPI displays.

Windows では、ディスプレイの DPI (1 インチあたりのドット数) と、デバイスの視聴距離に基づいて各ディスプレイの倍率が自動的に設定されますWindows automatically sets the scale factor for each display based on its DPI (dots-per-inch) and the viewing distance of the device. (ユーザーは、 [設定] > [ディスプレイ] > [拡大縮小とレイアウト] のページに移動して既定値を上書きできます)。(Users can override the default value by going to the Settings > Display > Scale and layout page.)

アプリ アイコン アセットはビットマップであり、ビットマップは適切に拡大されないため、アイコン アセットごとに次の各倍率に対応するバージョンを作成することをお勧めします: 100%、125%、150%、200%、および 400%。Because app icon assets are bitmaps and bitmaps don't scale well, we recommend providing a version each icon asset for each scale factor: 100%, 125%, 150%, 200%, and 400%. これを行うとアイコンの数が増えてしまいます。That's a lot of icons! Visual Studio には、これらのアイコンを簡単に生成して更新するためのツールが用意されています。Fortunately, Visual Studio provides a tool that makes it easy to generate and update these icons.

Microsoft Store 登録情報の画像Microsoft Store listing image

"Microsoft Store で自分のアプリの登録情報の画像を指定するにはどうしたらいいでしょうか。""How do I specify images for my app's listing in the Microsoft Store?"

このページの上部の表で説明しているように、Microsoft Store では既定でパッケージ内の画像が使用されます (申請プロセスで指定したその他の画像とともに)。By default, we use some of the images from your packages in the Store, as described in the table at the top of this page (along with other images that you provide during the submission process). ただし、Windows 10 (Xbox を含む) ユーザーに Microsoft Store 登録情報が表示されるときに、アプリのパッケージのロゴ画像ではなく、アップロードした画像のみが使用されるようにすることもできます。However, you have the option to prevent the Store from using the logo images in your app's packages when displaying your listing to customers on Windows 10 (including Xbox), and instead have the Store use only images that you upload. これにより、ストアのさまざまな画面でアプリがどのように表示されるかをさらに細かく制御できます。This gives you more control over your app’s appearance in various displays throughout the Store. (製品が以前の OS バージョンをサポートしている場合は、このオプションを使用してもパッケージの画像が引き続きユーザーに表示される場合があるので注意してください。)これは、申請プロセスの [Store 登録情報] の手順の [Microstore Store ロゴ] セクションで行うことができます。(Note that if your product supports earlier OS versions, those customers may still see images from your packages, even if you use this option.) You can do this in the Store logos section of the Store listing step of the submission process.

アプリ申請プロセスでの Microsoft Store ロゴの指定

このチェック ボックスをオンにすると、 [Microsoft Store 表示用の画像] という新しいセクションが表示されます。When you check this box, a new section called Store display images appears. ここでは、Microsoft Store でアプリのパッケージのロゴ画像に代わって使用される次の 3 つの画像サイズをアップロードできます: 300 x 300、150 x 150、71 x 71 ピクセル。Here, you can upload 3 image sizes that the Store will use in place of logo images from your app’s packages: 300 x 300, 150 x 150, and 71 x 71 pixels. 必須なのは 300 x 300 サイズだけですが、3 つのサイズをすべて指定することをお勧めします。Only the 300 x 300 size is required, although we recommend providing all 3 sizes.

詳細については、アップロードしたロゴ画像のみを Microsoft Store で表示する方法に関する記事をご覧ください。For more info, see Display only uploaded logo images in the Store.

Visual Studio マニフェスト デザイナーでのアプリ アイコンの管理Managing app icons with the Visual Studio Manifest Designer

Visual Studio には、マニフェスト デザイナーと呼ばれるアプリ アイコンを管理するための便利なツールがあります。Visual Studio provides a very useful tool for managing your app icons called the Manifest Designer.

まだ Visual Studio 2019 を使用していない場合は、無料バージョン (Visual Studio 2019 Community Edition) を含むいくつかのバージョンを利用できます。また、それ以外のバージョンでも無料試用版が提供されています。If you don't already have Visual Studio 2019, there are several versions available, including a free version, (Visual Studio 2019 Community Edition), and the other versions offer free trials. いずれも次の場所からダウンロードできます。https://developer.microsoft.com/windows/downloadsYou can download them here: https://developer.microsoft.com/windows/downloads

マニフェスト デザイナーを起動するには、次の手順を実行します。To launch the Manifest Designer:

  1. Visual Studio で UWP プロジェクトを開きます。Use Visual Studio to open a UWP project.
  1. [ソリューション エクスプローラー] で Package.appxmanifest ファイルをダブルクリックします。In the Solution Explorer, double-click the Package.appmxanifest file.

The Visual Studio 2019 Manifest Designer

Visual Studio displays the Manifest Designer.

The Visual Assets tab

  1. [ビジュアル資産] タブをクリックします。Click the Visual Assets tab.

The Visual Assets tab

すべてのアセットの一括生成Generating all assets at once

[ビジュアル資産] タブの最初のメニュー項目 [すべてのビジュアル資産] では、まさにその名前が示すように、ボタンのクリックによってアプリに必要なすべてのビジュアル アセットが生成されます。The first menu item in the Visual Assets tab, All Visual Assets, does exactly what its name suggests: generates every visual asset your app needs with the press of a button.

Visual Studio ですべてのビジュアル アセットを生成

画像を 1 つ指定するだけで、小さいタイル、普通サイズのタイル、大きいタイル、ワイド タイル、アプリ アイコン、スプラッシュ スクリーン、パッケージ ロゴの各アセットのすべての倍率に対応するバージョンが、Visual Studio によって生成されます。All you need to do is supply a single image, and Visual Studio will generate the small tile, medium tile, large tile, wide tile, large tile, app icon, splash screen, and package logo assets for every scale factor.

すべてのアセットを一括で生成するには、次の手順を実行します。To generate all assets at once:

  1. [ソース] フィールドの横の [...] をクリックし、使用する画像を選択します。Click the ... next to the Source field and select the image you want to use. ビットマップ画像を使用する場合は、鮮明な画像になるように、400 × 400 ピクセル以上を指定してください。If you're using a bitmap image, make sure it's at least 400 by 400 pixels so that you get sharp results. ベクトル ベースの画像が最適です。Visual Studio では AI (Adobe Illustrator) ファイルや PDF ファイルを使用できます。Vector-based images work best; Visual Studio lets you use AI (Adobe Illustrator) and PDF files.

  2. (省略可能) [設定値を表示] セクションで、以下のオプションを設定します。(Optional.) In the Display Settings section, configure these options:

    a.a. 短い名前:アプリの短い名前を指定します。Short name: Specify a short name for your app.

    b.b. 名前の表示:普通サイズのタイル、ワイド タイル、または大きいタイルに短い名前を表示するかどうかを指定します。Show name: Indicate whether you want to display the short name on medium, wide, or large tiles.

    c.c. タイルの背景:タイルの背景色に対応する 16 進値または色名を指定します。Tile background: Specify the hex value or a color name for the tile background color. たとえば、#464646 と記述します。For example, #464646. 既定値は、transparent です。The default value is transparent.

    d.d. スプラッシュ スクリーンの背景:スプラッシュ スクリーンの背景色に対応する 16 進値または色名を指定します。Spash screen background: Specify the hex value or color name for the spash screen background.

  3. [生成] をクリックします。Click Generate.

Visual Studio で画像ファイルが生成され、プロジェクトに追加されます。Visual Studio generates your image files and adds them to project. アセットを変更する場合は、このプロセスを繰り返します。If you want to change your assets, simply repeat the process.

拡大されたアイコン アセットのファイルには、次の規則に従って名前が付けられます。Scaled icon assets follow this file naming convention:

filename-scale-scale factor.pngfilename-scale-scale factor.png

以下に例を示します。For example,

Square150x150Logo-scale-100.png、Square150x150Logo-scale-200.png、Square150x150Logo-scale-400.pngSquare150x150Logo-scale-100.png, Square150x150Logo-scale-200.png, Square150x150Logo-scale-400.png

Visual Studio では既定でバッジ ロゴが生成されません。Notice that Visual Studio doesn't generate a badge logo by default. これは、バッジ ロゴが独特であり、他のアプリ アイコンと一致していることがまずないためです。That's because your badge logo is unique and probably shouldn't match your other app icons. 詳細については、「UWP アプリ向けのバッジ通知」をご覧ください。For more info, see the Badge notifications for UWP apps article.

アプリ アイコン アセットの詳細More about app icon assets

Visual Studio では、プロジェクトで必要なすべてのアプリ アイコン アセットが生成されますが、それらのカスタマイズが必要となった場合に、他のアプリ アセットとの違いを確認できるようになっています。Visual Studio will generate all the app icon assets required by your project, but if you'd like to customize them, it helps to understand how they're different from other app assets.

アプリ アイコン アセットは、Windows タスク バー、タスク ビュー、Alt + Tab キー、スタート タイルの右下など、さまざまな場所に表示されます。The app icon asset appears in a lot of places: the Windows taskbar, the task view, ALT+TAB, and the lower-right corner of Start tiles. 多くの場所に表示されることから、アプリ アイコン アセットには、他のアセットにはない、サイズとプレートを設定するオプションがあります ("ターゲット サイズ" のアセットと "プレートなし" のアセット)。Because the app icon asset appears in so many places, it has some additional sizing and plating options the other assets don't have: "target-size" assets and "unplated" assets.

ターゲット サイズのアプリ アイコン アセットTarget-size app icon assets

標準の倍率サイズ ("Square44x44Logo.scale 400.png") に加えて、"ターゲット サイズ" のアセットを作成することをお勧めします。In addition to the standard scale factor sizes ("Square44x44Logo.scale-400.png"), we also recommend creating "target-size" assets. このアセットは、特定の倍率 (400 など) ではなく特定のサイズ (16 ピクセルなど) をターゲットとしていることから、ターゲット サイズと呼ばれています。We call these assets target-size because they target specific sizes, such as 16 pixels, rather than specific scale factors, such as 400. ターゲット サイズのアセットは、表示スケール プラトー システムを使用しないサーフェスに使用されます。Target-size assets are for surfaces that don't use the scaling plateau system:

  • スタート画面のジャンプ リスト (デスクトップ)Start jump list (desktop)
  • スタート画面のタイルの下隅 (デスクトップ)Start lower corner of tile (desktop)
  • ショートカット (デスクトップ)Shortcuts (desktop)
  • コントロール パネル (デスクトップ)Control Panel (desktop)

ターゲット サイズのアセットの一覧を次に示します。Here's the list of target-size assets:

アセットのサイズAsset size ファイル名の例File name example
16 x 16*16x16* Square44x44Logo.targetsize-16.pngSquare44x44Logo.targetsize-16.png
24 x 24*24x24* Square44x44Logo.targetsize-24.pngSquare44x44Logo.targetsize-24.png
32 x 32*32x32* Square44x44Logo.targetsize-32.pngSquare44x44Logo.targetsize-32.png
48 x 48*48x48* Square44x44Logo.targetsize-48.pngSquare44x44Logo.targetsize-48.png
256 x 256*256x256* Square44x44Logo.targetsize-256.pngSquare44x44Logo.targetsize-256.png
20 x 2020x20 Square44x44Logo.targetsize-20.pngSquare44x44Logo.targetsize-20.png
30 x 3030x30 Square44x44Logo.targetsize-30.pngSquare44x44Logo.targetsize-30.png
36 x 3636x36 Square44x44Logo.targetsize-36.pngSquare44x44Logo.targetsize-36.png
40 x 4040x40 Square44x44Logo.targetsize-40.pngSquare44x44Logo.targetsize-40.png
60 x 6060x60 Square44x44Logo.targetsize-60.pngSquare44x44Logo.targetsize-60.png
64 x 6464x64 Square44x44Logo.targetsize-64.pngSquare44x44Logo.targetsize-64.png
72 x 7272x72 Square44x44Logo.targetsize-72.pngSquare44x44Logo.targetsize-72.png
80 x 8080x80 Square44x44Logo.targetsize-80.pngSquare44x44Logo.targetsize-80.png
96 x 9696x96 Square44x44Logo.targetsize-96.pngSquare44x44Logo.targetsize-96.png

* 少なくとも上記のサイズを設定することをお勧めします。* At a minimum, we recommend providing these sizes.

これらのアセットにパディングを追加する必要はありません。パディングは、必要に応じて Windows によって追加されます。You don't have to add padding to these assets; Windows adds padding if needed. これらのアセットは、16 ピクセルの最小面積を占めている必要があります。These assets should account for a minimum footprint of 16 pixels.

Windows タスク バーのアイコンに表示される、このようなアセットの例を以下に示します。Here's an example of these assets as they appear in icons on the Windows taskbar:

Windows タスク バーのアセット

プレートなしのアセットUnplated assets

Windows では、ターゲット ベースのアセットが既定で色付きのバックプレートとともに使用されます。By default, Windows uses a target-based asset on top of a colored backplate by default. 必要に応じて、ターゲット ベースのアセットをプレートなしにすることができます。If you want, you can provide a target-based unplated asset. "プレートなし" とは、アセットが透明な背景の上に表示されることを意味します。"Unplated" means the asset will be displayed on a transparent background. この場合、アセットがさまざまな背景色の上に表示されることに留意してください。Keep in mind that these assets will appear over a variety of background colors.

プレートなしのアセットとプレート付きのアセット

次に示すサーフェスでは、プレートなしのアプリ アイコン アセットが使用されています。Here are the surfaces that use unplated app icon assets:

  • タスク バーとタスク バー サムネイル (デスクトップ)Taskbar and taskbar thumbnail (desktop)
  • タスク バーのジャンプ リストTaskbar jumplist
  • タスク ビューTask view
  • Alt + Tab キーALT+TAB

プレートなしのアセットとテーマUnplated assets and themes

ユーザーが選択したテーマによってタスク バーの色が決まります。The user's selected theme determines the color of the taskbar. プレートなしのアセットが現在のテーマに厳密に対応していない場合は、システムでアセットのコントラストがチェックされます。If the unplated asset isn't specifically qualified for the current theme, the system checks the asset for contrast. タスク バーでのコントラストが十分であれば、そのまま使用されます。If it has enough contrast with taskbar, the system uses it. そうでない場合、システムはそのアセットのハイコントラスト バージョンを探します。Otherwise, the system looks for a high-contrast version of the asset. これが見つからなかった場合は、アセットがプレート付きの形式で描画されます。If it can't find one, the system draws the plated form of the asset instead.

ターゲットおよびプレートなしのサイズ調整Target and unplated sizing

次に示すのは、100% の倍率でのターゲット ベースのアセットのサイズに関する推奨事項です。Here are the size recommendations for target-based assets, at 100% scale:

100% の倍率でのターゲット ベースのアセットのサイズ調整

スプラッシュ スクリーン アセットの詳細More about splash screen assets

スプラッシュ スクリーンの詳細については、UWP のスプラッシュ スクリーンに関する記事をご覧ください。For more info about splash screens, see the UWP splash screens article.

バッジ ロゴ アセットの詳細More about badge logo assets

資産ジェネレーターを使用して必要なアセットをすべて生成する場合、バッジ ロゴは既定で生成されません。これは、バッジ ロゴが他のアプリ アセットと大きく異なっているからです。When you use the asset generator to generate all the assets you need, there's a reason why it doesn't generate badge logos by default: they're very different from other app assets. バッジ ロゴは、通知やアプリのタイルに表示される状態の画像です。The badge logo is a status image that appears in notifications and on the app's tiles.

詳細については、UWP アプリ向けのバッジ通知に関する記事をご覧ください。For more information, see the Badge notifications for UWP apps article.

アセットの埋め込みのカスタマイズCustomizing asset padding

Visual Studio の資産ジェネレーターでは、どの画像にも既定で推奨の埋め込みが適用されます。By default, Visual Studio asset generator applies recommended padding to whatever image. 画像にすでに埋め込みが含まれている場合、またはタイルの端まで拡大されたフルブリード画像が必要である場合は、 [推奨の埋め込みを適用します] チェック ボックスをオフにしてこの機能をオフにすることができます。If your images already contain padding or you want full bleed images that extend to the end of the tile, you can turn this feature off by unchecking the Apply recommended padding check box.

タイルの埋め込みに関する推奨事項Tile padding recommendations

タイルに独自の埋め込みを適用する場合の推奨事項を以下に示します。If you want to provide your own padding, here are our recommendations for tiles.

タイル サイズには、小 (71 x 71)、普通サイズ (150 x 150)、ワイド (310 x 150)、大 (310 x 310) の 4 種類があります。There are 4 tile sizes: small (71 x 71), medium (150 x 150), wide (310 x 150), and large (310 x 310).

各タイル アセットは、配置されるタイルと同じサイズです。Each tile asset is the same size as the tile on which it is placed.

フルブリードのタイル

アイコンをタイルの端まで拡大しない場合は、アセットに透明のピクセルで埋め込みを作ることができます。If you don't want your icon to extend to the edge of the tile, you can use transparent pixels in your asset to create padding.

タイルとバック プレート

小さいタイルでは、アイコンの幅と高さをタイル サイズの 66% に制限します。For small tiles, limit the icon width and height to 66% of the tile size:

小さいタイルのサイズの比率

普通サイズのタイルでは、アイコンの幅をタイル サイズの 66% に、高さをタイル サイズの 50% に制限します。For medium tiles, limit the icon width to 66% and height to 50% of tile size. これによって、ブランド バー内の要素と重ならないようにします。This prevents overlapping of elements in the branding bar:

普通サイズのタイルのサイズの比率

ワイド タイルでは、アイコンの幅をタイル サイズの 66% に、高さをタイル サイズの 50% に制限します。For wide tiles, limit the icon width to 66% and height to 50% of tile size. これによって、ブランド バー内の要素と重ならないようにします。This prevents overlapping of elements in the branding bar:

ワイド タイルのサイズの比率

大きいタイルでは、アイコンの幅をタイル サイズの 66% に、高さをタイル サイズの 50% に制限します。For large tiles, limit the icon width to 66% and height to 50% of tile size:

大きいタイルのサイズの比率

水平方向または垂直方向にデザインされたアイコンがある一方で、ターゲット サイズの正方形に収まらない、より複雑な形状のアイコンもあります。Some icons are designed to be horizontally or vertically oriented, while others have more complex shapes that prevent them from fitting squarely within the target dimensions. 中央に配置されるアイコンの一方の辺に重みを付けることができます。Icons that appear to be centered can be weighted to one side. この場合、アイコンの視覚的な重みが正方形に収まるアイコンと同じであれば、アイコンの一部が推奨される面積の外側にはみ出していてもかまいません。In this case, parts of an icon may hang outside the recommended footprint, provided it occupies the same visual weight as a squarely fitted icon:

中央に配置された 3 つのアイコン

フルブリード アセットでは、要素が余白およびタイルの端の内側に接するように考慮します。With full-bleed assets, take into account elements that interact within the margins and edges of the tiles. タイルの高さまたは幅の 16% 以上の余白を維持します。Maintain margins of at least 16% of the height or width of the tile. この割合は、最小タイル サイズでの余白の幅の 2 倍を表しています。This percentage represents double the width of the margins at the smallest tile sizes:

余白のあるフルブリード タイル

次の例では、余白が狭すぎます。In this example, margins are too tight:

余白が小さすぎるフルブリード タイル

特定のテーマ、言語、およびその他の条件に合わせた最適化Optimizing for specific themes, languages, and other conditions

この記事では、特定の倍率に対応したアセットを作成する方法について説明しましたが、各種の条件やさまざまな組み合わせの条件に合わせてアセットを作成することもできます。This article described how to create assets for specific scale factors, but you can also create assets for a wide variety of conditions and combinations of conditions. たとえば、ハイ コントラスト表示や、ライト テーマとダーク テーマに対応したアイコンを作成できます。For example, you can can create icons for high contrast displays or for the light themes and dark themes. 特定の言語に対応したアセットを作成することもできます。You can even create assets for specific languages.

手順については、「言語、スケール、ハイコントラスト、その他の修飾子用にリソースを調整する」をご覧ください。For instructions, see Tailor your resources for language, scale, high contrast, and other qualifiers.