Windows 8.1 アプリ: さまざまな画面解像度に合わせた画像の最適化

  • [アーティクル]

 

Windows と Windows Phone に適用されます

アプリを識別する各イメージ (ロゴやスプラッシュ画面など) のさまざまなバージョンを追加できます。 その後、画面解像度が異なるさまざまなデバイスでそれらのイメージが適切に表示されるようにテストできます。 各イメージのさまざまなバージョンを追加することで、グラフィックスがユーザーの画面サイズに合わせて伸縮される度合いを低くできます。

このトピックの内容

  • イメージ ファイルに名前を付けて整理する

  • プロジェクトにイメージを追加する

  • マニフェストでイメージ ファイルを識別する

  • さまざまな画面サイズと解像度でアプリをプレビューする

イメージ ファイルに名前を付けて整理する

イメージの資産の種類に応じてファイルに名前を付けます (Square7070.png など)。 いくつかのファイルを同じフォルダーに格納する場合は、ファイル名にスケール修飾子を含めます。 たとえば、あるファイルに Square7070Logo.scale-100.png という名前を付けることができます。

スケール ファクターに基づいたフォルダーにファイルをまとめる場合は、ファイル名の代わりにフォルダー名にスケール修飾子を含めます。 たとえば、Assets\Scale-100 サブフォルダーに Square7070Logo.png と Square150150Logo.png を格納できます。

プロジェクトにイメージを追加する

ソリューションを開き、アプリ プロジェクトの Assets フォルダーにイメージ ファイルを追加します。

複数のフォーム ファクター (Windows と Windows Phone など) に対して共有アプリ プロジェクトを使用するときは、ソリューションの共有プロジェクトの Assets フォルダーにイメージ ファイルを追加することを検討してください。ただし、そのイメージが両方のフォーム ファクターに適している場合に限ります。

マニフェストでイメージ ファイルを識別する

  1. ソリューション エクスプローラーで、アプリケーション マニフェスト デザイナー (Package.appxmanifest) を開き、[ビジュアル資産] タブをクリックします。

  2. ビジュアル資産の一覧で、[すべてのイメージ資産] をクリックして、イメージの設定を表示します。

  3. メイン ロゴに短い名前を表示する場合は、[短い名前] ボックスで短い名前を指定します。

    注意

    Windows Phone アプリの場合、[短い名前] と [既定のサイズ] の値は無視されます。

  4. 任意のロゴ (たとえば Square 150x150 Logo) のテキスト ボックスで、メイン ロゴに "a" を指定します。

    Square 150x150 Logo の既定値は、Assets\Logo.png です。

  5. ページの [スケーリングされた資産] 領域で、任意の [スケール] ボックスの横にある [参照] () ボタンをクリックし、Assets フォルダーに移動します。そのスケールに適したイメージを指定し、[開く] ボタンをクリックします。

    注意

    イメージをスケーリングされたサイズに拡大して表示するには、ボックスのイメージを選択します。 プレビュー ウィンドウが開き、各イメージ ファイルを使用する場所の一覧が表示されます。

    ボックスにイメージが表示され、ファイルがコピーされます。 コピーされたファイルには、ストア アプリのリソースの名前付け規則に従って、Name.scale-nnn.ext という名前が付けられます (nn はスケール ファクターです)。 たとえば、Logo.scale-100.png という名前が付けられます。

さまざまな画面サイズと解像度でアプリをプレビューする

Windows のみに適用されます

ストア 用にデザインしたアプリをシミュレーターでプレビューできます。 詳細については、以下を参照してください。シミュレーターでの Windows ストア アプリの実行

Windows Phone ストア 用にデザインしたアプリをエミュレーターでプレビューできます。 デバッガーの [標準] ツール バーの [デバッグの開始] ボタンの横にあるドロップダウン リストからエミュレーターを選択します。 アプリをプレビューする解像度と一致するエミュレーターを選択します。

重要

ストアにアプリを公開する前に、必ず実際のデバイスでアプリをテストしてください。

関連項目

クイック スタート: ファイルまたはイメージのリソース (C#/VB/C++ および XAML を使用する Windows ランタイム アプリ)
クイック スタート: ファイルまたはイメージのリソース (JavaScript および HTML を使用する Windows ランタイム アプリ)
修飾子を使用してリソースに名前を付ける方法 (C#/VB/C++ および XAML を使用する Windows ランタイム アプリ)
修飾子を使用してリソースに名前を付ける方法 (JavaScript および HTML を使用する Windows ランタイム アプリ)
アプリ画像の選択
ピクセル密度に合わせたスケーリングのガイドライン
タイルとトーストの画像サイズ (Windows ランタイム アプリ)
タイルとバッジのガイドライン
サムネイルのガイドライン
タイル テンプレート カタログ (Windows ランタイム アプリ)