幅の狭いレイアウトのガイドライン
ユーザーが縦長、つまり狭いビューにサイズを変更した場合にアプリの UI が調整されるように設計します。そのように計画した場合はこのトピックのガイドラインが適用されます。
- アプリの最小幅を既定の 500 ピクセルでなく 320 ピクセルに変更します (幅の狭いレイアウト)。
- ユーザーがアプリのサイズを、高さが幅よりも大きくなるように (縦長のレイアウト) 変更したときに、縦方向のレイアウトに切り替わるようにアプリを設計します。
一般的な推奨事項について詳しくは、「Guidelines for supporting multiple screen sizes」をご覧ください。狭いレイアウト向けのゲームの設計に関する具体的なガイダンスについては、ゲームのアイデア ブックをご覧ください。
これらのガイドラインを適用したサンプルについては、次のトピックをご覧ください。
例
幅の狭いレイアウト
既定では、Windows ストア アプリの最小幅は 500 ピクセルです。ここに幅が 500 ピクセルのアプリがあります。
.png "既定の最小幅 (500 ピクセル) のアプリ。")
もう 1 つ、幅が 320 ピクセルのアプリがあります。
.png "狭い最小幅 (320 ピクセル) のアプリ。")
500 ピクセル未満の最小幅をサポートする場合は、狭い幅でもアプリの機能を使うことができるように設計を少し変更する必要があります。500 ピクセル未満の幅でアプリを有効に動作させるには、「は推奨と非推奨」に従ってください。
縦長のレイアウト
さらに、アプリの幅より高さが大きくなったときにアプリのデザインを変更することもできます。たとえば、アプリの幅より高さが大きくなったときに、水平方向ではなく垂直方向にパンするようにアプリを設計できます。
全画面表示のときに水平方向にパンするアプリを次に示します。
.png "全画面表示で水平方向にパンするアプリ")
これが、幅よりも高さが大きい状態のアプリです。この場合、アプリは垂直方向にパンします。
.png "幅よりも高さが大きく、垂直方向にパンするアプリ。")
320 ピクセルの最小幅をサポートするか
既定の最小幅よりさらに狭い幅をサポートするかどうかは、ユーザーがアプリでどのような作業を行うかによって判断が分かれます。狭い幅として 320 ピクセルまでサポートする必要がある一般的なシナリオには、次のようなものがあります。
- アプリにとってマルチタスクが重要である。
- ユーザーがアプリを画面上に維持することが望ましい。
- アプリがコンパニオン シナリオで他のアプリと共に動作する。
- アプリが狭い幅にうまく適応する。
既定の最小幅の 500 ピクセルを維持する場合、狭い幅のアプリに関する特別な考慮は必要ありません。
推奨と非推奨
アプリが全画面表示のときに水平方向にパンしている場合、アプリ ウィンドウの高さが幅を超えるときは垂直方向のパンに切り替えます。
アプリの幅が 500 ピクセル未満の場合、幅の狭いサイズに対応するために次のデザイン変更を行います。
- 小さい戻るボタン スタイルを使います。戻るボタンのサイズについて詳しくは、「Segoe UI Symbol アイコンの一覧」をご覧ください。
- 左余白は 20 ピクセルにします。
- アプリのヘッダーには 20 ポイントのサイズを使います。
- ページ切り替えアニメーションとコンテンツ切り替えアニメーションには、より小さなオフセット値を使います。
これは通常幅の電卓アプリです。
.png "Bing トラベル アプリと画面を共有する電卓アプリ")
そしてこちらは、同じアプリですが、幅が 320 ピクセルです。左余白が 20 ピクセルになり、ヘッダーのフォントは幅の狭いレイアウトの推奨事項に従って、20 ポイント サイズに縮小しました。
.png "320 ピクセルの幅で、ヘッダーや余白が小さくなった電卓アプリ")
アプリが全画面表示のときに垂直方向にパンしている場合、アプリの高さが幅より大きい場合はサイズが 1 つの列または 1 ペインに縮小します。アプリが 1 つの列またはペインに切り替えられる正確な幅を決定します。1 つの列または 1 つのペインのビューには、必ずユーザーがペイン間を移動するためのナビゲーションを含めます。
.png "全画面では 2 つのペインで垂直方向にパンするアプリ")
.png "狭い幅では 1 つのペインで垂直方向にパンするアプリ")
アプリのレイアウトとすべてのコントロールが、最小サイズまで縮小され、縦長で幅が狭いアプリ ウィンドウで使用できるように設計します。考慮する必要がある重要なコントロールは、次のとおりです。
ウィンドウのサイズが狭い幅に変更されたときに、ユーザーをアプリの別の部分に移動しないでください。
幅の狭いサイズでアプリの機能のほとんどが保持できない場合は、既定の最小値 (500 ピクセル) より狭い幅をサポートしないようにします。
関連トピック
開発者向け (HTML)
開発者向け (XAML)
クイック スタート: さまざまなウィンドウ サイズに合わせたアプリの設計
Windows.UI.Xaml.VisualStateManager
サンプル