次の方法で共有

クイック スタート: スプラッシュ画面の追加 (HTML)

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

Microsoft Visual Studio 2013 を使ってアプリのスプラッシュ画面の画像と背景色を設定します。

この機能の実際の使い方については「アプリの機能の概要」シリーズの次のトピックをご覧ください: Windows ストア アプリ UI の概要 (HTML)

必要条件

このクイック スタートでは Visual Studio 2013 を使います。ツールをダウンロードするには、ツールの入手に関するページをご覧ください。

Visual Studio 2013 でスプラッシュ画面の画像と背景色を設定する

Visual Studio 2013 テンプレートを使ってアプリを作成すると、既定の画像がプロジェクトに追加され、スプラッシュ画面の画像として設定されます。スプラッシュ画面の既定の背景色は既定で薄い灰色に設定されます。アプリのスプラッシュ画面の既定の画像や色を変更する場合は、次の手順を実行します。

  1. Visual Studio 2013 で既にある Windows ランタイム アプリ プロジェクトを開きます。

  2. ソリューション エクスプローラーから "Package.appxmanifest" ファイルを開きます。メニュー バーから [プロジェクト]、[ストア]、[アプリケーション マニフェストの編集] の順に選んで、このファイルを開くこともできます。

  3. [ビジュアル資産] タブを開き、["Package.appxmanifest"] ウィンドウの左側にある [すべてのイメージ資産] ウィンドウから [スプラッシュ画面] を選びます。 初めてスプラッシュ画面を変更する場合は、[スプラッシュ画面] に "Assets\SplashScreen.png" というパスが表示されます。

    次のスクリーンショットは、Visual Studio 2013 での ["Package.appxmanifest"] ウィンドウを示しています。プロジェクトが Windows ストア アプリと Windows Phone ストア アプリのどちらであるかに応じて、表示されるビジュアル資産セットはわずかに異なります。

    Visual Studio 2013 で表示される "Package.appxmanifest" のウィンドウのスクリーン ショット

    テキスト エディターで "Package.appxmanifest" を開いた場合は、SplashScreen element は VisualElements element の子として表示されます。マニフェスト ファイル内の既定のスプラッシュ画面のマークアップはテキスト エディターで次のようになります。

    <m2:SplashScreen Image="Assets\splashscreen.png" />

  4. 新しい Windows ストア アプリ用スプラッシュ画面の画像を選ぶには、[スケーリングされた資産] で [620 x 300 px] ラベルの横にある省略記号のボタンをクリックします。スプラッシュ画面の画像に使う 620 × 300 ピクセルの画像 (.png、.jpg、または .jpeg) を選びます。

    重要  選択するスプラッシュ画面の画像は、等倍のスケール ファクターを使った 620 x 300 ピクセルの画像である必要があります。また、スプラッシュ画面を設計するときは、画面より小さく、中央に表示されることに注意してください。Windows Phone ストア アプリのスプラッシュ画面のように画面全体に表示されるわけではありません。

     

  5. 新しい Windows Phone ストア アプリ用スプラッシュ画面の画像を選ぶには、[スケーリングされた資産] で [1152 x 1920 px] ラベルの横にある省略記号のボタンをクリックします。スプラッシュ画面の画像に使う 1152 × 1920 ピクセルの画像 (.png、.jpg、または .jpeg) を選びます。

    重要  選んだスプラッシュ画面の画像は、2.4 倍のスケール ファクターに適したサイズである 1152 x 1920 ピクセルである必要があります。提供する資産がこれだけである場合は、1.4 倍と等倍の倍率にスケール ダウンされます。

     

  6. [スプラッシュ画面] セクションの [背景色] で、スプラッシュ画面の画像と共に表示される背景色を設定します。色の名前を指定することも、'#' と色を表す 16 進数を指定することもできます。利用可能な色の名前の一覧については、「SplashScreen element」をご覧ください。

    スプラッシュ画面の背景色の設定は省略できます。Windows ストア アプリの色を指定しない場合は、スプラッシュ画面の背景色が既定で、薄い灰色 (16 進数 #464646) に設定されます。これは、[タイル] の既定の背景色 ([ビジュアル資産] タブの [タイル イメージとロゴ] セクションの [背景色] を参照) と同じ色です。Windows Phone ストア アプリの色を指定しないか、「透明」に設定した場合は、スプラッシュ画面の背景色が透明になります。

要約と次のステップ

アプリの読み込みに時間がかかる場合は、追加スプラッシュ画面の追加を検討してください。手順については、「スプラッシュ画面を拡張する方法」をご覧ください。読み込み時のユーザー エクスペリエンスを向上させる方法については、「スプラッシュ画面のガイドラインとチェック リスト」をご覧ください。

Windows ストア アプリに必要な他の画像に関する詳細「アプリ画像の選択」をご覧ください。

関連トピック

スプラッシュ画面のサンプル

スプラッシュ画面のガイドラインとチェック リスト

スプラッシュ画面を追加する方法

アプリ画像の選択

辞書/リファレンス

Package manifest schema SplashScreen element

Windows.ApplicationModel.Activation.SplashScreen class