フォーム レイアウトのガイドライン

Applies to Windows and Windows Phone

優れたタッチ エクスペリエンスを提供し、画面上の領域の使用を最適化し、Windows ストア アプリでパンとスクロールを最小限にするフォームを設計します。

この機能の実際の使い方については「アプリの機能の概要」シリーズの次のトピックをご覧ください:  ユーザー操作: タッチ入力、その他

推奨と非推奨

  • コンテンツとアプリに適したフォーム レイアウトを使います。
  • フォーム内のすべてのコントロールで、ラベルの配置スタイルを同じにします。
  • フォームのコンテンツが単純またはわかりやすい場合は、インライン プレース ホルダーを使います。
  • 垂直方向に広いパンがある場合は、複数の列を使わないでください。
  • ラベルの長さがさまざまに異なる場合は、左側にラベルを配置しないでください。
  • タッチ入力が行われない場合、タッチ キーボードを自動的に起動しないでください。

その他の使い方のガイダンス

フォームとコントロールのレイアウトを設計するときは、ユーザーにフォームでどのように入力してもらうかと、パンとスクロールがエクスペリエンスにどのような影響を与えるかについて考慮します。 使用する場合は、タッチ キーボード (横長で、画面の最大 50% を使用できます) とインライン エラー通知の影響も考慮します。

1 列のレイアウト

次の場合には、フォームで 1 列のレイアウトを使います。

  • ユーザーに特定の順序でフォームに入力してもらいたい場合。
  • フォームが複数のページにわたる場合。
  • アプリは縦長で幅の狭いレイアウトに合わせてサイズ変更されます。
  • アプリが追加のコメント、情報、指示、ブランド情報、広告を表示する場合。

1 列のレイアウトを使った短いフォームの例を次に示します。

1 列のレイアウトを使った短いフォーム

1 列のレイアウトを使った長いフォームの例を次に示します。

1 列のレイアウトを使った長いフォーム

多数のコントロールを 1 つの非常に長いフォームに収めようとするのではなく、タスクをグループや一連の複数のフォームに分けることを検討してください。グループに分けた長いフォームの例を次に示します。

グループを使った長いフォーム

複数のページに分けた長いフォームの例を次に示します。

グループを使った長いフォーム

UI に追加のコメントと情報が含まれている場合に 1 列のレイアウトを使ったフォームの例を次に示します。

追加のコメントと情報を含むフォーム

2 列のレイアウトを使う場合

垂直方向のパンに制限がある短いフォームの場合は、2 列のレイアウトを使います。 2 列のレイアウトでは、横方向の画面領域を最大限に活用します。 2 つの列の間には必ず十分な空間を確保してください。

2 列を使ったフォームの例を次に示します。

2 列を使ったフォーム

垂直方向に広いパンがある場合は、複数の列を使わないでください。フォームに入力するために、ユーザーは最初の列の一番下まで移動し、2 番目の列の先頭に戻って、また下に移動しなければなりません。 このエクスペリエンスは、タッチ キーボードが表示されている場合、さらに扱いにくいものになります。

2 列を不適切に使ったフォームの例を次に示します。

2 列を不適切に使ったフォーム

3 列以上のレイアウトを使う場合

3 列以上のレイアウトは、横長で表示できる画面領域を最大限に活用するために使います。 このレイアウトは、固定の画面または水平方向にパンする画面ではうまく機能しますが、垂直方向にパンする画面では扱いにくくなります。 入力順序が重要でない場合にのみ、このレイアウトを使ってください。

3 列を使ったフォーム

ラベルの配置

ほとんどのコントロールにはラベルが必要です。

  • コントロールの上側またはコントロールの左側にラベルを配置します。
  • フォーム内のすべてのコントロールで、ラベルの配置スタイルを同じにします。

上側にラベルを配置する場合

通常は、コントロールの上側にラベルを配置します。段組フォーム レイアウトを使う場合は、常にコントロールの上側にラベルを配置します。

コントロールの上側にラベルを配置すると、ラベルとコントロールの関係を確立しやすくなり、すべてのラベルとコントロールを左揃えにできるので、すっきりしたレイアウトになります。コントロールの上側にラベルを配置すると、長い文字列を表示することや、ローカライズとアクセシビリティの問題に対処することが容易になります。

以下に、上側のラベル配置の例を 2 つ示します。

コントロールの上側にラベルを配置したフォーム

左側にラベル配置する場合

1 列のフォームで垂直方向の領域を節約する必要がある場合、次のときにはコントロールの左側にラベルを配置します。

  • それぞれのラベル文字列が短く、長さがほぼ同じである。
  • どのロケールでも、最も長いラベル文字列を表示するのに十分な横方向の領域がある。

左側にラベルを配置したフォームの例を次に示します。

左側にラベルを配置したフォーム

ラベルの長さがさまざまに異なる場合は、一部のラベルがコントロールから離れすぎた位置になるため、左側にラベルを配置しないでください。

左側に不適切にラベルを配置したフォーム

段組フォーム レイアウトでは、左側のラベル配置を使わないでください。ラベル自体が別の列のように見える場合があります。

左側に不適切にラベルを配置したフォーム

インライン プレースホルダー テキスト

ラベルの代わりにインライン プレースホルダー テキストを使うと、レイアウトが簡単になることがあります。インライン プレースホルダー テキストを使うのは次のような場合です。

  • フォームのパターンが多数のユーザーに一般的に理解されている場合 (たとえば、ユーザーのログオン制御やパスワード入力のフィールド)。
  • 入力フィールドへのデータ入力後に簡単にラベルを推量したり解釈したりできる場合 (データの入力後にヒントのテキストが非表示になるため)。
  • 入力フィールドの数に制限がある場合。

インライン プレースホルダー テキストを使ったフォームの例を次に示します。

インライン プレースホルダー テキストを使ったフォーム

ボタンの配置

複数のボタンが他のコントロールに埋め込まれている場合以外は、フォームのボタンは右揃えにします。 フォームをより整理された外見にするには、ボタンを他のコントロールの配置と一致させる必要があります。 たとえば、[PC 設定] の画面では、埋め込まれたボタンは左揃えになっています。

左揃えのボタンが表示されている [PC 設定] 画面

ボタンの配置について詳しくは、「ボタンのガイドラインとチェック リスト」をご覧ください。

フォーカスとナビゲーション

ユーザーがフォームで操作しているコントロールにはフォーカスがあります。 ユーザーは、キーボードの Tab キーを使って、フォームのコントロール (現在は表示されていないコントロールを含む) 間を移動します。 フォーカスのあるコントロールが含まれるパン領域は、コントロール全体が表示されるように自動的にパンされる必要があります。 フォーカスがあるコントロールと、画面の端部またはタッチ キーボード (表示されている場合) の上部との間は 30 ピクセル以上ある状態にして、さまざまな端ジェスチャ、UI、テキスト選択グリッパー用にスペースを残しておく必要があります。

タッチ キーボードが表示または非表示になっているフォーム

場合によっては、画面にずっと表示されたままであることが必要な UI 要素もあります。 フォーム コントロールがパン領域に含まれ、重要な UI 要素が静的であるように UI を設計します。 たとえば、次のような場合です。

常に表示されている必要がある領域を含むフォーム

タッチ キーボードの起動と終了

物理的なキーボードが検出されない場合、ユーザーがテキスト入力フィールドをタップすると、タッチ キーボードが表示されます。 この操作が行われない場合は、アプリがタッチ キーボードを自動的に起動しないようにしてください。

キーボードは次のいずれかの方法で終了します。

  • ユーザーがフォームへの入力を完了してフォームを送信し、そのビューから移動する。
  • ユーザーが終了キーを使ってキーボードを閉じる。

ユーザーがフォームでコントロール間を移動している間は、タッチ キーボードは自動的に終了しません。

詳しくは、「タッチ キーボードと手書きパネルのガイドライン」をご覧ください。

レイアウトの例

このドキュメントのガイドラインに従った登録フォームの例を次に示します。

登録フォーム

次に、さまざまな要素の推奨サイズと、間隔のガイドラインを示します。

登録フォームのサイズ設定と間隔設定

関連トピック

デザイナー向け
ボタンのガイドラインとチェック リスト
タッチ キーボードと手書きパネルのガイドライン

 

 

表示:
© 2014 Microsoft