可変レイアウトの設計 (JavaScript と HTML を使った Metro スタイル アプリ)

[このドキュメントは暫定版であり、変更されることがあります。]

Windows 8 におけるビューは、Windows Metro スタイル UI のコンテンツをユーザーによる Metro スタイル アプリへのアクセス方法と操作方法に対応させる手段です。複数のビューをサポートするよう設計されたアプリは、さまざまなサイズと向きのデバイスで適切に機能し、ユーザーはそれぞれのニーズと好みに合わせてコンテンツを操作できます。

ビュー状態

ビュー状態とは、ユーザーが選べる Metro スタイル アプリの表示方法です。次の図に示すように、スナップ ビュー、ページ横幅に合わせたビュー、全画面ビューの 3 つがあります。

全画面ビュー状態

全画面

アプリは画面全体に表示されます。

スナップ ビュー状態

スナップ

アプリは画面全体の狭い領域にスナップされます。

ページ横幅に合わせたビュー状態

ページ横幅に合わせた表示

アプリは、スナップされた状態のアプリが表示されていない画面の残りの部分に表示されます。

 

ユーザーはアプリを同時に 2 つまで操作できるため、3 つの状態すべてをサポートできるだけの柔軟性を備えたレイアウトを設計する必要があります。

全画面ビュー、スナップ ビュー、ページ横幅に合わせたビューを使う場合、アプリの UI は、画面サイズ、向き、ユーザー操作に合わせてスムーズに再配置されます。

画面の向き

ユーザーは、タブレット、スレート、モニターを回転およびフリップすることがあるため、アプリが縦横両方の向きに対応できるようにしてください。

縦向きと横向きのレイアウト

ユーザー操作

優れたアプリとは、ユーザーがコンテンツを UI で思いどおりに操作できるアプリです。

アプリを設計する際は、パンとスクロール、光学ズームとセマンティック ズーム、オブジェクトのサイズ変更を UI のどの領域でサポートするかを検討してください。

ユーザーがアプリのコンテンツでサイズ変更とズームインを行えるビューを作成します。

サイズ変更をサポートする領域

必要に応じて、UI サーフェスが画面領域から追加の "ページ" にオーバーフローするようにします。この場合はパンとスクロールを有効にして、ユーザーがこうした大きな UI サーフェスで追加ページ上のコンテンツを見つけられるようにします。

複数ページのコンテンツのパン

このセクションの内容

トピック 説明

クイック スタート: ビュー状態のアプリ レイアウトの定義

縦方向のビュー、横方向のビュー、スナップされたビュー、ページ横幅に合わせたビューを含む Windows Metro スタイル UI のビュー状態のそれぞれに対して、アプリ レイアウトを定義できます。

ピクセル密度に合わせたスケーリングのガイドライン

Windows では、画面のピクセル密度に関係なく、UI 要素の物理的なサイズの一貫性が保たれるようにアプリケーションがスケーリングされます。このトピックでは、スケーリングされたときに適切に表示されるレイアウトとイメージを持つアプリを構築する方法について、概要を示します。

画面に合わせたスケーリングのガイドライン

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

スナップされたビューとページ横幅に合わせたビューのガイドライン

次のガイドラインは、どのビュー状態にも適切に対応する Metro スタイル アプリの UI を設計する際に役立ちます。