Windows 7 ツール バー
手記
このデザイン ガイドは Windows 7 用に作成されたもので、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には、現在の設計ガイダンス 反映されていません。
ツール バーは、効率的なアクセスのためにコマンドをグループ化する方法です。
スクリーン ショット
いくつかの一般的なツール バー。
メニュー バーに加えて、またはメニュー バーの代わりにツール バーを使用します。 ツールバーは直接 (マウス クリックで表示される代わりに常に表示されます)、(追加入力を必要とするのではなく) 即時に表示され、最も頻繁に使用されるコマンド (包括的なリストではなく) が含まれているため、メニュー バーよりも効率的です。 メニュー バーとは対照的に、ツール バーは、包括的でわかりやすいものにする必要はありません。
一部のツールバーはカスタマイズ可能で、ユーザーはツールバーの追加や削除、サイズと場所の変更、コンテンツの変更を行えます。 一部の種類のツールバーはドッキング解除でき、パレット ウィンドウが表示されます。 ツール バーの種類の詳細については、この記事で 使用パターンを参照してください。
これは適切なユーザー インターフェイスですか?
決定するには、次の質問を検討してください。
- ウィンドウはプライマリ ウィンドウですか? ツールバーはプライマリ ウィンドウでは適切に機能しますが、通常はセカンダリ ウィンドウでは圧倒的です。 セカンダリ ウィンドウの場合は、コマンド ボタン、メニュー ボタン 、リンク 代わりに使用します。
- 頻繁に使用されるコマンドの数は少ないですか? ツールバーはメニュー バーほど多くのコマンドを処理できないため、頻繁に使用される少数のコマンドに効率的にアクセスする方法として最適です。
- ほとんどのコマンドは即時ですか? つまり、主に追加の入力を必要としないコマンドですか? ツール バーを効率的にするには、直接的かつ迅速な操作性が必要です。 そうでない場合は、追加の入力を必要とするコマンドにメニュー バーが適しています。
- ほとんどのコマンドを直接表示できますか? つまり、ユーザーは 1 回のクリックでユーザーと対話しますか? 一部のコマンドはメニュー ボタンを使用して表示できますが、この方法でほとんどのコマンドを表示すると、ツール バーの効率が低下し、メニュー バーがより適切に選択されます。
- コマンドはアイコンで適切に表されていますか? ツール バー ボタンは通常、テキスト ラベルではなくアイコンで表されますが (ただし、一部のツール バー ボタンでは両方を使用します)、メニュー コマンドはテキストで表されます。 コマンド アイコンが高品質ではなく、わかりやすいものでない場合は、メニュー バーが適している可能性があります。
プログラムにメニュー バーのないツール バーがあり、ほとんどのコマンドがメニュー ボタンと 分割ボタンを介して間接的にアクセスできる場合、このツール バーは基本的にメニュー バーです。 代わりに、ツールバーメニュー メニューガイドラインのパターンを適用します。
設計の概念
適切なメニュー バーは、使用可能なすべての最上位レベルのコマンドの包括的なカタログです。一方、適切なツール バーを使用すると、頻繁に使用されるコマンドにすばやく簡単にアクセスできます。 ツール バーでは、ユーザーの生産性を高めるだけのトレーニングは試みられません。 ツール バーのコマンドにアクセスする方法をユーザーが学習すると、メニュー バーからコマンドにアクセスし続ける可能性はほとんどありません。 このような理由から、プログラムのメニュー バーとそのツール バーに直接対応する必要はありません。
ツールバーとメニュー バー
従来、ツールバーはメニュー バーとは次の点で異なります。
周波数。 ツール バーには、最も頻繁に使用されるコマンドのみが表示されますが、メニュー バーでは、プログラム内で使用できる最上位レベルのコマンドがすべてカタログ化されます。
覿面。 ツールバー コマンドをクリックするとすぐに有効になりますが、メニュー コマンドでは追加の入力が必要になる場合があります。 たとえば、メニュー バーの [印刷] コマンドでは最初に [印刷] ダイアログが表示され、[印刷] ツール バー ボタンは文書の 1 つのコピーを既定のプリンターに直ちに印刷します。
この例では、[印刷] ツール バー ボタンをクリックすると、文書の 1 つのコピーが既定のプリンターにすぐに印刷されます。
率直。 ツール バー コマンドは 1 回のクリックで呼び出されますが、メニュー バーのコマンドではメニュー内を移動する必要があります。
数値と密度。 ツール バーに必要な画面領域はコマンドの数に比例し、コマンドが使用されていない場合でも、その領域は常に使用されます。 そのため、ツール バーはスペースを効率的に使用する必要があります。 これに対し、メニュー バーのコマンドは通常、ビューから非表示になり、その階層構造では任意の数のコマンドを使用できます。
サイズとプレゼンテーション。 多くのコマンドを小さなスペースにパックするために、ツール バーでは通常、アイコンベースのコマンド (ツールヒントベースのラベル付き) が使用されますが、メニュー バーではテキストベースのコマンド (オプションのアイコン付き) が使用されます。 ツール バー ボタンには標準のテキスト ラベルを付けることができますが、使用するスペースは大幅に増えます。
送受信ラベルスクリーン ショット
ラベル付きツールバーボタンは、ラベルのないボタンの少なくとも3倍のスペースを取ります。
自明。 適切に設計されたツール バーには、ユーザーがツールヒントを使用するだけでコマンドを効率的に見つけることができないため、ほとんどの場合、わかりやすいアイコンが必要です。 ただし、使用頻度の低いいくつかのコマンドがわかりやすい場合でも、ツール バーは正常に動作します。
使い慣れたアイコンがスクリーン ショット
この例では、最も頻繁に使用されるアイコンはわかりやすいものです。
認識可能で区別可能。 頻繁に使用されるコマンドの場合、ユーザーは場所、図形、色などのツール バー ボタンの属性を覚えています。 適切に設計されたツールバーを使用すると、ユーザーは正確なアイコン記号を覚えていない場合でも、コマンドをすばやく見つけることができます。 これに対し、ユーザーは頻繁に使用されるメニュー バーのコマンドの場所を覚えていますが、選択を行う場合はコマンド ラベルに依存します。
[切り取りツール オプション] ダイアログ ボックスのスクリーン ショットを
ツールバー コマンドの場合、アイコンを認識しやすく区別できるように、独特の場所、図形、色が役立ちます。
メニュー バー コマンドの場合、ユーザーは最終的にラベルに依存します。
効率
その特性を考えると、ツールバーは主に効率のために設計する必要があります。 非効率的なツール バーは意味がありません。
1 つだけ行う場合...
ツール バーが主に効率のために設計されていることを確認します。 頻繁に使用されるコマンド、即時コマンド、ダイレクト コマンド、およびすばやく認識できるコマンドにフォーカス を置きます。
メニュー バーを非表示にする
一般に、ツールバーはメニュー バーと共に優れた動作をします。優れたツール バーは効率性を提供し、優れたメニュー バーは包括的に機能します。 メニュー バーとツール バーの両方を使用すると、それぞれが妥協することなくその強さに集中できます。
驚いたことに、このモデルは単純なプログラムで分解されます。 少数のコマンドしかないプログラムの場合、メニュー バーとツール バーの両方を持つことは意味がありません。これは、メニュー バーがツール バーの冗長で非効率的なバージョンになるためです。
この冗長性を排除するために、Windows Vista の多くの単純なプログラムでは、ツール バーのみを使用してコマンドを提供し、既定ではメニュー バーを非表示にすることに重点を置いています。 このようなプログラムには、Windows エクスプローラー、Windows Internet Explorer、Windows Media Player、Windows フォト ギャラリーが含まれます。
これは小さな変更です。 メニュー バーを削除すると、ツール バーの性質が根本的に変わります。このようなツール バーは包括的で、次の方法で変更する必要があるためです。
周波数。 メニュー バーを削除すると、使用頻度に関係なく、ウィンドウまたはそのコンテキスト メニューから直接使用できないすべてのコマンドにツール バーからアクセスできる必要があります。
覿面。 メニュー バーを削除すると、ツール バーがコマンドに対して表示される唯一のアクセス ポイントになり、ツール バーに完全に機能するバージョンが必要になります。 たとえば、メニュー バーがない場合は、ツールバーの [印刷] コマンドをすぐに印刷するのではなく、[印刷] ダイアログ ボックスを表示する必要があります。 (この場合、分割ボタンを使用することは優れた妥協点です。標準 印刷分割ボタンについては、標準メニューと分割ボタンの を参照してください)。
ツール バーと印刷コマンドのオプションのスクリーン ショットを
この例では、Windows フォト ギャラリーの [印刷] ツール バー ボタンに、[印刷] ダイアログ ボックスを表示する [印刷] コマンドがあります。
率直。 スペースを節約し、煩雑さを防ぐために、使用頻度の低いコマンドをメニュー ボタンに移動して、直接的なコマンドを減らします。
メニュー バーを補完するために使用するツール バーは、削除または非表示のメニュー バーで使用するために設計されたツールバーとは異なる方法で設計されています。 また、ユーザーが非表示のメニュー バーを表示して 1 つのコマンドを実行するとは想定できないため、メニュー バーを非表示にすることは、設計上の決定を行うときに完全に削除するのと同じように扱う必要があります。 (既定でメニュー バーを非表示にした場合は、ユーザーがメニュー バーを表示してコマンドを見つけたり、表示方法を把握したりすることを想定しないでください)。
メニュー バーなしで動作するようにツール バーを設計するには、多くの場合、いくつかの妥協が伴います。 しかし、効率のために、あまり妥協しないでください。 メニュー バーを非表示にすると、ツール バーが非効率的になる場合は、メニュー バーを非表示にしないでください。
キーボードのアクセシビリティ
キーボードからツールバーにアクセスすることは、メニュー バーへのアクセスとは大きく異なります。 メニュー バーは、ユーザーが Alt キーを押すと入力フォーカスを受け取り、Esc キーを押すと入力フォーカスが失われます。 メニュー バーに入力フォーカスが設定されると、ウィンドウの残りの部分とは別に移動され、すべての方向キー、ホーム キー、終了キー、タブ キーが処理されます。 これに対し、ユーザーが Tab キーを押してウィンドウの内容全体を移動すると、ツール バーは入力フォーカスを受け取ります。 ツール バーはタブ オーダーで最後に表示されるため、ビジー状態のページでアクティブ化するのにかなりの労力がかかる場合があります (ユーザーが Shift + Tab キーを押して後方に移動することがわかっている場合を除く)。
アクセシビリティにはジレンマがあります。ツール バーはマウス ユーザーにとって簡単ですが、キーボード ユーザーにとってはアクセシビリティが低くなります。 これは、メニュー バーとツール バーの両方がある場合は問題ありませんが、メニュー バーが削除または非表示になっている場合です。
アクセシビリティ上の理由から、ツールバーを優先してメニュー バーを完全に削除するのではなく、メニュー バーを保持することをお勧めします。 メニュー バーを削除して非表示にするかどうかを選択する必要がある場合は、非表示にします。
使用パターン
ツール バーには、いくつかの使用パターンがあります。
| 使い | 例 |
|---|---|
| プライマリ ツール バー を する メニュー バーなしで動作するように設計されたツール バー。非表示または削除されています。 |
主要なツール バーは、効率の必要性と包括的さのバランスを取る必要があるため、単純なプログラムに最適です。 エクスプローラー ツール バーのスクリーン ショット Windows エクスプローラーのプライマリ ツール バー。 |
|
補助ツール バーの メニュー バーを操作するように設計されたツール バー。 |
補助ツールバーは、妥協することなく効率に集中できます。 ツールバーする Windows Movie Maker の補助ツール バー。 |
|
ツール バーのメニュー ツールバーとして実装されたメニュー バー。 |
ツール バー メニューは、主に メニュー ボタンの と分割ボタンのコマンドで構成されるツール バーであり、直接コマンドがある場合はごくわずかです。 アイコンとコマンドがスクリーン ショット Windows フォト ギャラリーのツール バー メニュー。 |
| カスタマイズ可能なツール バー を する ユーザーがカスタマイズできるツール バー。 |
カスタマイズ可能なツール バーを使用すると、ユーザーはツール バーを追加または削除したり、サイズや場所を変更したり、コンテンツを変更したりできます。 
されたツールバーのスクリーン ショットMicrosoft Visual Studio のカスタマイズ可能なツール バー。 |
|
パレット ウィンドウの コマンドの配列を表示するモードレス ダイアログ ボックス。 |
パレット ウィンドウはドッキング解除されたツールバーです。 [色] ダイアログ ボックスのスクリーン ショットを  [フォント] ダイアログ ボックスのスクリーン ショットを  Windows ペイントのパレット ウィンドウ。 |
ツール バーには、次のスタイルがあります。
| スタイル | 例 |
|---|---|
| ラベル付けされていないアイコン を する ラベル付けされていない小さなアイコン ボタンの 1 つ以上の行。 |
ラベル付けするボタンが多すぎる場合、またはプログラムが頻繁に使用される場合は、このスタイルを使用します。 このスタイルでは、複雑な機能を持つプログラムは複数の行を持つ可能性があるため、カスタマイズする必要がある唯一のスタイルです。 このスタイルでは、一部のコマンド ボタンは頻繁に使用される場合にラベルを付けることができます。 小さいラベルのないアイコンがスクリーン ショット ワードパッドのラベル付けされていないアイコン ツール バー。 |
|
大きいラベルのないアイコン ラベル付けされていない大きなアイコン ボタンの 1 行。 |
このスタイルは、アイコンが簡単に認識でき、通常は小さなウィンドウで実行される単純なユーティリティに使用します。 ラベルが付いていない大きなアイコンがスクリーン ショット 大きなアイコンがスクリーン ショット Windows Live Messenger と Windows Snipping Tool のラベル付けされていない大きなアイコン ツール バー。 |
| ラベル付きアイコン を する 小さなラベル付きアイコンの 1 行。 |
コマンドが少ない場合、またはプログラムが頻繁に使用されない場合は、このスタイルを使用します。 このスタイルには常に 1 つの行があります。 ラベル付きのアイコンがスクリーン ショット Windows エクスプローラーのラベル付きアイコン ツール バー。 |
|
部分ツール バーの 完全なツールバーが不要な場合にスペースを節約するために使用される小さなアイコンの部分的な行。 |
このスタイルは、ナビゲーション ボタン、検索ボックス、またはタブを含むウィンドウに使用して、ウィンドウの上部にある不要な重みをなくします。 メニュー バー、ツールバー、お気に入りバーの  部分的なツールバーは、ナビゲーション ボタン、検索ボックス、またはタブと組み合わせることができます。 |
|
大きい部分ツールバーの 完全なツールバーが不要な場合にスペースを節約するために使用される大きなアイコンの部分的な行。 |
このスタイルは、ウィンドウの上部に不要な重みをなくすために、ナビゲーション ボタンまたは検索ボックスを持つ単純なユーティリティに使用します。 大きな部分的なツール バーのする Windows Defender の大きな部分ツール バー。 |
最後に、ツール バー コントロールにはいくつかの使用パターンがあります。
| 使い | 例 |
|---|---|
|
コマンド アイコン ボタン コマンド ボタンをクリックすると、すぐにアクションが開始されます。 |
ラベル付きアイコン ツール バーのする Windows FAX とスキャンのアイコン コマンド ボタンの例。 |
|
モード アイコン ボタン モード ボタンをクリックすると、選択したモードに入ります。 |
垂直ツールバーする Windows ペイントのモード ボタンの例。 |
|
プロパティ アイコン ボタン プロパティ ボタンの状態は、現在選択されているオブジェクトの状態 (存在する場合) を反映します。 ボタンをクリックすると、選択したオブジェクトに変更が適用されます。 |
書式設定アイコンと選択したテキストスクリーン ショット Microsoft Word のプロパティ ボタンの例。 |
|
ラベル付きアイコン ボタン アイコンとテキスト ラベルでラベル付けされたコマンド ボタンまたはプロパティ ボタン。 |
これらのボタンは、アイコンが十分に説明できない頻繁に使用されるツール バー ボタンに使用されます。 これらは、各ボタンにテキスト ラベルを付けることができるボタンが非常に少ないツール バーでも使用されます。 
最も頻繁に使用されるボタンのラベルが付いたツールバー。 |
|
メニュー ボタン 関連するコマンドの小さなセットを表示するために使用されるコマンド ボタン。 |
1 つの下向きの三角形は、ボタンをクリックするとメニューが表示されることを示します。 ツール バーとドロップダウン コマンド リストのする 関連するコマンドの小さなセットを含むメニュー ボタン。 |
|
分割ボタン コマンドのバリエーションを統合するために使用されるコマンド ボタン。特に、ほとんどの場合、コマンドの 1 つが使用される場合。 |
分割印刷ボタンスクリーン ショット 通常の状態の分割ボタン。 メニュー ボタンのように、1 つの下向きの三角形は、ボタンの右端をクリックするとメニューが表示されることを示します。 分割印刷ボタン コマンドのスクリーン ショットを  ドロップダウン分割ボタン。 この例では、分割ボタンを使用して、印刷関連のすべてのコマンドを統合します。 イミディエイト印刷コマンドはほとんどの場合使用されるため、通常、ユーザーは他のコマンドを表示する必要はありません。 メニュー ボタンとは異なり、ボタンの左側をクリックすると、ラベルに対してアクションが直接実行されます。 分割ボタンは、次のコマンドが最後のコマンドと同じである可能性が高い状況で有効です。 この場合、ラベルは、カラー ピッカーと同様に、最後のコマンドに変更されます。 ペイントスクリーン ショット この例では、ラベルが最後のコマンドに変更されます。 |
|
ドロップダウン リスト プロパティの表示または変更に使用するドロップダウン リスト (編集可能または読み取り専用)。 |
フォント  のドロップダウン リストのスクリーン ショットこの例では、ドロップダウン リストを使用してフォント属性を表示および設定します。 ツールバーのドロップダウン リストには、現在選択されているオブジェクトの状態 (存在する場合) が反映されます。 リストを変更すると、選択したオブジェクトの状態が変更されます。 |
ガイドライン
プレゼンテーション
コマンドの数とその使用方法に基づいて、適切なツール バー スタイルを選択します。 選択方法のガイダンスについては、前のツール バー スタイルの表を参照してください。 プログラムの作業領域から領域が多すぎるツールバー構成は使用しないでください。
コンテンツ領域のすぐ上にツール バーを配置し、メニュー バーとアドレス バーの下に します (存在する場合)。
容量がプレミアムの場合は、次の方法でスペースを節約
- 既知のアイコンと使用頻度の低いコマンドのラベルを省略します。
- ウィンドウの幅全体ではなく、部分的なツールバーのみを使用します。
- メニュー ボタンまたは分割ボタンを使用した関連コマンドの統合。
- オーバーフローシェブロン を使用して、使用頻度の低いコマンドを表示します。
- 現在のコンテキストに適用される場合にのみコマンドを表示します。
Windows Internet Explorer ツール バーでは、既知のアイコンのラベルを省略し、部分的なツール バーを使用し、使用頻度の低いコマンドにオーバーフロー シェブロンを使用することで、領域を節約できます。
ラベル付けされていないアイコンのツール バー パターンでは、既定の構成を使用し、2 行以下のツール バーを使用します。 2 行を超える行が役に立つ場合は、ツール バーをカスタマイズできるようにします。 2 行を超える行から始めると、ユーザーが圧倒され、プログラムの作業領域から領域が多くなりすぎる可能性があります。
不正解:
2 行を超えるツールバーを含む既定の構成では、見た目が乱雑になりすぎます。
現在のコンテキストに適用されない個々のツール バー ボタンを無効にします。削除するのではなく、 します。 これにより、ツール バーの内容が安定して見つけやすくなります。
個々のツール バー ボタンをクリックするとエラーが直接発生する場合は、個々のツール バー ボタンを無効にします。 これを行うことは、直接的な感覚を維持するために必要です。
ラベル付けされていないアイコンのツール バー パターンの場合は、現在のコンテキストに適用されない場合は、ツールバー全体を削除します。 該当するモードでのみ表示します。
デバッグ ツール バーのする
この例では、デバッグ ツール バーは、プログラムが実行されている場合にのみ表示されます。
ツールバーボタンを左揃えに表示します。 ヘルプ アイコン (存在する場合) は右揃えです。
ツールバーのスクリーン ショット
ヘルプを除き、すべてのツール バー ボタンが左揃えになります。
例外: Windows 7 スタイルのツール バーはプログラム固有のコマンドを左揃えにしますが、オプション、表示、ヘルプなどの標準的な既知のコマンドを右揃えします。
ツール バー ボタンのラベルを動的に変更しないでください。 これを行うと、混乱が生じ、予期しない結果になります。 ただし、アイコンを変更して現在の状態を反映することはできます。
ペイントスクリーン ショット
この例では、アイコンが既定のコマンドを示すように変更されています。
コントロールとコマンド
最も頻繁に使用されるコマンドを優先します。
- プライマリ ツール バーの場合は、包括的なコマンドを指定します。 プライマリ ツール バーは、メニュー バーほど包括的である必要はありませんが、他の場所では簡単に検出できないすべてのコマンドを提供する必要があります。 プライマリ ツール バーには、次のコマンドを含める必要はありません。
- UI 自体に直接存在するコマンド。
- 通常、コマンドはコンテキスト メニューを使用してアクセスします。
- 標準の既知のコマンド (切り取り、コピー、貼り付けなど)。
- 補助ツールバーの場合は、最も頻繁に使用されるコマンドを指定します。 メニュー バー コマンドはツール バー コマンドのスーパーセットであるため、すべてを指定する必要はありません。 迅速で便利なコマンド アクセスに集中し、残りの部分をスキップします。
- プライマリ ツール バーの場合は、包括的なコマンドを指定します。 プライマリ ツール バーは、メニュー バーほど包括的である必要はありませんが、他の場所では簡単に検出できないすべてのコマンドを提供する必要があります。 プライマリ ツール バーには、次のコマンドを含める必要はありません。
直接コントロールを優先します。 ツールバー ボタンは、次の順序で使用します。
- アイコン ボタン。 ダイレクトで、最小限のスペースを取ります。
- ラベル付きアイコン ボタン。 ダイレクトですが、より多くの領域を使用します。
- [分割] ボタン。 最も一般的なコマンドを直接指定しますが、コマンドのバリエーションを処理します。
- メニュー ボタン。 間接ですが、多くのコマンドが表示されます。
即時コマンドを優先します。 柔軟性を高めるために、即時または追加の入力が可能なコマンドの場合:
- プライマリ ツール バーの場合は、柔軟なバージョンのコマンド (Print...など) を使用します。
- 補助ツールバーの場合は、ツールバーの即時バージョン (印刷など) を使用し、メニュー バー (印刷など) で柔軟なバージョンを使用します。
頻繁に使用されるコマンドのラベルを指定、特にアイコンが既知のアイコンでない場合に使用します。
受け入れ可能:
良い:
Windows FAX およびスキャン ツール バーにはいくつかのコマンドがあるため、バージョンが優れているほど、最も重要なラベルが付けられます。
ツール バーのメニューにも直接表示されるコマンドは配置しないでください。
不正解:
ツール バーとメニューする
この例では、印刷はツールバーに直接表示されるため、メニューに表示する必要はありません。
組織と注文
ツールバー内のコマンドを関連グループに整理します。
最も頻繁に使用されるグループを最初に配置します。 グループ内で、コマンドを論理的な順序で配置します。 全体として、コマンドには、最も頻繁に使用されるコマンドが最初に表示される一方で、見つけやすくするための論理フローが必要です。 これは、特にオーバーフローがある場合に最も効率的です。
グループ間のコマンドが弱く結合されている場合にのみ、グループ区切りを使用します。 これにより、グループ化が明確になり、コマンドが見つけやすくなります。
適切に整理されたアイコンがスクリーン ショット
Windows メールのグループ化されたツール バーの例。
頻繁に使用されるコマンドの横に破壊的なコマンドを配置しないでください。 順序またはグループ化を使用して分離を取得します。 また、ツールバーに破壊的なコマンドを配置するのではなく、代わりにメニュー バーまたはコンテキスト メニューにのみ配置することを検討してください。
受け入れ可能:
隣接する印刷ボタンと削除ボタンのスクリーン ショットを
良い:
分離された印刷ボタンと削除ボタンのスクリーン ショットを
より良い例では、Delete コマンドは Print から物理的に分離されています。
オーバーフロー シェブロンを使用して、すべてのコマンドを表示できないことを示します。 ただし、オーバーフローは、すべてのコマンドを表示するための十分なスペースがない場合にのみ使用してください。
不正解:
オーバーフローシェブロンは、すべてのコマンドが表示されるわけではないことを示しますが、より多くのコマンドがより適切なレイアウトである可能性があります。
最も頻繁に使用されるコマンドに、小さなウィンドウ サイズでツール バーから直接アクセスできることを確認します (つまり、オーバーフローではありません)。 必要に応じて、コマンドの順序を変更したり、使用頻度の低いコマンドをメニュー ボタンや分割ボタンに移動したり、ツール バーから完全に削除したりすることもできます。 問題が解決しない場合は、選択したツール バーのスタイルを再検討してください。
メニュー バーを非表示にする
一般に、ツールバーはメニュー バーと共に優れた動作をします。両方を使用すると、それぞれが妥協することなく長所に集中できるためです。
- ツールバーのデザインでメニュー バーが冗長になる場合は、既定でメニュー バーを非表示にします。
- メニュー バーはキーボード ユーザーにとってアクセシビリティが高いため、メニュー バーを完全に削除する代わりに非表示にします。
- メニュー バーを復元するには、[表示] (プライマリ ツール バーの場合) または [ツール] (セカンダリ ツール バーの場合) メニュー カテゴリにメニュー バーのチェックマーク オプションを指定します。 詳細については、「標準メニューと分割ボタン を参照してください。
- ユーザーが Alt キーを押したときにメニュー バーを表示し、最初のメニュー カテゴリに入力フォーカスを設定します。
相互作用
ホバー時に、アフォーダンス ボタンを表示して、アイコンがクリック可能であることを示します。 ヒントがタイムアウトしたら、ヒントまたはヒントを表示します。
ボタンスクリーン ショット
この例では、さまざまな表示状態を示します。
左クリックで次の手順を実行します。
コマンド ボタンの場合は、通常どおりにコントロールを操作します。
モード ボタンの場合は、現在選択されているモードを反映するコントロールを表示します。 モードがマウス操作の動作に影響する場合は、ポインターも変更します。
ペイント バケットスクリーン ショット
この例では、マウス操作モードを示すようにポインターが変更されています。
プロパティ ボタンとドロップダウン リストの場合は、現在選択されているオブジェクトの状態を反映するコントロール (存在する場合) を表示します。 操作時に、コントロールの状態を更新し、選択したオブジェクトに変更を適用します。 何も選択していない場合は、何も行いません。
左ダブルクリックで、左クリックと同じ操作を実行します。
例外: まれに、ツール バー コマンドをより効率的にモーダルに使用できます。 このような場合は、ダブルクリックしてモードを切り替えます。
ボタンの機能スクリーン ショット
この例では、[書式のコピー/貼り付け] コマンドをダブルクリックするとモードが開始され、以降のすべてのクリックで書式が適用されます。 ユーザーは左クリックでモードを終了できます。
右クリック時:
- カスタマイズ可能なツール バーの場合は、ツールバーをカスタマイズするためのコンテキスト メニューを表示します。 マウスの上ではなく、マウスを下に右クリックしてメニューを表示します。
- その他のツール バーの場合は、何も行いません。
アイコン
ドロップダウン リストを除くすべてのツール バー コントロールのアイコンを指定します。
フォント サイズのドロップダウン リストする
ドロップダウン リストにはアイコンは必要ありませんが、他のすべてのツール バー コントロールは必要です。
例外: Windows 7 スタイルのツール バーでは、アイコンがよく知られているコマンドにのみアイコンが使用されます。それ以外の場合は、アイコンのないテキスト ラベルを使用します。 これにより、ラベルの明確さが向上しますが、より多くの領域が必要になります。
ツールバーアイコンがツールバーの背景色に対して明確に表示されていることを確認します。 コンテキストおよびハイ コントラスト モードで、ツール バー アイコンを常に評価します。
特に頻繁に使用されるコマンドの目的を明確に伝えるアイコン デザインを選択します。 適切に設計されたツール バーには、ユーザーがツールヒントを使用してコマンドを効率的に見つけることができないため、わかりやすいアイコンが必要です。 ただし、使用頻度の低いいくつかのコマンドのアイコンがわかりやすい場合でも、ツール バーは正常に動作します。
特に最も頻繁に使用されるコマンドでは、認識可能で区別できるアイコンを選択します。 アイコンに独特の形と色があることを確認します。 そうすることで、アイコン記号を覚えていない場合でも、ユーザーはコマンドをすばやく見つけることができます。
ツール バー アイコンが Aero スタイルのアイコンガイドラインに準拠していることを確認します。
詳細と例については、「アイコンの」を参照してください。
標準メニューと分割ボタン
ツールバーでメニュー ボタンと分割ボタンを使用している場合は、可能な限り、次の標準メニュー構造とその関連コマンドを使用してみてください。 メニュー バーとは異なり、ツール バー コマンドはアクセス キーを受け取りません。
プライマリ ツール バー を する
これらのコマンドは、標準のメニュー バーにあるコマンドを反映しているため、プライマリ ツール バーにのみ使用する必要があります。 この一覧には、ボタンのラベル (および種類) とその順序と区切り記号、ショートカット キー、および省略記号が表示されます。 メニュー バーを表示および非表示にするコマンドが [表示] メニューに表示されることに注意してください。
ファイル NewCtrl+ N
開ける。。。Ctrl + O
閉める
区切り記号 <>
SaveCtrl + S
名前を付けて保存...
区切り記号 <>
[送信先]
区切り記号 <>
プリント。。。Ctrl + P
印刷プレビュー
ページのセットアップ
区切り記号 <>
ExitAlt + F4 (通常はショートカットが指定されていません)
Edit(メニュー ボタン) UndoCtrl + Z
RedoCtrl+Y
区切り記号 <>
CutCtrl + X
CopyCtrl + C
PasteCtrl + V
区切り記号 <>
AllCtrl + A を選択する
区切り記号 <>
DeleteDel(通常はショートカットが指定されていません)
改名する。。。
区切り記号 <>
見付ける。。。Ctrl + F
nextF3 を検索する (通常は指定されていないコマンド)
取り替える。。。Ctrl + H
行きます。。。Ctrl + G
印刷(分割ボタン) 印刷...Ctrl + P
印刷プレビュー
ページのセットアップ
表示(メニュー ボタン) メニュー バー (表示されているかどうかを確認)
詳細ウィンドウ (表示されているかどうかを確認)
プレビュー ウィンドウ (表示されているかどうかを確認)
ステータス バー (表示されているかどうかを確認)
ズーム
Zoom inCtrl++
Zoom outCtrl+-
テキスト サイズ (選択した設定に行頭文字が含まれます)
最大
大きい
中程度
小さい
最小
全画面表示F11
RefreshF5
ツール(メニュー ボタン) ...
ヘルプ オプション (分割ボタン、ヘルプ アイコンを使用) <program name> helpF1
<program name> について
補助ツール バーの
これらのコマンドは、標準のメニュー バーを補完します。 この一覧には、ボタンのラベル (および種類) とその順序と区切り記号、ショートカット キー、および省略記号が表示されます。 メニュー バーを表示および非表示にするコマンドが [ツール] メニューに表示されることに注意してください。
補助ツール バー カテゴリ名は、標準メニュー カテゴリ名とは異なります。これは、より包括的である必要があるためです。 たとえば、編集に関連しないコマンドが含まれているため、[編集] の代わりに [整理] カテゴリが使用されます。 メニュー バーとツールバーの間の一貫性を維持するには、誤解を招くような場合は、標準のメニュー カテゴリ名を使用します。
不正解:
さまざまなコマンドする
この例では、ツールバーには標準の [編集] メニュー コマンドがあるため、一貫性を保つため、[整理] の代わりに [編集] を使用する必要があります。
パレット ウィンドウ
パレット ウィンドウでは、短いタイトル バーを使用して画面領域を最小限に抑えます。 タイトル バーに [閉じる] ボタンを配置します。
タイトル バーのテキストを、パレット ウィンドウを表示したコマンドに設定します。
句読点を終了せずに文形式の大文字を使用します。
ウィンドウ管理コマンドのコンテキスト メニューを指定します。 ユーザーがタイトル バーを右クリックしたときに、このコンテキスト メニューを表示します。
コンテキスト メニューする
この例では、ユーザーはタイトル バーを右クリックしてコンテキスト メニューを表示できます。
可能であれば、パレット ウィンドウのサイズを変更できるようにします。 ウィンドウ フレーム上でサイズ変更ポインターを使用して、ウィンドウのサイズを変更可能であることを示します。
パレット ウィンドウが再表示されたら、最後にアクセスしたときと同じ状態を使用してパレット ウィンドウを表示します。 閉じるときに、ウィンドウのサイズと場所を保存します。 再表示するときは、保存したウィンドウのサイズと場所を復元します。 また、これらの属性をユーザーごとにプログラム インスタンス間で永続的にすることを検討してください。
カスタマイズ
2 つ以上の行で構成されるツール バーのカスタマイズを提供します。 ラベル付けされていないアイコン スタイルにのみカスタマイズが必要です。 コマンドが少ないシンプルなツール バーでは、カスタマイズは必要ありません。
適切な既定の構成を指定します。 ユーザーは、一般的なシナリオに合わせてツール バーをカスタマイズする必要はありません。 ユーザーが不適切な初期構成から自分の方法をカスタマイズすることに依存しないでください。 ほとんどのユーザーがツール バーをカスタマイズしないとします。
次のコマンドを使用してコンテキスト メニューを指定します:
- 使用可能なツール バーを表示するチェック ボックス の一覧
- ツール バーのロック/ロック解除
- カスタマイズ。。。
カスタマイズ可能なツールバーを既定でロック。誤って変更されないようにします。
[カスタマイズ] コマンドの 、表示するツール バーと各ツール バーのコマンドを選択する機能を提供するオプション ダイアログ ボックス を表示します。
[カスタマイズ] ダイアログ ボックスとオプションの
この例では、Visual Studio にツール バーをカスタマイズするためのオプション ダイアログ ボックスが用意されています。
[オプションのカスタマイズ] ダイアログ ボックスで元のツール バー構成に戻る [リセット] コマンドを指定します。
次の方法でドラッグ アンド ドロップを使用してツール バーをカスタマイズする機能を提供します。
- ツールバーの順序と位置を設定します。
- ツールバーの長さを設定し、オーバーフローシェブロンで内容を表示するには小さすぎるツールバーを表示します。
- サポートされている場合は、ツールバーをドッキング解除してパレット ウィンドウになり、その逆も同様です。
[オプションのカスタマイズ] ダイアログ ボックスが表示された場合:
- ツール バーの内容を設定します。
- ツール バーの内容の順序を設定します。
これにより、ユーザーは変更をより直接的かつ効率的に行うことができます。
ユーザーごとに、すべてのツール バーのカスタマイズを保存します。
省略記号の使用
ツール バー コマンドは即時アクションに使用されますが、アクションを実行するためにさらに情報が必要な場合があります。 省略記号を使用して、コマンドが有効になる前に、より多くの情報が必要であることを示します。 ヒントとラベルの末尾に省略記号を配置します (存在する場合)。
省略記号付きの印刷ツールヒント テキストのスクリーン ショットを 
この例では、印刷...コマンドを実行すると、[印刷] ダイアログ ボックスが表示され、詳細情報が収集されます。
ただし、コマンドをすぐに有効にできない場合は、省略記号は必要ありません。 そのため、たとえば、共有設定には追加情報が必要であっても省略記号はありません。これは、コマンドをすぐに有効にできない可能性があるためです。
ツール バー、コマンド、ツールヒントのする
[共有設定] コマンドはすぐに有効にならないため、省略記号はありません。
ツールバーは常に表示され、スペースはプレミアムであるため、省略記号は頻繁に使用しないでください。
手記
ツールバーによって表示されるメニューの場合は、メニューの省略記号のガイドライン適用します。
推奨されるサイズ設定と間隔
間隔情報がする
標準ツール バーに推奨されるサイズ設定と間隔。
ラベル
全般
-
文形式の大文字を使用します。
- 例外: 従来のアプリケーションの場合は、大文字と小文字が混在しないように、必要に応じてタイトル スタイルの大文字と小文字を使用できます。
ラベル付けされていないアイコン ボタン
ツールヒントを使用してコマンドにラベルを付けます。 ツールヒントのテキストには、ボタンにラベルが付いている場合のラベルを使用しますが、ショートカット キーがある場合はショートカット キーを含めます。
ツール バー、プリンター アイコン、ツール ヒントのスクリーン ショットを
アイコン ボタンのヒントの例。
ラベル付きアイコン ボタン
簡潔なラベルを使用します。 可能な場合は 1 つの単語を使用し、最大 4 つの単語を使用します。
アイコンの右側にラベルを配置します。
ヒントを使用してコマンドを説明します。 ボタンにはラベルが付いているため、ヒントの代わりにヒントを使用すると冗長になります。
ヒントスクリーン ショット
ラベル付きのアイコン ボタンヒントの例。
ドロップダウン リスト
リストに常に値がある場合は、現在の値をラベルとして使用します。
フォント オプションをスクリーン ショット
この例では、現在選択されているフォント名がラベルとして機能します。
編集可能なドロップダウン リストに値がない場合は、プロンプトを使用します。
リスト ラベル検索アドレス帳の
この例では、ドロップダウン リストのラベルにプロンプトが使用されます。
メニュー ボタンと分割ボタン
- 動詞ベースのメニュー ボタン名を優先します。 ただし、[作成]、[表示]、[表示]、[管理] の場合は、動詞を省略します。 たとえば、Tools と Page メニュー ボタンには動詞がありません。
- メニューの内容を明確かつ正確に説明する 1 つの特定の単語を使用します。 名前はメニュー内のすべてを記述するほど一般的である必要はありませんが、ユーザーがメニュー内で見つけたものに驚かないように、十分に予測可能である必要があります。
- 必須ではありませんが、ヒントの説明が役立つ場合は入力してください。
メニュー項目
- 動詞、名詞、または名詞句で始まるメニュー項目名を使用します。
- 動詞ベースのメニュー名を優先します。 ただし、[作成]、[表示]、[表示]、[管理] の場合は、動詞を省略します。 たとえば、次のコマンドでは動詞は使用されません。
- に関しては
- アドバンスド
- フルスクリーン
- 新機能
- オプション
- プロパティ
- 特定の動詞を使用します。 変更や管理など、一般的で役に立たない動詞は避けてください。
- 1 つのオブジェクトに適用されるコマンドには単数名詞を使用、それ以外の場合は複数の名詞を使用します。
- 補完的なコマンドのペアの場合は、明確に補完的な名前を選択します。 例: 追加、削除、表示、非表示;挿入、削除。
- テクノロジではなく、ユーザーの目標とタスクに基づいてメニュー項目名を選択します。
- 指定された目的には、次のメニュー項目名を使用します。
- オプション: プログラムオプションを表示します。
- カスタマイズ: 機械的 UI 構成に関連するプログラム オプションを表示します。
- カスタマイズ: 一般的に使用される パーソナル化 設定の概要を表示します。
- 環境設定: 使用しないでください。 代わりにオプションを使用してください。
- プロパティ: オブジェクトのプロパティ ウィンドウを表示します。
- 設定: メニュー ラベルとして使用しないでください。 代わりにオプションを使用してください。
- サブメニューを表示するメニュー項目のラベルに省略記号が表示されることはありません。 サブメニューの矢印は、別の選択が必要であることを示します。
ドキュメンテーション
ツールバーを参照する場合:
- ツールバーが 1 つしかない場合は、ツールバーとして参照してください。
- 複数のツールバーがある場合は、名前で参照し、その後にツールバーという単語を付けます。 既定でオンになっているメイン ツール バーを参照し、ファイルを開いたり印刷したりするなどの基本的なタスクのボタンを標準ツール バーとして含めます。
- ツール バーは、1 つの未集計の単語です。 (一方、メニュー バーは 2 つの単語です)。
- ツール ヒント ラベルでツール バー ボタンを参照します。 大文字と小文字を含む正確なラベル テキストを使用しますが、省略記号は含めないでください。
- ラベルと単語メニューのツール バー メニュー ボタンを参照します。 大文字と小文字を含む正確なラベル テキストを使用します。
- ツール バー コントロールは、通常、ツール バー ボタンとして参照します。
- ユーザー操作を説明するには、ツール バー ボタンと読み取り専用ドロップダウン リストのクリックを使用し、編集可能なドロップダウン リストに入力します。 選択、選択、選択は使用しないでください。
- プログラミング ドキュメントを除き、カスケード、プルダウン、ドロップダウン、またはポップアップを使用してメニュー ボタンを記述しないでください。
- 使用できないアイテムは、淡色表示、無効化、灰色表示ではなく、使用不可と参照してください。 プログラミング ドキュメントでは無効にしてください。
- 可能な場合は、太字のテキストを使用してラベルの書式を設定します。 それ以外の場合は、混乱を防ぐために必要な場合にのみ、ラベルを引用符で囲みます。
例：
- ツールバーの [ページ] メニューの [電子メール でページ送信] をクリックします。
- ツール バーの [フォント] ボックスに、「Segoe UI」と入力します。
- [書式設定] ツール バーで、[の表示]ポイントし、[コメント] クリックします。