情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

ツール バー

適切なユーザー インターフェイスかどうかの判断基準
デザイン コンセプト
使用パターン
ガイドライン
   提示方法
   コントロールとコマンド
   構成と順序
   メニュー バーの非表示化
   対話操作
   アイコン
   標準メニューと分割ボタン
   パレット ウィンドウ
   カスタマイズ
   省略記号の使用
推奨されるサイズと間隔
ラベル
ドキュメント

"ツール バー" は、コマンドをグラフィカルに提示するもので、効率的にアクセスできるように最適化されています。

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

典型的なツール バーです。

ツール バーは、メニュー バーと併用するか、またはメニュー バーの代わりに使用します。ツール バーは、操作が直接的で (マウス クリックによって表示されるのではなく、常に表示されている)、すぐに効果があり (追加の入力を必要としない)、最もよく使用されるコマンドが含まれる (包括的な一覧ではない) ため、メニュー バーよりも効率的です。メニュー バーとは異なり、コマンドを包括的に提供する必要やコマンドの内容がひとめでわかるようにする必要はありませんが、すばやく、便利で効率的に使用できるようにする必要があります。

一部のツール バーはカスタマイズが可能です。ユーザーが自由に追加/削除したり、サイズや場所、内容を変更できるものがあります。種類によっては、ドッキングを解除してパレット ウィンドウにできるものもあります。ツール バーの種類の詳細については、このトピックの「使用パターン」を参照してください。

注: メニューコマンド ボタン、およびアイコンに関するガイドラインは、それぞれ別の項目として記載しています。

適切なユーザー インターフェイスかどうかの判断基準

以下の点に基づいて判断します。

  • ウィンドウがメイン ウィンドウかどうか。ツール バーは、メイン ウィンドウでは効果的に機能しますが、サブ ウィンドウでは多くの場合邪魔になります。サブ ウィンドウの場合は、ツール バーではなく、コマンド ボタンメニュー ボタンリンクを使用してください。
  • 頻繁に使われるコマンドの数が少ないかどうか。ツール バーでは、メニュー バーのように多くのコマンドを扱うことができないため、頻繁に使われるコマンドの数が少ない場合にアクセスを効率化する手段として用いるのが最適です。
  • すぐに効果のあるコマンドがほとんどかどうか。つまり、追加の入力を必要としないコマンドがほとんどであるかどうかを判断します。効率性の観点から、ツール バーには直接的、即時的であることが求められます。該当しない場合は、メニュー バーの方が適しています。
  • コマンドのほとんどを直接提示できるかどうか。つまり、ユーザーが 1 回のクリックでコマンドを操作できるかどうかを判断します。メニュー ボタンを使っていくつかのコマンドを提示することができますが、コマンドの多くをこの方法で提示するとツール バーの効率性が損なわれます。その場合はメニュー バーの作成を検討します。
  • コマンドをアイコンでうまく表現できるかどうか。メニュー コマンドはテキストを使って提示しますが、ツール バー コマンドは (テキスト ラベルを併用する場合もありますが) 通常アイコンを使って提示します。コマンド アイコンの品質が十分でなく、ひとめで内容がわかるものではない場合は、メニュー バーの作成を検討します。

ツール バーがあってメニュー バーがないプログラムで、ほとんどのコマンドにメニュー ボタンや分割ボタンから間接的にアクセス可能である場合、このツール バーは、実質的にメニュー バーの役割を果たしています。この場合は、メニュー ガイドラインのツール バー メニューのパターンに従ってください。

デザイン コンセプト

優れたメニュー バーとは、利用可能なすべての最上位コマンドをカタログのように一覧表示しているものであり、優れたツール バーとは、よく使用するコマンドに簡単かつ便利にアクセスできるようになっているものを指します。ツール バーの目的はユーザーの生産性を高めることであって、ユーザーを訓練することではありません。ツール バーからコマンドにアクセスする方法を知ると、そのコマンドをメニュー バーから使用することはほとんどなくなります。したがって、プログラムのメニュー バーとツール バーを直接対応させる必要はありません。

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

一般的に、ツール バーは以下の点においてメニュー バーと異なります。

  • 使用頻度。メニュー バーはプログラムで利用可能なコマンドをすべて提供するものですが、ツール バーは最もよく使われるコマンドのみを提供するものです。
  • 即時性。メニュー コマンドには追加の入力が必要なものがありますが、ツール バー コマンドはクリックしてすぐに効果があります。たとえば、メニュー バーの [印刷] コマンドでは最初に [印刷] ダイアログ ボックスが表示されますが、ツール バーの [印刷] ボタンはクリックするとすぐにドキュメントのコピーを既定のプリンターで 1 部印刷します。

    [印刷] ボタンが選択されたツール バーのスクリーン ショット

    この例では、ツール バーの [印刷] ボタンをクリックすると、すぐにドキュメントのコピーが既定のプリンターから 1 部印刷されます。

  • 直接性。メニュー バー コマンドを呼び出すにはメニュー内を移動する必要がありますが、ツール バー コマンドは 1 回のクリックで呼び出すことができます。
  • コマンドの数と密度。ツール バーでは、コマンドの数に比例して必要な画面領域は大きくなり、コマンドを使用しない場合でもそのまま領域を使用します。そのため、ツール バーでは領域を効率的に使用する必要があります。これに対し、メニュー バー コマンドは通常は非表示になっており、階層構造によってコマンドをいくつでも追加できます。
  • サイズと表示。メニュー バーはテキスト形式のコマンドを使用しますが (オプションでアイコンを付けることもできます)、ツール バーのコマンドは多くのコマンドを小さな領域にまとめて表示するために通常アイコンを使用します (ツールヒント形式のラベルを付けます)。ツール バー ボタンに標準的なテキスト ラベルを追加することもできますが、さらに大きな領域が必要になります。

    [送受信] ラベルが付いたツール バーのスクリーン ショット

    ラベル付きのツール バー ボタンは、ラベルなしのツール バー ボタンに比べて 3 倍以上の領域を使用します。

  • わかりやすさ。ツールヒントだけで効率的にコマンドを探すことは難しいため、デザインの優れたツール バーにするには、コマンドの内容がひとめでわかるアイコンが必要です。ただし、あまり頻繁に使われないコマンドのアイコンが多少わかりにくいものであっても、問題ありません。

    よく知られているアイコンで構成されたツール バーのスクリーン ショット

    この例では、最もよく使用されるアイコンがどのような内容のコマンドであるかが、ひとめでわかるようになっています。

  • 認識と区別のしやすさ。頻繁に使用するツール バー コマンドの場合、ユーザーはボタンの場所、形、色などの属性を記憶しています。ツール バーのデザインが優れていると、アイコンを正確に思い出すことができなくても、すばやくコマンドを見つけることができます。それに対して、頻繁に使用するメニュー バー コマンドの場合、ユーザーは場所は記憶していますが、コマンド ラベルを頼りにして選択を行います。

    [Snipping Tool] オプション ダイアログ ボックスのスクリーン ショット

    ツール バー コマンドでは、固有の場所、形、色によって、アイコンの認識と区別がしやすくなります。

    メニュー バーで [ファイル] コマンドが選択されたスクリーン ショット

    メニュー バー コマンドの場合、結局はラベルに頼ることになります。

効率性

ツール バーはその特色を活かすため、主に効率性を意識してデザインする必要があります。効率的でなければツール バーの意味がありません。

最も重要な点
ツール バーは、主に効率性を意識してデザインします。ツール バーには、使用頻度が高く、すぐに効果があり、直接的で、すばやく認識できるコマンドを表示します。

メニュー バーの非表示化

通常、ツール バーは、メニュー バーと組み合わせることによって最大限の効果が得られます。優れたツール バーは効率的であり、優れたメニュー バーは包括的です。メニュー バーとツール バーの両方を提供することで、競合することなくそれぞれの長所を活用できます。

しかし、シンプルなプログラムではこのことは当てはまりません。コマンドの数が少ないプログラムの場合、メニュー バーが、冗長で非効率的なツール バーのようなものとなるため、メニュー バーとツール バーを両方付けることにあまり意味がありません。

このため、Windows Vista® ではシンプルなプログラムの多くは、主にツール バーにコマンドが配置され、メニュー バーは既定で非表示になっています。Windows エクスプローラー、Windows® Internet Explorer®、Windows Media® Player、Windows フォト ギャラリーなどがこれに当たります。

これは大きな変更です。メニュー バーを削除すると、ツール バーにコマンドを包括的に配置する必要があるほか、以下のような変更を行わなければならないため、ツール バーの性質が根本的に変わります。

  • 使用頻度。メニュー バーを削除すると、使用頻度にかかわらず、ウィンドウやコンテキスト メニューから直接利用できないすべてのコマンドを、ツール バーからアクセスできるようにする必要があります。
  • 即時性。メニュー バーを削除すると、ツール バーが目に見える唯一のコマンドへのアクセス ポイントになります。このため、メニュー バーのすべての機能をツール バーが備えている必要があります。たとえば、メニュー バーがない場合、ツール バーの [印刷] コマンドは、すぐに印刷を行うのではなく、[印刷] ダイアログ ボックスが表示されるようにする必要があります (ただし、この場合は分割ボタンを使用するとうまく解決できます。標準的な [印刷] 分割ボタンについては、「標準メニューと分割ボタン」を参照してください)。

    ツール バーで [印刷] コマンドのオプションが表示されたスクリーン ショット

    この例では、Windows フォト ギャラリーのツール バーの [印刷] ボタンに、[印刷] ダイアログ ボックスを表示する [印刷] コマンドが設定されています。

  • 直接性。領域を節約して煩雑さを避けるために、使用頻度の少ないコマンドは、直接的ではなくなりますが、メニュー ボタンに移動することもできます。

メニュー バーを補完するものとして使用するツール バーと、メニュー バーを削除または非表示にして使用するツール バーとではデザインが異なります。また、ユーザーがあるコマンドを実行するのに非表示になっているメニュー バーを表示させる前提でデザインを決めることはできないため、メニュー バーを非表示にすることとメニュー バーを完全に削除することとは同じと考える必要があります (既定でメニュー バーを非表示にする場合、ユーザーがメニュー バーを表示してコマンドを探せることに気付くものと思ったり、さらにはメニュー バーの表示方法がわかるものと考えてはなりません)。

メニュー バーなしで使用できるツール バーをデザインすると、多くの場合、妥協しなければならない点がいくつか出てきます。しかし、効率性についてあまり妥協しすぎてもいけません。メニュー バーを非表示にすることによってツール バーの効率性が損なわれる場合は、メニュー バーは非表示にしません。

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

ツール バーとメニュー バーでは、キーボードを使ったアクセス方法がまったく異なります。メニュー バーの入力フォーカスを取得するには Alt キーを押し、解除するには Esc キーを押します。メニュー バーに入力フォーカスを取得すると、上下左右の方向キー、Home キー、End キー、Tab キーを使って、メニュー バー内でフォーカスを移動できます。これに対し、ツール バーの入力フォーカスは、Tab キーを使って、ウィンドウ内の要素全体で切り替えて取得します。ツール バーのタブ オーダーは最後なので、Shift + Tab キーで逆に切り替えられることを知らない場合、要素が多いページでツール バーをアクティブにするのに苦労する可能性があります。

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

アクセシビリティの観点から、ツール バーをメインに考える場合でもメニュー バーは完全に削除せずに保持することをお勧めします。メニュー バーを削除するか、単に非表示とするかを選択する必要がある場合は、非表示にすることを選択してください。

使用パターン

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

メイン ツール バー
メニュー バーが非表示になっているか削除されている場合に、メニュー バーなしでも使用できるようにデザインされたツール バーです。                                 
メイン ツール バーは効率性と包括性のニーズを調整する必要があります。シンプルなプログラムで最も効果を発揮します。

Windows エクスプローラーのツール バーのスクリーン ショット

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 つにまとめるために使われています。即時型の [印刷] コマンドが使用されることがほとんどなので、通常、その他のコマンドは表示する必要はありません。

メニュー ボタンと違って、ボタンの左側部分をクリックすると、ラベルに示された操作が直ちに実行されます。分割ボタンは、次のコマンドが、直前のコマンドと同じであるような状況にも向いています。この場合、ラベルは直前のコマンドに応じて変わります。カラー ピッカーはその典型的な例です。

ペンキを注いでいるバケツ アイコンのスクリーン ショット

この例では、直前のコマンドに応じてラベルが変わっています。

ドロップダウン リスト
プロパティを表示/変更するために使用する、編集可能または読み取り専用のドロップダウン リストです。

フォントのドロップダウン リストのスクリーン ショット

この例では、フォント属性を表示/設定するためにドロップダウン リストが使用されています。

ツール バーのドロップダウン リストは、現在選択されたオブジェクトがある場合、その状態が反映されます。リストを変更すると、選択されたオブジェクトの状態が変更されます。

ガイドライン

提示方法

  • コマンドの数と使用方法に基づいて適切なツール バーのスタイルを選択します。選択方法に関するガイダンスは、上記のツール バーのスタイルの表を参照してください。プログラムの作業領域を大幅に狭めてしまうツール バー構成は避けてください。
  • ツール バーはコンテンツ領域の上に配置します。メニュー バーやアドレス バーがある場合はその下に配置します。
  • 領域を節約することを優先する場合は、以下に従います。
    • 一般的によく知られているアイコンやあまり使われないコマンドのラベルを省略します。
    • ウィンドウ幅全体を使わず、部分ツール バーのみを使用します。
    • メニュー ボタンまたは分割ボタンを使って、関連するコマンドをまとめます。
    • オーバーフロー シェブロンを使用して、あまり使用されないコマンドを非表示にします。
    • 現在のコンテキストに該当するコマンドのみを表示します。

    一般的なアイコンにラベルが付いていないツール バーのスクリーン ショット

    Windows Internet Explorer のツール バーでは、一般的なアイコンのラベルを省略して部分ツール バーを使用し、あまり使用されないコマンドをオーバーフロー シェブロンを使用して隠すことで、領域を節約しています。

  • ラベルなしのアイコン ツール バー形式の場合は、既定のツール バー構成を 2 行以内にします。3 行以上のツール バーが便利な場合は、カスタマイズ可能なツール バーにします。3 行以上のツール バーはユーザーの作業を妨げ、プログラムの作業領域を大幅に狭める可能性があります。

    間違った例:
    メニュー バーと 3 行のツール バーのスクリーン ショット

    既定で 3 行以上のツール バー構成は、かなり煩雑な外観になります。

  • 現在のコンテキストに該当しないツール バー ボタンは、個々に無効にします。削除せず、無効にすることで、ツール バーの内容が一定に保たれ、探しやすくなります。
  • クリックすると直接エラーが発生するツール バー ボタンは、個々に無効にします。これは、直接性を維持するために必要です。
  • ラベルなしのアイコン ツール バー形式の場合は、現在のコンテキストに該当しないツール バーをすべて削除します。該当するモードでのみ表示されるようにします。

    [デバッグ] ツール バーのスクリーン ショット

    この例では、プログラムの実行中のみ [デバッグ] ツール バーが表示されます。

  • ツール バー ボタンは左揃えで表示します。[ヘルプ] アイコンがある場合は、右揃えに配置します。

    [ヘルプ] アイコンが右揃えで表示されているツール バーのスクリーン ショット

    すべてのツール バー ボタンは、[ヘルプ] アイコンを除き左揃えで表示します。

    例外: Windows 7 スタイルのツール バーの場合、プログラム固有のコマンドは左揃えで表示されますが、[オプション]、[表示]、[ヘルプ] などの標準的でよく知られたコマンドは右揃えで表示されます。
  • ツール バー ボタン ラベルが動的に変化するようにしないでください。これは予想外の動作であり、混乱を招きます。ただし、現在の状態が反映されるようにアイコンを変化させることは可能です。

    ペンキを注いでいるバケツ アイコンのスクリーン ショット

    この例では、既定のコマンドであることを示すためにアイコンが変わっています。

コントロールとコマンド

  • よく使用されるコマンドを優先します。
    • メイン ツール バーでは、包括的なコマンドを表示します。メイン ツール バーは、メニュー バーほど包括的である必要はありませんが、他ではすぐに見つからないコマンドをすべて提示する必要があります。メイン ツール バーには、以下のコマンドを提示する必要はありません。
      • UI 自身に直接表示されているコマンド
      • 通常、コンテキスト メニューからアクセスするコマンド
      • [切り取り]、[コピー]、[貼り付け] などの一般的なコマンド
    • 補助ツール バーには、使用頻度の最も高いコマンドを提示します。ツール バー コマンドの上位機能としてメニュー バー コマンドを利用できるため、すべてのコマンドを提供する必要はありません。コマンドにすばやく便利にアクセスすることにのみ着目し、その他の要素は無視します。
  • 直接コントロールを優先します。 ツール バー ボタンは、次の優先順位で使用します。
    • アイコン ボタン。直接コントロールであり、最小限の領域で済みます。
    • ラベル付きアイコン ボタン。直接コントロールですが、アイコン ボタンよりも広い領域が必要です。
    • 分割ボタン。最も一般的なコマンドについては直接コントロールですが、派生コマンドを取り扱います。
    • メニュー ボタン。間接コントロールですが、多くのコマンドを提示します。
  • 即時型のコマンドを優先します。 即時型のコマンドと、柔軟性を持たせるために追加入力できるコマンドのいずれかを選択できる場合、次のことに留意します。
    • メイン ツール バーの場合、柔軟性の高いコマンド ([印刷...] など) を使用します。
    • 補助ツール バーの場合、ツール バーでは即時型のコマンド ([印刷] など) を、メニュー バーでは柔軟性の高いコマンド ([印刷...] など) を使用します。
  • 使用頻度の高いコマンドにはラベルを表示します (特に、あまり一般的ではないアイコンの場合)。

    許容される例:
    どのアイコンにもラベルが付いていないツール バーのスクリーン ショット

    より良い例:
    一部のアイコンにラベルが付いたツール バーのスクリーン ショット

    [Windows Fax とスキャン] ツール バーにはコマンド数が少なく、この優れたツール バーでは最も重要なコマンドにラベルが付いています。

  • ツール バーに直接提示されているコマンドは、ツール バー メニューに提示しないでください。

    間違った例:
    ツール バーにもメニューにも [印刷] コマンドが含まれているスクリーン ショット

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

構成と順序

  • ツール バー内のコマンドは関連グループに分類します。
  • 最初によく使用されるグループを配置し、グループ内では、コマンドを論理的な順序で配置します。全体では、コマンドは、最もよく使用されるコマンドが最初に表示されるようにしながら、探しやすくするために論理的にも自然な順序になるようにします。こうすると、特にコマンドがオーバーフローした場合に、最も効率的になります。
  • グループ間のコマンドの結びつきが弱い場合、グループの区切り線を使用します。こうすると、グループ分けがはっきりし、コマンドが探しやすくなります。

    アイコンが適切に構成されたツール バーのスクリーン ショット

    アイコンが適切に構成されたツール バーのスクリーン ショット

    Windows メールのグループ化されたツール バーの例。

  • リスクのあるコマンドを使用頻度の高いコマンドの隣に配置しないようにします。両者を離して並べるか、または別のグループにします。また、リスクのあるコマンドをツール バーに配置せず、メニュー バーまたはコンテキスト メニューのみに配置することを検討します。

    許容される例:
    [印刷] ボタンと [削除] ボタンが隣接して配置されているスクリーン ショット

    より良い例:
    [印刷] ボタンと [削除] ボタンが離れて配置されているスクリーン ショット

    より良い例では、[削除] コマンドと [印刷] コマンドが物理的に離れた位置に配置されています。

  • オーバーフロー シェブロンを使って、表示されていないコマンドがあることを示します。ただしこの方法は、すべてのコマンドを表示するのに必要な領域を確保できない場合に限って使用してください。

    間違った例:
    お気に入りバーと非表示コマンドのスクリーン ショット

    このオーバーフロー シェブロンは、すべてのコマンドが表示されていないことを示していますが、レイアウトを改善すればより多くのコマンドを表示できます。

  • 最もよく使用されるコマンドには、小さいウィンドウ サイズでもツール バーから直接アクセスできる (つまり、コマンドをオーバーフローさせない) ようにします。必要であれば、コマンドの順序を変更したり、使用頻度の低いコマンドをメニュー ボタンや分割ボタンに移動したり、ツール バーから完全に削除したりします。それでも問題が解決しない場合、ツール バーのスタイルを選択し直してください。

メニュー バーの非表示化

通常、ツール バーとメニュー バーは、競合することなくそれぞれの長所を活用でき、ツール バーとメニュー バーは組み合わせることによって最大限の効果が得られます。

  • ツール バーのデザイン上、メニュー バーを表示するとしつこく感じる場合は、既定でメニュー バーを非表示にします。
  • キーボード ユーザーにとってはメニュー バーの方が使用しやすいため、メニュー バーを完全に削除するのではなく、非表示にします。
  • メニュー バーを復元する手段として、[表示] メニュー カテゴリ (メイン ツール バー) または [ツール] メニュー カテゴリ (補助ツール バー) で [メニュー バー] チェックマーク オプションを用意します。詳細については、「標準メニューと分割ボタン」を参照してください。
  • Alt キーを押すとメニュー バーが表示され、最初のメニュー カテゴリに入力フォーカスが設定されます。

対話操作

  • マウス ポインターをポイントしたときに、アイコンがクリック可能であることを示すアフォーダンスをボタンに表示します。ツールヒントのタイムアウト後は、ツールヒントまたは情報ヒントを表示します。

    ボタンを説明する情報ヒントのスクリーン ショット

    この例では、さまざまな表示状態を示しています。

  • 左ボタンのシングルクリックでは、次のようになります。
    • コマンド ボタンの場合、通常どおりコントロールを操作します。
    • モード ボタンの場合、コントロールを表示して、現在選択されているモードを反映します。モードによってマウス操作の動作が変わる場合は、ポインターも変更します。

      ペンキ バケツの形をしたポインターのスクリーン ショット

      この例では、ポインターを変更することでマウスの操作モードを示しています。

    • プロパティ ボタンおよびドロップダウン リストの場合、コントロールを表示して、現在選択されているオブジェクトがある場合、その状態を反映します。対話操作時には、コントロールの状態を更新し、選択されたオブジェクトに変更を適用します。何も選択されていない場合は、何もしません。
  • 左ボタンのダブルクリックでは、左ボタンのシングルクリックと同じ操作を実行します。
    • 例外: ごくまれに、ツール バー コマンドの方がモーダルでより効率的に使用できることがあります。この場合、ダブルクリックによってモードを切り替えます。

      ボタンの機能を示す情報ヒントのスクリーン ショット

      この例では、[書式のコピー/貼り付け] コマンドをダブルクリックすると、指定した書式がその後のすべてのクリックで適用されるモードになります。このモードは、左ボタンのシングルクリックで解除できます。

  • 右クリックでは、次のようになります。
    • カスタマイズ可能なツール バーの場合、ツール バーをカスタマイズするためのコンテキスト メニューを表示します。マウスの右ボタンが押し下げられたとき (マウスのボタンが元に戻ったときではない) にメニューを表示します。
    • その他のツール バーの場合は、何もしません。

アイコン

  • ドロップダウン リストを除くすべてのツール バーのコントロールにアイコンを付けます。

    [フォント サイズ] ドロップダウン リストのスクリーン ショット

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

    例外: Windows 7 スタイルのツール バーでは、コマンドのアイコンがよく知られている場合のみアイコンを使用します。よく知られていない場合は、アイコンなしでテキスト ラベルを使用します。この場合、ラベルは明確になりますが、より広いスペースが必要になります。
  • ツール バーのアイコンが、ツール バーの背景色に対して明瞭に見えるようにします。ツール バーのアイコンの評価は、常にコンテキスト内で、ハイコントラスト モードで行います。
  • 最もよく使用されるコマンドの場合は特に、目的を明確に伝えるアイコンのデザインを選択します。ツールヒントだけでは効率的にコマンドを探すことは難しいため、デザインの優れたツール バーには、コマンドの内容がひとめでわかるアイコンが必要です。ただし、あまり頻繁に使われないコマンドであれば、わかりにくいものでも問題ありません。
  • 認識しやすく、区別しやすいアイコンを選択します (よく使用されるコマンドの場合は特に)。アイコンには特徴のある形や色を設定します。そうすることで、アイコンの記号を思い出すことができなくても、コマンドをすばやく探すことができます。
  • ツール バーのアイコンを Aero style のアイコンのガイドラインに準拠させるようにします。

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

標準メニューと分割ボタン

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

メイン ツール バー

次のコマンドは、標準メニュー バーで使用されるコマンドを反映したものなので、メイン ツール バーでのみ使用する必要があります。次の一覧に、ボタンのラベル (および種類) を、表示すべき順序で、区切り記号、ショートカット キー、省略記号も併せて示します。メニュー バーを表示および非表示にするコマンドは [表示] メニューの中にあります。

    ファイル
        新規作成                 Ctrl + N
        開く...            Ctrl + O
        閉じる
        <区切り記号>
        上書き保存                 Ctrl + S
        名前を付けて保存...
        <区切り記号>
        送信
        <区切り記号>
        印刷...              Ctrl + P
        印刷プレビュー
        ページ設定
        <区切り記号>
        終了                  Alt + F4   (通常はショートカット キーなし)

    編集             (メニュー ボタン)
        元に戻す                Ctrl + Z
        繰り返し                Ctrl + Y
        <区切り記号>
        切り取り                   Ctrl + X
        コピー                 Ctrl + C
        貼り付け                Ctrl + V
        <区切り記号>
        すべて選択          Ctrl + A
        <区切り記号>
        削除              Del       (通常はショートカット キーなし)
        名前の変更...
        <区切り記号>
        検索...               Ctrl + F
        次を検索          F3        (通常はコマンドなし)
        置換...         Ctrl + H
        ジャンプ...             Ctrl + G

    印刷             (分割ボタン)
        印刷...              Ctrl + P
        印刷プレビュー
        <区切り記号>
        ページ設定

    表示             (メニュー ボタン)
        メニュー バー              (表示されている場合はチェックあり)
        詳細ウィンドウ         (表示されている場合はチェックあり)
        プレビュー ウィンドウ        (表示されている場合はチェックあり)
        ステータス バー              (表示されている場合はチェックあり)
        <区切り記号>
        ズーム
        拡大             Ctrl + +
        縮小           Ctrl + -
        <区切り記号>
        テキスト サイズ         (選択した設定にはマークあり)
                最大
                大
                中
                小
                最小
        <区切り記号>
        全画面表示         F11
        最新の情報に更新              F5

    ツール             (メニュー ボタン)
        ...
        <区切り記号>
        オプション

    ヘルプ             (分割ボタン、[ヘルプ] アイコンを使用します)
        <プログラム名> ヘルプ  F1
        <区切り記号>
        <プログラム名> のバージョン情報

補助ツール バー

次のコマンドは、標準メニュー バーを補うものです。次の一覧に、ボタンのラベル (および種類) を、表示すべき順序で、区切り記号、ショートカット キー、省略記号も併せて示します。メニュー バーの表示および非表示に関するコマンドは [ツール] メニューにあります。




























































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

間違った例:
別のコマンドに同じオプションがあるスクリーン ショット

この例では、ツール バーに標準的な [編集] メニューのコマンドが含まれているため、一貫性を保つために [整理] ではなく [編集] というカテゴリ名を使用する必要があります。

パレット ウィンドウ

  • パレット ウィンドウでは、短いタイトル バーを使用して、画面領域を最小限に抑えます。タイトル バーには [閉じる] ボタンを追加します。
  • タイトル バーのテキストを、パレット ウィンドウを表示したコマンドに設定します。
  • センテンス スタイルの大文字化を使用し、末尾に句読点は付けません。
  • ウィンドウの管理コマンド用にコンテキスト メニューを用意します。このコンテキスト メニューは、ユーザーがタイトル バーを右クリックしたときに表示されます。

    コンテキスト メニューを含むツールボックスのスクリーン ショット

    この例では、ユーザーがタイトル バーを右クリックすると、コンテキスト メニューを表示することができます。

  • 可能で便利であれば、パレット ウィンドウのサイズを変更できるようにします。ウィンドウ枠に重ねたときに表示されるサイズ変更ポインターによって、ウィンドウがサイズ変更可能であることを示します。
  • パレット ウィンドウを再表示する場合、前回アクセスしたときの状態で表示します。閉じるときに、ウィンドウのサイズと場所を保存します。再表示する場合、保存したウィンドウのサイズと場所を復元します。また、これらの属性を、ユーザーごとに、プログラム インスタンス レベルで保持することも検討します。

カスタマイズ

  • カスタマイズは、複数の行で構成されるツール バーに対して提供します。ラベルのないアイコン スタイルのみカスタマイズが必要です。コマンド数の少ないシンプルなツール バーには、カスタマイズは必要ありません。
  • 適切な既定の構成を提供します。一般的なシナリオでは、ユーザーがツール バーをカスタマイズする必要がないようにします。ユーザーが不適切な初期構成を修正してカスタマイズを行うことをあてにしないでください。ほとんどのユーザーがツール バーをカスタマイズしないことを前提としてください。
  • 次のコマンドを含むコンテキスト メニューを用意します。
    • 利用可能なツール バーを表示するためのチェック ボックス リスト
    • ツール バーのロック/ロック解除
    • カスタマイズ...
  • カスタマイズ可能なツール バーを既定でロックします。これによって、誤って変更が行われないようにします。
  • [カスタマイズ] コマンドで、オプションのダイアログ ボックスを表示します。このダイアログ ボックスで、表示するツール バーや各ツール バーに配置するコマンドを選択できます。

    [カスタマイズ] ダイアログ ボックスとオプションのスクリーン ショット

    この例では、Visual Studio で提供されたオプションのダイアログ ボックスで、ツール バーのカスタマイズを行います。

  • [カスタマイズ] のオプションのダイアログ ボックスに [リセット] コマンドを用意して、元のツール バー構成に戻すことができるようにします。
  • 次の点について、ドラッグ アンド ドロップによってツール バーをカスタマイズできるようにします。
    • ツール バーの順序や位置を設定します。
    • ツール バーの長さを設定します。小さすぎてコンテンツを表示できないツール バーは、オーバーフロー シェブロンを使って表示します。
    • 可能であれば、ツール バーをドッキング解除してパレット ウィンドウにしたり、パレット ウィンドウをドッキングしてツール バーにしたりします。
    [カスタマイズ] のオプションのダイアログ ボックスでは、次の点についてカスタマイズできるようにします。
    • ツール バーのコンテンツを設定します。
    • ツール バーのコンテンツの順序を設定します。
    こうすることで、ユーザーはより直接的かつ効率的に変更を行うことができます。
  • すべてのツール バーのカスタマイズを保存します。これはユーザーごとに行います。

省略記号の使用

ツール バー コマンドは即座に実行する操作のために使用されるものですが、その操作を実行するために、さらに詳しい情報が必要な場合があります。省略記号は、コマンドが有効になるにはさらに詳しい情報が必要であることを示すために使用します。そのようなコマンドでは、省略記号をツールヒントやラベルの最後に付けます。

省略記号が付いた [印刷] ツールヒントのスクリーン ショット

この例では、[印刷...] コマンドをクリックすると、情報を入力するための [印刷] ダイアログ ボックスが表示されます。

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

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

[共有の設定] コマンドは、効果がすぐに有効にならないため、省略記号は付いていません。

ツール バーは常に表示されており、領域が優先されるため、省略記号はできる限り使用しないようにします。

注: ツール バーで表示されるメニューには、メニューの省略記号のガイドラインを適用してください。

推奨されるサイズと間隔

ツール バーとその間隔情報を示すスクリーン ショット

標準ツール バーに推奨されるサイズと間隔です。

ラベル

全般

ラベルなしのアイコン ボタン

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

    ツール バー、[印刷] アイコン、およびツールヒントのスクリーン ショット

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

ラベル付きアイコン ボタン

  • 簡潔なラベルを使用します。可能であれば 1 ワードに、最大でも 4 ワード (全角で約 12 文字) に納めます。
  • ラベルはアイコンの右側に配置します。
  • コマンドにラベルを付けるには、情報ヒントを使用します。ボタンにラベルが付いているため、情報ヒントの代わりにツールヒントを使用すると冗長になります。

    情報ヒントが表示されるラベル付きボタンのスクリーン ショット

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

ドロップダウン リスト

  • リストに常に値が含まれている場合、現在の値をラベルに使用します。

    フォント オプション ツール バーのスクリーン ショット

    この例では、現在選択されているフォント名がラベルの役割を果たしています。

  • 編集可能なドロップダウン リストに値がない場合は、プロンプトを使用します。

    [アドレス帳の検索] リスト ラベルのスクリーン ショット

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

メニュー ボタンと分割ボタン

  • 動詞ベースのメニュー ボタン名を優先します。ただし、"作成する (Create)"、"表示する (Show、View)"、または "管理する (Manage)" の場合は、動詞を省略します。たとえば、[ツール] および [ページ] メニュー ボタンには動詞は含まれていません。
  • メニューの内容を明確に正しく説明する具体的な 1 語を使用します。名前は、メニュー全体を説明するような一般的なものにする必要はありませんが、ユーザーがメニュー項目を見たときに当惑しないように、十分予測可能なものにする必要があります。
  • 情報ヒントの説明は必ずしも必要ありませんが、役に立つ場合は入力します。

メニュー項目

  • 動詞、名詞、または名詞句で始まるメニュー項目名を使用します (英語の場合)。
  • 動詞ベースのメニュー名を優先します。ただし、"作成する (Create)"、"表示する (Show、View)"、または "管理する (Manage)" の場合は、動詞を省略します。たとえば、次のコマンドでは動詞を使用しません。
    • バージョン情報
    • 詳細設定
    • 全画面表示
    • 新規作成
    • オプション
    • プロパティ
  • 具体的な動詞を使用します。"変更する"、"管理する" など、汎用的でわかりにくい動詞を使用しないようにします。
  • 単一のオブジェクトに適用されるコマンドには名詞の単数形を使用します (英語の場合)。複数のオブジェクトの場合は、複数形を使用します。
  • 相互補完的なコマンドのペアの場合は、補完的であることがよくわかる名前を選択します。たとえば、[追加] と [削除]、[表示] と [非表示]、[挿入] と [削除] のようにします。
  • メニュー項目名は、技術ではなく、ユーザーの目的と作業に基づいて選択します。
  • メニュー項目名は、次に示す目的に沿って使い分けます。
    • オプション: プログラム オプションを表示します。
    • カスタマイズ: 特に機械的な UI 構成に関するプログラム オプションを表示します。
    • 個人設定: 一般的に使用される個人設定の概要を表示します。
    • 基本設定: 使用しません。代わりに [オプション] を使用します。
    • プロパティ: オブジェクトのプロパティ ウィンドウを表示します。
    • 設定: メニュー ラベルには使用しません。代わりに [オプション] を使用します。
  • サブメニューを表示するメニュー項目のラベルには、省略記号を含めません。サブメニューの矢印は、別の選択が必要であることを示しています。

ドキュメント

ツール バーに言及するときは、以下のことに留意します。

  • ツール バーが 1 つしかない場合は、"このツール バー" といいます。
  • ツール バーが複数ある場合、ツール バーの名称の後ろに "ツール バー" という語を付けます。既定で有効になっており、ファイルを開いたり印刷する基本的な作業を行うボタンを含むメイン ツール バーは、"標準ツール バー" といいます。
  • "ツール バー" のように、"ツール" と "バー" の間に半角スペースを入れます ("メニュー バー" も同様)。
  • ツール バーのボタンには、ツールヒント ラベルを使用します。大文字と小文字の区別を含め、ラベルのテキストを正確に引用します。ただし、省略記号は含めません。
  • ツール バー メニューのボタンは、そのラベルに "メニュー" という語を付けます。大文字と小文字の区別を含め、ラベルのテキストを正確に引用します。
  • ツール バー コントロールは、通常、"ツール バー ボタン" と呼びます。
  • ユーザー操作を説明する場合は、ツール バー ボタンや読み取り専用のドロップダウン リストでは "クリック"、編集可能なドロップダウン リストでは "入力" を使用します。"選択 (choose、select、pick)" は使用しません。
  • プログラミング文書を除き、メニュー ボタンの記述として "カスケード"、"プルダウン"、"ドロップダウン"、"ポップアップ" は使用しません。
  • 使用できないアイテムは "利用不可の" と表現し、"薄く表示された"、"無効になった"、"灰色表示の" とはしません。"無効" は、プログラミング文書で使用します。
  • ラベルは半角の角かっこ ([ ]) で囲み、可能な場合は太字にします。

例:

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