複数の画面サイズをサポートするためのガイドライン
Windows ストア アプリと Windows Phone ストア アプリは、さまざまな画面サイズや解像度のさまざまなデバイスで実行できますが、ビットマップの場合は拡大または縮小した場合に悪影響を受ける可能性があります。ユーザーも、画面の向きを変更できます。アプリが Windows で実行されている場合は、アプリのサイズを連続的に最小幅まで調整でき、また他のアプリと横に並べて表示できます。ユーザーがアプリを電話、タブレット、ノート PC、デスクトップ、PPI デバイスのいずれで実行する場合でも、UI が適切に表示され、機能を維持することを確認します。 すべてのサイズと向きの画面に対応するように UI を設計する際は、次のガイドラインに従ってください。
Windows ストア アプリで狭いウィンドウ サイズに対応するための具体的なガイダンスについては、「Guidelines for resizing to narrow layouts」を参照してください。
説明
多くの場合、アプリは電話の小さな画面から、中型ノート PC の画面、さらに場合によっては、オールインワン PC や PPI デバイスの画面にまで至るさまざまなサイズの画面で実行されます。画面サイズと解像度によって、アプリで利用できる表示可能領域の大きさが異なります。
.png "ターゲット デバイス上のサンプル アプリ")
.png "大画面のデスクトップ モニター上のサンプル アプリ")
次の用語は、さまざまな画面サイズに合わせたスケーリングを理解するうえで重要です。
| 用語 | 説明 |
|---|---|
画面サイズ |
画面の物理的なサイズ (インチ単位)。通常は対角線の長さが計測されます。 |
画面解像度 |
画面でサポートされているピクセル数。1366x768 のように縦横のサイズで表されます。 |
縦横比 |
幅と高さの比率で示される画面の形状。16:9 などです。 |
プラットフォーム、コントロール、テンプレートは、いずれも、さまざまな画面サイズ、解像度、縦横比に対応できるように設計されています。 アプリのレイアウトの多くは、ディスプレイを変更すると自動的に調整されますが、最上位レイアウト、コンテンツ領域、アプリ ナビゲーション、コマンドがすべての画面に想定どおり直感的に配置されるように、これらの要素について考慮が必要です。
次の表に、アプリを設計するときに考慮する最も重要な画面サイズに示します。
| 全画面の画面サイズ (有効ピクセル解像度) | デバイスの説明 |
|---|---|
| 1366x768 | タブレット、コンバーチブル PC、多くのノート PC (16:9 の縦横比)。ノート PC とデスクトップの基本解像度 |
| 1920x1080 | 大型のノート PC やデバイス (16:9 の縦横比) |
| 2560x1440 | 非常に大型のオールインワン デバイス (16:9 の縦横比) |
| 1280x800 と 800x1280 | 縦方向優先の小型デバイス (16:10 の縦横比) |
| 1024x768 と 768x1024 | 横方向優先の小型デバイス (4:3 の縦横比) |
| 1371x857 と 857x1371 | 小型デバイス (16:10 の縦横比) |
| 384x640 | 4.5" 電話 (15:9 の縦横比) |
| 400x711 | 4.7" 電話 (16:9 の縦横比) |
| 450x800 | 5.5" 電話 (16:9 の縦横比) |
| 491x873 | 6" 電話 (16:9 の縦横比) |
Windows Phone ではなく Windows で動作するアプリを設計する際は、ユーザーが画面上に 2 つのアプリを同時に表示する場合や、アプリのサイズを最小幅に変更した場合に利用できる画面のサイズを考慮します。
| 分割画面サイズ (有効ピクセル解像度) | 説明 |
|---|---|
| 672x768 | 1366x768 デバイスで半分に分割した画面 |
| 500x768 | アプリの既定の最小サイズ、1024x768 デバイスで半分に分割した画面 |
| 320x768 | 320 ピクセルの最小幅をサポートするアプリの最小サイズ |
スケーリングに関する推奨事項について詳しくは、「Guidelines for scaling to pixel density」をご覧ください。
.png "重要な全画面および分割画面のウィンドウ サイズ")
推奨と非推奨
- 自動的に再配置されるコンテンツをサポートするには、可能であれば、可変コントロールを使います。可変コントロールには XAML Grid control、CSS グリッド、CSS 段組レイアウト、ScrollViewer controlがあります。たとえば、グリッド コントロールは、ディスプレイ デバイスの画面解像度に応じて、利用可能なスペースを埋めるように UI の特定のセクションのサイズを調整し、利用可能な画面スペースに応じてさまざまなセルにコンテンツを割り当てます。
- 最小サイズの画面に合わせて表示を調整し、機能を維持できるように、アプリのレイアウトとすべてのコントロールを設計します。
- 既定の Windows ストア アプリの最小幅: 500px。
- 既定以外の Windows ストア アプリの最小幅: 320px。
- Windows Phone ストア アプリの最小サイズ (調整不可): 384px (縦)、640px (横)。
- UI とコントロールは、最小サイズ (上記を参照) までのすべての画面サイズで使用できる必要があります。考慮する必要がある重要なコントロールは、次のとおりです。
- 大画面上の領域を効果的に使い、自動的に再配置されるレイアウトを持つようにアプリを設計します。大きな空白の領域を残さないようにします。
- アプリで最も重要なデバイス サイズで適切に動作するかテストします。実際のデバイスでのアプリのテストに加え、Windows ストア アプリ向けの Microsoft Visual Studio シミュレータを使って、さまざまな物理的な画面サイズ、解像度、向きでアプリの実行をシミュレートできます。
- すべてのinput fieldsの最小サイズを指定します。最小サイズを指定すると、ユーザーがウィンドウのサイズを変更しても入力フィールドが消えません。
- アプリの入力フィールドがソフト キーボードによって隠れないかどうかをテストします。
- 絶対配置を使わないように注意してください。使い方を誤ると、UI がウィンドウ サイズと向きの変更に対応しなくなる可能性があります。レイアウトをハード コーディングするのではなく、実行時に計算された位置を使って UI をレイアウトします。
- さまざまなピクセル密度で設計します。詳しくは、「ピクセル密度に合わせたスケーリングのガイドライン」をご覧ください。
Windows ストア アプリのみ
- アプリが既定の最小幅である 500 ピクセルのサイズまで機能することを確認します。具体的な推奨事項について詳しくは、「Guidelines for narrow layouts」をご覧ください。
- 小さいサイズの方がアプリの動作が正確になる場合、ユーザーに対して画面にアプリを保持するように促すのであれば、既定以外の最小幅である 320 ピクセルをサポートすることもできます。
- アプリのサイズを変更してもユーザーが現在の作業を継続できることを確認します。たとえば、アプリの現在のページ、スクロール バーの状態、オプション、フォーカスを保持します。
- すべての画面サイズでチャームをサポートします。ポップアップとウィンドウが適切にスケーリングされることを確認します。
注 Windows 8 ではユーザーは、3 つの表示状態 (全画面、スナップ、ページ横幅) にのみアプリのサイズを変更できました。Windows 8.1 ではユーザーは、全画面から最小幅に至るまで、任意の幅にアプリのサイズを変更できます。
その他の使い方のガイダンス
向きの変更の自動的なサポート
ユーザーは電話、タブレット、モニターを回転させることができます。アプリが固定レイアウトを使っていない限り、Windows によって、横方向と縦方向の両方が自動的に処理されます。開発者は、アプリの幅がレイアウトに与える影響のみを検討する必要があります。
可変レイアウトを使うことが適切でないと考えられる場合について詳しくは、下の「固定レイアウト」のセクションをご覧ください。
.png "縦向きと横向きのレイアウト")
サイズ変更された場合のアプリの動作 (Windows ストアのアプリのみ)
ユーザーが画面に複数のアプリを表示している場合、次の独特の UI 操作に注意してください。
- ユーザーがチャームを呼び出した場合、チャームは、ユーザーが使った最後のアプリに適用されます。アプリのサイズや画面上の位置は関係ありません。
- 画面上の各アプリの間にはハンドルがあります。ユーザーは、ハンドルをスライドすることによってアプリ ウィンドウのサイズを変更します。ハンドルには、どのアプリにフォーカスがあるかも示されます。
- ユーザーがアプリ間のハンドルをつかんで、アプリの最小幅未満の幅にアプリのサイズを変更しようとすると、アプリは画面に表示されなくなります。
- 複数のアプリが画面に表示されているときに、ユーザーがデバイスやモニターを回転させた場合、アプリの向きは切り替わりません。
固定レイアウト
ほとんどのアプリでは、画面のサイズと解像度の変化に対応してコンテンツが自動的に再配置される、動的レイアウトを使うことができます。ただし、場合によっては、固定レイアウトが必要になります。ゲームのように、コンテンツのみが正しくても成立せず、グラフィックの正確な表示に依存するアプリでは、固定 (絶対) レイアウトを使う必要があります。Windows では、プラットフォームに組み込まれている "サイズに合わせたスケーリング" というアプローチでこれらのアプリに対応します。
さまざまな画面サイズに自動的に対応しない固定レイアウトがアプリに必要と判断した場合は、サイズに合わせたスケーリングのアプローチを使って、さまざまなサイズの画面全体に固定レイアウトが表示されるようにします。次の図をご覧ください。
.png "固定レイアウトでサイズに合わせてスケーリングするゲーム")
サイズに合わせたスケーリングを実装するには、次の操作を実行します。
基本解像度 (1366 x 768 ピクセル (PC/タブレット) や 384x640 ピクセル (電話) など) のレイアウトを設計します。これは、大きな画面に合わせてスケーリングされるレイアウトです。
固定コンテンツは ViewBox コントロール内に配置します (「ViewBox in JavaScript and HTML」または「Viewbox in C#/VB/C++ and XAML」)。ViewBox コントロールは、固定レイアウトが画面に収まるようにスケーリングします。
ViewBox コントロールの幅と高さが 100% になるようにします。
ViewBox の固定サイズ プロパティをレイアウトの固定ピクセル サイズに合わせて定義します (1366 x 768、384x640 など)。
レター ボックスの色を選びます。固定コントロールは、縦横比や画面サイズの変化に合わせて動的に変更されません。そのため、サイズに合わせたスケーリングの手法により、アプリのコンテンツが自動的に中央に配置され、レター ボックス化されます (横方向または縦方向)。レター ボックス バーの色は、最上位アプリ レイアウトの色によって決まります。ハードウェアと調和する黒などの暗色、意図が感じられる灰色などの中間色、アプリ コンテンツの色と調和する色を選ぶことをお勧めします。
ベクター アセットまたは高解像度アセットを用意するサイズに合わせたスケーリングの手法では、アプリケーションは大画面のデスクトップ モニター上でアプリの設計サイズの最大 180% (Windows の場合) または 280% (Windows Phone の場合) のサイズまでスケーリングされます。スケーラブル ベクター グラフィックス (SVG)、Extensible Application Markup Language (XAML)、デザイン プリミティブなどのベクター アセットは、スケーリング アーティファクトが発生したり、ぼやけたりすることなくスケーリングされます。ラスター アセット (ビットマップ イメージなど) が必要な場合は、MRT アセットを用意します。
次の図に、スケール アップしたときに、スカラー イメージ (右) がベクター イメージ (左) と比べてどの程度劣化するかを示します。
.png "ベクター イメージとスカラー イメージのサイズ変更")
アダプティブ コントロールは ViewBox コントロールに配置しないでください。
スケーリングに関するその他の推奨事項について詳しくは、「Guidelines for scaling to pixel density」を参照してください。
関連トピック
デザイナー向け
開発者向け (HTML)
クイック スタート: さまざまなウィンドウ サイズに合わせたアプリの設計
開発者向け (XAML)
Quickstart: Designing apps for different window sizes
サンプル