Windows 7 ツールバー

[アーティクル]
06/13/2023

注意

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

ツールバーは、効率的なアクセスのためにコマンドをグループ化する方法です。

要素にラベルが付いた 2 つのツールバーのスクリーンショット

いくつかの一般的なツールバー。

メニューバーの代わりに、またはの代わりにツールバーを使用します。 ツールバーは直接 (マウスクリックで表示される代わりに常に表示されます)、(追加の入力を必要とするのではなく) 即時に表示され、最も頻繁に使用されるコマンド (包括的なリストの代わりに) が含まれているため、メニューバーよりも効率的です。メニューバーとは対照的に、ツールバーは、簡単で便利で効率的な、包括的または自明である必要はありません。

一部のツールバーはカスタマイズ可能で、ユーザーはツールバーを追加または削除したり、サイズや場所を変更したり、コンテンツを変更したりできます。一部の種類のツールバーをドッキング解除すると、パレットウィンドウが表示されます。ツールバーの種類の詳細については、この記事の「使用パターン」を参照してください。

注意

メニュー、コマンドボタン、アイコンに関連するガイドラインは、別の記事で示されています。

これは適切なユーザーインターフェイスですか?

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

ウィンドウはプライマリウィンドウですか? ツールバーはプライマリウィンドウでは適切に機能しますが、通常はセカンダリウィンドウでは圧倒的です。セカンダリウィンドウの場合は、代わりにコマンドボタン、メニューボタン、およびリンクを使用します。
頻繁に使用されるコマンドの数は少ないですか? ツールバーはメニューバーほど多くのコマンドを処理できないため、頻繁に使用される少数のコマンドに効率的にアクセスする方法として最適です。
ほとんどのコマンドは即時ですか? つまり、主に追加の入力を必要としないコマンドですか? ツールバーを効率的にするには、直接的かつ即時の操作性が必要です。そうでない場合は、追加の入力を必要とするコマンドにメニューバーが適しています。
ほとんどのコマンドを直接表示できますか? つまり、ユーザーは 1 回のクリックで操作しますか? 一部のコマンドはメニューボタンを使用して表示できますが、この方法でほとんどのコマンドを表示すると、ツールバーの効率が低下し、メニューバーがより適切に選択されます。
コマンドはアイコンで十分に表されていますか? ツールバーボタンは通常、テキストラベルではなくアイコンで表されます (ただし、一部のツールバーボタンでは両方が使用されますが)、メニューコマンドはテキストで表されます。コマンドアイコンが高品質でなくても、わかりやすい場合は、メニューバーを選択することをお勧めします。

プログラムにメニューバーのないツールバーがあり、ほとんどのコマンドにメニューボタンと分割ボタンを使用して間接的にアクセスできる場合、このツールバーは基本的にメニューバーです。代わりに、[メニュー ] ガイドラインでツールバーメニューパターンを適用します。

設計概念

適切なメニューバーは、使用可能なすべての最上位レベルのコマンドの包括的なカタログですが、優れたツールバーを使用すると、頻繁に使用されるコマンドにすばやく簡単にアクセスできます。ツールバーは、ユーザーの生産性を高めるだけのトレーニングを試みるわけではありません。ユーザーがツールバーのコマンドにアクセスする方法を学習すると、メニューバーからコマンドにアクセスし続ける可能性はほとんどありません。このような理由から、プログラムのメニューバーとそのツールバーは直接対応する必要はありません。

従来、ツールバーは次の方法でメニューバーとは異なります。

周波数。 ツールバーには最も頻繁に使用されるコマンドのみが表示されますが、メニューバーはプログラム内で使用可能なすべての最上位レベルのコマンドをカタログ化します。
即時。 ツールバーコマンドをクリックするとすぐに有効になりますが、メニューコマンドでは追加の入力が必要になる場合があります。たとえば、メニューバーの [印刷] コマンドでは最初に [印刷] ダイアログが表示されますが、[印刷] ツールバーボタンは文書の 1 つのコピーを既定のプリンターに直ちに印刷します。

この例では、[印刷] ツールバーボタンをクリックすると、文書の 1 つのコピーが既定のプリンターにすぐに印刷されます。
率直。 ツールバーコマンドは 1 回のクリックで呼び出されますが、メニューバーコマンドではメニュー内を移動する必要があります。
数値と密度。 ツールバーに必要な画面領域は、そのコマンドの数に比例し、コマンドが存在しない場合でも、その領域は常に使用されます。そのため、ツールバーはスペースを効率的に使用する必要があります。一方、メニューバーのコマンドは通常、ビューから非表示になり、その階層構造では任意の数のコマンドを使用できます。
サイズとプレゼンテーション。 多くのコマンドを小さなスペースにパックするために、ツールバーでは通常、アイコンベースのコマンド (ツールヒントベースのラベル付き) が使用されますが、メニューバーではテキストベースのコマンド (オプションのアイコン付き) が使用されます。ツールバーボタンには標準のテキストラベルを付けることができますが、スペースが大幅に増えます。

ラベル付きツールバーボタンには、ラベルのないボタンの 3 倍以上のスペースが必要です。
名前のとおりです。 適切に設計されたツールバーには、ユーザーがツールヒントを使用するだけでコマンドを効率的に見つけることができないため、主にわかりやすいアイコンが必要です。ただし、使用頻度の低いコマンドが自明でない場合は、ツールバーは引き続き適切に機能します。

この例では、最も頻繁に使用されるアイコンはわかりやすいものです。
認識可能で区別可能。 頻繁に使用されるコマンドの場合、ユーザーは場所、図形、色などのツールバーボタン属性を覚えています。適切に設計されたツールバーを使用すると、ユーザーは正確なアイコン記号を覚えていない場合でも、コマンドをすばやく見つけることができます。これに対し、ユーザーは頻繁に使用されるメニューバーのコマンドの場所を覚えていますが、選択を行う場合はコマンドラベルに依存します。

ツールバーコマンドの場合、独特の場所、図形、色は、アイコンを認識しやすく区別するのに役立ちます。

メニューバーコマンドの場合、ユーザーは最終的にラベルに依存します。

効率性

その特性を考えると、ツールバーは主に効率のために設計する必要があります。非効率的なツールバーは意味をなさないだけです。

1 つだけ行う場合...

ツールバーが主に効率を高めるように設計されていることを確認します。頻繁に使用され、即時、直接、すばやく認識できるコマンドにツールバーをフォーカスします。

一般に、ツールバーはメニューバーと共に優れた機能を発揮します。優れたツールバーは効率を提供し、優れたメニューバーは包括的に機能します。 メニューバーとツールバーの両方を使用すると、それぞれが妥協することなくその長所に集中できます。

驚くべきことに、このモデルは単純なプログラムで分解されます。少数のコマンドのみを含むプログラムの場合、メニューバーとツールバーの両方を持つことは意味がありません。これは、メニューバーが冗長で非効率的なバージョンのツールバーになるためです。

この冗長性を排除するために、Windows Vista の多くの単純なプログラムでは、ツールバーを介してのみコマンドを提供し、既定ではメニューバーを非表示にすることに重点を置きます。このようなプログラムには、Windows エクスプローラー、Windows インターネットエクスプローラー、Windows メディアプレーヤー、Windows フォトギャラリーが含まれます。

これは小さな変更はありません。メニューバーを削除すると、ツールバーの性質が根本的に変わります。このようなツールバーは包括的で、次の方法で変更する必要があるためです。

周波数。 メニューバーを削除すると、使用の頻度に関係なく、ウィンドウまたはそのコンテキストメニューから直接使用できないすべてのコマンドにツールバーからアクセスできる必要があります。
即時。 メニューバーを削除すると、ツールバーはコマンドに対して表示される唯一のアクセスポイントになり、ツールバーには完全に機能するバージョンが必要です。たとえば、メニューバーがない場合、ツールバーの [印刷] コマンドでは、すぐに印刷するのではなく、[印刷] ダイアログボックスを表示する必要があります。 (この場合、分割ボタンを使用することは優れた妥協点ですが。標準の [印刷分割] ボタンについては、「標準メニューと分割ボタン」を参照してください)。

この例では、Windows フォトギャラリーの [印刷] ツールバーボタンに、[印刷] ダイアログボックスを表示する [印刷] コマンドがあります。
率直。 スペースを節約し、煩雑さを防ぐために、使用頻度の低いコマンドをメニューボタンに移動して、直接的なコマンドを減らします。

メニューバーを補完するために使用されるツールバーは、削除または非表示のメニューバーで使用するように設計されたツールバーとは異なる方法で設計されています。また、ユーザーが 1 つのコマンドを実行するために非表示のメニューバーを表示するとは想定できないため、メニューバーを非表示にする場合は、デザイン上の決定を行うときに完全に削除するのと同じように扱う必要があります。 (既定でメニューバーを非表示にした場合、ユーザーがメニューバーを表示してコマンドを見つけたり、表示方法を理解したりすることを想定しないでください)。

メニューバーなしで動作するようにツールバーを設計するには、多くの場合、いくつかの侵害が伴います。しかし、効率のために、あまり妥協しないでください。メニューバーを非表示にすると、ツールバーが非効率的になる場合は、メニューバーを非表示にしないでください。

キーボードのアクセシビリティ

キーボードからツールバーにアクセスすることは、メニューバーへのアクセスとは大きく異なります。ユーザーが Alt キーを押すと、メニューバーは入力フォーカスを受け取り、Esc キーを押すと入力フォーカスが失われます。メニューバーに入力フォーカスが設定されると、ウィンドウの残りの部分とは別に移動し、すべての方向キー、ホームキー、終了キー、タブキーを処理します。これに対し、ユーザーがウィンドウの内容全体を Tab キーを押すと、ツールバーは入力フォーカスを受け取ります。ツールバーはタブオーダーで最後に表示されるため、ビジーページでアクティブ化するにはかなりの労力が必要になる場合があります (Shift + Tab キーを押して後方に移動することがわかっている場合を除きます)。

アクセシビリティは、ここではジレンマを示します。ツールバーはマウスユーザーにとって簡単ですが、キーボードユーザーのアクセスは低くなります。これは、メニューバーとツールバーの両方がある場合は問題ありませんが、メニューバーが削除されているか非表示になっている場合です。

アクセシビリティ上の理由から、ツールバーを優先して完全に削除するのではなく、メニューバーを保持することをお勧めします。メニューバーを削除してから非表示にすることを選択する必要がある場合は、非表示にすることをお選びください。

使用パターン

ツールバーには、いくつかの使用パターンがあります。

使用法	例
プライマリツールバー非表示または削除されたメニューバーなしで動作するように設計されたツールバー。	主要ツールバーは、効率性の必要性と包括的さのバランスを取る必要があるため、単純なプログラムに最適です。 Windows エクスプローラーのプライマリツールバー。
補助ツールバーメニューバーを操作するように設計されたツールバー。	補助ツールバーは、妥協することなく効率に焦点を当てることができます。 Windows Movie Maker の補助ツールバー。
ツールバーメニューツールバーとして実装されたメニューバー。	ツールバーメニューは、主にメニューボタン内のコマンドと分割ボタンで構成されるツールバーであり、直接コマンドがある場合はごくわずかです。 Windows フォトギャラリーのツールバーメニュー。
カスタマイズ可能なツールバーユーザーがカスタマイズできるツールバー。	カスタマイズ可能なツールバーを使用すると、ユーザーはツールバーを追加または削除したり、サイズや場所を変更したり、コンテンツを変更したりできます。 Microsoft Visual Studio のカスタマイズ可能なツールバー。
パレットウィンドウコマンドの配列を表示するモードレスダイアログボックス。	パレットウィンドウはドッキングされていないツールバーです。 Windows ペイントのパレットウィンドウ。

ツールバーには、次のスタイルがあります。

スタイル	例
ラベル付けされていないアイコンラベル付けされていない小さなアイコンボタンの 1 つ以上の行。	ラベル付けするボタンが多すぎる場合や、プログラムが頻繁に使用される場合は、このスタイルを使用します。このスタイルでは、複雑な機能を持つプログラムは複数の行を持つ可能性があるため、カスタマイズする必要がある唯一のスタイルです。このスタイルでは、一部のコマンドボタンを頻繁に使用する場合にラベルを付けることができます。ワードパッドのラベルのないアイコンツールバー。
ラベル付けされていない大きなアイコンラベル付けされていない大きなアイコンボタンの 1 行。	このスタイルは、簡単に認識できるアイコンを持ち、通常は小さなウィンドウで実行される単純なユーティリティに使用します。 Windows Live Messengerと Windows 切り取りツールのラベル付けされていない大きなアイコンツールバー。
ラベル付きアイコン 1 行の小さなラベル付きアイコン。	コマンドが少ない場合、またはプログラムが頻繁に使用されない場合は、このスタイルを使用します。このスタイルには常に 1 つの行があります。 Windows エクスプローラーのラベル付きアイコンツールバー。
部分的なツールバー完全なツールバーが不要な場合にスペースを節約するために使用される小さなアイコンの部分的な行。	このスタイルは、ナビゲーションボタン、検索ボックス、またはタブを含むウィンドウに使用して、ウィンドウの上部にある不要な重みを排除します。部分的なツールバーは、ナビゲーションボタン、検索ボックス、またはタブと組み合わせることができます。
大きな部分ツールバー完全なツールバーが不要な場合に領域を節約するために使用される大きなアイコンの部分的な行。	このスタイルは、ウィンドウの上部に不要な重みを排除するために、ナビゲーションボタンまたは検索ボックスを持つ単純なユーティリティに使用します。 Windows Defenderの大きな部分ツールバー。

最後に、ツールバーコントロールにはいくつかの使用パターンがあります。

使用法	例
コマンドアイコンボタンコマンドボタンをクリックすると、すぐにアクションが開始されます。	Windows FAX とスキャンのアイコンコマンドボタンの例。
モードアイコンボタンモードボタンをクリックすると、選択したモードに入ります。	Windows ペイントのモードボタンの例。
プロパティアイコンボタンプロパティボタンの状態は、現在選択されているオブジェクトの状態 (存在する場合) を反映します。ボタンをクリックすると、選択したオブジェクトに変更が適用されます。	Microsoft Wordのプロパティボタンの例。
ラベルの付いたアイコンボタンアイコンとテキストラベルでラベル付けされたコマンドボタンまたはプロパティボタン。	これらのボタンは、アイコンが十分に説明できない頻繁に使用されるツールバーボタンに使用されます。また、各ボタンにテキストラベルを付けることができるボタンが少ないツールバーでも使用されます。最も頻繁に使用されるボタンのラベルが付いたツールバー。
メニューボタン関連するコマンドの小さなセットを表示するために使用されるコマンドボタン。	1 つの下向き三角形は、ボタンをクリックするとメニューが表示されることを示します。関連するコマンドの小さなセットを含むメニューボタン。
分割ボタンコマンドのバリエーションを統合するために使用されるコマンドボタン。特に、コマンドの 1 つがほとんどの場合に使用されます。	通常の状態の分割ボタン。メニューボタンと同様に、1 つの下向きの三角形は、ボタンの右端をクリックするとメニューが表示されることを示します。ドロップダウン分割ボタン。この例では、分割ボタンを使用して、印刷関連のすべてのコマンドを統合します。イミディエイト印刷コマンドはほとんどの場合使用されるため、ユーザーは通常、他のコマンドを表示する必要はありません。メニューボタンとは異なり、ボタンの左側をクリックすると、ラベルに対してアクションが直接実行されます。分割ボタンは、次のコマンドが最後のコマンドと同じである可能性が高い状況で有効です。この場合、ラベルは、カラーピッカーと同様に、最後のコマンドに変更されます。この例では、ラベルが最後のコマンドに変更されます。
ドロップダウンリストプロパティの表示または変更に使用されるドロップダウンリスト (編集可能または読み取り専用)。	この例では、ドロップダウンリストを使用してフォント属性を表示および設定します。ツールバーのドロップダウンリストには、現在選択されているオブジェクトの状態 (存在する場合) が反映されます。リストを変更すると、選択したオブジェクトの状態が変更されます。

ガイドライン

プレゼンテーション

コマンドの数とその使用方法に基づいて、適切なツールバースタイルを選択します。 選択方法については、前のツールバースタイルの表を参照してください。プログラム作業域からスペースを取りすぎているツールバー構成は使用しないでください。
コンテンツ領域のすぐ上、 メニューバーとアドレスバー (存在する場合) の下にツールバーを配置します。
容量が Premium の場合は、次の方法で領域を節約します。
- 既知のアイコンと使用頻度の低いコマンドのラベルを省略します。
- ウィンドウ幅全体ではなく、部分的なツールバーのみを使用します。
- メニューボタンまたは分割ボタンを使用した関連コマンドの統合。
- オーバーフローシェブロンを使用して、使用頻度の低いコマンドを表示する。
- 現在のコンテキストに適用される場合にのみコマンドを表示します。
Windows インターネットエクスプローラーツールバーでは、既知のアイコンのラベルを省略し、部分的なツールバーを使用し、使用頻度の低いコマンドにはオーバーフローシェブロンを使用することで、スペースを節約できます。
ラベル付けされていないアイコンのツールバーパターンの場合は、既定の構成を使用し、2 行以下のツールバーを使用します。 2 行を超える行が便利な場合は、ツールバーをカスタマイズできるようにします。 2 行を超える行から開始すると、ユーザーが圧倒され、プログラムの作業領域から領域が多すぎる可能性があります。

正しくない:

2 行を超えるツールバーを含む既定の構成では、視覚的に乱雑になります。
現在のコンテキストに適用されない個々のツールバーボタンを 削除する代わりに無効にします。これにより、ツールバーの内容が安定し、見つけやすくなります。
個々のツールバーボタンをクリックするとエラーが直接発生する場合は、個々のツールバーボタンを無効にします。 これを行うことは、直接的な感覚を維持するために必要です。
ラベル付けされていないアイコンのツールバーパターンの場合は、現在のコンテキストに適用されない場合は、ツールバー全体を削除します。 該当するモードでのみ表示します。

この例では、[デバッグ] ツールバーは、プログラムが実行されている場合にのみ表示されます。
ツールバーボタンを左揃えに表示します。 ヘルプアイコン (存在する場合) は右揃えです。

[ヘルプ] を除き、すべてのツールバーボタンは左揃えになります。

例外： Windows 7 スタイルのツールバーは、プログラム固有のコマンドを左揃えにしますが、オプション、表示、ヘルプなどの標準の既知のコマンドを右揃えにします。
ツールバーボタンのラベルを動的に変更しないでください。 これを行うことは混乱し、予期しないものです。ただし、アイコンを変更して現在の状態を反映させることができます。

この例では、アイコンが既定のコマンドを示すように変更されています。

コントロールとコマンド

最も頻繁に使用されるコマンドを優先します。
- プライマリツールバーの場合は、包括的なコマンドを指定します。 プライマリツールバーは、メニューバーほど包括的である必要はありませんが、他の場所では簡単に検出できないすべてのコマンドを提供する必要があります。プライマリツールバーには、次のコマンドを含める必要はありません。
  - UI 自体に直接存在するコマンド。
  - 通常、コマンドはコンテキストメニューからアクセスされます。
  - 切り取り、コピー、貼り付けなどの標準の既知のコマンド。
- 補助ツールバーの場合は、最も頻繁に使用されるコマンドを指定します。 メニューバーコマンドはツールバーコマンドのスーパーセットであるため、すべてを指定する必要はありません。すばやく便利なコマンドアクセスに集中し、残りの部分をスキップします。
直接コントロールを優先します。 ツールバーボタンは、次の順序で使用します。
- アイコンボタン。 ダイレクトとは最小限のスペースを取ります。
- ラベル付きアイコンボタン。 ダイレクトですが、より多くの領域が必要です。
- [分割] ボタン。 最も一般的なコマンドを直接指定しますが、コマンドのバリエーションを処理します。
- メニューボタン。 間接ですが、多くのコマンドが表示されます。
即時コマンドを優先します。 柔軟性を高めるため、即時または追加の入力が可能なコマンドの場合:
- プライマリツールバーの場合は、柔軟なバージョンのコマンド (Print...など) を使用します。
- 補助ツールバーの場合は、ツールバーのイミディエイトバージョン (印刷など) を使用し、メニューバー (Print...など) で柔軟なバージョンを使用します。
頻繁に使用されるコマンドのラベルを指定 します。特に、アイコンが既知のアイコンでない場合は。

普通：

より適切な例:

Windows FAX とスキャンツールバーにはいくつかのコマンドがあるため、バージョンが良いほど最も重要なラベルが付けられます。
ツールバーのメニューにも直接表示されるコマンドは配置しないでください。

正しくない:

この例では、[印刷] はツールバーに直接表示されるため、メニューに表示する必要はありません。

組織と注文

ツールバー内のコマンドを関連するグループに整理します。
最も頻繁に使用されるグループを最初に配置します。グループ内で、コマンドを論理的な順序で配置します。 全体として、最も頻繁に使用されるコマンドを最初に表示しながら、コマンドを見つけやすくするための論理フローが必要です。これは、特にオーバーフローがある場合に最も効率的です。
グループ間のコマンドが弱く結合されている場合にのみ、グループ区切りを使用します。 これにより、グループ化が明確になり、コマンドが見つけやすくなります。

Windows メールのグループ化されたツールバーの例。
頻繁に使用されるコマンドの横に破壊的コマンドを配置しないでください。 分離を取得するには、順序またはグループ化を使用します。また、ツールバーに破壊的コマンドを配置するのではなく、代わりにメニューバーまたはコンテキストメニューにのみ配置することを検討してください。

普通：

より適切な例:

より適切な例では、Delete コマンドは Print から物理的に分離されています。
オーバーフローシェブロンを使用して、すべてのコマンドを表示できないことを示します。 ただし、オーバーフローは、すべてのコマンドを表示するのに十分なスペースがない場合にのみ使用してください。

正しくない:

オーバーフローシェブロンは、すべてのコマンドが表示されるわけではないことを示しますが、より多くのコマンドのレイアウトが優れている可能性があります。
最も頻繁に使用されるコマンドに、小さなウィンドウサイズでツールバーから (オーバーフローではなく) 直接アクセスできることを確認します。 必要に応じて、コマンドの順序を変更したり、使用頻度の低いコマンドをメニューボタンや分割ボタンに移動したり、ツールバーから完全に削除したりできます。問題が解決しない場合は、選択したツールバーのスタイルを再検討してください。

一般に、ツールバーはメニューバーと共に優れた機能を備えています。両方を使用すると、それぞれが妥協することなく長所に集中できるためです。

ツールバーのデザインでメニューバーが冗長になる場合は、既定でメニューバーを非表示にします。
メニューバーはキーボードユーザーがアクセスしやすくなるため、メニューバーを完全に削除する代わりに非表示にします。
メニューバーを復元するには、[表示] (プライマリツールバーの場合) または [ツール] (セカンダリツールバーの場合) メニューカテゴリにメニューバーのチェックマークオプションを指定します。詳細については、「標準メニューと分割ボタン」を参照してください。
ユーザーが Alt キーを押したときにメニューバーを表示し、最初のメニューカテゴリに入力フォーカスを設定します。

相互作用

ホバー時にボタンアフォーダンスを表示して、アイコンがクリック可能であることを示します。ツールヒントがタイムアウトしたら、ヒントまたはヒントを表示します。

この例では、さまざまな表示状態を示します。
左側のシングルクリックで次の手順を実行します。
- コマンドボタンの場合は、通常どおりコントロールと対話します。
- モードボタンの場合は、現在選択されているモードを反映するようにコントロールを表示します。モードがマウス操作の動作に影響する場合は、ポインターも変更します。
  
  この例では、マウス操作モードを示すようにポインターが変更されています。
- プロパティボタンとドロップダウンリストの場合は、現在選択されているオブジェクトの状態 (存在する場合) を反映するようにコントロールを表示します。操作時に、コントロールの状態を更新し、選択したオブジェクトに変更を適用します。何も選択されない場合は、何も行わないでください。
左ダブルクリックで、左クリックと同じ操作を実行します。
- 例外： まれに、ツールバーコマンドをより効率的にモーダルで使用できます。このような場合は、ダブルクリックしてモードを切り替えます。
  
  この例では、[書式のコピー/貼り付け] コマンドをダブルクリックすると、後続のすべてのクリックで書式が適用されるモードになります。ユーザーは、左クリックでモードを終了できます。
右クリック時:
- カスタマイズ可能なツールバーの場合は、ツールバーをカスタマイズするためのコンテキストメニューを表示します。マウスを上にしてではなく、マウスを下に右クリックしてメニューを表示します。
- その他のツールバーの場合は、何も行わないでください。

アイコン

ドロップダウンリストを除くすべてのツールバーコントロールのアイコンを指定します。

ドロップダウンリストにはアイコンは必要ありませんが、他のすべてのツールバーコントロールはアイコンを必要とします。

例外： Windows 7 スタイルのツールバーでは、アイコンがよく知られているコマンドにのみアイコンが使用されます。それ以外の場合は、アイコンのないテキストラベルを使用します。これにより、ラベルの明確さが向上しますが、より多くの領域が必要になります。
ツールバーアイコンがツールバーの背景色に対して明確に表示されていることを確認します。 コンテキストおよびハイコントラストモードでは、常にツールバーアイコンを評価します。
特に最も頻繁に使用されるコマンドでは、目的を明確に伝えるアイコンデザインを選択します。 適切に設計されたツールバーには、ユーザーがツールヒントを使用してコマンドを効率的に見つけることができないため、わかりやすいアイコンが必要です。ただし、使用頻度の低いいくつかのコマンドのアイコンがわかりやすい場合は、ツールバーは引き続き適切に機能します。
特に最も頻繁に使用されるコマンドでは、認識可能で識別可能なアイコンを選択します。 アイコンに独特の形と色があることを確認します。これにより、アイコン記号を覚えていない場合でも、ユーザーはコマンドをすばやく見つけることができます。
ツールバーアイコンが Aero スタイルのアイコンガイドラインに準拠していることを確認します。

詳細と例については、「アイコン」を参照してください。

ツールバーでメニューボタンと分割ボタンを使用している場合は、可能な限り、次の標準メニュー構造とその関連コマンドを使用してみてください。メニューバーとは異なり、ツールバーコマンドはアクセスキーを受け取りません。

プライマリツールバー

これらのコマンドは、標準のメニューバーにあるコマンドをミラーするため、プライマリツールバーにのみ使用する必要があります。この一覧には、ボタンのラベル (および型) と、順序と区切り記号、ショートカットキー、省略記号が表示されます。 メニューバーの表示と非表示を切り替えるコマンドは、[表示] メニューにあります。

ファイル NewCtrl + N
開く。。。Ctrl + O
閉じる
<separator>
SaveCtrl + S
名前を付けて保存...
<separator>
送信先
<separator>
印刷。。。Ctrl + P
印刷プレビュー
ページ設定
<separator>
ExitAlt + F4 (通常はショートカットは指定されません)

Edit(menu button) UndoCtrl + Z
RedoCtrl+Y
<separator>
CutCtrl + X
CopyCtrl + C
PasteCtrl + V
<separator>
[すべて選択][Ctrl+ A]
<separator>
DeleteDel(ショートカットは通常指定されません)
名前の変更...
<separator>
見つける。。。Ctrl + F
nextF3 を検索する (通常は指定しないコマンド)
置き換える。。。Ctrl + H
行きます。。。Ctrl + G

印刷(分割ボタン) 印刷。。。Ctrl + P
印刷プレビュー
ページ設定

表示(メニューボタン)メニューバー (表示されている場合チェック)
詳細ウィンドウ (表示されている場合チェック)
プレビューウィンドウ (表示されている場合チェック)
ステータスバー (表示されている場合チェック)

Zoom
Zoom inCtrl++
ズームアウトCtrl+-

テキストサイズ (選択した設定に行頭文字が含まれます)

最大
Larger
Medium
小
最小

全画面表示F11
RefreshF5

ツール(メニューボタン) ...

オプション ヘルプ (分割ボタン、ヘルプアイコンを使用) <program name> helpF1

<program name> のバージョン情報

補助ツールバー

これらのコマンドは、標準のメニューバーを補完します。この一覧には、ボタンのラベル (および型) と、順序と区切り記号、ショートカットキー、省略記号が表示されます。 メニューバーの表示と非表示を切り替えるコマンドは、[ツール] メニューにあります。

補助ツールバーのカテゴリ名は、より包括的である必要があるため、標準のメニューカテゴリ名とは異なります。たとえば、編集に関連しないコマンドが含まれているため、[整理] カテゴリは [編集] の代わりに使用されます。 メニューバーとツールバーの間の一貫性を維持するには、誤解を招くような場合は、標準のメニューカテゴリ名を使用します。

正しくない:

異なるコマンドに対して同じオプションのスクリーンショット

この例では、標準の [編集] メニューコマンドがあるため、一貫性を保つには [整理] の代わりに [編集] を使用する必要があります。

パレットウィンドウ

パレットウィンドウでは、短いタイトルバーを使用して画面領域を最小限に抑えます。 タイトルバーに [閉じる] ボタンを配置します。
タイトルバーのテキストを、パレットウィンドウを表示したコマンドに設定します。
句読点を終了せずに文形式の大文字を使用します。
ウィンドウ管理コマンドのコンテキストメニューを指定します。 ユーザーがタイトルバーを右クリックすると、このコンテキストメニューが表示されます。

この例では、ユーザーはタイトルバーを右クリックしてコンテキストメニューを表示できます。
可能で便利な場合は、パレットウィンドウのサイズを変更できるようにします。 ウィンドウフレーム上でサイズ変更ポインターを使用して、ウィンドウのサイズを変更可能であることを示します。
パレットウィンドウが再表示されたら、最後にアクセスした状態と同じ状態を使用してパレットウィンドウを表示します。 閉じるときは、ウィンドウのサイズと場所を保存します。再表示するときは、保存したウィンドウのサイズと場所を復元します。また、これらの属性をユーザーごとにプログラムインスタンス間で永続的にすることを検討してください。

カスタマイズ

2 つ以上の行で構成されるツールバーのカスタマイズを提供します。 カスタマイズが必要なのは、ラベルのないアイコンスタイルのみです。コマンドが少ないシンプルなツールバーでは、カスタマイズは必要ありません。
適切な既定の構成を指定します。 ユーザーは、一般的なシナリオに合わせてツールバーをカスタマイズする必要はありません。ユーザーが不適切な初期構成から抜け出す方法をカスタマイズすることに依存しないでください。ほとんどのユーザーがツールバーをカスタマイズしないとします。
コンテキストメニューに次のコマンドを指定します。
- 使用可能なツールバーを表示するチェックボックスの一覧
- ツールバーのロック/ロック解除
- カスタマイズ...
カスタマイズ可能なツールバーを既定でロックして、誤った変更を防ぎます。
[カスタマイズ] コマンドでは、表示する ツールバーと各ツールバーのコマンドを選択する機能を提供するオプションダイアログボックスを表示します。

この例では、Visual Studio のツールバーをカスタマイズするためのオプションダイアログボックスが用意されています。
[オプションのカスタマイズ] ダイアログボックスで元のツールバー構成に戻る [リセット] コマンドを指定します。
次の方法でドラッグアンドドロップを使用してツールバーをカスタマイズする機能を提供します。
- ツールバーの順序と位置を設定します。
- ツールバーの長さを設定し、小さすぎて内容をオーバーフローシェブロンで表示するにはツールバーを表示します。
- サポートされている場合は、ツールバーをドッキング解除してパレットウィンドウになり、その逆も同様です。
[オプションのカスタマイズ] ダイアログボックスが表示されたら、次の手順を実行します。
- ツールバーの内容を設定します。
- ツールバーの内容の順序を設定します。
これにより、ユーザーはより直接的かつ効率的に変更を行うことができます。
すべてのツールバーのカスタマイズをユーザー 単位で保存します。

省略記号の使用

ツールバーコマンドは即時アクションに使用されますが、アクションを実行するためにさらに多くの情報が必要な場合があります。省略記号を使用して、コマンドが有効になる前に詳細情報が必要であることを示します。省略記号をヒントとラベルの末尾に配置します (存在する場合)。

省略記号付きの印刷ヒントテキストのスクリーンショット

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

ただし、コマンドをすぐに有効にできない場合は、省略記号は必要ありません。そのため、たとえば、コマンドをすぐに有効にできないため、追加の情報が必要な場合でも、共有設定には省略記号はありません。

ツールバー、コマンド、ツールヒントのスクリーンショット

[共有設定] コマンドは省略記号を持ちません。すぐには有効にできないためです。

ツールバーは常に表示され、スペースは Premium であるため、 省略記号は頻繁に使用しないでください。

注意

ツールバーに表示されるメニューの場合は、メニューの省略記号のガイドラインを適用します。

推奨されるサイズ設定と間隔

間隔情報を含むツールバーのスクリーンショット

標準ツールバーの推奨サイズ設定と間隔。

ラベル

全般

文章スタイルで大文字と小文字を使い分けます。
- 例外： レガシアプリケーションの場合は、必要に応じてタイトルスタイルの大文字と小文字を使用して、大文字と小文字が混在しないようにすることができます。

ラベル付けされていないアイコンボタン

ツールヒントを使用してコマンドにラベルを付けます。 ツールヒントテキストには、ボタンにラベルが付いた場合のラベルを使用しますが、ショートカットキーがある場合はショートカットキーを含めます。

アイコンボタンのツールヒントの例。

ラベルの付いたアイコンボタン

簡潔なラベルを使用します。 可能な場合は 1 つの単語を使用し、最大 4 単語を使用します。
アイコンの右側にラベルを配置します。
ヒントを使用してコマンドを記述します。 ボタンにはラベルが付いているため、ヒントの代わりにヒントを使用すると冗長になります。

ラベル付きアイコンボタンヒントの例。

ドロップダウンリスト

リストに常に値がある場合は、現在の値をラベルとして使用します。

この例では、現在選択されているフォント名がラベルとして機能します。
編集可能なドロップダウンリストに値がない場合は、プロンプトを使用します。

この例では、ドロップダウンリストのラベルにプロンプトが使用されます。

動詞ベースのメニューボタン名を優先します。 ただし、動詞が Create、Show、View、または Manage の場合は省略します。たとえば、[ ツール] および [ ページ] メニューボタンには動詞がありません。
メニューの内容を明確かつ正確に記述する 1 つの特定の単語を使用します。 名前は、メニュー内のすべての内容を記述するように一般的である必要はありませんが、ユーザーがメニューで見つけたものに驚かないように、十分に予測可能である必要があります。
必須ではありませんが、ヒントの説明が役立つ場合は入力してください。

動詞、名詞、または名詞句で始まるメニュー項目名を使用します。
動詞ベースのメニュー名を優先します。 ただし、動詞が Create、Show、View、または Manage の場合は省略します。たとえば、次のコマンドでは動詞は使用されません。
- 詳細
- 上級
- 全画面表示
- 新規
- オプション
- プロパティ
特定の動詞を使用します。 Change や Manage などの一般的で役に立たない動詞は避けてください。
単一のオブジェクトに適用されるコマンドには単数名詞を使用し、 それ以外の場合は複数形の名詞を使用します。
補完的なコマンドのペアの場合は、明確に補完的な名前を選択します。 例: 追加、削除、表示、非表示;挿入、削除。
テクノロジではなく、ユーザーの目標とタスクに基づいてメニュー項目名を選択します。
次のメニュー項目名は、指定された目的に使用します。
- オプション： プログラムオプションを表示する。
- カスタマイズ： 機械的な UI 構成に特に関連するプログラムオプションを表示します。
- パーソナライズ： 一般的に使用されるパーソナル化設定の概要を表示します。
- 設定： を使用しないでください。代わりに [オプション] を使用します。
- プロパティ： オブジェクトのプロパティウィンドウを表示します。
- 設定： メニューラベルとしてを使用しないでください。代わりに [オプション] を使用します。
サブメニューを表示するメニュー項目のラベルに省略記号はありません。 サブメニューの矢印は、別の選択が必要であることを示します。

ドキュメント

ツールバーを参照する場合:

ツールバーが 1 つしかない場合は、ツールバーとして参照してください。
複数のツールバーがある場合は、名前で参照し、その後にツールバーという単語を付けます。既定でオンになっているメインツールバーを参照し、ファイルの開き方や印刷などの基本的なタスクのボタンを標準ツールバーとして含めます。
ツールバーは、1 つの集計されていない単語です。 (一方、メニューバーは 2 つの単語です)。
ツールバーボタンをツールヒントラベルで参照します。大文字と小文字を含む正確なラベルテキストを使用しますが、省略記号は含めないでください。
ラベルと単語メニューでツールバーメニューボタンを参照してください。大文字と小文字を含む正確なラベルテキストを使用します。
ツールバーコントロールは、一般にツールバーボタンとして参照します。
ユーザー操作を説明するには、ツールバーボタンと読み取り専用ドロップダウンリストのクリックを使用し、編集可能なドロップダウンリストに「」と入力します。選択、選択、または選択は使用しないでください。
プログラミングドキュメントを除き、カスケード、プルダウン、ドロップダウン、またはポップアップを使用してメニューボタンを記述しないでください。
使用できないアイテムは、淡色表示、無効化、灰色表示ではなく、使用不可と参照してください。プログラミングドキュメントで disabled を使用します。
可能な場合は、太字のテキストを使用してラベルの書式を設定します。それ以外の場合は、混乱を防ぐために必要な場合にのみ、ラベルを引用符で囲みます。

例 :

ツールバーの [ ページ ] メニューの [ 電子メールでページを送信] をクリックします。
ツールバーの [ フォント ] ボックスに「Segoe UI」と入力します。
[書式設定] ツールバーの [ 表示] をポイントし、[ コメント] をクリックします。

Share via

Windows 7 ツールバー

これは適切なユーザーインターフェイスですか?

設計概念

ツールバーとメニューバー

効率性