アプリのページのレイアウト

この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、 「最新のドキュメント」をご覧ください]

ここで説明するレイアウト パターンを使って、アプリ ページに UI 要素をレイアウトできます。余白、ページ ヘッダー、ガターの幅など、各種要素の一貫したパターンに従って、アプリ間の統一性が確保され、システム全体の操作方法をわかりやすくユーザーに示すことができます。

Windows 8 のユーザー インターフェイスには、アプリ全体で一貫したシルエットを保つ意図が込められています。このシルエットの大きな特徴は、上下と左側に十分な余白が保たれていることです。広くとられた余白によって、コンテンツが水平方向にパン移動することを、ユーザーはすぐに認識することができます。

これらの機能の実際の使い方については「アプリの機能の概要」シリーズの次のトピックをご覧ください: Windows ストア アプリ UI の概要

グリッド システムの使用

Windows 8 のシルエットを理解するには、Windows 8 のグリッド システムの用途について、若干の予備知識が必要です。グリッド システムは、異なるアプリ間で視覚的な統一感を出しながら、ユーザーの興味を保ち、バリエーションを持たせるための構造を提供するデザイン ツールです。グリッド システムは開発者のテンプレートに組み込まれており、コントロールとコレクションはグリッド システムを考慮して設計されています。

グリッドは、単位とサブ単位で構成されます。単位は、大きさの基本的な尺度です。1 単位は 20 × 20 ピクセルに相当します。それぞれの単位はさらに、5 × 5 ピクセルのサブ単位に分割されます。1 平方単位あたり 16 のサブ単位が存在します。以下の画像は、画面の左上隅のグリッドを表しています。ピクセル、サブ単位、単位が見えるように、画像を拡大しています。

ページ ヘッダー

ページ ヘッダーのベースラインは、上部から 5 単位、つまり、100 ピクセルとします。ページ ヘッダーの左余白は 6 単位 (120 ピクセル) です。Windows 8 のページ ヘッダーには SegoeUI Stylistic Set 20 Light Weight が使われています。Stylistic Set について詳しくは、「テキストおよび文字体裁のガイドラインとチェック リスト」をご覧ください。

注  Windows 8.1 更新プログラムでは、マウスを画面の上端へ移動してタイトル バーを表示できます。マウスを画面の下端へ移動して、デスクトップからタスク バーを表示することもできます。画面の上または下の端からマウスを離すと、タイトル バーとタスク バーが非表示になります。ユーザーは、タッチ操作によってタイトル バーまたはタスク バーを表示することはできません。表示されると、タイトル バーとタスク バーでアプリの UI やコマンド要素が見えなくなることがありますので、アプリ レイアウトで要素の位置を定義する場合はこの点に注意してください。

 

コンテンツ領域

コンテンツ領域の上余白は 7 単位 (140 ピクセル) です。左余白は 6 単位 (120 ピクセル) です。下余白は任意です。水平方向にパンするコンテンツの場合、2.5 単位 (50 ピクセル) 以上、6.5 単位 (130 ピクセル) 以下にしてください。 垂直方向にパンするコンテンツの場合、上余白と左余白は等しくします。コンテンツは画面から消えるようにスクロールされるため、下余白に決まりはありません。

水平方向の余白の値

コンテンツ項目間の水平方向の余白は、項目によって異なります。画像、ユーザー タイルなど、輪郭のはっきりした項目では、タイルとそれに付随するテキストとの間に 2 サブ単位 (10 ピクセル) 分の余白を設けます。段組みの場合は、列と列の間に 2 単位 (40 ピクセル) 分の余白を設けます。輪郭のはっきりした項目では、列と列の間に 2 サブ単位 (10 ピクセル) 分の余白を設けます。

垂直方向の余白の値

コンテンツ項目間の垂直方向の余白も、項目の種類によって異なります。 タイルとテキストから成るリストの場合、縦に並んだ項目間に 1 単位 (20 ピクセル) の余白を設けます。輪郭のはっきりしたオブジェクトでは、縦に並んだ項目間に 2 サブ単位 (10 ピクセル) 分の余白を設けます。

グループ間の水平方向の余白

グループ間の余白は 4 単位 (80 ピクセル) です。これだけ余白にゆとりを持たせれば、パン操作を行うユーザーが、グループの境界をすぐに判別できます。

関連トピック

レイアウトとスケーリングの UX ガイドライン

テキストおよび文字体裁のガイドラインとチェック リスト