Windows 7 ツールバー
注意
この設計ガイドは Windows 7 用に作成されており、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には 現在の設計ガイダンスは反映されていません。
ツール バーは、効率的なアクセスのためにコマンドをグループ化する方法です。
いくつかの一般的なツール バー。
メニュー バーの代わりに、または の代わりにツール バーを使用します。 ツールバーは直接 (マウス クリックで表示される代わりに常に表示されます)、(追加の入力を必要とするのではなく) 即時に表示され、最も頻繁に使用されるコマンド (包括的なリストの代わりに) が含まれているため、メニュー バーよりも効率的です。 メニュー バーとは対照的に、ツールバーは、簡単で便利で効率的な、包括的または自明である必要はありません。
一部のツール バーはカスタマイズ可能で、ユーザーはツール バーを追加または削除したり、サイズや場所を変更したり、コンテンツを変更したりできます。 一部の種類のツール バーをドッキング解除すると、パレット ウィンドウが表示されます。 ツール バーの種類の詳細については、この記事の 「使用パターン 」を参照してください。
これは適切なユーザー インターフェイスですか?
それを判断するには、以下の質問を考えます。
- ウィンドウはプライマリ ウィンドウですか? ツール バーはプライマリ ウィンドウでは適切に機能しますが、通常はセカンダリ ウィンドウでは圧倒的です。 セカンダリ ウィンドウの場合は、 代わりにコマンド ボタン、 メニュー ボタン、 およびリンク を使用します。
- 頻繁に使用されるコマンドの数は少ないですか? ツールバーはメニュー バーほど多くのコマンドを処理できないため、頻繁に使用される少数のコマンドに効率的にアクセスする方法として最適です。
- ほとんどのコマンドは即時ですか? つまり、主に追加の入力を必要としないコマンドですか? ツール バーを効率的にするには、直接的かつ即時の操作性が必要です。 そうでない場合は、追加の入力を必要とするコマンドにメニュー バーが適しています。
- ほとんどのコマンドを直接表示できますか? つまり、ユーザーは 1 回のクリックで操作しますか? 一部のコマンドはメニュー ボタンを使用して表示できますが、この方法でほとんどのコマンドを表示すると、ツール バーの効率が低下し、メニュー バーがより適切に選択されます。
- コマンドはアイコンで十分に表されていますか? ツール バー ボタンは通常、テキスト ラベルではなくアイコンで表されます (ただし、一部のツール バー ボタンでは両方が使用されますが)、メニュー コマンドはテキストで表されます。 コマンド アイコンが高品質でなくても、わかりやすい場合は、メニュー バーを選択することをお勧めします。
プログラムにメニュー バーのないツール バーがあり、ほとんどのコマンドにメニュー ボタンと 分割ボタンを使用して間接的にアクセスできる場合、このツール バーは基本的にメニュー バーです。 代わりに 、[メニュー ] ガイドラインでツール バー メニュー パターンを適用します。
設計概念
適切なメニュー バーは、使用可能なすべての最上位レベルのコマンドの包括的なカタログですが、優れたツール バーを使用すると、頻繁に使用されるコマンドにすばやく簡単にアクセスできます。 ツール バーは、ユーザーの生産性を高めるだけのトレーニングを試みるわけではありません。 ユーザーがツール バーのコマンドにアクセスする方法を学習すると、メニュー バーからコマンドにアクセスし続ける可能性はほとんどありません。 このような理由から、プログラムのメニュー バーとそのツール バーは直接対応する必要はありません。
ツールバーとメニュー バー
従来、ツール バーは次の方法でメニュー バーとは異なります。
周波数。 ツールバーには最も頻繁に使用されるコマンドのみが表示されますが、メニュー バーはプログラム内で使用可能なすべての最上位レベルのコマンドをカタログ化します。
即時。 ツール バー コマンドをクリックするとすぐに有効になりますが、メニュー コマンドでは追加の入力が必要になる場合があります。 たとえば、メニュー バーの [印刷] コマンドでは最初に [印刷] ダイアログが表示されますが、[印刷] ツール バー ボタンは文書の 1 つのコピーを既定のプリンターに直ちに印刷します。
この例では、[印刷] ツール バー ボタンをクリックすると、文書の 1 つのコピーが既定のプリンターにすぐに印刷されます。
率直。 ツール バー コマンドは 1 回のクリックで呼び出されますが、メニュー バーコマンドではメニュー内を移動する必要があります。
数値と密度。 ツール バーに必要な画面領域は、そのコマンドの数に比例し、コマンドが存在しない場合でも、その領域は常に使用されます。 そのため、ツール バーはスペースを効率的に使用する必要があります。 一方、メニュー バーのコマンドは通常、ビューから非表示になり、その階層構造では任意の数のコマンドを使用できます。
サイズとプレゼンテーション。 多くのコマンドを小さなスペースにパックするために、ツール バーでは通常、アイコンベースのコマンド (ツールヒントベースのラベル付き) が使用されますが、メニュー バーではテキストベースのコマンド (オプションのアイコン付き) が使用されます。 ツール バー ボタンには標準のテキスト ラベルを付けることができますが、スペースが大幅に増えます。
ラベル付きツール バー ボタンには、ラベルのないボタンの 3 倍以上のスペースが必要です。
名前のとおりです。 適切に設計されたツール バーには、ユーザーがツールヒントを使用するだけでコマンドを効率的に見つけることができないため、主にわかりやすいアイコンが必要です。 ただし、使用頻度の低いコマンドが自明でない場合は、ツール バーは引き続き適切に機能します。
この例では、最も頻繁に使用されるアイコンはわかりやすいものです。
認識可能で区別可能。 頻繁に使用されるコマンドの場合、ユーザーは場所、図形、色などのツール バー ボタン属性を覚えています。 適切に設計されたツールバーを使用すると、ユーザーは正確なアイコン記号を覚えていない場合でも、コマンドをすばやく見つけることができます。 これに対し、ユーザーは頻繁に使用されるメニュー バーのコマンドの場所を覚えていますが、選択を行う場合はコマンド ラベルに依存します。
![[切り取りツール オプション] ダイアログ ボックスのスクリーン ショット](images/cmd-toolbars-image5.png)
ツール バー コマンドの場合、独特の場所、図形、色は、アイコンを認識しやすく区別するのに役立ちます。
メニュー バー コマンドの場合、ユーザーは最終的にラベルに依存します。
効率性
その特性を考えると、ツールバーは主に効率のために設計する必要があります。 非効率的なツール バーは意味をなさないだけです。
1 つだけ行う場合...
ツール バーが主に効率を高めるように設計されていることを確認します。 頻繁に使用され、即時、直接、すばやく認識できるコマンドにツール バーをフォーカスします。
メニュー バーを非表示にする
一般に、ツールバーはメニュー バーと共に優れた機能を発揮します。優れたツール バーは効率を提供し、優れたメニュー バーは包括的に機能します。 メニュー バーとツール バーの両方を使用すると、それぞれが妥協することなくその長所に集中できます。
驚くべきことに、このモデルは単純なプログラムで分解されます。 少数のコマンドのみを含むプログラムの場合、メニュー バーとツール バーの両方を持つことは意味がありません。これは、メニュー バーが冗長で非効率的なバージョンのツール バーになるためです。
この冗長性を排除するために、Windows Vista の多くの単純なプログラムでは、ツール バーを介してのみコマンドを提供し、既定ではメニュー バーを非表示にすることに重点を置きます。 このようなプログラムには、Windows エクスプローラー、Windows インターネット エクスプローラー、Windows メディア プレーヤー、Windows フォト ギャラリーが含まれます。
これは小さな変更はありません。 メニュー バーを削除すると、ツール バーの性質が根本的に変わります。このようなツール バーは包括的で、次の方法で変更する必要があるためです。
周波数。 メニュー バーを削除すると、使用の頻度に関係なく、ウィンドウまたはそのコンテキスト メニューから直接使用できないすべてのコマンドにツール バーからアクセスできる必要があります。
即時。 メニュー バーを削除すると、ツール バーはコマンドに対して表示される唯一のアクセス ポイントになり、ツール バーには完全に機能するバージョンが必要です。 たとえば、メニュー バーがない場合、ツール バーの [印刷] コマンドでは、すぐに印刷するのではなく、[印刷] ダイアログ ボックスを表示する必要があります。 (この場合、分割ボタンを使用することは優れた妥協点ですが。 標準の [印刷分割] ボタンについては、「標準メニューと分割 ボタン」を参照してください)。
この例では、Windows フォト ギャラリーの [印刷] ツール バー ボタンに、[印刷] ダイアログ ボックスを表示する [印刷] コマンドがあります。
率直。 スペースを節約し、煩雑さを防ぐために、使用頻度の低いコマンドをメニュー ボタンに移動して、直接的なコマンドを減らします。
メニュー バーを補完するために使用されるツール バーは、削除または非表示のメニュー バーで使用するように設計されたツール バーとは異なる方法で設計されています。 また、ユーザーが 1 つのコマンドを実行するために非表示のメニュー バーを表示するとは想定できないため、メニュー バーを非表示にする場合は、デザイン上の決定を行うときに完全に削除するのと同じように扱う必要があります。 (既定でメニュー バーを非表示にした場合、ユーザーがメニュー バーを表示してコマンドを見つけたり、表示方法を理解したりすることを想定しないでください)。
メニュー バーなしで動作するようにツール バーを設計するには、多くの場合、いくつかの侵害が伴います。 しかし、効率のために、あまり妥協しないでください。 メニュー バーを非表示にすると、ツール バーが非効率的になる場合は、メニュー バーを非表示にしないでください。
キーボードのアクセシビリティ
キーボードからツールバーにアクセスすることは、メニュー バーへのアクセスとは大きく異なります。 ユーザーが Alt キーを押すと、メニュー バーは入力フォーカスを受け取り、Esc キーを押すと入力フォーカスが失われます。 メニュー バーに入力フォーカスが設定されると、ウィンドウの残りの部分とは別に移動し、すべての方向キー、ホーム キー、終了キー、タブ キーを処理します。 これに対し、ユーザーがウィンドウの内容全体を Tab キーを押すと、ツール バーは入力フォーカスを受け取ります。 ツール バーはタブ オーダーで最後に表示されるため、ビジー ページでアクティブ化するにはかなりの労力が必要になる場合があります (Shift + Tab キーを押して後方に移動することがわかっている場合を除きます)。
アクセシビリティは、ここではジレンマを示します。ツール バーはマウス ユーザーにとって簡単ですが、キーボード ユーザーのアクセスは低くなります。 これは、メニュー バーとツール バーの両方がある場合は問題ありませんが、メニュー バーが削除されているか非表示になっている場合です。
アクセシビリティ上の理由から、ツールバーを優先して完全に削除するのではなく、メニュー バーを保持することをお勧めします。 メニュー バーを削除してから非表示にすることを選択する必要がある場合は、非表示にすることをお選びください。
使用パターン
ツール バーには、いくつかの使用パターンがあります。
| 使用法 | 例 |
|---|---|
|
プライマリ ツール バー 非表示または削除されたメニュー バーなしで動作するように設計されたツール バー。 |
主要ツールバーは、効率性の必要性と包括的さのバランスを取る必要があるため、単純なプログラムに最適です。 
Windows エクスプローラーのプライマリ ツール バー。 |
|
補助ツール バー メニュー バーを操作するように設計されたツール バー。 |
補助ツールバーは、妥協することなく効率に焦点を当てることができます。 
Windows Movie Maker の補助ツール バー。 |
|
ツール バー メニュー ツールバーとして実装されたメニュー バー。 |
ツール バー メニューは、主に メニュー ボタン 内のコマンドと分割ボタンで構成されるツール バーであり、直接コマンドがある場合はごくわずかです。 
Windows フォト ギャラリーのツール バー メニュー。 |
|
カスタマイズ可能なツール バー ユーザーがカスタマイズできるツール バー。 |
カスタマイズ可能なツールバーを使用すると、ユーザーはツールバーを追加または削除したり、サイズや場所を変更したり、コンテンツを変更したりできます。 
Microsoft Visual Studio のカスタマイズ可能なツール バー。 |
|
パレット ウィンドウ コマンドの配列を表示するモードレス ダイアログ ボックス。 |
パレット ウィンドウはドッキングされていないツールバーです。 ![[色] ダイアログ ボックスのスクリーン ショット](images/cmd-toolbars-image12.png)
![[フォント] ダイアログ ボックスのスクリーン ショット](images/cmd-toolbars-image13.png)
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 つ以上の行で構成されるツール バーのカスタマイズを提供します。 カスタマイズが必要なのは、ラベルのないアイコン スタイルのみです。 コマンドが少ないシンプルなツール バーでは、カスタマイズは必要ありません。
適切な既定の構成を指定します。 ユーザーは、一般的なシナリオに合わせてツール バーをカスタマイズする必要はありません。 ユーザーが不適切な初期構成から抜け出す方法をカスタマイズすることに依存しないでください。 ほとんどのユーザーがツールバーをカスタマイズしないとします。
コンテキスト メニューに次のコマンドを指定します。
- 使用可能なツール バーを表示するチェック ボックスの一覧
- ツール バーのロック/ロック解除
- カスタマイズ...
カスタマイズ可能なツールバーを既定でロックして、誤った変更を防ぎます。
[カスタマイズ] コマンドでは、表示する ツール バーと各ツール バーのコマンドを選択する機能を提供するオプション ダイアログ ボックスを表示します。
![[カスタマイズ] ダイアログ ボックスとオプションのスクリーン ショット](images/cmd-toolbars-image46.png)
この例では、Visual Studio のツール バーをカスタマイズするためのオプション ダイアログ ボックスが用意されています。
[オプションのカスタマイズ] ダイアログ ボックスで元のツール バー構成に戻る [リセット] コマンドを指定します。
次の方法でドラッグ アンド ドロップを使用してツール バーをカスタマイズする機能を提供します。
- ツール バーの順序と位置を設定します。
- ツールバーの長さを設定し、小さすぎて内容をオーバーフローシェブロンで表示するにはツールバーを表示します。
- サポートされている場合は、ツールバーをドッキング解除してパレット ウィンドウになり、その逆も同様です。
[オプションのカスタマイズ] ダイアログ ボックスが表示されたら、次の手順を実行します。
- ツール バーの内容を設定します。
- ツール バーの内容の順序を設定します。
これにより、ユーザーはより直接的かつ効率的に変更を行うことができます。
すべてのツール バーのカスタマイズをユーザー 単位で保存します。
省略記号の使用
ツールバー コマンドは即時アクションに使用されますが、アクションを実行するためにさらに多くの情報が必要な場合があります。 省略記号を使用して、コマンドが有効になる前に詳細情報が必要であることを示します。 省略記号をヒントとラベルの末尾に配置します (存在する場合)。
この例では、Print...コマンドを実行すると、[印刷] ダイアログ ボックスが表示され、詳細情報が収集されます。
ただし、コマンドをすぐに有効にできない場合は、省略記号は必要ありません。 そのため、たとえば、コマンドをすぐに有効にできないため、追加の情報が必要な場合でも、共有設定には省略記号はありません。
[共有設定] コマンドは省略記号を持ちません。すぐには有効にできないためです。
ツール バーは常に表示され、スペースは Premium であるため、 省略記号は頻繁に使用しないでください。
注意
ツール バーに表示されるメニューの場合は、 メニューの省略記号のガイドラインを適用します。
推奨されるサイズ設定と間隔
標準ツール バーの推奨サイズ設定と間隔。
ラベル
全般
-
文章スタイルで大文字と小文字を使い分けます。
- 例外： レガシ アプリケーションの場合は、必要に応じてタイトルスタイルの大文字と小文字を使用して、大文字と小文字が混在しないようにすることができます。
ラベル付けされていないアイコン ボタン
ツールヒントを使用してコマンドにラベルを付けます。 ツールヒントテキストには、ボタンにラベルが付いた場合のラベルを使用しますが、ショートカット キーがある場合はショートカット キーを含めます。
アイコン ボタンのツールヒントの例。
ラベルの付いたアイコン ボタン
簡潔なラベルを使用します。 可能な場合は 1 つの単語を使用し、最大 4 単語を使用します。
アイコンの右側にラベルを配置します。
ヒントを使用してコマンドを記述します。 ボタンにはラベルが付いているため、ヒントの代わりにヒントを使用すると冗長になります。
ラベル付きアイコン ボタンヒントの例。
ドロップダウン リスト
リストに常に値がある場合は、現在の値をラベルとして使用します。
この例では、現在選択されているフォント名がラベルとして機能します。
編集可能なドロップダウン リストに値がない場合は、プロンプトを使用 します。
この例では、ドロップダウン リストのラベルにプロンプトが使用されます。
メニュー ボタンと分割ボタン
- 動詞ベースのメニュー ボタン名を優先します。 ただし、動詞が Create、Show、View、または Manage の場合は省略します。 たとえば、[ ツール] および [ ページ] メニュー ボタンには動詞がありません。
- メニューの内容を明確かつ正確に記述する 1 つの特定の単語を使用します。 名前は、メニュー内のすべての内容を記述するように一般的である必要はありませんが、ユーザーがメニューで見つけたものに驚かないように、十分に予測可能である必要があります。
- 必須ではありませんが、ヒントの説明が役立つ場合は入力してください。
メニュー項目
- 動詞、名詞、または名詞句で始まるメニュー項目名を使用します。
- 動詞ベースのメニュー名を優先します。 ただし、動詞が Create、Show、View、または Manage の場合は省略します。 たとえば、次のコマンドでは動詞は使用されません。
- 詳細
- 上級
- 全画面表示
- 新規
- オプション
- プロパティ
- 特定の動詞を使用します。 Change や Manage などの一般的で役に立たない動詞は避けてください。
- 単一のオブジェクトに適用されるコマンドには単数名詞を使用し、 それ以外の場合は複数形の名詞を使用します。
- 補完的なコマンドのペアの場合は、明確に補完的な名前を選択します。 例: 追加、削除、表示、非表示;挿入、削除。
- テクノロジではなく、ユーザーの目標とタスクに基づいてメニュー項目名を選択します。
- 次のメニュー項目名は、指定された目的に使用します。
- オプション： プログラム オプションを表示する。
- カスタマイズ： 機械的な UI 構成に特に関連するプログラム オプションを表示します。
- パーソナライズ： 一般的に使用される パーソナル化 設定の概要を表示します。
- 設定： を使用しないでください。 代わりに [オプション] を使用します。
- プロパティ： オブジェクトのプロパティ ウィンドウを表示します。
- 設定： メニュー ラベルとしてを使用しないでください。 代わりに [オプション] を使用します。
- サブメニューを表示するメニュー項目のラベルに省略記号はありません。 サブメニューの矢印は、別の選択が必要であることを示します。
ドキュメント
ツール バーを参照する場合:
- ツールバーが 1 つしかない場合は、ツール バーとして参照してください。
- 複数のツールバーがある場合は、名前で参照し、その後にツールバーという単語を付けます。 既定でオンになっているメイン ツール バーを参照し、ファイルの開き方や印刷などの基本的なタスクのボタンを標準ツール バーとして含めます。
- ツール バーは、1 つの集計されていない単語です。 (一方、メニュー バーは 2 つの単語です)。
- ツール バー ボタンをツール ヒント ラベルで参照します。 大文字と小文字を含む正確なラベル テキストを使用しますが、省略記号は含めないでください。
- ラベルと単語メニューでツールバーメニューボタンを参照してください。 大文字と小文字を含む正確なラベル テキストを使用します。
- ツール バー コントロールは、一般にツール バー ボタンとして参照します。
- ユーザー操作を説明するには、ツール バー ボタンと読み取り専用ドロップダウン リストのクリックを使用し、編集可能なドロップダウン リストに「」と入力します。 選択、選択、または選択は使用しないでください。
- プログラミング ドキュメントを除き、カスケード、プルダウン、ドロップダウン、またはポップアップを使用してメニュー ボタンを記述しないでください。
- 使用できないアイテムは、淡色表示、無効化、灰色表示ではなく、使用不可と参照してください。 プログラミング ドキュメントで disabled を使用します。
- 可能な場合は、太字のテキストを使用してラベルの書式を設定します。 それ以外の場合は、混乱を防ぐために必要な場合にのみ、ラベルを引用符で囲みます。
例 :
- ツール バーの [ ページ ] メニューの [ 電子メールでページを送信] をクリックします。
- ツール バーの [ フォント ] ボックスに「Segoe UI」と入力します。
- [書式設定] ツール バー の [ 表示] をポイントし、[ コメント] をクリックします。