Windows 7 のコマンド ボタン

Note

この設計ガイドは Windows 7 用に作成されたものであり、新しいバージョンの Windows 用には更新されていません。 ガイダンスの多くは引き続き原則として適用されますが、プレゼンテーションと例には現在の設計ガイダンスは反映されていません。

Windows 7 のコマンド ボタンを使用すると、ユーザーはすぐにアクションを開始します。

OK コマンド ボタンのスクリーンショット

一般的なコマンド ボタン。

ユーザーが Enter キーを押すと、既定のコマンド ボタンが呼び出されます。 開発者によって割り当てられますが、ユーザーがタブに移動すると、コマンド ボタンが既定になります。

Note

レイアウトに関連するガイドラインについては、別の記事で説明します。

これは適切なコントロールですか?

それを判断するには、以下の質問を考えます。

  • コマンド ボタンを使用してすぐにアクションを開始できますか。 そうでない場合、別のコントロールを使用します。
  • リンクの方が良い選択でしょうか。 次の場合、リンクを使用します。
    • アクションが別のページ、ウィンドウ、またはヘルプ トピックに移動することである。 例外: ウィザードのナビゲーションでは、[戻る] および [次へ] コマンド ボタンが使用されます。
    • コマンドがテキストの本文に埋め込まれる。
    • このコマンドが本質的に二次的である。 つまり、ウィンドウの主な目的とは関係ありません。 この場合、軽量のコマンド ボタンまたはリンクが適切です。
    • このコマンドは、関連リンクのメニューまたはグループの一部です。
    • ラベルは長く、5 単語以上で構成されるため、コマンド ボタンはぎこちない外観になります。
  • ラジオ ボタンと汎用コマンド ボタンの組み合わせの方が適していますか。 多くの場合、ラジオ ボタンは、次のいずれかに該当する場合に、特定のコマンド ボタンのセットの代わりに、汎用コマンド ボタン (OK、キャンセル) と組み合わせて使用されます。
    • 5 つ以上のアクションが考えられます。

    • ユーザーは、決定を下す前に追加情報を表示する必要があります。

    • ユーザーは、決定を下す前に選択肢を操作する必要があります (追加情報を確認するなど)。

    • ユーザーは、さまざまなコマンドの代わりにオプションとして選択肢を表示します。

      正しい: ダイアログ ボックス、ラジオ ボタン、テキストのスクリーンショット

      この例では、ラジオ ボタンを [OK] ボタンおよび [キャンセル] ボタンと組み合わせて、オプションに関する追加情報を提供します。

      正しくない: コマンド ボタンを含むメッセージのスクリーンショット

      この例では、コマンド ボタンだけでは、ユーザーが情報に基づいた意思決定を行うのが困難になります。

設計概念

省略記号の使用

コマンド ボタンは即時アクションに使用されますが、アクションを実行するにはより多くの情報が必要になる場合があります。 ボタン ラベルの末尾に省略記号を追加して、追加情報 (確認を含む) が必要なコマンドを示します。

省略記号付きの印刷コマンド ボタンのスクリーンショット

この例では、[印刷...] コマンドにより、詳細情報を収集するための [印刷] ダイアログ ボックスが表示されます。

省略記号なしの印刷コマンド ボタンのスクリーンショット

対照的に、この例では、印刷コマンドは、ユーザーの操作なしで、ドキュメントの 1 部を既定のプリンターに印刷します。

省略記号を適切に使用することは、ユーザーがアクションを実行する前にさらに選択を行ったり、アクションを完全にキャンセルしたりできることを示すために重要です。 省略記号によって提供される視覚的なヒントにより、ユーザーは恐れることなくソフトウェアを使用できます。

これは、アクションによって別のウィンドウが表示されるたびに省略記号を使用する必要があるという意味ではありません。 アクションを実行するために追加の情報が必要な場合のみ省略記号を使用します。 したがって、[バージョン情報]、[詳細設定]、[ヘルプ] (またはヘルプ トピックにリンクするその他のコマンド)、[オプション]、[プロパティ]、[設定] などのコマンド ボタンのように、暗黙の動詞が "別のウィンドウを表示する" であるコマンド ボタンには省略記号は使用されません。

一般に、省略記号は、不完全性を示すためにユーザー インターフェイスで使用されます。 他のウィンドウを表示するコマンドは不完全ではありません。別のウィンドウを表示する必要があり、アクションを実行するために追加の情報は必要ありません。 このアプローチにより、省略記号があまり意味を持たない状況で画面が乱雑になることがなくなります。

注: コマンド ボタンに省略記号が必要かどうかを判断するときは、権限の昇格の必要性を要素として使用しないでください。 昇格はコマンドを実行するために必要な情報ではなく (むしろ許可のための情報です)、昇格の必要性はセキュリティ シールドで示されます。

1 つだけ行うとすれば: コマンド ボタンが実行するアクションを明確に説明する、簡潔で具体的なわかりやすいラベルを使用し、適切な場合は省略記号を使用してください。

使用パターン

コマンド ボタンには、いくつかの使用パターンがあります。

使用方法 例
標準コマンド ボタン 標準のコマンド ボタンを使用して、すぐに操作を開始できます。
標準 (灰色) コマンド ボタンのスクリーンショット
標準コマンド ボタン。
既定のコマンド ボタン ウィンドウの既定のコマンド ボタンは、ユーザーが Enter キーを押したときにアクティブ化されるコマンド ボタンを示します。
既定の (青) コマンド ボタンのスクリーンショット
既定のコマンド ボタン。
ユーザーがタブに移動すると、コマンド ボタンが既定になります。 入力フォーカスがコマンド ボタンではないコントロールにある場合、既定のボタン属性を持つコマンド ボタンが既定になります。 ウィンドウ内の 1 つのコマンド ボタンのみ既定値にすることができます。
軽量コマンド ボタン 軽量コマンド ボタンは標準のコマンド ボタンに似ていますが、ボタン フレームはマウス カーソルを置いたときのみ表示されます。
選択された 2 つの印刷ボタンの 1 つのスクリーンショット
この例では、ユーザーがコマンドの上にマウスを置くまで、コマンドは非常に軽量な外観 (リンクに似ています) を持ち、その時点でボタン フレームが描画されます。
軽量コマンド ボタンは、標準のコマンド ボタンを使用する場合に使用できますが、ボタン フレームが常に表示されないようにする必要があります。 軽量コマンド ボタンは、強調したくないコマンドやリンクの使用が適切でないコマンドに最適です。
メニュー ボタン 関連する少数のコマンドのメニューが必要な場合、メニュー ボタンを使用します。
書式メニュー ボタンとそのコマンドのスクリーンショット
関連するコマンドの小さなセットを含むメニュー ボタン。
ダイアログ ボックス、ツール バー、メニュー バーがないその他のウィンドウなど、メニュー バーが望ましくない場合、メニュー ボタンを使用します。 1 つの下向きの三角形は、ボタンをクリックするとメニューがドロップダウンされることを示します。
分割ボタン 特にコマンドの 1 つが頻繁に使用される場合は、分割ボタンを使用してコマンドのバリエーションのセットを統合します。
コマンドのない開いている分割ボタンのスクリーンショット
折りたたまれた分割ボタン。
メニュー ボタンと同様、1 つの下向きの三角形は、ボタンの右端をクリックするとメニューがドロップダウンされることを示します。
コマンドのある開いている分割ボタンのスクリーンショット
ドロップダウン分割ボタン。
この例では、分割ボタンを使用して、開いているコマンドの 6 つのバリエーションを統合します。 通常の開くコマンドはほとんどの場合使用されるため、通常、ユーザーは他のコマンドを表示する必要はありません。 分割ボタンを使用すると、画面領域が大幅に節約される一方で、強力な選択肢も提供されます。
メニュー ボタンとは異なり、ボタンの左側をクリックすると、ラベルに対してアクションが直接実行されます。 分割ボタンは、特定のツールを使用した次のアクションが最後のアクションと同じである可能性が高い状況で効果的です。 この場合、ラベルは、色選択ツールと同様、最後のアクションに変更されます。
コマンドのない塗りつぶし分割ボタンのスクリーンショット
この例では、ラベルが最後のアクションに変更されます。
参照ボタン 参照ボタンを使用してダイアログ ボックスを表示し、ユーザーが有効な値を選択できるようにします。
参照ボタンによって起動されるダイアログ ボックスは、ユーザーがファイル、フォルダー、コンピューター、ユーザー、色などを選択するのに役立ちます。通常、ダイアログ ボックスはテキスト ボックスなどの制約のないコントロールと組み合わせられます。 通常、参照、その他、または複数のラベルが付き、常に詳細情報が必要であることを示す省略記号が付けられます。
参照ボタンが表示されたテキスト ボックスのスクリーンショット
参照ボタンを含むテキスト ボックス。
参照ボタンが多いウィンドウの場合、短いバージョンを使用できます。
省略記号付きの短い参照ボタンのスクリーンショット
短い参照ボタン。
段階的表示ボタン 使用頻度の低いオプションを表示または非表示にするには、段階的表示ボタンを使用します。
使用頻度の低いオプションを必要になるまで非表示にすることは、段階的表示と呼ばれます。 二重シェブロンは段階的表示を示すために使用され、表示または非表示が行われる方向を指しています。

ボタンをクリックすると、そのラベルが変わり、次のクリックでは逆の効果が得られることが示されます。

詳細と例については、「段階的表示コントロール」をご覧ください。
方向ボタン アクションが実行される方向を示すには、方向ボタンを使用します。
この場合、二重シェブロンの代わりに 1 つの山かっこが使用されます。
左右の矢印ボタンのスクリーンショット
方向ボタンは、アクションの方向を示します。

ガイドライン

全般

  • コマンド ボタンをクリックした結果が即時でない場合は、ビジー状態のポインターを表示します。 フィードバックがないと、ユーザーはクリックが行われなかったと想定し、もう一度クリックする可能性があります。
  • 同じコマンド ボタンが複数のウィンドウに表示される場合、同じラベル テキストとアクセス キーを使用し、可能な場合は各ウィンドウのほぼ同じ場所に配置します。
  • テキスト ラベルを含むコマンド ボタンの場合、ボタンの最小幅と標準のコマンド ボタンの高さを使用します。 詳しくは、推奨されるサイズとスペースに関するページをご覧ください。
  • 各ウィンドウのコマンド ボタンの幅を同じにします。 それが現実的でない場合、テキスト ラベル付きのコマンド ボタンの幅の数を 2 つに制限します。
  • 別のコントロールがコマンド ボタンと相互運用する場合 ([参照] ボタン付きのテキスト ボックスなど)、コマンド ボタンを次の 3 つの場所のいずれかに配置して関係を示します。
    • 他のコントロールの右側に、上揃えで配置します。
    • 他のコントロールの下に、左揃えで配置します。
    • 相互運用するコントロール間を垂直方向に中央揃えにします (相互運用する 2 つのリスト ボックス間の [追加] ボタンと [削除] ボタンなど)。
  • 複数のコマンド ボタンが同じコントロールと相互に作用する場合、他のコントロールの右側に上揃えで垂直に積み重ねるか、コントロールの下に左揃えで水平に配置します。
  • コマンド ボタンが他のコントロールに従属する場合、上記の配置を使用し、上位のコントロールが選択されるまで従属コマンド ボタンを無効にします。
  • テキスト ラベル付きの狭い、短い、または高いコマンド ボタンは、プロフェッショナルに見えなくなる傾向があるため、使用しないでください。 既定の幅と高さを使用してみてください。

正しい: 既定のサイズの [OK] ボタンのスクリーンショット

この例では、ボタンのサイズは標準であり、プロフェッショナルに見えます。

正しくない: 短い OK ボタンのスクリーンショット

この例では、ボタンが小さすぎます。

正しくない: 大きな正方形の OK ボタンのスクリーンショット

この例では、ボタンのラベルの周囲にスペースが多すぎます。

  • コマンド ボタンでテキスト ラベルとグラフィックを組み合わせないようにしてください。 テキストとグラフィックを組み合わせると、通常は不要な視覚的な混乱が生じ、ユーザーの理解は向上しません。 グラフィックがコマンドの標準シンボルである場合や、ユーザーがコマンドの結果を視覚化する場合など、グラフィックが理解を助ける場合にのみ、テキストとグラフィックを組み合わせることを検討してください。 それ以外の場合は、テキストを優先しますが、テキストまたはグラフィックスを使用してください。

正しい: 曲線矢印を使用した回転コマンドのスクリーンショット

この例では、矢印グラフィックを使用すると、ユーザーはコマンドの結果を可視化できます。

正しい: アイコンとテキストを含むアドレス バーのスクリーンショット

この例では、理解を助けるために標準的な記号がテキストと組み合わされています。

正しくない: x アイコンとキャンセルが表示されたボタンのスクリーンショット

この例では、キャンセル グラフィックはテキストに何も追加しません。

  • コマンド ボタンを使用して状態を設定しないでください。 代わりに、ラジオ ボタンまたはチェック ボックスを使用します。 コマンド ボタンは、アクションを開始するためにのみ使用してください。

分割ボタン

  • 最も可能性の高いコマンドを既定の動作にします。 複数のコマンドが存在する可能性がある場合、追加情報を必要としないコマンドを選択してください。
  • 最も可能性の高いコマンドが最後のユーザー選択である場合、ボタン ラベルを最後の選択に変更します。
  • メニューに太字のテキストを使用して、既定のコマンドを表示します。 こうすることで、特に既定のコマンドが動的である場合や、分割ボタンでテキスト ラベルではなくグラフィックが使用されている場合に、ユーザーが既定のコマンドを見つけやすくなります。

既定の値

  • すべてのダイアログ ボックスに既定のコマンド ボタンを含めます。 最も安全 (データの損失やシステム アクセスを防ぐため) かつ最もセキュアなコマンドを既定値として選択します。 安全性とセキュリティが要因でない場合、最も可能性の高いコマンドや便利なコマンドを選択します。
  • コマンドを元に戻す簡単な方法がない限り、破壊的なアクションを既定のコマンド ボタンにしないでください。

ボタンの寸法 (ピクセルと DLU) の図

コマンド ボタンの推奨サイズと間隔。

Labels

  • すべてのコマンド ボタンにラベルを付けます。

  • ボタンにグラフィック ラベルのみ存在する場合、その Name プロパティを適切なテキスト ラベルに割り当てます。 これにより、スクリーン リーダーなどのアシスト テクノロジ製品が、グラフィックに関する代替情報をユーザーに提供できるようになります。

    上ボタン、下ボタン、コピー ボタンのスクリーンショット

    この例ではグラフィック ボタンを示しています。内部的には、これらのボタンには "前へ"、"次へ"、"コピー" というラベルが付けられています。

  • 短い参照ボタン ("..." というラベル) の場合、内部ラベルは [参照] にする必要があります。

  • 一意のアクセス キーを割り当てます。 ガイドラインについては、「キーボード」をご覧ください。

    例外:

    • Enter は既定のボタン (通常は [OK] ボタン) のアクセス キーであり、Esc は [キャンセル] のアクセス キーであるため、[OK] ボタンと [キャンセル] ボタンにアクセス キーを割り当てないでください。 そうすることで、他のアクセス キーを割り当てやすくなります。
    • アクセス キーは一意に割り当てることができないため、短い参照ボタン ("..." というラベルが付いている) には割り当てないでください。
  • 汎用的なラベルよりも具体的なものを優先します。 ユーザーがラベルを理解するために他に何も読む必要がないことが理想です。 ユーザーは静的テキストよりもコマンド ボタンのラベルをはるかに読む傾向にあります。

    • 例外: キャンセルの意味が明確な場合、[キャンセル] ボタンの名前を変更しないでください。 ユーザーがすべてのボタンを読まなくても、アクションをキャンセルするボタンを判断できるようにしてください。 ただし、保留中のアクションが複数ある場合など、キャンセルされるアクションが不明な場合、"キャンセル" の名前を変更してください。

    許容可能:

    [OK] ボタンと [キャンセル] ボタンを示すスクリーンショット。

    この例では、[OK] と [キャンセル] は許容されますが、具体的ではないラベルです。

    良い:

    CD への書き込みとキャンセル ボタンのスクリーンショット

    この例では、CD への書き込みは OK よりも具体的です。

    誤った例:

    CD への書き込みボタンと CD に書き込まないボタンのスクリーンショット

    この例では、"CD に書き込まない" の代わりに "キャンセル" を使用する必要があります。

  • ラベルは命令形の動詞で始め、ボタンが実行するアクションを明確に説明します。 末尾に句点を付けないでください。

    • 例外: "詳細"、"戻る"、"詳細"、"進む"、"減らす"、"その他"、"新規"、"次へ"、"いいえ"、"OK"、"オプション"、"前へ"、"プロパティ"、"設定、"はい" などの標準ラベルは、動詞なしでも使用できます。
  • 短いラベルが推奨されますが、コマンドを十分に説明できる量のテキストを使用してください。 文脈から目的語が明らかでない場合は、直接目的語 (動詞の後の名詞) を使用します。 ユーザーがラベルを理解するために他に何も読む必要がないことが理想です。

    許容可能:

    追加ラベルのあるボタンのスクリーンショット

    この例では、文脈における意味がすぐにわかる場合は、短いラベルでも許容されます。

    良い: ("追加" が明確でない場合)

    項目ラベルを追加するボタンのスクリーンショット

    この例では、動詞に名詞を追加すると、ユーザーが理解しやすくなります。

    最良: ("追加" または "項目の追加" が明確でない場合)

    選択した項目の追加が表示されたボタンのスクリーンショット

    この例では、ラベルは自明です。

  • 文スタイルの大文字を使用します。 そうすることで、Windows トーンWindows トーンと、コマンド ボタンの短いフレーズの使用がより適切になります。

  • コマンドの即時性が当然とみなされるため、コマンド ボタンのラベルでは "今すぐ" を使用しないでください。

    • 例外: 必要に応じて、"今すぐ" を使用して、タスクを開始するコマンドと、タスクをすぐに実行するコマンドを区別してください。

    ダウンロード ラベルのあるボタンのスクリーンショット

    この例では、コマンド ボタンをクリックすると、ユーザーがダウンロードできるウィンドウまたはページに移動します。

    今すぐダウンロード ラベルのあるボタンのスクリーンショット

    この例では、コマンド ボタンをクリックするとダウンロードが実行されます。

    ここでラベルを付ける必要があるのは、タスク フロー内の 1 つのコマンドだけです。 したがって、たとえば、[今すぐダウンロード] コマンドの後に別の [今すぐダウンロード] コマンドを続けることはできません。

  • 実行されないアクションを意味する場合は、コマンド ボタンのラベルで "後で" を使用しないでください。 たとえば、後でインストールするコマンドでない限り、"後でインストール" ("今すぐインストール" ではなく) は使用しないでください。 代わりに、[インストールしない] または [キャンセル] を使用してください。

    誤った例:

    [今すぐ再起動] と [後で再起動] のスクリーンショット

    この例では、[後で再起動] は、コマンドが後で自動的に再起動を行うと、誤った意味を伝えています。

  • 上級ユーザーに関連するオプション、または上級ユーザーの知識を必要とするオプションにのみ、[詳細] ボタンを使用してください。 技術的に高度と見なされる機能には、[詳細] ボタンを使用しないでください。 たとえば、プリンターのホチキス止め機能は高度なオプションではありませんが、その色管理システムは高度です。

    正しくない: (オプションが実際には高度でない場合)

    詳細ラベルのあるボタンのスクリーンショット

    この例では、[詳細] は誤解を招きます。

    正しい例:

    その他のオプション ラベルを含むボタンのスクリーンショット

    この例では、ラベルはより具体的で正確です。

  • 他のウィンドウを開くコマンド ボタンの場合は、セカンダリ ウィンドウのタイトル バー テキストの一部またはすべてを使用するラベルを選択します。 たとえば、[参照] というラベルのコマンド ボタンで、[フォルダーの参照] というダイアログ ボックスが開く場合があります。 タスク全体で同じ用語を使用すると、ユーザーの理解が深まります。

  • 質問するときは、質問に一致するラベルを使用してください。 [OK] または [キャンセル] を使用して、[はい] または [いいえ] の質問に回答しないでください。

    正しい例:

    [はい] ボタンと [いいえ] ボタンのスクリーンショット

    この例では、ボタンによって質問に答えています。

    誤った例:

    [OK] ボタンと [キャンセル] ボタンのスクリーンショット

    この例では、ボタンにより質問に答えていません。

  • コマンドの実行に追加情報が必要な場合、省略記号でラベルを終了します。

    • 例外: グラフィック ラベルは省略記号を使用しません。

    正しい: ([印刷オプション] ダイアログボックスが表示されている場合)

    省略記号付きの印刷ボタンのスクリーンショット

    この例では、ボタンをクリックすると、印刷オプション ダイアログが表示され、ユーザーにさらに情報を要求します。

  • アクションが正常に完了して別のウィンドウが表示されるだけの場合は、省略記号を使用しないでください。 [バージョン情報]、[詳細]、[オプション]、[プロパティ]、[ヘルプ] では、省略記号は使用されません。

    誤った例:

    省略記号付きのオプション ボタンのスクリーンショット

    この例では、ボタンをクリックすると [オプション] ダイアログが表示されますが、ユーザーに詳細情報は求められません。

  • あいまいな場合 (たとえば、コマンド ラベルに動詞がない場合)、最も可能性の高いユーザー アクションに基づいて決定します。 単にウィンドウを表示することが一般的なアクションである場合、省略記号を使用しないでください。

    正しい例:

    その他の色...

    バージョン情報

    最初の例では、ユーザーは色を選択する可能性が高いため、省略記号を使用するのが適切です。 2 番目の例では、ユーザーはバージョン情報を表示する可能性が高いため、省略記号は不要です。

  • 参照ボタンについては、ウィンドウ内に参照ボタンが 2 つ以上ある場合は、短い参照ボタン (ラベルは "...") を使用します。 グリッド内に参照ボタンを表示する場合は、常に短縮バージョンを使用してください。

  • 方向ボタンの場合は、1 つの山かっこを使用し、アクションが実行される方向を指すようにします。

次の表に、一般的なコマンド ボタン ラベルとその使用法を示します。

ボタン ラベル 意味 アクセス キー
戻る
ウィザードとタスク フローで、前のページに移動します。
'B'
参照...
ファイルまたはオブジェクトを検索するためのダイアログ ボックスを表示します。
"B" または "r"
[オプション]
ユーザーがプログラムをカスタマイズするために使用できる選択肢を表示します。
"O"
[一時停止]
進行中のダイアログ ボックスで、タスクを中断します。
"P"
パーソナライズ
ユーザーがプログラムを個人的に認識するために重要なコア エクスペリエンスをカスタマイズします。
"P"
ユーザー設定
使用しないでください。 代わりにオプションを使用してください。
該当なし。
プロパティ
オブジェクトの属性と設定を表示します。
"P" または最初の "r"
および
設定のグループを保存するか、現在の名前を使用してファイルまたはオブジェクトを保存します。
"S"
名前を付けて保存...
指定した名前を使用してファイルまたはオブジェクトを保存します。
2 番目の "a"
Settings
使用しないでください。 代わりにオプションを使用してください。
該当なし。
[トラブルシューティング]
使用しないでください。 代わりに、特定のヘルプ リンクを使用してください。
該当なし。

コミット ボタンのラベル (OK、キャンセル、はい/いいえ、閉じる、停止、適用、次へ、終了、完了) に関するガイドラインについては、「ユーザー インターフェイス テキスト」をご覧ください。

ドキュメント

コマンド ボタンを参照する場合:

  • 大文字と小文字を含む正確なラベル テキストを使用しますが、アクセス キーの下線や省略記号は含めないでください。 単語ボタンは含めないでください。
  • ユーザーの操作を説明するには、クリックを使用します。
  • 可能な場合は、太字のテキストを使用してラベルを書式設定してください。 それ以外の場合、混乱を防ぐため、必要な場合にのみラベルを引用符で囲みます。

例: [印刷] をクリックしてドキュメントを印刷します。