スプラッシュ画面の追加Add a splash screen

Microsoft Visual Studio を使ってアプリのスプラッシュ画面の画像と背景色を設定します。Set your app's splash screen image and background color using Microsoft Visual Studio.

Visual Studio でスプラッシュ画面の画像と背景色を設定するSet the splash screen image and background color in Visual Studio

Visual Studio テンプレートを使ってアプリを作成すると、既定の画像がプロジェクトに追加され、スプラッシュ画面の画像として設定されます。When you use a Visual Studio template to create your app, a default image is added to your project and set as the splash screen image. スプラッシュ画面の既定の背景色は既定で薄い灰色に設定されます。The background color for your splash screen defaults to a light gray. アプリのスプラッシュ画面の既定の画像や色を変更する場合は、次の手順を実行します。If you want to change the default image or color of your app's splash screen, follow these steps:

  1. Visual Studio で既にあるユニバーサル Windows プラットフォーム (UWP) アプリ プロジェクトを開きます。Open your existing Universal Windows Platform (UWP) app project in Visual Studio.

  2. ソリューション エクスプ ローラーから "Package.appxmanifest" ファイルを開きます。From Solution Explorer, open the "Package.appxmanifest" file. メニュー バーから [プロジェクト] > [ストア] > [アプリケーション マニフェストの編集] を選んで、このファイルを開くこともできます。You can also open this file from the menu bar by choosing Project > Store > Edit App Manifest.

  3. [ビジュアル資産] タブを開き、[Package.appxmanifest] ウィンドウの左側にある [すべてのビジュアル資産] ウィンドウから [スプラッシュ画面] を選びます。Open the Visual Assets tab and select Splash Screen from the All Visual Assets pane on the left side of the "Package.appxmanifest" window. スプラッシュスクリーンを初めて変更する場合は、 \ スプラッシュスクリーン フィールドに "AssetsSplashScreen.png" パスが表示されます。If you're changing your splash screen for the first time, you'll see the "Assets\SplashScreen.png" path in the Splash Screen field.

    次のスクリーン ショットは、Visual Studio での [Package.appxmanifest] ウィンドウを示しています。The following screen shot shows the "Package.appxmanifest" window in Visual Studio. プロジェクトの種類に応じて、表示されるビジュアル資産が若干異なります。Depending on the type of project, you will see a slightly different set of visual assets.

    Visual Studio 2019 の "package.appxmanifest" ウィンドウのスクリーンショット

    テキスト エディターで "Package.appxmanifest" を開くと、VisualElements 要素 の子として SplashScreen 要素 が表示されます。If you open "Package.appxmanifest" in a text editor, the SplashScreen element appears as a child of the VisualElements element. マニフェスト ファイル内の既定のスプラッシュ画面のマークアップはテキスト エディターで次のようになります。The default splash screen markup in the manifest file looks like this in a text editor:

    <uap:SplashScreen Image="Assets\SplashScreen.png" />
    
  4. UWP アプリ用の新しいスプラッシュ画面の画像を選ぶには、[スケーリングされた資産][1240 x 600 px] ラベルの横にある省略記号のボタンをクリックします。To select a new splash screen image for a UWP app, press the button with an ellipsis that appears next to the 1240 x 600 px label below Scaled Assets. スプラッシュ画面の画像に使う 1240 × 600 ピクセルの画像 (.png、.jpg、または .jpeg) を選びます。Choose the 1240 x 600 pixel image (.png, .jpg, or .jpeg) you'd like to use for your splash screen image.

    重要   選択するスプラッシュスクリーンイメージは、1x のスケールファクターを使用して、620 x 300 ピクセルである必要があります。Important  The splash screen image you choose must be 620 x 300 pixels using a 1x scaling factor. また、スプラッシュ画面を設計するときは、画面より小さく、中央に表示されることに注意してください。Also, when designing your splash screen, note that it is smaller than the screen, and centered. Windows Phone ストア アプリのスプラッシュ画面のように画面全体に表示されるわけではありません。It does not fill the screen like a splash screen for a Windows Phone Store app does.

  5. 新しい Windows Phone ストア アプリ用スプラッシュ画面の画像を選ぶには、[スケーリングされた資産][1152 x 1920 px] ラベルの横にある省略記号のボタンをクリックします。To select a new splash screen image for a Windows Phone Store app, press the button with an ellipsis that appears next to the 1152 x 1920 px label below Scaled Assets. スプラッシュ画面の画像に使う 1152 × 1920 ピクセルの画像 (.png、.jpg、または .jpeg) を選びます。Choose the 1152 x 1920 pixel image (.png, .jpg, or .jpeg) you'd like to use for your splash screen image.

    重要   選択するスプラッシュスクリーンイメージは、2.4 x スケールファクターの正しいサイズである 1152 x 1920 ピクセルである必要があります。Important  The splash screen image you choose must be 1152 x 1920 pixels which is the correct size for a 2.4x scaling factor. 提供する資産がこれだけである場合は、1.4 倍と等倍の倍率にスケール ダウンされます。If this is the only asset you provide then it will be scaled down for 1.4x and 1x scaling factors.

  6. [スプラッシュ画面] セクションの [背景色] で、スプラッシュ画面の画像と共に表示される背景色を設定します。In the Background Color field of the Splash Screen section, set the background color displayed with your splash screen image. 色の名前または # 色の16進値を入力できます。You can enter either the name of a color or '#' and the hex value of a color. 利用可能な色の名前の一覧については、「SplashScreen 要素」をご覧ください。For a list of the names of available colors, see SplashScreen element. スプラッシュ画面の背景色の設定は省略できます。Setting a background color for your splash screen is optional. UWP アプリの色を指定しない場合、スプラッシュスクリーンの背景色は、既定で淡い灰色 (16 進数値 464646) に設定され # ます。If you don't specify a color for a UWP app, the splash screen background color defaults to a light gray (hex value #464646). これは、[タイル] の既定の背景色 ([ビジュアル資産] タブの [タイル イメージとロゴ] セクションの [背景色] を参照) と同じ色です。This is the same color as the default Tile background color (see the Background Color field of the Tile Images and Logos section in the Visual Assets tab). Windows Phone の色を指定しないか、「透明」に設定した場合は、スプラッシュ画面の背景色が透明になります。If you don't specify a color for a Windows Phone, or set it to "transparent", then the splash screen background color will be transparent.

まとめと次のステップSummary and next steps

アプリの読み込みに時間がかかる場合は、追加スプラッシュ画面の追加を検討してください。If your app takes a while to load, consider adding an extended splash screen. 手順については、「カスタマイズしたスプラッシュ画面の作成」を参照してください。For step-by-step guidance, see Create a customized splash screen.