アプリ バーのガイドライン

Applies to Windows and Windows Phone

標準的なナビゲーション バー コントロールの外観のサンプル

標準的なアプリ バー コントロールの外観のサンプル

説明

アプリ バーを使うと、ユーザーは必要なコマンドに簡単にアクセスできます。ユーザーが画面の上端または下端をスワイプするとアプリ バーが表示され、そのコンテンツを操作するとアプリ バーが消えます。アプリ バーは、ユーザーのコンテキストに固有のコマンドまたはオプション (写真の選択や描画モードなど) を表示するためにも使うことができます。アプリ バーは、アプリのページまたはセクションのナビゲーションにも使用できます。

ナビゲーション機能について詳しくは、「アプリの機能の概要」シリーズをご覧ください。:  フラット ナビゲーションの概要 (HTMLXAML) と階層型ナビゲーションの概要 (HTMLXAML)

ユーザーがワークフロー (製品の購入など) を実行するために必要なコマンドがある場合は、それらのコマンドをアプリ バーではなくキャンバスに配置します。

上部のアプリ バー

ナビゲーション バーまたは上部のアプリ バーは、ユーザーがアプリの別の領域にアクセスできるようにするためのナビゲーション コントロールを配置するのにお勧めの場所です。ナビゲーションに上部のアプリ バーを使うことで、Windows ストア アプリのナビゲーションで一貫性のある予測可能なユーザー エクスペリエンスが実現します。一貫性があることで、ユーザーは安心してシステム内を移動でき、アプリのナビゲーションに関する知識をさまざまなアプリで利用することができます。

ユーザーがキャンバスだけで主なシナリオを完了できる必要があります。ナビゲーション バーは、ナビゲーション コントロールの 2 次的な場所です。ナビゲーション バーを使うと、アプリのあらゆる部分にユーザーを導くことができ、ホーム ページにすばやくアクセスできるようになります。また、アプリのさまざまな部分にジャンプして探索するようにユーザーを促すことができます。

新しいものを作るための "+" ボタンの追加や検索ボックスの統合など、上部のアプリ バー内にその他の機能を追加することもできます。その他の機能を追加する場合は、アプリ バーの右側にそれらを配置することをお勧めします。

ナビゲーション バーの項目のスタイルは指定できますが、既定の外観は単純なボタンです。ただし、先の画像で示されているように、ボタンとサムネイルを使うという表現方法も一般的です。

ストア アプリのように、複数の領域にナビゲーション バーを分割することもできます。ご覧のように、上部のセクションはグローバル ナビゲーション用であり、下部のセクションはアプリ カテゴリ用です。

ストア アプリのナビゲーション バーの画像

下部のアプリ バー

下部のアプリ バーは、コマンドを配置するのにお勧めの場所です。コマンドをアプリのキャンバスからアプリ バーに移動すると、ユーザーにとって最もイマーシブな操作性が実現します。

標準的なアプリ バー コントロールは、カスタム作業を (ほとんど) 伴わずにアプリ バーを実装したい開発者を対象としています。アプリ バーを作ることは簡単ですが、アプリ バーが Windows のガイダンスとパターンに従って動作するようにすることは簡単ではありません。CommandBar classWinJS.UI.AppBar objectは意図された設計と動作に適応するようになっているため、開発者は細かいことを考える必要がなく、一般的なコマンド実行パターンを外れる可能性は低くなります。

標準のエクスペリエンスから離れてアプリ バーをカスタマイズする場合は、XAML の CommandBar コントロールではなく、AppBar コントロールを使います。

コマンド用に組み込みのアイコンを使うことも、独自のアイコンを作成することもできます。利用できるアイコンの一覧については、以下をご覧ください。

上部のアプリ バー

標準的なナビゲーション バー コントロールを示すスクリーンショット

 

下部のアプリ バー

標準的なアプリ バー コントロールを示すスクリーンショット

推奨と非推奨

  • ナビゲーションとコマンドを分けます。コマンドは下部のアプリ バーに、ナビゲーションは上部のアプリ バーに配置するのが理想です。アプリの初回実行時にヘルプを表示して、アプリ バーに含まれる重要なコマンドをユーザーに知らせることを検討してください。

  • 明確に区別できるコマンド セット (新しいコンテンツを作るためのセットと、ビューをフィルター処理するためのセットなど) がある場合は、アプリ バーの右側と左側に 1 セットずつ配置します。コマンド セットが 3 つ以上ある場合は、区切り記号を使ってセットを区切ります。

  • アプリ全体でコマンドをいつも同じ場所に配置します。各ページにはそのページに関連したコマンドのみを含める必要がありますが、ページ間で共通するコマンドは、ユーザーがコマンドの位置を予測できるように、できるだけ同じ場所の近くにコマンドを表示してください。

  • 配置規則に従います。

    • [New] (新規)、[Add] (追加)、[Create] (作成) ボタン (とアイコン) は右端に配置します。
    • 表示切り替えのボタンはグループ化して左端に配置します。
    • [Accept] (承諾)、[Yes] (はい)、[OK] (OK) コマンドは、[Reject] (拒否)、[No] (いいえ)、[Cancel] (キャンセル) コマンドの左に配置します。
  • 項目を選択したときに状況に応じてアプリ バーにコマンドを表示し、そのアプリ バーを自動的に表示します。ほとんどのユーザーは右利きのため、ユーザーがアプリ ページで項目を選択すると、その項目に関連するコマンドはすべてアプリ バーの左側に表示されます。これにより、ユーザーの腕や手でコマンドの表示が隠れることはありません。

  • アプリ バーに状況依存のコマンドがある場合は、ユーザーがアプリを操作しているときにバーが自動的に非表示にならないように、その状況が続いている間はモードを固定に設定します。その状況が終わったら、固定モードを解除します。たとえば、ユーザーが画像を選んだときに写真操作に関する状況依存のコマンドを表示しますが、画像の回転やトリミングなどの画像操作をユーザーが続けられるようにするとします。この場合、ユーザーが画像の選択を解除するか端をスワイプしてアプリ バーを閉じるまで、バーは表示されたままです。

  • すべてのコマンドを個別のボタンとしてアプリ バーに配置しきれない場合は、類似性のあるコマンドをグループ化して、ユーザーがアプリ バーのボタンからアクセスできるメニューに配置します。コマンドは論理的にグループ化します。たとえば、[返信]、[全員に返信]、[転送] を [応答] メニューに配置します。

    ポップアップとメニューの画像

  • サイズ変更と縦向きビューに対応したアプリ バーを設計します。コマンドが 10 個以下の場合は、ユーザーがアプリをサイズ変更したり縦向きにしたりすると自動的にラベルが非表示になり、余白が調整されるため、コマンドのヒントを示します。カスタム ビューがもう 1 つ必要な場合は、コマンドをグループ化してメニューにするか、より対象を限定したエクスペリエンスを用意して、サイズ変更されたビューまたは縦向きのビューのコマンドを少なくすることができます。

    JavaScript アプリでは、ユーザーがアプリをサイズ変更したときに最適なレイアウトになるように、DOM 内の状況依存のコマンドの前にグローバル コマンドを配置することをお勧めします。詳しくは、「クイック スタート: コマンドを表示するアプリ バーの追加」と「クイック スタート: アプリ バーのスタイル指定」をご覧ください。

    C#/C++/VB アプリの場合、CommandBar コントロールを使うと、サイズ変更は自動的に処理されます。詳しくは、「さまざまなサイズでアプリ バーを使う方法」をご覧ください。

  • アプリ ページの下部に水平スクロール領域があるアプリでは、アプリ バーが固定モードで表示されている場合にスクロール領域の高さを縮小します。そうしないと、アプリ バーでスクロール バーが隠れるため、ユーザーは、引き続きスクロールできるようにアプリ バーを消さなければならない場合があります。アプリ バーの上端に対して、スクロール バー フラッシュの下端の位置を維持するよう試みてください。

  • 重要なコマンドはアプリ バーには配置しません。たとえば、カメラ アプリでは、アプリ バーではなくアプリ ページに "画像の撮影" コマンドを配置します。写真を撮るためにアプリ ページにボタンを追加するか、ユーザーにプレビューをタップさせることができます。

  • ログイン、ログアウトなどのアカウント管理コマンドは、アプリ バーには配置しません。ログイン、ログアウト、アカウント設定、アカウント作成などのすべてのアカウント管理コマンドは、設定ポップアップに配置する必要があります。ユーザーが特定のページにログインすることが重要な場合は、アプリ ページにログイン ボタンを用意します。詳しくは、「ログインのガイドライン」をご覧ください。

  • アプリの設定はアプリ バーに配置しません。既定値や基本設定などのすべてのアプリ設定コマンドは、設定ポップアップに配置する必要があります。また、設定ポップアップは、履歴を消去するためのコマンドなど、あまり使われない管理コマンドを配置するのに最適な場所です。

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

さまざまなウィンドウ サイズに合わせたスケーリング

ユーザーがアプリ バーのあるウィンドウのサイズを変更すると、コマンドのサイズが変更され、ラベルが省略されることがあります。縮小サイズのコマンドは画面の 1 つの行に収まらないため、2 行目に折り返されます。

  • アプリ バーについては、少なくとも 2 種類のビューを設計してください。フル サイズのビューと、縮小サイズのビューの 2 つです (最小で 500px か 320px)。ほとんどのユーザーは、一般的なウィンドウ サイズ (全画面か、別のアプリと半々) のみを使います。
  • 小さいビューを設計するときはコマンドをグループ化します。コマンドを意味のあるグループに分けられない場合は、省略記号のアイコンを使って "その他" というグループに配置します。
一般的なウィンドウの解像度 (ピクセル単位)単一行に表示できる、ラベルのない縮小サイズのボタンの数単一行に表示できる、ラベルのあるフル サイズのボタンの数
13662213
10241610
768127
50085
32053

 

マウスの右ボタンの処理

アプリの UI を他の Windows ストア アプリと同じようにするには、ユーザーがマウスの右ボタンをクリックしたときに、用意したアプリ バーがトリガーされる必要があります。しかし、アプリでマウスの右ボタンを別の目的 (ゲームでのサブ武器、3-D ビューアーでの仮想トラックボールなど) で使う場合、アプリはアプリ バーを起動するイベントを無視できます。それでも、アプリ バーは Windows ストア アプリのエクスペリエンスの重要な部分なので、ゲームのコントロール モデル内でのアプリ バーや同様のショートカット メニューの役割について検討する必要があります。

アプリのコントロールを設計するときは、次のガイドラインに従ってください。

  • アプリの重要な機能のためにマウスの右ボタンを使う必要がある場合は、右ボタンでその機能を直接呼び出します。コンテキストに沿った UI やアプリ バーは、ワークフローにとって重要でなければ、アクティブ化しません。
  • 境界線メニューのような、コンテキストに沿った右クリック アクションを必要としない領域をユーザーが右クリックしたら、アプリ バーを表示します。
  • マウスの右ボタンのサポートがどこでも必要な場合は、ユーザーが上端の水平方向のピクセル行か、下端の水平方向のピクセル行を右クリックしたときに、アプリ バーを表示するようにします。
  • これらのソリューションが不十分な場合は、カスタム ユーザー操作コントロールを使って、マウス操作でアプリ バーを開けるようにします。
  • MouseMoved などの MouseDevice クラス イベントを使って、独自のショートカット メニューの動作を実装します。
  • タッチ操作での長押しは、右ボタンのクリックに相当することを忘れないでください。両方のイベントを同じように処理します。このイベントを処理し、カスタム動作を定義するには、Holding イベントに登録します。長押しを有効にするには、Hold (タッチ入力とペン入力の場合) と HoldWithMouseGestureSettings プロパティで設定します。
  • Win + Z キーの動作を変更しないでください。アプリでは、アプリ バーまたはコンテキスト メニューを表示します。これらの 2 つのキーが押されたかどうかを判断するために、KeyDownAcceleratorKeyActivated イベントに登録します。

関連トピック

デザイナー向け
コマンド パターン
ナビゲーション パターン
アプリ バーをアクセシビリティ対応にする
開発者向け (HTML)
WinJS.UI.AppBar object
WinJS.UI.NavBar object
HTML AppBar コントロールのサンプルに関するページ
HTML NavBar コントロールのサンプルに関するページ
ナビゲーションとナビゲーション履歴のサンプルに関するページ
初めてのアプリ - パート 3: PageControl オブジェクトとナビゲーション
アプリ バーの追加
ナビゲーション バーの追加
ページ間のナビゲーション (HTML)
開発者向け (XAML)
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
XAML AppBar コントロールのサンプルに関するページ
XAML ナビゲーションのサンプルに関するページ
初めてのアプリ - パート 3: ナビゲーション、レイアウト、ビュー
初めてのアプリ - C++ Windows ストア アプリへのナビゲーションとビューの追加 (チュートリアル 3/4)
アプリ バーの追加 (XAML)
ページ間のナビゲーション (XAML)
開発者向け (DirectX と C++ を使った Windows ランタイム アプリ)
アプリ バーまたは設定の作成

 

 

表示:
© 2014 Microsoft