画面に合わせたスケーリングのガイドライン (Windows ストア アプリ)

このトピックでは、Windows 8 でサポートされるさまざまな画面サイズに合わせてスケーリングする Windows ストア アプリのレイアウトを設計、構築する方法のベスト プラクティスを示します。

Windows 8 は、タブレットの小さな画面から、中型ノート PC の画面、大型デスクトップ PC やオールインワン PC の画面まで、さまざまなサイズの画面で実行されます。Windows 8 でサポートされるサイズの画面であれば、Windows ストア アプリを実行できます。一般に、画面のサイズが大きくなるほど画面の解像度も高くなります。そのため、こうした大きな画面では、アプリで使用できる表示可能領域が広くなります。

このドキュメントで使う用語を次に示します。

Term	Description
画面サイズ	画面の物理的なサイズ (インチ単位)。通常は対角線の長さが計測されます。
画面解像度	画面でサポートされているピクセル数。1366x768 のように縦横のサイズで表されます。
縦横比	幅と高さの比率で示される画面の形状。16:9 などです。

 

画面サイズ

画面サイズが Windows ストア アプリに与える最も大きな影響は、画面の解像度です。画面が大きくなると画面の解像度が高くなるため、アプリケーションで使用できる領域や画面上のスペースが広くなります。ユーザーは、画面が大きくなると、表示されるコンテンツと機能が増えることを期待します。

アプリの開発者とデザイナーがこの画面上のスペースを管理する際に考慮すべき事柄があります。大画面でのアプリの表示は、設計時と開発時にレイアウトに対して定義されたパラメーターによって定義されます。

プラットフォーム、コントロール、テンプレートは、いずれも、さまざまな画面サイズに対応できるように設計されています。 多くのアプリのレイアウトは、少し手間をかけるかわずかにコードを追加するだけでスケーリングするようになります。最上位レイアウト、コンテンツ領域、アプリ ナビゲーション、コマンドが大きな画面に想定どおり直感的に配置されるように、これらの要素について少し考慮が必要です。

次の図は、大画面に対応できるレイアウトを構築しなかった場合に、空白の領域がどの程度生じるかを示しています。

最小画面解像度

アプリでサポートする必要がある主な解像度は 2 つです。

• Windows ストア アプリが実行される最小解像度は 1024 x 768 です。
• Windows 8 のすべての機能 (スナップによるマルチタスクを含む) をサポートするのに必要な最小解像度は 1366 x 768 です。スナップ ビューについて詳しくは、「スナップされたビューとページ横幅に合わせたビューのガイドライン」をご覧ください。

Windows ストア アプリは、解像度が 1024 x 600 または 1280 x 720 では実行できません。

次の表に、主な画面の解像度に関する推奨事項を示します。

推奨事項	説明
最小解像度の 1024x768 に合わせて設計する	これには次のような利点があります。 すべての UI (ナビゲーション、コントロール、コンテンツなど) が画面上に収まり、クリッピングされません。
最適な解像度の 1366x768 に合わせて設計する	これには次のような利点があります。 すべての UI (ナビゲーション、コントロール、コンテンツなど) が画面上に収まり、空白の領域が表示されません。

 

大きな画面に合わせた設計

大きな画面向けにアプリを設計する場合は、アプリのレイアウト、魅力、縦横比、コントロールが大きなキャンバスにどう適用されるかを考慮する必要があります。また、どのアプリも、それぞれに複雑さの異なる任意の数のレイアウトを持つことができます。大きな画面に対して、各レイアウトを個別に検討することができます。

次の表に、大きな画面に関する推奨事項を示します。

推奨事項	説明
画面全体に表示されるようにする	これには、画面のサイズに関係なく、可能な限りイマーシブ ユーザー エクスペリエンスを提供できるという利点があります。 アプリは、可能な限り画面全体に表示されるようにしてください。また、さまざまな画面サイズに対応できるよう慎重に設計されていることがわかる必要があります。大画面のモニターを購入するユーザーは、大画面でもアプリが適切に表示され、より多くのコンテンツが画面に表示されることを望んでいます。
固定レイアウトにするかアダプティブ レイアウトにするかを決める	さまざまな画面サイズにスケーリングするアプリを構築するための手法は 2 つあります。レイアウトの複雑さと使用のシナリオに応じて使い分けてください。

 

固定レイアウト

固定レイアウトが最もよく使われるのは、主にビットマップ イメージで構成されるゲームやゲームに似たアプリです。ほとんどの場合、こうしたレイアウトではコンテンツの量が固定されており (ゲーム ボードなど)、より多くのコンテンツを表示することが不可能であるか、無意味である可能性があります。これらのレイアウトは固定ピクセル値を使って設計されるため、さまざまな画面サイズに合わせて動的に変更できません。Windows 8 では、プラットフォームに組み込まれている "サイズに合わせたスケーリング" というアプローチでこれらのアプリに対応します。

固定レイアウト: サイズに合わせたスケーリング

さまざまな画面サイズに対応できない固定レイアウトがアプリに必要と判断した場合は、サイズに合わせたスケーリングのアプローチを使って、さまざまなサイズの画面全体に固定レイアウトが表示されるようにします。次の図をご覧ください。

次の表に、サイズに合わせたスケーリング機能を使用するアプリに対する推奨事項を示します。

推奨事項	説明
基本解像度から設計を始める	固定レイアウトを設計するときは、基本解像度 (1024x768 と 1366x768) のレイアウトの設計から始めてください。これは、大きな画面に合わせてスケーリングされるレイアウトです。
固定コンテンツは ViewBox コントロール内に配置する	ViewBox コントロールは、固定レイアウトを画面に収まるようにスケーリングします。 ViewBox コントロールの幅と高さが 100% になるようにします。 ViewBox の固定サイズ プロパティをレイアウトの固定ピクセル サイズに定義します (1366 x 768 など)。
アダプティブ コントロール (AppBar など) を ViewBox に配置しない	これらのコントロールは、さまざまな画面サイズに自動的に対応します。
レター ボックスのスタイルと色を定義する	固定アプリ レイアウトは、縦横比や画面サイズの変化に合わせて動的に変更されません。そのため、サイズに合わせたスケーリングの手法により、アプリのコンテンツが自動的に中央に配置され、レター ボックス化されます (横方向または縦方向)。 アプリまたはハードウェアの色を補完するレター ボックスのスタイルと色を定義すると、操作性が高まります。レター ボックスの色は、最上位アプリ レイアウトの背景色で定義されます。ハードウェアと調和する黒などの暗色、意図が感じられる灰色などの中間色、アプリ コンテンツの色と調和する色を選ぶことをお勧めします。
ベクター資産または高解像度資産を用意する	サイズに合わせたスケーリングの手法では、アプリケーションは大画面のデスクトップ モニター上でアプリの設計サイズの最大 200% のサイズまでスケーリングされます。 スケーラブル ベクター グラフィックス (SVG)、Extensible Application Markup Language (XAML)、デザイン プリミティブなどのベクター資産は、スケーリング アーティファクトが発生したり、ぼやけたりすることなくスケーリングされます。ラスター資産 (ビットマップ イメージなど) が必要な場合は、設計サイズの 2 倍の大きさの画像を用意して、スケール アップではなくスケール ダウンできるようにします。 次の図に、スケール アップしたときに、スカラー イメージ (右) がベクター イメージ (左) と比べてどの程度劣化するかを示します。

 

アダプティブ レイアウト

アダプティブ レイアウトが最もよく使われるのは、コンテンツを使用、管理、作成するアプリです。これらのレイアウトは、ほとんどの場合、定義済みの比例要素と最上位ワイヤーフレームで構成されます。たとえば、ニュース リーダー アプリの場合、ヘッダー、フッター、中央のコンテンツ領域があります。これらのレイアウトは動的に変化してさまざまな画面サイズに対応できるため、より多くのコンテンツを表示でき、レイアウトの規則に従って画面全体に動的に表示されます。Windows 8 では、この後詳しく説明するアダプティブ レイアウトの手法でこれらのアプリに対応します。

アダプティブ レイアウト: 領域の管理

さまざまな画面サイズに対応するアダプティブ レイアウトをアプリ レイアウトでサポートできると判断した場合は、次の考慮事項を基に、利用可能な画面上のスペース全体をアプリでどのように使用するかを決めます。

次の表に、アダプティブ レイアウトを使用するアプリに対する推奨事項を示します。

推奨事項	説明
各アダプティブ領域が利用可能なスペースをどのように使用するかを決める	横方向または縦方向にアダプティブであることを確かめたセルごとに、アプリ レイアウトが大きな画面上でそのスペースをどのように使用するかを決めます。
最上位レイアウト ワイヤーフレームを決める	このワイヤーフレームで、アプリの最上位領域を示す必要があります。このワイヤーフレームには、ヘッダー領域、ナビゲーション領域、コンテンツ領域がある場所を含める必要があります。次の図に最上位ワイヤーフレームを示します。
固定レイアウトにする部分とアダプティブ レイアウトにする部分を決める	アプリがさまざまなサイズで表示されたときに、最上位ワイヤーフレーム内の各セルのサイズを縦方向と横方向にどう変化させるかを決めます。この最上位ワイヤーフレームの指定とサイズ変更の動作は、GridLayout のパラメーターを定義するために使うことができます。
各アダプティブ領域が使用するサイズを決める	横方向または縦方向にアダプティブであることを確かめたセルごとに、アプリ レイアウトが大きな画面上でそのスペースをどのように使用するかを決めます。
アプリがアダプティブ サイズのスペースをどのように使用するかを決める	アプリの各領域をさまざまなサイズにどう対応させるかを決めたら、アプリでスペースをどのように使用するかを考えます。アプリでスペースを使用するために利用できる手法はさまざまで、いくつかの手法を組み合わせることもできます。いずれの手法も、Windows 8 プラットフォームとコントロールによってサポートされます。
すべてのコレクション ビューの幅と高さが 100% になるようにする	ListView コントロールは、使用可能なスペースにより多くのアイテムを自動的に配置します。
テキストには段組レイアウトを使う (適切な場合)	段組レイアウトでは、読みやすくするために列を自動的に追加し、使用可能なスペース全体にコンテンツをフローします。
画像には canvas を使う (適切な場合)	canvas は、使用可能なスペース全体に自動的に拡張されます。
空白の領域を広く取る	余分な空白を補って、表示されるアプリ コンテンツの量を維持します。
表示するアプリを増やす	アプリのコンテンツをより多く表示します。コンテンツの再配置方法によって、表示する空白を増やすかどうかを変更することもできます。

 

アプリ レイアウトのテスト

さまざまなサイズの画面でアプリをテストすることが重要です。ほとんどの開発者は多数のデバイスを自由に使えるわけではないので、マイクロソフトはさまざまな画面でアプリをテストするためのサポートを Visual Studio 11 などのツールに組み込んでいます。用意されている Windows Simulator を使うと、次の図に示すとおり、開発者はさまざまな画面サイズ、向き、ピクセル密度でアプリを実行できます。

次の図に示す Blend for Microsoft Visual Studio 2012 for Windows 8 には、開発者がさまざまな画面サイズとピクセル密度でアプリを簡単に設計できるプラットフォーム メニューが用意されています。Blend のキャンバスは、プラットフォーム メニューから選ばれた画面オプションに基づいて動的に更新されます。

Related topics

レイアウトのガイドライン

 

 

Build date: 7/2/2013