Windows ストア アプリ UI の概要 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
優れたユーザー インターフェイスはどのように作るのでしょうか。アプリの最適なレイアウトとはどのようなものですか。どうすればアプリがナビゲートしやすく直感的なものになるでしょうか。
これらの質問について考え、アプリ開発の設計段階を始めましょう。その後、設計を実装する方法について説明します。
ガイドライン、ベスト プラクティス、例を使って、Windows 8.1 の UI 機能を十分に活用できるようにします。アプリの UI は、直感的で美しく、他の Windows ストア アプリとの一貫性を保つように定義することができます。
.jpg "StumbleUpon アプリのメイン ページ")
以降のセクションは、アプリの UI の設計に役立つタスクのアウトラインです。「UX ガイドライン」で説明されているベスト プラクティスに従っています。
Windows ストア アプリ開発が初めての場合や、アプリのレイアウト、ナビゲーション、コントロール、コマンドにあまり詳しくない場合は、各手順を復習すると役立つでしょう。そうでない場合は、自由にご覧ください。アプリ UI 開発の関連する側面が同じ場所にまとめられています。ここのガイドライン、タスク、サンプル コードは、JavaScript と HTML を使った Windows ストア アプリの開発に固有のものです。C#/VB/C++ および XAML バージョンについては、「Windows ストア アプリ UI の概要 (XAML)」をご覧ください。
サンプル
コントロールとレイアウトのギャラリー サンプルに関するページには、ここで説明するすべての UI 要素があります。対応するこのサンプルをたびたび取り上げて、特定の機能が実装される場所を指し示します。
.png "コントロールとレイアウトのギャラリー サンプル")
サンプル アプリは、Windows ストア アプリ コントロールのギャラリーです。サンプルでは、コントロールと、各コントロールを実装するためのコードを参照できます。また、以下のセクションで各手順がどのように実装されているかも確かめることができます。
手順 1: セットアップを行い、何をどこに配置するかを確かめる
アプリの設計と開発を始める前に、必ず計画を行ってください。時間を取って、アプリの得意分野、対象ユーザー、実装するシナリオ、サポートする機能について考えます。アプリの計画方法について詳しくは、「ビジョンの定義」をご覧ください。
.jpg "スタート アイコン") |
アプリで使うナビゲーション戦略を決めることから始めます。このチュートリアルでは、ハブ テンプレートを土台にします。アプリの UI を設計して開発するには、テンプレートをダウンロードし、アウトラインに従う際に色々と試してみてください。 詳しくは、「ナビゲーション パターン」と「階層型ナビゲーション (HTML)」をご覧ください。 または、今すぐコードを確かめたい場合は、コントロールとレイアウトのギャラリー サンプルに関するページに直接移動してください。 |
.jpg "ステップ アイコン") |
Windows ストア アプリ内のどこに何を配置しますか。UI のレイアウトに関するガイダンスを確かめてください。 このサンプルでは、アプリの設計のガイダンスをどのように使ったかを示します。
|
手順 2: 追加するコントロールを選ぶ
コントロールの追加と、アプリのレイアウトは、並行して行います。追加するコントロールを決めている必要があり、コントロールを選ぶ前にレイアウトを設計する必要があります。コントロールの動作について理解しておくと、レイアウトに関して適切な決定を下すことができます。
このチュートリアルでは、まず個々のコントロールについて調べます。手順 3 では、それらのコントロールをレイアウトに配置する方法について説明します。最初にレイアウトの設計方法を確かめたい場合は、次のセクションにスキップし、後でコントロールの説明に戻ってくることができます。
ギャラリーの各コントロールを追加した方法については、サンプル コードで確かめてください。
.jpg "ステップ アイコン") |
使用できるコントロールの全一覧と各コントロールの目的を詳しく確かめ、アプリに必要なコントロールを選びます。 |
|
クイック スタート: HTML コントロールの追加とイベントの処理 ボタン、チェック ボックス、ドロップダウン リストなどの HTML コントロールを使います。 |
|
ラベル、div、段落、テキストを表示するテキスト領域などの HTML コントロールを使います。 |
|
テキスト ボックス、テキスト領域、パスワード入力ボックス、テキストを入力して編集するリッチ編集ボックス/リッチ テキスト ボックスなどの HTML コントロールを使います。 |
|
クイック スタート: WinJS コントロールとスタイルの追加 JavaScript 用 Windows ライブラリで、ListView コントロール、評価コントロール、ポップアップ コントロールなどのコントロールを使います。 |
手順 3: レイアウトを作る
|
グリッド システム、ヘッダー、余白、スペースについてと、これらにより一貫したユーザー エクスペリエンスを生み出す方法について確かめます。 |
|
ユーザーは、アプリのサイズを最小幅から全画面まで変えることができ、さまざまなサイズの画面、解像度、向きで表示することができます。アプリがどのサイズでも適切に表示されるように設計する必要があります。 サンプルでは、既定の最小幅の 500 ピクセルを使いました。 |
|
どのサイズでも適切に表示され、正しく機能する滑らかな UI を作ります。 |
|
クイック スタート: さまざまなウィンドウ サイズに合わせたアプリの設計 アプリの最小幅を 500 ピクセルから 320 ピクセルに変更する方法と、狭い幅でもアプリが適切に表示され、正しく機能するように設計を変更する方法を確かめます。また、アプリの高さが幅よりも大きくなったときには常に、横方向にパンするアプリが縦長レイアウトに変化するように設計する方法も確かめます。 |
|
ディスプレイ デバイスのピクセル密度が増すと、画面上のオブジェクトの物理的なサイズが小さくなります。UI がタッチできないほど小さくなったり、テキストが読み取れないほど小さくなったりする場合、Windows はシステムとアプリの UI を次のスケールの割合にスケーリングします。スケーリングされたときにアプリが適切に表示されるようにする方法について確かめます。 |
手順 4: コマンドを配置する場所とチャームを使う場所を選ぶ
|
コマンドを配置する場所 (画面上、ポップアップ、ダイアログ、アプリ バー) を確かめ、アプリのコマンドの場所を決めます。 |
|
コマンドのグループ化、一貫した配置、スタイルとアイコン、コマンド アプリ バーとナビゲーション アプリ バーについての他の重要なガイダンスを確かめます。 サンプルでは、ナビゲーションしやすいように上部アプリ バーにホーム ボタンを実装しました。 |
|
ショートカット メニューを追加する際のガイドラインとチェック リスト 切り取りや貼り付けなどの操作にすぐにアクセスできるようにするには、ショートカット メニューを使います。ショートカット メニューは、短く選択内容に関連したものにしてください。 |
|
アプリ内検索ボックス コントロールと検索コントラクトを使うのに適した状況を確かめます。 |
|
共有するコンテンツがアプリに含まれている場合、そのアプリは共有ソースになります。アプリが他のアプリからコンテンツを受け取る場合、そのアプリは共有ターゲットです。 |
|
設定チャームをどのように使うかはよく考えてください。設定は数を抑えてシンプルにします。[設定] ウィンドウに適切な設定を確かめてください。 |
|
アプリのヘルプを [設定] ウィンドウにいつどのように実装するかを確かめ、ヒント、デモ、再設計された UI など、他のヘルプ提供手段を使うのが適した状況を確かめます。 |
手順 5: アプリを完成させる
.jpg "ストアの要件のアイコン") |
推奨。認証キットを実行すると、アプリが Windows ストア要件を満たしていることを確認できるため、アプリに主要な機能を追加したときはこれを行ってください。 |
.jpg "ストップ アイコン") |
これで終わりです。 UX ガイドラインについて考えて UI を設計したので、アプリには優れたユーザー エクスペリエンスを生み出すベスト プラクティスが反映されていると思います。 |
次の手順
基礎を理解したところで、「アプリの機能の概要」シリーズの他の例をいくつか見てみましょう。
その他の情報
ユーザー エクスペリエンスに関するガイドラインの完全な一覧を確認してください。
アプリのユーザー操作エクスペリエンスの設計に関する概要に従います。
Windows ストア アプリ開発について初心者であり、アプリを初めて作成する場合は、このチュートリアル シリーズをご覧ください。