Share via


Windows 7 のコマンド ボタン

注意

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

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

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

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

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

注意

レイアウトに関連するガイドラインは、別の記事で示されています。

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

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

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

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

    • ユーザーは、意思決定を行う前に、選択肢を操作する必要があります (追加情報を表示する場合があります)。

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

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

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

      不正解:コマンド ボタンを含むメッセージのスクリーン ショット

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

設計概念

省略記号の使用

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

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

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

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

これに対し、この例では、[印刷] コマンドは、ユーザーの操作を行わずに、ドキュメントの 1 つのコピーを既定のプリンターに出力します。

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

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

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

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

1 つだけ行う場合... コマンド ボタンが実行するアクションを明確に記述する簡潔で具体的な説明ラベルを使用し、必要に応じて省略記号を使用します。

使用パターン

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

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

ボタンをクリックすると、ラベルが変わり、次のクリックが逆の効果を示します。
'less' と左矢印を含むボタンのスクリーン ショット
詳細と例については、「 プログレッシブ開示コントロール」を参照してください。
方向ボタン 方向ボタンを使用して、アクションが実行される方向を示します。
この場合、二重シェブロンの代わりに 1 つの山かっこが使用されます。
左右の矢印ボタンのスクリーン ショット
方向ボタンは、アクションの方向を示します。

ガイドライン

全般

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

Correct:default-size ok ボタンのスクリーン ショット

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

不正解:短い [OK] ボタンのスクリーン ショット

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

不正解:大きい正方形の [OK] ボタンのスクリーン ショット

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

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

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

この例では、矢印グラフィックは、ユーザーがコマンドの結果を視覚化するのに役立ちます。

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

この例では、標準記号をテキストと組み合わせて理解を深めます

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

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

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

分割ボタン

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

既定値

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

ボタンの寸法をピクセル単位と dlus 単位で示す図

コマンド ボタンに推奨されるサイズ設定と間隔。

ラベル

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

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

    ボタンのアップ、ダウン、コピーのスクリーン ショット

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

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

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

    例外:

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

    • 例外: キャンセルの意味が明確な場合は、[キャンセル] ボタンの名前を変更しないでください。 ユーザーは、アクションをキャンセルするボタンを決定するために、すべてのボタンを読み取る必要はありません。 ただし、保留中のアクションが複数ある場合など、取り消されるアクションが不明な場合は、Cancel の名前を変更します。

    普通:

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

    この例では、[OK] と [キャンセル] は許容されますが、ラベルは指定されていません。

    より適切な例:

    バーン CD とキャンセル ボタンのスクリーン ショット

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

    正しくない:

    cd を書き込み、cd ボタンを書き込まないスクリーン ショット

    この例では、CD を書き込まない代わりに Cancel を使用する必要があります。

  • 命令型動詞でラベルを開始し、ボタンが実行するアクションを明確に記述します。 末尾に句点を付けません。

    • 例外: [詳細設定]、[戻る]、[詳細]、[進む]、[小さい]、[その他]、[新規]、[次へ]、[いいえ]、[OK]、[オプション]、[前へ]、[プロパティ]、[設定]、[はい] の各標準ラベルを使用できます。
  • 短いラベルを使用することをお勧めしますが、コマンドを十分に説明するのに十分なテキストを使用してください。 オブジェクトがコンテキストから明らかでない場合は、直接オブジェクト (動詞の後に名詞) を使用します。 ラベルを理解するために、ユーザーが他の情報を読む必要がないのが理想的です。

    普通:

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

    この例では、コンテキストでの意味が容易に明らかであれば、短いラベルを使用できます。

    より良い: (Add が明確でない場合)

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

    この例では、動詞に名詞を追加すると、ユーザーの理解に役立ちます。

    ベスト: (項目の追加または追加が明確でない場合)

    選択した項目を追加するボタンのスクリーン ショット

    この例では、ラベルはわかりやすいものです。

  • 文形式の大文字を使用します。 これは、Windows トーンの Windows トーンと、コマンド ボタンに短いフレーズを使用する場合に適しています。

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

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

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

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

    [今すぐダウンロード] ラベルが付いたボタンのスクリーン ショット

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

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

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

    正しくない:

    今すぐ再起動し、後で再起動のスクリーンショット

    この例では、[後で再起動] は、後でコマンドが自動的に再起動することを誤って意味します。

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

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

    高度なラベルを持つボタンのスクリーン ショット

    この例では、Advanced は誤解を招くものです。

    正確:

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

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

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

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

    正確:

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

    この例では、ボタンが質問に答えます。

    正しくない:

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

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

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

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

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

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

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

  • アクションの正常な完了が単に別のウィンドウを表示する場合は、省略記号を使用しないでください。 次のコマンドは省略記号を使用しません: About、Advanced、Options、Properties、Help。

    正しくない:

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

    この例では、ボタンをクリックした後、[オプション] ダイアログが表示されますが、ユーザーからの詳細情報は必要ありません。

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

    正確:

    その他の色...

    バージョン情報

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

  • 参照ボタンの場合は、ウィンドウに複数の参照ボタンがある場合は、短い参照ボタン ("..."" というラベル) を使用します。 グリッドに参照ボタンを表示する場合は、常に短いバージョンを使用します。

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

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

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

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

ドキュメント

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

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

例: [ 印刷 ] をクリックして文書を印刷します。