コマンド実行の基本

Windows アプリの "コマンド要素" は、ユーザーがメール送信、項目の削除、フォームの送信などのアクションを実行できる対話型の UI 要素です。 "コマンド インターフェイス" は、共通のコマンド要素、それをホストするコマンド サーフェス、サポートされている対話、提供されているエクスペリエンスで構成されます。

最善のコマンド エクスペリエンスを提供する

コマンド インターフェイスの最も重要な側面は、ユーザーが実行できるようにすることです。 アプリの機能を計画するときは、それらのタスクを実現するために必要な手順と、有効にするユーザー エクスペリエンスを検討します。 これらのエクスペリエンスの最初のドラフトが完成した後は、それらを実装するためのツールと相互作用を決定できます。

一般的なコマンド エクスペリエンスを次に示します。

• 情報の送信または提出
• 設定とオプションの選択
• コンテンツの検索とフィルター処理
• ファイルを開く、保存する、削除する
• コンテンツの編集または作成

クリエイティブにコマンド エクスペリエンスを設計してください。 アプリでサポートする入力デバイスと、各デバイスに対するアプリでの対応方法を選択します。 幅広い機能と設定をサポートすることにより、アプリの使いやすさ、移植性、アクセシビリティを最大限に引き出せます (詳しくは、Windows アプリ向けのコマンド デザインに関する記事をご覧ください)。

適切なコマンド要素を選択する

適切な要素をコマンド インターフェイスで使うことが、直感的で使いやすいアプリとなるか、使いにくくてややこしいアプリとなるかの分かれ目になります。 Windows アプリでは、包括的なコマンド要素のセットを使用できます。 最も一般的な UWP のコマンド要素を次に示します。

ボタン

ボタンは、即時アクションをトリガーします。 メールの送信、フォーム データの送信、ダイアログでのアクションの確認などの操作です。

リスト

リストは、対話型のリストまたはグリッド内に項目を表示します。 通常、オプションや表示項目が多い場合に使用されます。 例として、ドロップダウン リスト、リスト ボックス、リスト ビューとグリッド ビューなどがあります。

選択コントロール

アンケートに入力するときや、アプリ設定を構成するときなどに、ユーザーがいくつかのオプションから選択できるようにします。 例として、CheckBox、RadioButton、トグル スイッチなどがあります。

カレンダー、日付、および時刻の選択コントロール

カレンダー、日付、および時刻の選択コントロールは、イベントを作成するときや、アラームを設定するときなどに、ユーザーが日時情報を表示して変更できるようにします。 例として、カレンダーの日付の選択コントロール、カレンダー ビュー、日付の選択コントロール、時刻の選択コントロールなどがあります。

テキスト予測入力

データを入力したりクエリを実行したりするときに、ユーザーが入力するにつれて入力候補を表示します。 例として、AutoSuggestBox などがあります。

全一覧については、「コントロールと UI 要素」をご覧ください。

適切なサーフェスへのコマンドの配置

アプリのキャンバスや、コマンド バー、コマンド バー ポップアップ、メニュー バー、ダイアログといった特殊なコマンド コンテナーなど、アプリ内の多くのサーフェスに、コマンド要素を配置できます。

常に、コンテンツに対して作用するコマンドを介してではなく、コンテンツを直接ユーザーが操作できるようにします。たとえば、リストのアイテムの並べ替えは、上下のコマンド ボタンではなく、ドラッグ アンド ドロップで行えるようにします。

ただし、特定の入力デバイスの場合、または特定のユーザー機能や設定に対応するときは、これが不可能なことがあります。 このような場合は、できるだけ多くのコマンド アフォーダンスを提供し、これらのコマンド要素をアプリのコマンド サーフェスに配置します。

最も一般的ないくつかのコマンド サーフェスの一覧を次に示します。

アプリのキャンバス (コンテンツ領域)

ユーザーがコア シナリオを完了するためにあるコマンドが常に必要な場合は、そのコマンドをキャンバスに配置できます。 コマンドは影響を与えるオブジェクトの近く (またはその上) に配置できるため、キャンバスにコマンドを配置すると使い方がわかりやすくなります。 ただし、キャンバスに配置するコマンドは慎重に選んでください。 アプリのキャンバスにコマンドが多すぎると、貴重な画面のスペースがなくなり、ユーザーを困惑させる可能性があります。 それほど頻繁に使わないコマンドの場合、別のコマンド サーフェスに配置することを検討してください。

コマンド バーとメニュー バー

コマンド バーを使うと、コマンドを整理しやすくなり、アクセスしやすくなります。 コマンド バーは画面の上部または画面の下部、あるいは画面の上部と下部の両方に配置できます (アプリの機能がコマンド バーに対して複雑すぎる場合はメニュー バーも使用できます)。

メニューとショートカット メニュー

メニューとコンテキスト メニューは、コマンドを整理してユーザーに要求されるまで非表示にすることによって、スペースを節約します。 通常、ユーザーはボタンをクリックするか、コントロールを右クリックして、メニューまたはコンテキスト メニューにアクセスします。

CommandBarFlyout は、コマンド バーとコンテキスト メニューの利点を単一のコントロールに結合するコンテキスト メニューの一種です。 これにより、よく使うアクションへのショートカットが提供され、クリップボードやカスタム コマンドなど、特定のコンテキストにのみ関連するセカンダリ コマンドにアクセスできます。

UWP には、従来のメニューとコンテキスト メニューのセットも用意されています。詳細については、「メニューとショートカット メニュー」を参照してください。

コマンドのフィードバックを提供する

コマンドのフィードバックでは、操作やコマンドが検出されたこと、コマンドがどのように解釈および処理されたか、コマンドが成功したかどうかを、ユーザーに伝えます。 これは、自分が実行したこと、そして次に実行できることを、ユーザーが理解するのに役立ちます。 フィードバックが UI に自然に統合されていて、ユーザーの介在が不要であるか、どうしても必要な場合以外は他の操作が不要であることが理想的です。

注意

必要なときにのみ、そして他の場所では得られない場合にだけ、フィードバックを提供します。 価値が加わる場合を除き、アプリケーションの UI は無駄がなく整然としたものに保ちます。

アプリでフィードバックを提供する方法をいくつか示します。

コマンド バー

CommandBar のコンテンツ領域は、ユーザーがフィードバックを確認したい場合にユーザーに状態を伝えるための直感的な場所です。

ポップアップ

フライアウトは、その外側をタップまたはクリックして閉じることができる、軽量な状況依存のポップアップです。

ダイアログ コントロール

ダイアログ コントロールは、状況依存のアプリ情報を表示するモーダル UI オーバーレイです。 ほとんどの場合、ダイアログは明示的に閉じられまでアプリ ウィンドウの操作を妨げます。また、多くの場合、ユーザーに操作を要求します。 ダイアログは、煩わしく感じることがあるため、特定の状況でのみ使用してください。 詳しくは、「アクションを確認または元に戻すタイミング」をご覧ください。

ヒント

アプリで使う確認ダイアログの量に注意してください。ユーザーが間違えたときはとても役に立ちますが、ユーザーが意図的にアクションを実行しようとしているときは邪魔になります。

アクションを確認または元に戻すタイミング

アプリケーションの UI がどれほど適切に設計されていたとしても、すべてのユーザーが望んだとおりにアクションを実行できることはありません。 アクションの確認を求めたり、最近のアクションを元に戻す方法を用意したりすることにより、アプリでこのような状況に対処できます。

元に戻すことができず、実行結果が重大な操作の場合は、確認ダイアログ ボックスの使用をお勧めします。 このような操作の例は、次のとおりです。

• ファイルを上書きする
• ファイルを保存せずに終了する
• ファイルやデータを完全に削除することを確認する
• 購入する (確認メッセージを表示しないことをユーザーが選択した場合を除く)
• 何かへのサインアップなどのフォームを送信する

元に戻すことができる操作の場合は、通常、単純な "元に戻す" コマンドを提供すれば十分です。 このような操作の例は、次のとおりです。

• ファイルを削除する
• メールを削除する (完全には削除しない)
• コンテンツを変更する、またはテキストを編集する
• ファイル名を変更する

特定の入力タイプの最適化

特定の入力の種類やデバイスを中心としたユーザー エクスペリエンスの最適化について詳しくは、「操作の基本情報」をご覧ください。