アプリのアイコンとロゴ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 title bar of your app window
  • [スタート] メニューで、アプリの一覧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
パッケージ ロゴ/ストア ロゴPackage logo/Store logo アプリのインストーラー、パートナー センターで、ストアでは、ストア内の「レビューを書く」オプションで「レポート、アプリ」のオプションApp installer, Partner Center, the "Report an app" option in the Store, the "Write a review" option in the Store StoreLogo.pngStoreLogo.png

* 使用を選択しない限り表示は、ストア内のイメージのみアップロードします。* 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 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?"

既定では、使用して、パッケージからのイメージの一部、ストア内のこのページの上部にある表に示す (とその他の送信処理中に指定したイメージ)。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). ただし、ストアが (Xbox を含む)、Windows 10 でのお客様に、一覧を表示するときに、アプリのパッケージでロゴのイメージを使用するを防ぐを代わりに、ストアにアップロードするイメージのみを使用して、オプションがあります。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 バージョンをサポートする場合顧客もについて、パッケージからのイメージ場合でも、このオプションを使用する)これを行う、ロゴを格納のセクション、ストア一覧送信処理の手順。(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.

アプリの提出プロセス中にストア ロゴを指定します。

このボックスをオンにすると、新しいセクションと呼ばれるストア イメージを表示が表示されます。When you check this box, a new section called Store display images appears. ここでは、アプリのパッケージからロゴのイメージの代わりに、ストアが使用する 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. すべての 3 つのサイズを提供することをお勧めします。 300 x 300 サイズのみが必要です。Only the 300 x 300 size is required, although we recommend providing all 3 sizes.

詳細については、次を参照してください。表示は、ストア ロゴのイメージのみアップロードします。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 2017 を持っていない場合、いくつかのバージョンがあるなどの無料バージョンである (Visual Studio 2017 Community Edition) と他のバージョンは、無料試用版を提供します。If you don't already have Visual Studio 2017, there are several versions available, including a free version, (Visual Studio 2017 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.appmxanifest ファイルをダブルクリックします。In the Solution Explorer, double-click the Package.appmxanifest file.

The Visual Studio 2017 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:

ファイル名- スケール -スケール ファクター.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. いくつか追加のサイズとオプションがないその他の資産を plating がアプリ アイコンの資産は、非常に多くの場所に表示される、ため: 資産の「ターゲット サイズ」と「プレートなし」の資産。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 は、既定で色付き backplate 上にターゲット ベースの資産を使用します。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

ターゲットおよびプレートなしのサイズ変更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.

4 つのタイル サイズがある: small (71 x 71)、medium (150 x 150)、ワイド (150 x 310)、大規模な (310 x 310)。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:

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