スプラッシュ画面のガイドライン

ユーザーに快適な起動エクスペリエンスを提供するために、スプラッシュ画面をカスタマイズし、追加スプラッシュ画面を作成するには、以下のガイドラインに従ってください。

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

推奨と非推奨

  • スプラッシュ画面をカスタマイズして、アプリを特徴付けます。 スプラッシュ画面は、画像と背景色で構成され、どちらもカスタマイズできます。スプラッシュ画面が適切にデザインされていると、アプリがより魅力的なものになります。

    画像と背景色を組み合わせてスプラッシュ画面を作ると、アプリがインストールされているデバイスのフォーム ファクターに関係なく、スプラッシュ画面が適切に表示されます。スプラッシュ画面が表示されるとき、背景のサイズだけがさまざまな画面サイズに合わせて変更されます。画像のサイズは常に変わりません。

    このスプラッシュ画面を追加してカスタマイズする方法については、「クイック スタート: スプラッシュ画面の追加」をご覧ください。

  • アプリのランディング ページを表示する前に追加のタスクを完了できるように、追加スプラッシュ画面を作成します。 Windows で表示されるスプラッシュ画面に似た追加スプラッシュ画面を作成することで、アプリの読み込みエクスペリエンスをさらに制御できます。システムで表示されるスプラッシュ画面に似せることで、スムーズで内容の伝わる読み込みエクスペリエンスをユーザーに提供できます。アプリの UI の準備やネットワーク データの読み込みに時間がかかる場合、アプリがこれらのタスクを完了している間、追加スプラッシュ画面を使ってユーザーにメッセージを表示することができます。

    Windows ストアの追加スプラッシュ画面を次に示します。この画面は初期スプラッシュ画面と同じですが、"不定リング" プログレス コントロールが追加してあり、アプリが読み込み中であることがユーザーに示されます。Windows ストアの追加スプラッシュ画面のスクリーン ショット

    SplashScreen クラスを使って追加スプラッシュ画面を作成する方法については、「スプラッシュ画面を拡張する方法 (JavaScript と HTML を使った Windows ストア アプリ)」または「スプラッシュ画面を拡張する方法 (C#/VB/C++ と XAML を使った Windows ストア アプリ)」をご覧ください。

    不定リングなどのプログレス コントロールの概要については、「プログレス コントロールのガイドライン」をご覧ください。

    ヒント  フラグメント読み込みを使って追加スプラッシュ画面を読み込む場合、Windows のスプラッシュ画面が閉じてから、追加スプラッシュ画面が表示されるまでの間に、ちらつきが生じることがあります。このちらつきが生じるのは、activated イベント ハンドラーの実行が終了する前に、フラグメント読み込みが追加スプラッシュ画面の読み込みを非同期的に開始するためです。スプラッシュ画面のサンプルで示されている設計パターンを使うと、この不快なちらつきは生じません。追加スプラッシュ画面を、フラグメントとして読み込む代わりに、単純にアプリの UI 上に描画します。追加の読み込みタスクが完了すると、追加スプラッシュ画面の表示をやめてアプリのランディング ページを表示できるようになります。また、追加スプラッシュ画面をフラグメントとして読み込む場合は、アクティブ化の保留を取得して activated イベントに非同期的に応答することで、ちらつきを防ぐこともできます。activatedOperation.getDeferral メソッドを呼び出して、activated イベントの保留を取得します。
  • スプラッシュ画面や追加スプラッシュ画面を広告の表示に使わないでください。 スプラッシュ画面の目的は、アプリの読み込み中に、指定したアプリが適切に開始されていることをユーザーに知らせることです。関係ない要素をスプラッシュ画面に含めると、アプリをひとめで識別することが難しくなり、適切なアプリが起動されていないのではないかとユーザーを不安にさせます。

  • 複数の異なるスプラッシュ画面画像を表示するメカニズムとして、追加スプラッシュ画面を使わないでください。 スプラッシュ画面や追加スプラッシュ画面の目的は、ユーザーにスムーズで洗練された読み込みエクスペリエンスを提供することです。追加スプラッシュ画面を使って複数の異なるスプラッシュ画面画像を表示することは、この目的から離れた行為であり、ユーザーに不快な印象を与えたり、混乱を招く可能性があります。追加スプラッシュ画面は、他のタスクが完了するまで、現在の読み込みエクスペリエンスを続けるためだけに使ってください。

  • スプラッシュ画面や追加スプラッシュ画面をバージョン情報の表示に使わないでください。 スプラッシュ画面を、バージョン情報やその他のアプリ メタデータの表示に使わないでください。これらの情報は、アプリの Windows ストアの説明や、アプリ自体の中に表示します。

ユーザー エクスペリエンス

  • アプリを明確に特徴付ける画像を使います。 アプリを明確に特徴付ける画像と配色を使って、ユーザーが正しいアプリを起動したことを確信できるようにします。独特な画面にすると、ブランドを印象付ける効果もあります。

  • 視覚効果を高めるため、スプラッシュ画面の画像には透過的な PNG を使います。 透過的な PNG を使うと、スプラッシュ画面の画像全体に選択した背景色が適用されます。透過的でないと、画像の背景色が異なる場合に、スプラッシュ画面がちぐはぐで魅力のないものになる可能性があります。

  • Windows の場合は、3 つの各倍率に合わせたサイズで、スプラッシュ画面の画像のバージョンを用意します。 すべてのアプリのスプラッシュ画面の画像は、デバイスが等倍表示の場合、620 x 300 ピクセルにする必要があります。また、1.4 倍と 1.8 倍の追加のスプラッシュ画面画像も含めることをお勧めします。3 つの倍率の各画像を用意すると、異なるデバイスでも、きれいで統一感のある起動エクスペリエンスを提供できます。スプラッシュ画面を設計するときは、画面より小さく、中央に表示されることに注意してください。Windows Phone ストア アプリのスプラッシュ画面のように画面全体に表示されるわけではありません。

    各倍率で必要なスプラッシュ画面画像のサイズを判断するには、次の表をご覧ください。

    スケール画像サイズ (ピクセル)
    等倍620 x 300
    1.4 倍868 x 420
    1.8 倍1116 x 540

     

  • Windows Phone ストア アプリの場合は、最低でも 2.4x のアセットを用意します。可能であれば、すべて用意します。画像ファイル アセット自体は、背景が透明である必要があります。アプリ マニフェストで、SplashScreen@Image プロパティの値を "Assets\<assetname>.png" に設定し、VisualElements@BackgroundColor に値を設定します。

    各倍率で必要なスプラッシュ画面画像のサイズを判断するには、次の表をご覧ください。

    スケール画像サイズ (ピクセル)
    等倍480 x 800
    1.4 倍672 x 1120
    2.4 倍1152 x 1920

     

  • システムによってスプラッシュ画面画像に割り当てられた領域を使う画像を選びます。 スプラッシュ画面画像を選ぶときには、各倍率で割り当てられた領域を活用するようにします。各倍率でのスプラッシュ画面画像のサイズを判断するには、倍率と画像 サイズの表をご覧ください。

    こうすることで、画像の品質を確保し、高品質なスプラッシュ画面を作成できます。

  • スプラッシュ画面が消えた後、システムとイベントに関連する UI を表示します。 スプラッシュ画面の dismissed イベントをリッスンすることで、システムやイベントに関連する UI を安全に表示するタイミングを識別できます。そうしないと、スプラッシュ画面が消える前に、関連付けられた UI (検索ウィンドウ、メッセージ ダイアログ、Web 認証ブローカーなど) が表示されてしまう場合があります。その場合、期待とは異なる視覚効果が発生してしまいます。

  • スプラッシュ画面が消えた後、導入アニメーションを開始します。 多くのアプリは、アプリのランディング ページが読み込まれるたびに、コンテンツの導入アニメーションを表示しようとします。スプラッシュ画面の dismissed イベントをリッスンして、アニメーションを開始するタイミングを識別できます。

追加スプラッシュ画面

  • 追加スプラッシュ画面の外観は、Windows で表示されるスプラッシュ画面に似せるようにしてください。 追加スプラッシュ画面では、Windows のスプラッシュ画面と同じ背景色と画像を使う必要があります。一貫性のある画像と背景色を使うと、Windows のスプラッシュ画面からアプリの追加スプラッシュ画面への遷移が洗練され、ユーザーに不快感を与えずにすみます。

  • 追加スプラッシュ画面画像を、Windows がスプラッシュ画面画像を表示するときの座標に配置します。 SplashScreen クラスを使って追加スプラッシュ画面画像を配置する方法については、「スプラッシュ画面を拡張する方法」をご覧ください。

  • 追加スプラッシュ画面の位置を調整して、回転などのサイズ変更イベントに応答します。 追加スプラッシュ画面は、onresize イベントをリッスンして、アプリがスケーリングされたりデバイスが回転したりした場合にスプラッシュ画面の画像の座標に合わせて調整する必要があります。こうすることで、ユーザーが画面上でどのようなデバイスの操作やアプリのレイアウト変更をしていても、アプリの読み込みエクスペリエンスをスムーズで洗練されたものにすることができます。

  • 追加スプラッシュ画面を数秒以上表示する場合は、アプリがまだ読み込みを行っていることがユーザーにわかるように、進行状況リングを追加します。 進行状況不定リング コントロールを使うと、アプリがクラッシュしたのではなく、間もなく準備ができることをユーザーに知らせることができます。アプリがユーザーのために何をしているかを簡潔に説明する 1 行のテキストを、進行状況リングと一緒に表示することを検討してください。たとえば、追加スプラッシュ画面には、進行状況リングと、読み込み中であることを示すメッセージを追加できます。

    アプリの応答性が高いと感じさせ、ユーザーに情報を提供し続けることは、ユーザーの読み込みエクスペリエンスに対する評価を高めるための優れた方法です。進行状況不定リングとテキストを追加する方法については、「クイック スタート: プログレス コントロールの追加」をご覧ください。

その他の使い方のガイダンス

すべての Windows ストア アプリにはスプラッシュ画面が必要です。スプラッシュ画面は、スプラッシュ画面画像と背景色で構成されています。 その両方をカスタマイズできます。

Windows では、ユーザーがアプリを起動すると、即座にこのスプラッシュ画面が表示されます。これによって、アプリ リソースの初期化中であることがユーザーに示されます。 スプラッシュ画面は、アプリが操作できる状態になるとすぐに、Windows によって閉じられます。

スプラッシュ画面が適切にデザインされていると、アプリがより魅力的なものになります。Windows ストアでは、以下のような装飾の少ないシンプルなスプラッシュ画面を使っています。スプラッシュ画面のサンプルから取り込んだ 75% 縮小のスプラッシュ画面のスクリーン キャプチャ

以下のスプラッシュ画面は、緑の背景色と透過的な PNG を組み合わせて作られています。

SplashScreen クラスを使って、スプラッシュ画面を追加し、導入アニメーションをトリガーすることで、アプリの起動エクスペリエンスをカスタマイズできます。

セキュリティに関する考慮事項

次の記事では、安全な C++ コードを記述するためのガイダンスが示されています。

トラブルシューティング

JavaScript: 追加スプラッシュ画面への遷移中のちらつきの回避

スプラッシュ画面を拡張する方法」には、ちらつきが生じるのを回避するためのアドバイスを記載しています。追加スプラッシュ画面への切り替え中にちらつきが生じる場合は、<img> タグに onload="" を追加して、<img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" /> のようにします。こうすることで、追加スプラッシュ画面への切り替え前に画像がレンダリングされるまでシステムを待機させて、ちらつきを防ぐことができます。

C#: 追加スプラッシュ画面への遷移中のちらつきの回避

スプラッシュ画面を拡張する方法」の手順に従った場合、追加スプラッシュ画面への切り替え中にちらつきが生じることがあります。このちらつきは、ページ コンテンツのレンダリングが終わる前に (Window.Current.Activate を呼び出して) 現在のウィンドウをアクティブ化する場合に生じます。現在のウィンドウをアクティブ化する前に追加スプラッシュ画面画像が読み取られていることを確認することで、ちらつきが生じる可能性を減らすことができます。さらにちらつきを防ぐには、現在のウィンドウをアクティブ化する前に、タイマーを使って、少しの間 (たとえば 50 ミリ秒) アプリを待機させる必要があります。残念ながら、ちらつきを防ぐ確実な方法は存在しません。XAML は非同期的にコンテンツをレンダリングするため、レンダリングが完了するときを確実に予測する方法が存在しないからです。

スプラッシュ画面を拡張する方法」の手順に従った結果、追加スプラッシュ画面への切り替え中にちらつきが生じる場合は、現在のウィンドウをアクティブ化する前にアプリを少し待機させ、追加スプラッシュ画面画像の読み取りが終わるようにするために、次の手順を実行します。

  1. ExtendedSplash.xaml で、追加スプラッシュ画面画像のマークアップを更新して、追加スプラッシュ画面画像が読み取られたときにユーザーに通知します。

    
    <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png" ImageOpened="extendedSplashImage_ImageOpened"/>
    
    

    画像が読み取られた後、ImageOpened イベントが発生します。次の例に示すように、ImageOpened 属性を追加し、イベント ハンドラー名 (extendedSplashImage_ImageOpened) を指定して、ImageOpened イベントを登録する必要があります。

  2. ExtendedSplash.xaml では、追加スプラッシュ画面画像が読み取られた後で、タイマーに基づいて現在のウィンドウをアクティブ化するコードを ExtendedSplash クラスに追加します。

    
            private DispatcherTimer showWindowTimer;
            private void OnShowWindowTimer(object sender, object e)
            {
                showWindowTimer.Stop();
     
                // Activate/show the window, now that the splash image has rendered
                Window.Current.Activate();
            }
     
            private void extendedSplashImage_ImageOpened(object sender, RoutedEventArgs e)
            {
                // ImageOpened means the file has been read, but the image hasn't been painted yet.
                // Start a short timer to give the image a chance to render, before showing the window
                // and starting the animation.
                showWindowTimer = new DispatcherTimer();
                showWindowTimer.Interval = TimeSpan.FromMilliseconds(50);
                showWindowTimer.Tick += OnShowWindowTimer;
                showWindowTimer.Start();
            }
    
    

    この例は、ImageOpened イベントに応答する方法と、タイマーを使って、現在のウィンドウをアクティブ化する前にアプリを少しの間待機させる方法を示しています。

  3. OnLaunched メソッドを次のように変更します。

    
    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
        if (args.PreviousExecutionState != ApplicationExecutionState.Running)
        {
            bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
            ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState);
            Window.Current.Content = extendedSplash;
        }
    
        // ExtendedSplash will activate the window when its initial content has been painted.
    }
    
    

    この例では、現在のウィンドウに対する Activate の呼び出しを削除しました。代わりにアクティブ化は、ImageOpened イベントが発生し、追加スプラッシュ画面画像が読み取られたことが示されてから、ExtendedSplash オブジェクトによって実行されます。

  4. こうしたコードで実際にちらつきを回避できることを確認するために、できるだけ多くの種類のデバイスや状況下でコードをテストしてください。

関連トピック

デザイナー向け
スプラッシュ画面を拡張する方法
クイック スタート: スプラッシュ画面の追加
スプラッシュ画面のサンプル
開発者向け (HTML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
クイック スタート: プログレス コントロールの追加
開発者向け (XAML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
ImageOpened
OnLaunched
Activate

 

 

表示:
© 2015 Microsoft