UI のレイアウト (HTML)
この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、 「最新のドキュメント」をご覧ください]
Windows ランタイム アプリのレイアウトと、そのレイアウトと従来のアプリとの違いについて説明します。アプリ ウィンドウ、ポップアップ、ダイアログ、アプリ バーなど、Windows ランタイム アプリで使うことができるサーフェスは多数あります。適切なタイミングで正しいサーフェスを選ぶことは、簡単に使えるアプリとなるか、負担の多いアプリとなるかの分かれ目になります。
アプリ ページ (キャンバス)
アプリ ページは、キャンバスとも呼ばれ、UI の基盤です。キャンバスは、すべてのコンテンツとコントロールを保持します。できる限り、UI 要素をこの基盤となるサーフェスに統合する必要があります。たとえば、ポップアップを使ってエラーを表示する代わりに、組み込みのアニメーションを使ってウィンドウへのエラー メッセージの表示、非表示、または移動をスムーズに行うことができます。UI をインラインで表示すると、ユーザーはアプリに完全に引き付けられ、コンテキストにとどまることができます。
.png "アプリ ページ (またはキャンバス)")
アプリ ページは、ユーザー シナリオをサポートするのに必要なだけ作ることができます。ユーザー シナリオをサポートするアプリ ページのレイアウトについて詳しくは、「Windows ストア アプリの計画」と「ナビゲーション デザイン」をご覧ください。
Windows: UI のサイズ変更
ユーザーは別のアプリを使うことができるようにアプリをサイズ変更したり、別のアプリをサイズ変更してそのアプリを使ったりできます。コンテンツが動的にフローして、ユーザーがアプリをサイズ変更したときのユーザー エクスペリエンスを最適化するように、アプリを設計できます。
.png "全画面") |
全画面 アプリは画面全体に表示されます。 |
|
サイズ変更後 アプリは画面全体の一部に合わせてサイズ変更されます。 他のアプリは残りの画面領域を占めることができます。 |
.png "サイズ変更、幅が狭いアプリ")
.png "サイズ変更、幅が広いアプリ")
詳しくは、「レイアウトとスケーリングの UX ガイドライン」をご覧ください。
タッチ キーボードと手書きパネル
タッチ キーボード (および Windows の手書きパネル) を、テキスト入力用のセカンダリ コマンド UI として使うことができます。このパネルは、編集できる入力フィールドをユーザーがタッチしたとき (または、Windows のデスクトップのタスク バーにあるキーボード アイコンをクリックしたとき) に表示されます。パネルは入力フィールドからフォーカスが移動すると消えます。
タッチ キーボードを使うと、タブレットや電話など、ハードウェア キーボードやその他のキーボード デバイスを持たないフォーム ファクターでもテキストの入力と編集を行うことができます。Windows の手書きパネルを使うことで、ペン ベースのフォーム ファクターでテキストの入力と編集ができるようになります。
既に説明したビュー状態と同様に、タッチ キーボードまたは手書きパネルが表示されたときにコンテンツが動的にフローしてユーザー エクスペリエンスを最適化するように、アプリを設計できます。
これらのテキスト入力モードのサポートについて詳しくは、「タッチ キーボードと手書きパネルのガイドライン」をご覧ください。
アプリ バー
アプリ ページの外側では、アプリ バーがアプリの主なコマンド インターフェイスです。アプリ バーは、ナビゲーション、コマンド、ツールをユーザーに表示するために使います。Windows Phone のメニューは既定では非表示であり、省略記号がタップされたときに表示されます。Windows では、アプリ バー全体が既定では非表示になっていて、ユーザーが画面の上端または下端から中央へとスワイプすると表示されます。アプリ バーを表示するとアプリのコンテンツが見えなくなります。また、ユーザーは、表示したときと同じ方法でアプリ バーを閉じることができます。
.png "画面の下端にあるアプリ バー")
コマンドの設計については「コマンド実行の設計」、ユーザー エクスペリエンスのガイドラインについては「アプリ バーのガイドラインとチェック リスト」をご覧ください。
Windows: チャーム
チャームは、すべてのアプリに固有で一貫したボタン セットを表示します。表示されるボタンは、検索、共有、デバイス、設定、スタートです。これらは、ユーザーがほとんどのアプリで行う基本的な操作だと思われます。
- 検索 ユーザーは、システム内のあらゆる場所からアプリや Web のコンテンツをすばやく検索できます。
- 共有 ユーザーはアプリのコンテンツを他のユーザーまたはサービスと共有できます。
- デバイス ユーザーはデバイスに接続して、コンテンツの送信や、メディアのストリーム配信、印刷を行うことができます。
- 設定 ユーザーはアプリを好みに合わせて構成したり、ユーザー ヘルプにアクセスしたりできます。
- スタート ユーザーは直接スタート画面に移動できます。
.png "チャーム付きのアプリ")
詳しくは、検索、共有、アプリの設定、アプリのヘルプのガイドラインをご覧ください。
ショートカット メニュー
ショートカット メニューは、ポップアップ メニューとも呼ばれ、ユーザーがアプリ内のテキスト要素または UI 要素で実行できる操作が表示されます。各ショートカット メニューでは、最大 5 個のコマンド (切り取り、コピー、プログラムから開くなど) を使うことができます。この制限により、ショートカット メニューは、すっきりと整理され、見やすく、コマンドの操作対象となるテキストまたはオブジェクトに直接関係した状態に保たれます。
.png "ショートカット メニュー")
ショートカット メニューをアプリの主なコマンド インターフェイスとして使わないでください。それはアプリ バーの役目です。詳しくは、「ショートカット メニューのガイドラインとチェック リスト」をご覧ください。
メッセージ ダイアログ
メッセージ ダイアログは、ユーザーが明示的に操作する必要のあるダイアログです。メッセージ ダイアログが表示されると、アプリ ウィンドウは暗くなり、続けるにはユーザーが応答する必要があります。メッセージ ダイアログを使うのは、ユーザーを停止させる場合と応答を要求する場合だけにしてください。
.png "メッセージ ダイアログ")
上の Windows の例では、アプリ ウィンドウが暗くなっています。ダイアログを閉じるには、ユーザーが 2 つのボタンのうちのいずれかをタップする必要があります。つまり、ダイアログ内のメッセージを無視することはできません。
詳しくは、「メッセージ ダイアログのガイドラインとチェック リスト」をご覧ください。
ポップアップ
ポップアップは、ユーザーが現在操作している内容に関係する、一時的に閉じることのできる UI を示します。たとえば、ポップアップを使うと、ユーザーに操作を確認するメッセージを表示したり、アプリ バーのボタンからドロップダウン メニューを表示したり、項目についての詳細を表示したりできます。ポップアップはメッセージ ダイアログとは異なり、ユーザーのタップまたはクリックのみに応じてポップアップを表示する必要があり、ユーザーがポップアップの外側をタップしたときには必ずそのポップアップを閉じる必要があります。つまり、メッセージ ダイアログを表示するのは、ユーザーに操作を中断させて、なんらかの対話的操作を要求する必要がある場合だけにしてください。
.png "ポップアップ")
上の Windows の例では、アプリはアクティブなままです。ポップアップを閉じるには、ユーザーがボタンをタップするか、ポップアップの外側をタップします。つまり、ポップアップ内のメッセージは無視できます。詳しくは、「ポップアップのガイドラインとチェック リスト」をご覧ください。
トースト (またはバナー)
トースト (Windows Phone ではバナーとも呼ばれます) は、アプリがバックグラウンドにあるときにユーザーに表示する通知です。トーストは、ユーザーが知りたい情報をリアルタイムで伝えるのに優れていますが、ユーザーがそれを見なくても問題はありません。ユーザーはトーストをタップして、アプリに切り替え、詳細を調べます。
トースト通知が邪魔で煩わしく感じられる場合もあるので、ユーザーにトーストを表示する場合には慎重に検討してください。詳しくは、「トースト通知のガイドラインとチェック リスト」をご覧ください。
タイル
.png "スタート画面上のタイル") |
タイルはスタート画面に表示されます (Windows では、デスクトップ画面と従来の [スタート] メニューに表示されていたアプリケーション ショートカットに代わるものです)。ユーザーはアプリのタイルをタップして、アプリを起動します。詳しくは、「タイルのガイドライン」をご覧ください。 |
エラー
アプリは 3 つのメイン サーフェスを使ってユーザーにエラーを伝えることができます。エラーに対する現在のサーフェスは、エラーの内容と結果に基づいてアプリ開発者が選びます。
| 表示する内容: | 使用するサーフェス: |
|---|---|
アプリの要素に固有の致命的でないエラーです。アプリは問題を修正できませんが、ユーザーは修正できます。 ユーザーの操作: エラーを閉じなくても、アプリ、システム コンポーネント、他のアプリの操作を続けられます。 例: ユーザーがテキスト入力ボックスに無効な文字列を入力し、その後、再入力する場合。 |
キャンバス上にインラインで表示されるテキスト
|
アプリ全体に関する致命的でないエラーです。アプリは問題を修正できませんが、ユーザーは修正できます。 ユーザーの操作: エラーを閉じなくても、アプリ、システム コンポーネント、他のアプリの操作を続けられます。 例: 一時的にメールが同期できない場合。 |
ページの上部のテキスト
|
アプリ全体に関係する、重要だが致命的ではないエラーです。アプリが解決策を提案できます。 ユーザーの操作: エラーを閉じなくても、プロンプトに応答できます。また、アプリ、システム コンポーネント、他のアプリの操作を続けられます。 |
エラーおよび警告バー
|
アプリ全体に関係する致命的なエラーで、ユーザーがアプリを使うことができなくなります。 ユーザーの操作: エラーを閉じない限り、アプリの操作を続けられません。ユーザーはシステム コンポーネントの操作を続けることができ、他のアプリも使用できます。 |
メッセージ ダイアログ
|
エラーを表示するときは、ポップアップ、トースト、またはカスタム UI サーフェスを使わないでください。
エラー: インライン テキスト
通常は、インライン エラーがサーフェスの第 1 候補となります。インライン テキスト エラーは、ユーザーの現在の操作または現在のアプリ ページ自体のコンテキストでメッセージを配信します。インライン エラーを使うと、メッセージを閉じるためにユーザーが明示的な操作を行う必要はありません。メッセージは、内容が該当しなくなると自動的に消えます。
| 推奨 | メッセージが関連するコントロールまたは要素とメッセージの位置を揃える。 |
| 注目されるように、メッセージを十分なスペースにレイアウトする。 |
次の Windows の例は、特定のテキスト入力ボックスに関連付けられたインライン エラー メッセージです。
.png "特定のテキスト ボックスに関連付けられたインライン エラー メッセージ")
| 非推奨 | メッセージにアクションまたはコマンドを含める。 |
次の Windows の例では、エラー バーと警告バーを使う方法がより適しています。
.png "エラー バーまたは警告バーとして適切なアクション")
エラー: エラー バーまたは警告バー
エラー バーまたは警告バーを使うと、重要なエラーや警告をユーザーに通知し、措置を講じるようユーザーに促すことができます。エラー メッセージでは、問題が発生したことをユーザーに通知し、その理由を説明し、ユーザーが問題を修正するための解決策を示します。警告メッセージでは、今後問題が発生するおそれがある状態についてユーザーに警告します。
| 推奨 | 画面上部にバーを配置し、ユーザーに通知して措置を講じるように促す。 |
| アプリのパレットから選んだ色をバーに設定する。 | |
| すべてのエラー バーと警告バーに、同じ色とレイアウトを使う。 |
.png "エラー バー")
| 非推奨 | 認識される重大度に応じてバーの色や装飾文字を使い分ける (シールドや感嘆符など)。 |
| バーを閉じるための UI として "X" 文字を使う。代わりに、"閉じる" というテキストの表示されたボタンを使ってください。 | |
| 情報提供のみを目的としたメッセージにエラー バーと警告バーを使う。 |
以下の Windows の例のメッセージは情報提供のみを目的としており、操作は不要です。この場合は、画面上部でインライン メッセージを使うことをお勧めします。
.png "エラー バーまたは警告バーの誤用")
エラー: メッセージ ダイアログ
メッセージ ダイアログを使うのは、モーダル メッセージが必要な場合 (ユーザーによるアプリの操作を禁止する場合) だけにしてください。
| 推奨 | ユーザーがアプリを使い続けるためになんらかの操作が必要な場合は、メッセージ ダイアログを使う。 |
次に示すのは、Windows でのエラー メッセージ ダイアログの適切な使用例です。これは、アクティブなアカウントを持っていない限り、ユーザーはアプリを使うことができないためです。
.png "エラー メッセージ ダイアログの適切な使用")
| 非推奨 | ユーザーがメッセージを無視してもかまわない場合にダイアログを使う。 |
次の例では、ユーザーが問題に対処するまで操作をブロックする必要のあるエラーは示されていません。エラー バーか警告バーを使う方が適切です。
.png "エラー メッセージ ダイアログの誤用")