ピクセル密度に合わせたスケーリングのガイドライン
Windows ランタイム アプリ (Windows、Windows Phone、またはその両方で実行) はシステムによって自動的に調整されて、画面のピクセル密度に関係なく一貫した読みやすさと機能を実現します。さまざまなピクセル密度のデバイスに合わせて調整する場合は、アプリの UI の品質を維持するために、次のガイドラインに従ってください。
注 次のガイドラインは、Silverlight を使った Windows Phone アプリには適用されません。Silverlight の具体的なガイダンスについては、Multi-resolution apps for Windows Phone 8 をご覧ください。
.png "標準のスレートと HD スレートのピクセル密度の違い")
説明
スケーリングを使わない場合、デバイスのピクセル密度が増すと、画面上のオブジェクトの物理的なサイズが小さくなります。UI 要素がタッチできないほど小さくなったり、テキストが読み取れないほど小さくなったりする場合、Windows はアプリを次のスケール プラトーに基づいて自動的にスケーリングします。
Windows ストア アプリ:
- 1.0 (100%、スケーリングの適用なし)
- 1.4 (140% のスケーリング)
- 1.8 (180% のスケーリング)
Windows Phone ストア アプリ:
- 1.0 (100%、スケーリングなし)
- 1.4 (140% のスケーリング)
- 2.4 (240% のスケーリング)
Windows は、物理画面サイズ、画面解像度、画面の DPI、フォーム ファクターに基づいて、どの表示スケール プラトーを使うかを決定します。画面の仕様が特定のしきい値を満たす場合、次に高い表示スケール プラトーが使われます。スケール ファクターを判断するには、ResolutionScale (Windows) または RawPixelsPerViewPixel (Windows Phone) を使用できます。
アプリはシステムによって自動的に調整されますが、UI が鮮明で機能的であるようにするために、デバイスのピクセル密度に関係なく、スケーリングのためのアプリの準備には次のガイダンスを使います。
推奨と非推奨
スケーラブル ベクター グラフィックスを使います。Windows はこれらの形式を自動的にスケーリングします。特に目に付くようなアーティファクトは生まれません。 JavaScript アプリでは SVG を使います。C#、C++、または Visual Basic を使うアプリで XAML で定義されたグラフィックスを使用することができます。
アプリ パッケージでビットマップ イメージのリソース読み込みを使用し、各倍率に異なるイメージを用意します。画像ファイル名 (たとえば、Assets\Square7070Logo.scale-100.png) に倍率を含めます。Windows は、自動的に現在のスケールに対して適切な画像を読み込むことに注意してください。 DPI に応じたスケーリングのサンプルは、画像のリソース読み込みの使用法を示しています。
アプリの認定に関連する画像要件については、「アプリの画像の選択」をご覧ください。命名規則について詳しくは、「クイック スタート: ファイルまたは画像リソースの使用 (JavaScript と HTML を使った Windows ストア アプリ)」または「クイック スタート: ファイルまたは画像リソースの使用 (C#/VB/C++ と XAML を使った Windows ストア アプリ)」をご覧ください。
さまざまなスケール プラトーの資産を作成した場合:
- ビットマップ イメージを 100% で設計して、手動で拡大しないでください。高品質の画像プログラムを使っていても、画像はぼやける可能性があります。
- 大きな、高解像度の画像を縮小しても、必ずしも鮮明でくっきりしたものにはならないことにご注意ください。ただし、元のベクターが利用できない場合は、低解像度のファイルを拡大するよりは手動で高解像度のファイルを縮小する方が良い方法です。
アプリが実行時にコードを使って画像を読み込む場合 (たとえば XAML や HTML ではなく DirectX を使って UI を作成している場合) は、ResolutionScale (Windows) または RawPixelsPerViewPixel (Windows Phone) を使ってスケールを特定し、スケールの割合に基づいて画像を手動で読み込みます。
ファイル システム イメージに Thumbnail API を使います。サムネイル API では、サムネイルとして使用する小さな画像をキャッシュしてパフォーマンスを最適化します。詳しくは、「ファイル システムへのアクセスの効率化」をご覧ください。
大きな画像が読み込まれたときにレイアウトが変わらないように、自動サイズ設定を使わずに画像の幅と高さを指定します。
文字体裁グリッド単位とサブ単位を使います。メジャー グリッド単位には文字体裁グリッドで定義された 20px のサイズを使い、マイナー グリッド単位には 5px を使って、ピクセルの丸めによりレイアウトでピクセル シフトが生じないようにします。5px で割り切れるサイズ単位の場合、ピクセルの丸めは行われません。
リモート Web 画像には解像度メディア クエリを使います。 アプリが JavaScript を使用し、リモート Web 画像がある場合は、CSS の @media 解像度メディア機能を background-image プロパティで使って、画像を実行時に置き換えます。
5px の倍数に調整されていない画像を使わないでください。5px の倍数以外の単位を指定すると、140%、180%、240% にスケーリングされたときにピクセル シフトが発生することがあります。
関連トピック
デザイナー向け
開発者向け (HTML)
開発者向け (XAML)
サンプル