Windows 7 リボン

[アーティクル]
07/25/2024

Note

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

リボンは、ユーザーが最小限のクリック数でコマンドを効率的かつ直接検索、把握、使用するのに役立つ最新の方法です。試行錯誤の必要が減り、ヘルプを参照する必要もありません。

リボンは、プログラムの機能が、ウィンドウ上部にある一連のタブに整理されるコマンドバーです。リボンを使用すると、機能を見つけやすくなり、プログラム全体をすばやく習得できます。また、ユーザーはプログラムのエクスペリエンスをより細かくカスタマイズできるようになります。リボンにより、従来のメニューバーとツールバーの両方を置き換えることができます。

リボンのスクリーンショット

一般的なリボン。

リボンタブはグループで構成されます。グループは、密接に関連性のあるコマンドのラベル付きセットです。タブとグループに加えて、リボンは次のもので構成されます。

[アプリケーション] ボタン。ファイル関連のコマンドなど、ドキュメントやワークスペースに対して、またはドキュメントやワークスペースに対して何らかの作業を実行するコマンドのメニューが表示されます。
クイックアクセスツールバーは、頻繁に使用するコマンドを表示できる、カスタマイズ可能な小さいツールバーです。
コアタブとは、常に表示されるタブのことです。
コンテキストタブは、特定のオブジェクトの種類が選択されている場合のみ表示されます。常に表示されるタブはコアタブと呼ばれます。
タブセットは、1 つのオブジェクトの種類のコンテキストタブのコレクションです。オブジェクトは複数の種類の可能性があります (たとえば、図を含む表内のヘッダーは 3 種類です)。また、一度に複数のコンテキストタブセットを表示できます。
モーダルタブ。これは、特定の一時モード (印刷プレビューなど) で表示されるコアタブです。
ギャラリー。これは、グラフィカルに表示されるコマンドまたはオプションの一覧です結果ベースのギャラリーは、コマンド自体ではなく、コマンドまたはオプションの効果を示しています。リボン内ギャラリーは、ポップアップウィンドウではなくリボン内に表示されます。
拡張ツールヒント。関連するコマンドを簡潔に説明し、ショートカットキーが表示されます。さらに、グラフィックスやヘルプへの参照が含まれていることがあります。拡張ツールヒントにより、コマンド関連のヘルプの必要性が軽減されます。
ダイアログボックス起動ツール。これは、グループに関連する機能を含むダイアログボックスを開く、一部のグループの下部にあるボタンです。

リボンは、最初は Microsoft Office 2007 で導入されました。 Office でリボンを使用する必要がある理由と、リボンを使用することで解決される多くの問題については、「リボンの歴史」をご覧ください。

Note

メニュー、ツールバー、コマンドボタン、アイコンに関連するガイドラインについては、別の記事で説明します。

これが適切なユーザーインターフェイスであるかどうか

リボンの使用を判断するには、次の質問を検討してください。

プログラムの種類

どのような種類のプログラムを設計しようとしているでしょうか? プログラムの種類は、リボンが合っているかどうかを判断するのにふさわしいインジケーターです。リボンは、ドキュメントの作成やオーサリングプログラムだけでなく、ドキュメントビューアーやブラウザーにも適しています。他の種類のプログラムにもリボンを使用できるかもしれませんが、他の形式のコマンド表示の方が適切な可能性があります。通常、軽量のプログラムには軽量のコマンド表示が合っています。

見つけやすさと学習の問題

ユーザーがコマンドを見つける際に問題があるでしょうか? ユーザーは、プログラム内に既に存在する機能を要求しているでしょうか? その場合、リボンを使用して、わかりやすいラベルを付け、関連するコマンドをグループ化することにより、コマンドが見つけやすくなります。さらに、リボンは、メニューバーやツールバーよりも拡張に向いているため、将来成長したときにも対応できます。
ユーザーがプログラムのコマンドを理解する点で問題があるでしょうか? 適切なコマンドを選択したり、コマンドの動作を判断したりする際に、試行錯誤することがよくありますか? その場合、ギャラリーとライブプレビューをベースとした結果指向のコマンドをリボンに表示すれば、コマンドを把握しやすくなります。

コマンドの特性

コマンドが複数の場所に表示されているでしょうか? プログラムが既に存在する場合、メニューバー、ツールバー、作業ウィンドウ、作業領域内にコマンドが表示されているでしょうか? その場合、リボンを使用すると、コマンドが 1 つの場所に統合されて見つけやすくなります。
コマンドはウィンドウ全体に適用されますか? それとも、特定のウィンドウにのみ適用されますか? リボンは、ウィンドウ全体や特定のオブジェクトに適用されるコマンドに最適です。インプレースコマンドは、個々のウィンドウペインに適しています。
ほとんどのコマンドを直接表示できるでしょうか? つまり、ユーザーは 1 回のクリックで操作できるでしょうか? よく使用されるコマンドにメニューやダイアログボックスからアクセスする場合、直接リファクタリングできますか? 一部のコマンドは、メニューとダイアログボックスを使って表示できますが、ほとんどのコマンドはこの方法で表示するとリボンの効率が下がり、メニューバーから選択する方が効率が上がる可能性があります。

コマンドスケール

コマンドの数が少ないでしょうか? 最も頻繁に使用されるコマンドを 1 つのシンプルなツールバーに簡単に表示できるでしょうか? コアタブとコンテキストタブを追加することで、最も一般的なタスクを単独で実行できるシンプルな [ホーム] タブができあがる場合、リボンを使用する価値があります。そうでない場合、少ないコマンドに対して余分な重みが生じるため、リボンを使用する正当なメリットがない可能性があります。
コマンドの数が多いでしょうか? リボンを使用するには 7 つ以上のコアタブが必要になるでしょうか? ユーザーが一般的なタスクを実行するためにタブを頻繁に変更する必要があるでしょうか? その場合、ツールバー (タブの変更は不要) とパレットウィンドウ (タブの変更が必要になることがありますが、一度に複数のタブを開くことができます) を使用する方が効率的な選択肢になるかもしれません。
ほとんどの場合、ユーザーは少数のコマンドを使用する傾向があるでしょうか? その場合、そのようなコマンドを [ホーム] タブに配置することで、リボンを効率的に使用できます。タブを頻繁に変更すると、リボンの効率が大幅に低下します。
プログラムのコンテンツ領域をできる限り大きくすることでプログラムにメリットがもたらされるでしょうか? その場合、メニューバーと 1 つのツールバーを使用すれば、リボンよりスペース効率が高くなります。ただし、プログラムで 3 行以上のツールバーが必要な場合や作業ウィンドウを使用する場合、リボンを使用する方がスペース効率が高くなります。
ユーザーには、プログラム内の大きなウィンドウ内の特定の領域で長時間作業する傾向があるでしょうか? その場合、ミニツールバー、パレットウィンドウ、ダイレクトコマンドを近づけることにメリットがあるでしょう。作業領域からリボンに行ったり来たりすると、効率がかなり低下します。
効率と柔軟性を高めるため、ユーザーはコマンド表示の内容、場所、サイズを大幅に変更する必要があるでしょうか? その場合、カスタマイズおよび拡張可能なツールバーとパレットウィンドウを選択することをお勧めします。一部の種類のツールバーをドッキング解除してパレットウィンドウにしたり、パレットウィンドウを移動したり、サイズ変更したり、カスタマイズしたりできます。

最後に、この究極の質問について考えてみましょう。見つけやすさ、学習のしやすさ、効率性、生産性の向上は、追加のスペースのコストと、コマンドを整理するタブの必要性に見合う価値があるでしょうか? そうであれば、リボンを使用するのが最適な選択肢です。よくわからない場合は、リボンベースのデザインのユーザビリティテストを実施し、最適な代替案と比較することを検討してください。

リボンは、コマンド表示の新しい魅力的な形式であり、プログラムを最新化するための優れた方法です。しかし、魅力的ではあるものの、すべてのプログラムにとって適切な選択というわけではありません。

誤った例:

電卓におけるリボンのスクリーンショット

お勧めしない事柄

7 つの最も重要な事柄

プログラムの種類に適したコマンドソリューションを選択してください。リボンを使用することにより、プログラムがよりシンプルかつ効率的で使いやすくなるべきです。決してその逆であってはなりません。リボンの使用が適切でない場合、代わりにリッチコマンドを使用することを検討してください。
効果的なリボンを作成することの難しさを過小評価しないでください。既存のメニューバーとツールバーの単純な移植であるとは考えないでください。また、リボンを使用するとプログラムが自動的に改善されると考えないでください。コマンドの再設計に必要な時間や労力を惜しまないことは、リボンの使用を決定する上で重要な要素です。
コマンドを見つけやすくしてください。コマンドと、それらが存在するわかりやすいラベルが付いたタブの間に、明確でわかりやすい一意のマッピングがあるタブデザインを選択してください。ユーザーは、探しているコマンドがどのタブにあるかをすばやく確実に判断できるべきであり、間違ったタブを選択することはほとんどないべきです。
コマンドの内容を自明にしてください。ユーザーは、ラベル、アイコン、ヒント、プレビューからコマンドの機能を把握できる必要があります。コマンドの動作を確認するために、ヘルプトピックを試したり読んだりする必要があってはなりません。
コマンドを効率的に使用してください。
- ユーザーがほとんどの時間を費やすのは [ホーム] タブであるべきです。
- ユーザーが一般的なタスク中にタブを変更する必要がほとんど生じるべきではありません。
- ウィンドウが最大化され、ユーザーが正しいタブにいる場合、最も頻繁に使用されるコマンドが視覚的に強調され、ユーザーは 1 回のクリックでそれらを呼び出すことができます。ユーザーは、タブにおいて、最大 4 回のクリックで他のすべてのコマンドを実行できます。
- 一般的なタスクでコマンドを指定したり属性を変更したりするために、ユーザーがダイアログボックスを開く必要はあってはありません。
ユーザーが自信を持ってコマンドとオプションを選択できるようにし、試行錯誤の必要性を最小限に抑えてください。結果指向のコマンドは、必要に応じて、多くの場合、ギャラリーとライブプレビューの形式で使用してください。
リボンが最大ウィンドウサイズから最小サイズに適切に拡大縮小されるようにしてください。

設計概念

既存のプログラムでのリボンの調整

既存のプログラムの従来のメニューバーとツールバーのデザインをリボン形式にリファクタリングするだけでもかまいませんが、その場合、リボンを使用する価値のほとんどが失われます。リボンは、多くの場合ギャラリーやライブプレビューの形式で、即時の結果指向のコマンドを表示するために使用すると最も価値が高まります。結果指向コマンドを使用すると、コマンドを把握しやすくなり、ユーザーの効率と生産性が大幅に向上します。既存のコマンドをリファクタリングするのではなく、プログラムでのコマンドの実行方法を完全に再設計することをお勧めします。

効果的なリボンを作成することの難しさを過小評価しないでください。また、リボンを使用するとプログラムが自動的に改善されると考えないでください。効果的なリボンを作成するには多くの時間と労力がかかります。そのようなコマンドの再設計に必要な時間や労力を惜しまないことは、リボンの使用を決定する上で重要な要素です。

リボンの性質

従来のメニューバーやツールバーと比較すると、リボンには以下の特性があります。

すべてのコマンドに対して 1 つのユーザーインターフェイス (UI)。 メニューバーは包括的で簡単に習得でき、ツールバーは効率的かつ直接的ですが、もう少し画面スペースを使用して、これらすべてを実現する単一のコマンド UI を作成してみるのはどうでしょうか。 UI が 1 つだけのため、リボンでは、探しているコマンドが存在する UI をユーザーが把握する必要はありません。
目に見えて、自明。 メニューバーコマンドはラベルから自明ですが、大部分の時間は隠れたままです。画面スペースを節約するため、ツールバーボタンは主にラベルではなくアイコンで表され (ただし、一部のツールバーボタンでは両方が使用されます)、アイコンが自明でない場合はツールヒントが使用されます。ただし、ユーザーは通常、最もよく使用されるコマンドについてのみアイコンを認識しています。
ほとんどのコマンドにラベル付きアイコンを表示することにより、リボンコマンドは表示されつつ、自明にもなり、補足情報を表示する場合のみツールヒントを使用できます。コマンドを把握するために他の場所 (ヘルプなど) にアクセスする必要はほとんどありません。
ラベル付きのグループ化。 メニューカテゴリにはラベルが付けられますが、ドロップダウンメニュー内のグループにはラベルが付けられず、ラベルのない区切り文字のみで示されます。ツールバー内のグループも、ラベル付けされていない区切り記号で示されます。
リボンでは、コマンドがラベル付きのグループに整理されるため、コマンドの検索や目的の特定が容易になります。
モーダルだが、階層的ではない メニューバーは、コマンドの階層を作成することにより拡張されます。多くの項目を持つメニューでは、1 つ以上のレベルのサブメニューを使って、より多くのコマンドを提供できます。
リボンコマンドでは、ツールバーコマンドより多くの領域が必要となるため、タブを使用して拡大縮小します。タブをこのように使用するとリボンがモーダルになり、ユーザーはコマンドを見つけるためにときどきモードを変更する必要が生じます。ただし、タブ内では、ほとんどのコマンドは直接実行されるか、階層ではなく単一の分割ボタンまたはメニューボタンを使用します。
直接的で即時性がある。 コマンドは、1 回のクリックで呼び出される場合 (つまり、メニューを移動しない場合) は直接コマンドとなり、すぐに有効になる場合 (つまり、追加の入力を集めるためのダイアログボックスがない場合) は即時コマンドとなります。メニューバーのコマンドは常に間接的であり、多くの場合すぐには実行されません。ツールバーと同様、ほとんどのリボンコマンドは直接的かつ即時実行できるよう設計されており、最も頻繁に使用されるコマンドは 1 回のクリックで呼び出され、追加の入力を集めるためのダイアログが必要ありません。
ゆったりとしている。 メニューバーとツールバーは、主にスペース効率を高める目的で設計されています。リボンは、その利点を実現するため、メニューバーと 3 行のツールバーにほぼ相当する、より多くの垂直方向のスペースを占有する場合があります。ツールバーの行が 3 行以上あるプログラムはほとんどないため、リボンでは通常、コマンドの従来の UI よりも多くのスペースが消費されます。
[アプリケーション] ボタンとクイックアクセスツールバーがある。 リボンには、常に [アプリケーション] ボタンとクイックアクセスツールバーが表示されます。これにより、ユーザーはタブを変更しなくてもファイル関連の頻繁に使用するコマンドにアクセスできるため、プログラム間の一貫性が向上します。
最小限のカスタマイズ。 メニューバーには固定の表示がありますが、多くのツールバーはカスタマイズ性が高く、ユーザーは場所、サイズ、コンテンツを設定できます。リボン自体はカスタマイズできませんが、クイックアクセスツールバーではカスタマイズが制限されます。
キーボードのアクセシビリティが向上する。 Alt キーを押すとメニューバーの入力フォーカスが直接表示されるため、メニューバーはキーボードのアクセシビリティが高くなっています。ただし、ツールバーではウィンドウのコンテンツとキーボードナビゲーションが共有されるため、このようなメカニズムはありません。したがって、ユーザーは Tab キー (最後のタブストップが指定されています) を使ってツールバーに移動し、方向キーを使って特定のコマンドに移動する必要があります。

これに対し、リボンでは、KeyTip によるキーボードのアクセシビリティが向上しています。KeyTip には通常、以下の 3 つの手順でアクセスできます。

Alt キーを押して KeyTip モードに入ります。
文字を押して、クイックアクセスツールバーのタブ、アプリケーションボタン、またはコマンドを選択します。
タブ内で、1 文字または 2 文字を押してコマンドを選択します。

このアプローチは、非常に視覚的です。さらに、柔軟性が高く、スケーリングが向上し、ニーモニックアクセスキーの割り当てが増えます。

アクセスキーとショートカットキーを混同しないでください。アクセスキーとショートカットキーはどちらも UI へのキーボードアクセスを提供しますが、目的とガイドラインが異なります。詳細については、「キーボード」を参照してください。

リッチコマンドの性質

リッチコマンドとは、リボンにより使用されるコマンドの表示と操作のことを指しています。必ずしも、リボンコンテナーを使用しません。リッチコマンドには次の特性があります。

ラベル付け。 すべてのコマンドにわかりやすいラベルが付けられますが、アイコンが非常によく知られており、スペースが限られている場合は例外です。

正しい例:

これらのコマンドは、非常によく知られているため、ラベルは必要ありません。

誤った例:

これらのわかりにくいアイコンには、リッチコマンド用のラベルが必要です。
サイズ設定。 コマンドは均一なサイズではなく、使用頻度と重要度に応じてサイズが決まります。最も頻繁に使用するコマンドを簡単に見つけてクリックできるようになるだけでなく、タッチしやすくなります。

この例では、最も頻繁に使用されるボタンが他のボタンよりも大きくなります。
動的サイズ設定。 リッチコマンドコントロールは、固定サイズを使用し、サイズが小さすぎる場合は切り捨てたりオーバーフローを使用したりするのではなく、使用可能なスペースを最大限に活用するようサイズを変更します。

この例では、コマンドボタンのサイズが変更され、使用可能なスペースで適切に機能します。
分割ボタン。 分割ボタンは、最も頻繁に使用されるコマンドの直接性を維持しながら、必要に応じてコマンドバリエーションのセットを統合するのに適した方法です。

この例では、[名前を付けて保存] コマンドで分割ボタンが使用されています。メインボタンでは最も一般的なバリエーションが実行され、メニュー部分にはコマンドのバリエーションを含むメニューが表示されます。
リッチドロップダウンメニューとギャラリー。 ドロップダウンメニュー、ドロップダウンリスト、ギャラリーは、多くの場合グラフィックやテキストの説明を使用して、選択肢の効果を伝えたり区別したりするのに必要なスペースを消費します。大規模なオプションセットを整理するためにカテゴリが使用されます。

これらの例では、メニューボタンをクリックすると、その効果を示す選択肢の一覧が表示されます。
ライブプレビュー。 ユーザーが書式設定オプションにカーソルを合わせると、実際のコンテンツを使って、その書式設定の結果が表示されます。

ライブプレビューでは、カーソルを合わせたときに書式設定オプションを適用した結果が表示されます。
拡張ツールヒント。 これらは、関連するコマンドを簡潔に説明します。ショートカットキーも表示されます。さらに、グラフィックスやヘルプへの参照も含まれることがあります (一方、コマンド関連のヘルプは必要なくなります)。

拡張ツールヒントは、関連するコマンドを簡潔に説明します。

リボンはすべてのプログラムに適しているわけではありませんが、リッチコマンドはすべてのプログラムが恩恵を受ける可能性があります。

[アプリケーション] ボタンとクイックアクセスツールバーには、どのコンテキストでも役立つコマンドが用意されているため、タブを変更する必要が少なくなります。これら 3 つのコンポーネントは論理的には独立していますが、リボンには常に [アプリケーション] ボタンとクイックアクセスツールバーが必要です。コマンドはリボンまたは [アプリケーション] ボタンのどちらにも配置できるため、コマンドをどこに配置すればよいか疑問に思うかもしれません。選択は任意ではありません。

[アプリケーション] ボタンは、ファイルの作成、開く、保存、印刷、ドキュメントの送信と公開など、従来はファイルメニューに含まれていたコマンドなど、ファイルに対して何かを実行するコマンドのメニューを表示するために使用されます。

これに対し、リボン自体は、ウィンドウの内容に影響を与えるコマンドに使用されます。たとえば、コンテンツの読み取り、変更、使用、またはビューの変更に使用するコマンドなどです。

リボンを使用する場合、プログラムにドキュメントやファイルが含まれていない場合でも、[アプリケーション] ボタンを使用する必要があります。その場合、[アプリケーション] メニューを使用して、印刷、プログラムオプション、プログラムの終了のコマンドを表示します。間違いなく、このようなプログラムには [アプリケーション] ボタンは必要ありませんが、このボタンを使用するとプログラム間で一貫性が確保されます。保存コマンドや元に戻すコマンド、プログラムオプションは常に同じ場所にあるため、ユーザーはそれらを探す必要がありません。

リボンにあるタブが 1 つのみの場合でも、クイックアクセスツールバーは必要です。繰り返しになりますが、このようなプログラムではクイックアクセスツールバーは不要であると言えますが (すべてのコマンドが 1 つのタブに既に存在するため)、カスタマイズ可能なクイックアクセスツールバーがあると、プログラム間で一貫性が保たれます。たとえば、ユーザーが [印刷] コマンドをクリックする習慣がある場合、リボンを使用するすべてのプログラムで実行できなければなりません。

整理と見つけやすさ

タブとグループを用意することにより、リボンを使用してコマンドを整理し、見つけやすくすることができます。問題は、整理が不十分だと、かえって見つけやすさに大きな悪影響を与える可能性があることです。コマンドと、コマンドが存在するわかりやすいラベルが付けられたタブおよびグループの間には、明確で自明かつ一意の対応付けが必要です。

ユーザーは、しばらくリボンを使用すると、リボンのメンタルモデルを形成します。そのメンタルモデルがユーザーにとって意味をなさなかったり、非効率的であったり、不正確であったりすると、混乱やフラストレーションが生じます。リボンを設計する上で最も重要な目標は、コマンドをすばやく自信を持って見つけられることです。これを達成できない場合、リボンのデザインは失敗です。この目標を達成するには、慎重なデザイン、ユーザーテスト、繰り返しが必要です。簡単であると想定しないでください。

回避すべきよくある落とし穴を次に示します。

一般的すぎるタブ名とグループ名は使用しないでください。 適切なタブまたはグループ名は、できればタスクと目標に基づいた言い回しを使用して、その特定の内容を正確に説明するものです。一般的すぎるタブ名とグループ名、およびテクノロジベースの名前は使用しないでください。たとえば、ドキュメント作成およびオーサリングプログラムのほぼすべてのコマンドは、[編集]、[書式設定]、[ツール]、[オプション]、[詳細設定]、[その他] というラベルのタブに属している可能性があります。暗記ではなく、具体的かつ説明的なラベルに頼ってください。
過度に具体的なタブ名やグループ名は避けてください。 タブ名やグループ名は具体的なものにすべきですが、内容にユーザーが驚くほど具体的なものであってはなりません。ユーザーは消去法を使って検索することが多いため、誤解を招く名前のためにタブやグループを見落とすことがないようにしてください。
特にパスが予期しないものである場合や、コマンドを呼び出すために多くのクリックが必要な場合は、同じコマンドへの複数のパスを避けてください。複数のパスからコマンドを見つけるのが便利に思えるかもしれません。しかし、ユーザーは探しているものを見つけると、探すのをやめるという点を覚えておいてください。ユーザーは、最初に見つけたパスが唯一のパスであると想定しがちですが、そのパスが非効率的であったり予期していなかったりする場合、深刻な問題となります。さらに、コマンドが重複していると、ユーザーが探している他のコマンドを見つけるのが困難になります。

罫線コマンドへの間接パスのスクリーンショット

この例では、[ホーム] タブにもっと直接的なパスがあるにもかかわらず、[ページ罫線] コマンドを使用して段落の罫線を変更することができます。段落の罫線を探しているユーザーが、この予期しないパスを見つけた場合、それが唯一のパスであると思い込んでしまう可能性があります。

気まぐれなコマンド配置を避けてください。 タブとグループのデザインは適切だと思っていたものの、いくつかのコマンドが適合しないことに気付いたとします。たとえば、タブとグループのデザインが思ったほど良くなく、改良を続ける必要があるかもしれません。これらのコマンドを不適切な場所に配置することで、この問題を解決しようとしないでください。そうすると、ユーザーはタブを見つけるためにすべてのタブを調べる必要があり、すぐにその場所を忘れてしまう可能性が高くなります。
マーケティングベースの配置は避けてください。 プログラムの新しいバージョンがあるため、マーケティングチームが新しい機能をプロモーションしたいと考えているとします。これらを [ホーム] タブに配置したくなるかもしれませんが、全体的な見つけやすさが損なわれる場合は、そうすることは大きな間違いとなります。製品の将来のバージョンを考慮に入れ、構成が絶えず変化するとどれだけのフラストレーションを引き起こすかを考えてください。

タブ

最初のステップとしては、標準リボンタブを見直すのがベストです。プログラムのコマンドが標準タブに自然にマップされる場合、これらの標準に基づいてタブの構成を決定します。一方、プログラムのコマンドが自然にマップされない場合、強制的に行わないでください。より自然な構造を決め、多くのユーザーテストを実行して、適切であることを確認してください。

標準以外のタブの場合、以下の問題を考慮してください。

各タブ名はその内容を説明するものである必要があります。 具体的だが具体的すぎない、わかりやすい名前を選択してください。ユーザーが内容に驚くことはあってはなりません。
各タブ名にはその目的が反映されている必要があります。 コマンドに関連付けられている目標またはタスクについて考えてみてください。
各タブ名は、他のすべてのタブ名と明確に区別される必要があります。

[ホーム] タブは、これらの考慮事項の例外となります。 [ホーム] タブの使用は必須ではありませんが、ほとんどのプログラムでは使用してください。 [ホーム] タブは最初のタブであり、最もよく使用されるコマンドが含まれています。他のタブに収まらないコマンドを頻繁に使用する場合、[ホーム] タブが適切な場所です。

わかりやすいタブ名を判断できない場合、タブが適切に設計されていないことが原因の可能性があります。リボン構造がうまくいっていない場合、タブのデザインを再検討します。

グループ

コマンドをグループに分割すると、コマンドが関連するセットに構成されます。グループラベルは、そのコマンドの一般的な目的を説明するものです。

グループとその表示を決める際は、さまざまな要因を考慮する必要があります。

標準のグループ化。 プログラム間でコマンドには大きな違いがありますが、多くのプログラムに共通する標準グループがあります。これらのコマンドが同じ名前で同様の場所に表示されれば、見つけやすさが大幅に向上します。

正解です。	不正解です
編集コマンドグループにはすべての編集コマンドが含まれていますが、[ズーム] コマンドは含まれていません。	[ズーム] コマンドは編集コマンドではなく、編集グループ内にあります。

粒度。 ある程度の構造は問題ありませんが、構造が多すぎるとコマンドが見つけにくくなります。グループ名が一般的すぎる場合、細分性が十分でない可能性があります。各グループにコマンドが 1 つまたは 2 つしかない場合、グループが多すぎる可能性があります (ただし、グループ内に他のコマンドがないリボン内ギャラリーが存在することは許容されます)。

正解です。	不正解です
編集コマンドグループにすべての編集コマンドが含まれている	編集コマンドグループが細かいセクションに分割されています。 1 つまたは 2 つのコマンドのみを含むグループは使用しないでください。

名前。 適切なグループ名はコマンドの目的を説明するものです。グループ名が見つからない場合、名前またはグループ化を再検討してください。わかりやすい名前を判断できない場合、グループが適切に設計されていないことが原因の可能性があります。

正解です。	不正解です
グループに含まれるコマンドを説明するのに十分具体的なグループ名を使用します。	このグループ名は、あいまいすぎて役に立ちません。より良いアプローチとしては、これらのコマンドをより具体的なグループに再編成することができます。

順序。 (西洋文化では) 人々は左から右の順序で読むので、一番左のグループが最も目立つと思われるかもしれません。ただし、強調表示されたタブ名とウィンドウの内容はフォーカルポイントとして機能する傾向があるため、通常はタブの中央にあるグループが左端のグループよりも注目されます。最もよく使用されるグループを最も目立つ場所に配置し、タブ全体でグループに論理的な流れがあることを確認します。

左端のクリップボードグループのスクリーンショット

この例では、フォントグループと段落グループがクリップボードグループよりも目立っています。これは、ドキュメントから上に移動したときに最初に目に入るためです。

[校閲] タブの追跡グループのスクリーンショット

この例では、強調表示された [校閲] タブがフォーカルポイントとして機能しているため、追跡グループが最も注目を集めています。

統一性。 コマンド表示がすべて同じように見えると、コマンドを認識するのが難しい可能性があります。さまざまな形や色のアイコン、さまざまな形式のグループ、さまざまなサイズのコマンドを使用すれば、ユーザーはコマンドグループを認識しやすくなります。リボンが小さいサイズに縮小されたときのみ、コマンドのサイズが均一になる必要があります。

正解です。	不正解です
認識性を高めるためにさまざまなアイコンサイズを使用する	これらのコマンドはすべて同じサイズであるため、互いに似ています。

プレビュー

さまざまな種類のプレビューを使用して、コマンドの結果を表示することができます。役立つプレビューを使用することで、プログラムの効率を高め、試行錯誤による学習アプローチの必要性を減らすことができます。ライブプレビューは実験を促し、創造性を促進します。

使用できるさまざまな種類のプレビューをいくつか次に示します。

リアルな静的アイコンとグラフィック。 コマンドの効果をリアルに示す静止画像。これらは、ギャラリー、ドロップダウンメニュー、拡張ツールヒントで使用できます。

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

この例では、[フォント] ドロップダウンリストにフォント自体を使用した各フォント名が表示されます。

透かしサムネイルギャラリーのスクリーンショット

この例では、リアルなサムネイルを使用してさまざまな透かしを表示しています。

動的なアイコンとグラフィック。 現在の状態を反映するように変更されたアイコンとグラフィック。このようなアイコンは、ギャラリーや、既定の効果が最後のアクションと同じになるよう変更される分割ボタンに特に役立ちます。

段落スタイルギャラリーのスクリーンショット

この例では、Microsoft Word がスタイルギャラリーを変更して現在のスタイルを反映しています。

テキスト書式設定コマンドボタンのスクリーンショット

この例では、Word がテキストの強調表示色とフォント色のコマンドを変更して、現在の効果を示しています。

ライブプレビュー。 ユーザーが書式設定オプションにマウスを移動すると、その書式設定で結果がどのように表示されるかライブプレビューが表示されます。ライブプレビューは、ユーザーの実際のコンテキストに基づいて、ユーザーが選択をより効率的かつ自信を持って行うのに役立ちます。

[ページの色] コマンドの色選択ツールのスクリーンショット

この例では、[ページの色] コマンドが、カーソルを合わせたとき色のオプションの効果を表示してライブプレビューを実行しています。

ライブプレビューは、ユーザーの生産性を大幅に向上させることができる強力な機能ですが、単純な静的プレビューでも大きな助けになります。

リボンの拡大縮小

ツールバーの拡大縮小は簡単です。ウィンドウが狭すぎてツールバーを表示できない場合は、そこに収まるツールバーが表示され、その他すべてはオーバーフローボタンからアクセスできるようになります。リッチコマンドの目標は、利用可能なスペースを最大限に活用することであるため、リボンの拡大縮小には、より多くのデザイン作業が必要になります。既定のリボンサイズはないため、特定の幅を考慮に入れてリボンをデザインしないでください。幅広いレイアウトをデザインし、そのいずれかがほとんどのユーザーが目にする可能性があることを認識する必要があります。拡大縮小はリボンデザインの基本的な部分であり、最後のステップではありません。タブをデザインするときは、グループごとに異なるレイアウト (最大 3 つ) と、一緒に使用できる組み合わせを指定します。リボンには、現在のウィンドウサイズに適合する有効な最大の組み合わせが表示されます。

オーバーフローメニューの書式設定コマンドのスクリーンショットツールバーは、オーバーフローボタンを使用して拡大縮小されます。

さまざまな幅のリボンのスクリーンショット既定のリボンサイズはありません。最小サイズは、1 つのポップアップグループアイコンです。

ガイドライン

全般

リボンをウィンドウ内のメニューバーやツールバーと組み合わせないでください。 リボンは、メニューバーとツールバーの代わりに使用する必要があります。ただし、リボンは、パレットウィンドウやナビゲーション要素 ([戻る] ボタン、[進む] ボタン、アドレスバーなど) と組み合わせることができます。
リボンと [アプリケーション] ボタンおよびクイックアクセスツールバーを常に組み合わせてください。
プログラムの起動時、左端のタブ (通常は [ホーム]) を選択します。 最後に選択されたタブをプログラムインスタンス間で保持しないでください。
プログラムを初めて起動したとき、リボンを通常の状態 (最小化されていない状態) で表示します。 ユーザーは既定の設定を変更しないことが多いため、プログラムの起動時にリボンを最小化すると、すべてのコマンドの効率が低下する可能性があります。さらに、最初にリボンを最小化した状態で表示すると、方向感覚が失われる可能性があります。
プログラムインスタンス間でリボンの状態を保持します。 たとえば、ユーザーがリボンを最小化した場合、次回プログラムを実行したときにリボンが最小化された状態で表示されます。ただし、この場合も、最後に選択したタブをこの方法で保持しないでください。

タブの使用

一般的に、タブの数は少ないほど良いので、その目的の達成に役立たないタブは削除してください。

可能な場合は必ず、標準のタブを使用します。 標準タブを使用すると、特にプログラムをまたがった場合に見つけやすさが大幅に向上します。この記事で後述する「標準リボンタブ」をご覧ください。
必要に応じて、最初のタブに [ホーム] というラベルを付けます。 [ホーム] タブには、最も頻繁に使用するコマンドが含まれている必要があります。他のタブに収まらないコマンドを頻繁に使用する場合、[ホーム] タブが適切な場所です。
次の場合、新しいタブを追加します。
- そのコマンドが特定のタスクとの関連性が高く、タブラベルによって正確に説明できる。 タブを追加すると、コマンドが見つけにくくなるのではなく、見つけやすくなる。
- そのコマンドに他のタブのタスクとの関連性がほとんどない。 タブを追加しても、よく実行するタスク中にタブを切り替える必要がない。
- そのタブには、追加の場所を用意する価値があるコマンドが含まれている。 少数のコマンドのみを含むタブは追加しないでください。 例外: いくつかのコマンドが特定のタスクに強く関連している場合、タブを追加してそれらのコマンドを含めることを検討してください。タブを追加すると、複雑すぎる [ホーム] タブが大幅に簡素化されます。
残りのタブについては、タブ間の論理的な順序を維持しながら、最も頻繁に使用するタブを先頭に配置します。
ユーザーがすばやく自信を持ってコマンドを見つけられるようタブデザインを最適化してください。 その他の考慮事項はすべて二次的なものです。
[ヘルプ] タブを追加しないでください。代わりに、プログラム全体のヘルプと拡張ツールヒントを使ってサポートを提供してください。
最大 7 つのコアタブを使用してください。 7 つを超える場合、コマンドを含むタブを特定することが難しくなります。多くのコマンドが存在するアプリケーションでは 7 つのコアタブが許容されますが、ほとんどのプログラムでは 4 つ以下のタブを目指す必要があります。

コンテキストタブ

ユーザーが特定のオブジェクトの種類を選択した場合のみ関連するコマンドのコレクションを表示するには、コンテキストタブを使用します。 頻繁に使用するコマンドが少数の場合、通常のタブを使用し、適用されないコマンドを無効にする方が便利かつ安定します。
コンテキストタブを使用するよりも、[切り取り] や [コピー] などの一般的なコマンドを無効にすることをお勧めします。
特定のオブジェクトの種類に固有のコマンドのみを含めてください。 ユーザーがオブジェクトを選択する前にコマンドを必要とする可能性がある場合、コンテキストタブ以外にもコマンドを配置してください。
特定の種類のオブジェクトを操作するときによく使用されるコマンドを含めてください。 頻繁に実行するタスク中にタブを切り替えなくてすむよう、よく使用する一般的なコンテキストコマンドをコンテキストメニューとミニツールバーに配置します。あるいは、頻繁なタブの切り替えを回避する場合、一般的なコマンドをコンテキストタブに重複して配置することを検討してください。ただし、やりすぎには注意してください。ユーザーがオブジェクトを操作する際に必要になる可能性のあるすべてのコマンドを含めないようにしてください。
この例では、よく実行されるタスク中にタブを頻繁に切り替える必要がないよう、[デザイン] タブに [罫線] コマンドが含まれています。
現在表示されているコンテキストタブとは異なるコンテキストタブの色を選択してください。 これを実現するため、同じタブセットを後で別の色を使用して表示することもできますが、可能な限り、呼び出し全体で一貫した色の割り当てを使用してください。
コンテキストタブを自動的に選択すると、見つけやすさが向上して安定性が向上し、タブを切り替える必要性が低下します。次の場合にコンテキストタブを自動的に選択します。
- ユーザーがオブジェクトを挿入した。 この場合は、セット内の最初のコンテキストタブを選択します。
- ユーザーがオブジェクトをダブルクリックした。 この場合は、セット内の最初のコンテキストタブを選択します。
- ユーザーがコンテキストタブを選択し、オブジェクトをクリックした後、同じ種類のオブジェクトをすぐにクリックした。 この場合、前に選択したコンテキストタブに戻ります。
アクティブタブであるコンテキストタブを削除するとき、[ホーム] タブまたは最初のタブをアクティブタブにします。こうすると最も安定するようです。

特定の一時モードに適用されるコマンドのコレクションを表示し、コアタブをどれも適用しない場合は、モーダルタブを使用します。 一部のコアタブが適用される場合、代わりにコンテキストタブを使用し、適用されないコマンドを無効にします。モーダルタブにはかなり制限があるため、より適した代替手段がない場合のみ使用してください。
印刷プレビューは、よく使用されるモーダルタブです。
モーダルタブを閉じるには、タブの最後のコマンドとして [<モード>を閉じる] コマンドを配置します。コマンドを見つけやすくするため、[閉じる] アイコンを使用します。何を閉じようとしているのか混乱するのを防ぐため、コマンドでモードを指定します。
この例では、[閉じる] コマンドに明示的にモードのラベルを付けることで、何を閉じようとしているのかがはっきりします。
モーダルタブを閉じるには、ウィンドウのタイトルバーの [閉じる] ボタンも再定義して、プログラムではなくモードを閉じるようにします。 ユーザーテストでは、多くのユーザーがこの動作を期待していることが示されました。

標準リボンタブ

可能な場合は必ず、プログラムのコマンドを、標準的な表示順序で表示される、これらの標準タブにマップしてください。

通常のタブ

ホーム。 最も頻繁に使用されるコマンドが含まれています。使用する場合、常に最初のタブになります。
挿入。 ドキュメントにコンテンツとオブジェクトを挿入するコマンドが含まれています。使用する場合、常に 2 つ目のタブになります。
ページレイアウト。 テーマ、ページ設定、ページの背景、インデント、間隔、配置など、ページレイアウトに影響するコマンドが含まれています。 (十分なスペースがある場合、インデントグループと間隔グループを [ホーム] タブに置くことができます)。使用する場合、常に 3 つ目のタブになります。
レビュー。 コメントの追加、変更の追跡、バージョンの比較を行うコマンドが含まれています。
ビュー。 表示モード、表示/非表示オプション、ズーム、ウィンドウ管理、Windows メニューカテゴリに従来からあったコマンドを含む、ドキュメントビューに影響を与えるコマンドが含まれます。使用する場合、[開発者] タブが表示されていない限り、最後の通常のタブになります。
Developer。 開発者のみが使用するコマンドが含まれています。使用する場合、既定では非表示になりますが、表示される場合は最後の通常のタブになります。

ほとんどのプログラムでは、[レビュー] タブと [開発者] タブは必要ありません。

標準コンテキストタブ

フォーマット。 選択したオブジェクトの種類の形式の変更に関連するコマンドが含まれています。通常はオブジェクトの一部に適用されます。
デザイン。 選択したオブジェクトの種類にスタイルを適用するためのコマンドが (多くの場合ギャラリーに) 含まれています。通常はオブジェクト全体に適用されます。
レイアウト。 テーブルやグラフなどの複雑なオブジェクトの構造を変更するコマンドが含まれています。

書式、デザイン、レイアウトに関連するコンテキストコマンドが存在するが、複数のタブでは不十分な場合、[書式] タブを追加するだけです。

標準グループ

可能であれば必ず、標準グループを使用してください。 一般的なコマンドが同じ名前で同様の場所に表示されれば、見つけやすさが大幅に向上します。この記事で後述する「標準リボングループ」をご覧ください。
次の場合、新しいグループを追加します。
- そのコマンドに密接な関連があり、グループラベルによって正確に説明できる。 グループを追加すると、コマンドが見つけにくくなるのではなく、見つけやすくなる。
- そのコマンドは、他のグループのコマンドとの関係が弱い。 タブ上のすべてのコマンドは密接に関連している必要がありますが、一部のコマンドの関係性は他のコマンドよりも強くなります。
- そのグループには、追加の場所を用意する価値があるコマンドが含まれている。 ほとんどのグループでは、3 ～ 5 個のコマンドを目指してください。 1 ～ 2 個のコマンドのみを含むグループは使用しないでください。ただし、グループ内に他のコマンドを含まないリボン内ギャラリーは使用してもかまいません。単一のコマンドを含む多数のグループが存在する場合、構造が多すぎるか、コマンドの結束が欠如していることを示しています。
必要のないグループを追加して過度に整理することのないようにしてください。
次の場合、グループを分割することを検討してください。
- このグループにはさまざまなサイズのコマンドが多数あり、整理が必要です。
- このグループには、追加のラベルがあれば大きなメリットを得られるコマンドがあります。
最もよく使用されるグループを最も目立つ場所に配置し、タブ全体でグループに論理的な順序があることを確認します。
ユーザーがすばやく自信を持ってコマンドを見つけられるようグループデザインを最適化してください。 その他の考慮事項はすべて二次的なものです。
1 つのボタンを含むグループをポップアップグループアイコンに拡大縮小しないでください。 縮小するときは、1 つのボタンのままにしてください。
最大 7 つのグループを使用します。 グループが 7 つを超えると、どのグループにコマンドがあるかを判断するのが難しくなります。

標準リボングループ

可能な場合は必ず、プログラムのコマンドをこれらの標準グループにマッピングします。これらのグループは、関連するタブ内に標準的な表示順序で表示されます。

メインタブ

クリップボード
フォント
段落
編集

タブの挿入

Tables
図

ページレイアウトタブ

テーマ
ページ設定
整列

レビュータブ

Proofing
Comments

[表示] タブ

ドキュメントビュー
表示/非表示
ズーム
ウィンドウ

コマンド

よく使用されるすべてのコマンドを公開することにより、リボンの見つけやすさと拡張性の利点を生かします。 適切であれば、頻繁に使用するコマンド、特に見つけにくいことが分かっているコマンドをダイアログボックスからリボンに移動します。ユーザーがダイアログボックスを使用せずに一般的なタスクを実行できるのが理想的です。
リボンの拡張性を理由に、不必要に複雑にしないでください。 常に控えめにし、できるからといってリボンにコマンドを追加しないでください。コマンドエクスペリエンス全体をシンプルに保ってください。表示を簡略化する方法を以下に示します。
- インプレースのコンテキストコマンドには、コンテキストメニューとミニツールバーを使用してください。
- ダイアログボックス内のあまり使用されないコマンドは移動 (または保持) してください。 これらのコマンドにアクセスするには、ダイアログボックス起動ツールを使用します。ダイアログボックスは、リボンで引き続き使用できます。一般的なタスク中にそれらを使用する必要性を減らすようにしてください。
- 冗長で使用頻度の低い機能を排除してください。

プレゼンテーション

各コマンドは 1 つのタブにのみ表示します。特にコマンドを呼び出すために多くのクリックが必要な場合、同じコマンドへの複数のパスを避けてください。複数のパスからコマンドを見つけるのが便利に思えるかもしれません。しかし、ユーザーは探しているものを見つけると、探すのをやめるという点を覚えておいてください。ユーザーは、最初に見つけたパスが唯一のパスであると想定しがちですが、そのパスが非効率的である場合、深刻な問題となります。 例外: コンテキストタブでは、一般的なコンテキストタスクのタブを変更できなくなる場合、[ホーム] タブと [挿入] タブのいくつかのコマンドが重複することがあります。
グループ内では、最も頻繁に使用されるコマンドを優先しながら、コマンドを論理的な順序で配置してください。 全体として、コマンドは論理的な流れを持ち、見つけやすくすると同時に、最も頻繁に使用されるコマンドが最初に表示されるようにする必要があります。一般に、32 x 32 ピクセルのアイコンを持つコマンドは、16 x 16 ピクセルのアイコンを持つコマンドの前に表示され、グループ間で見つけやすくします。
頻繁に使用されるコマンドの横に、破壊的なコマンドを配置しないでください。 コマンドは、その効果が広範囲に及び、簡単に元に戻すことができないか、効果がすぐに気が付くものではない場合、破壊的と見なされます。
相互に排他的なオプションのセットなど、関連性の強いコマンドを示すには、区切り文字を使用します。
ラベルを必要としない、関連性が高く、よく知られているコマンドのセットには、ツールバースタイルのグループを使用することを検討してください。そうすることで、見つけやすさや習得のしやすさに影響を与えることなく、コンパクトなスペースに多くのコマンドを表示できます。よく知られているように、このようなコマンドは頻繁に使用されて、すぐに認識されるため、[ホーム] タブに表示される傾向があります。
最も頻繁に使用される重要なラベル付きコマンドには、32 x 32 ピクセルのアイコンを使用してください。 グループを縮小するときは、これらのコマンドを最後に 16 x 16 ピクセルアイコンに変換します。
気まぐれなコマンド配置を避けてください。 ユーザーが必要なコマンドを見つけるためにすべてのタブを調べる時間を無駄にしないよう、タブとグループのデザインを慎重に検討してください。
マーケティングベースの配置は避けてください。 新機能のプロモーションに関するマーケティング目標は、時間の経過と共に変化する傾向があります。製品の将来のバージョンを考慮に入れ、構成が絶えず変化するとどれだけのフラストレーションを引き起こすかを考えてください。

相互作用

現在のコンテキストに適用されないコマンドや、エラーに直接つながるコマンドは無効にしてください。 役に立つ場合は、拡張ツールヒントを使って、コマンドが無効になっている理由を説明します。このようなコマンドを非表示にしないでください。非表示にするとリボンのレイアウトが変更され、リボンの表示が不安定になる可能性があります。
コマンドラベルを動的に更新しないでください。 繰り返しになりますが、これを行うとタブのレイアウトが変更され、外観が不安定になる可能性があります。代わりに、一定のラベルを使用するようコマンドをデザインしてください。

正解です。不正解です

使用できないときにコマンドを無効にする
コマンドが使用できない場合でも、コマンドを非表示にしない
直接コントロールを優先してください。 コマンドは、1 回のクリックで (つまり、メニュー内を移動せずに) 呼び出された場合、直接呼び出されます。ただし、リボン内のギャラリーを除き、直接コントロールはライブプレビューをサポートしていないため、ライブプレビューの必要性も要因となります。
関連する書式設定オプションのセット内にコマンドがある場合にオプションの効果を示すには、ライブプレビューを使用します。特にユーザーが間違ったオプションを選択する可能性がある場合、ライブプレビューが重要かつ実用的です。
- コマンドが頻繁に使用される場合、リボン内ギャラリーを使用して直接表示します。
- コマンドが頻繁に使用される場合、ドロップダウンギャラリーを使用します。
以下のコントロールを使用し、以下の優先順位で直接コマンドを公開します。
- コマンドボタン、チェックボックス、ラジオボタン、インプレースギャラリー。 これらは常に直接的です。
- 分割ボタン。 最も一般的なコマンドを直接指定しますが、コマンドバリエーションには間接的に指定します。
- メニューのボタン。 これらは間接的ですが、見つけやすい多くのコマンドが表示されます。
- テキストボックス (スピンコントロール付き)。 通常、テキスト入力には他のコントロールの種類よりも多くの労力が必要です。
フルサイズで表示されたときにリボンがほとんどのメニューボタンで構成されている場合、メニューバーを使用することもできます。
即時コマンドを優先してください。
コマンドがすぐに有効になる場合 (つまり、追加の入力を集めるダイアログボックスがない場合) は、すぐに実行されます。コマンドに入力が必要な場合、ボタン部分に即時コマンドを配置し、入力が必要なコマンドをサブメニューに配置する分割ボタンの使用を検討してください。

正解です。	不正解です
使用できないときにコマンドを無効にする	コマンドが使用できない場合でも、コマンドを非表示にしない

ギャラリー

次の場合、ギャラリーを使用します。

ユーザーが通常選択する、明確に定義された関連する選択肢のセットが存在する。 バリエーションの数は無限にあるかもしれませんが、可能性のある選択肢は十分に抑えられているはずです。選択肢の関連性が強くない場合、別のギャラリーを使用することを検討してください。
選択肢は、書式設定機能など、視覚的に表現するのが最適です。 サムネイルを使用すると、参照、把握、選択が容易になります。選択肢にラベルを付けることもできますが、選択は視覚によって行われるため、選択肢を把握するためにテキストラベルは必要ありません。
選択肢には、1 回のクリックですぐに達成される結果が表示されます。 ユーザーの意図をさらに明確にするためのフォローアップダイアログボックスや、示された結果を達成するための一連の手順は表示されません。ユーザーが選択を調整することを希望する場合、後で調整できるようにします。

次の場合、リボン内ギャラリーを使用します。

選択肢が頻繁に使用される。 選択肢にはスペースが必要であり、他のコマンドから取得される可能性のあるスペースに見合う価値がある。
一般的な用途では、表示された選択肢をグループ化またはフィルター処理する必要はありません。
選択肢は、リボンの高さ (48 ピクセル) 内で効果的に表示することができます。

ギャラリー内のサムネイル

ジョブを適切に実行する最小の標準ギャラリーサムネイルサイズを選択します。

リボン内ギャラリーの場合、16 x 16、48 x 48、または 64 x 48 ピクセルのサムネイルを使用します。
ドロップダウンギャラリーの場合、16x16、32x32、48x48、64x48、72x96、96x72、96x96、または 128 x 128 ピクセルのサムネイルを使用します。
すべてのギャラリー項目のサムネイルサイズは同じにする必要があります。

リボン内ギャラリーの場合:

少なくとも 3 つの選択肢を表示します。スペースがあれば、さらに表示します。 通常のウィンドウサイズで少なくとも 3 つの選択肢を表示するのに十分なスペースがない場合、代わりにドロップダウンギャラリーを使用します。
リボン内ギャラリーを展開し、使用可能なスペースを活用します。 追加のスペースを使用してより多くの項目を表示し、1 クリックで簡単に選択できるようにします。

ドロップダウンギャラリーの場合:

コンボボックス、ドロップダウンリスト、分割ボタン、またはメニューボタンからギャラリーを表示します。
ユーザーがメインウィンドウをクリックしてドロップダウンギャラリーを閉じる場合、メインウィンドウの内容を選択または変更せずにギャラリーを閉じます。
ギャラリーに多くの選択肢があり、一部の選択肢がほとんど使用されない場合、よく使用される選択肢に重点を置き、既定のギャラリーを簡素化します。残りのコマンドについては、ギャラリードロップダウンの下部に適切なコマンドを追加します。
- コマンドに他のバリエーションの一覧が表示される場合、"その他の singular feature name オプション..." という名前を付けます。
- ユーザーが独自のカスタムオプションを作成できるダイアログボックスがコマンドに表示される場合、"カスタム feature name..." という名前を付けます。
選択肢をグループに整理すると、閲覧の効率が上がります。
ギャラリーに多数の項目がある場合、ユーザーがより効率的に選択肢を見つけるのに役立つフィルターを追加することを検討してください。 混乱を避けるため、フィルター処理されていないギャラリーを最初に表示します。ただし、多くのギャラリーには選択肢があまり多くないため、フィルターは必要ありません。グループを使用するだけで十分です。

コマンドプレビュー

プレビューを使用すると、ユーザーがコマンドを実行しなくてもコマンドの効果を表示できます。 役立つプレビューを使用することで、プログラムの効率と学習のしやすさが向上し、試行錯誤の必要性が減ります。さまざまな種類のコマンドプレビューについては、この記事の「デザインの概念」セクションの「プレビュー」をご覧ください。
ライブプレビューの場合、プレビューを適用して現在の状態を 500 ミリ秒以内に復元できることを確認してください。 そのためには、書式設定の変更をすばやく、中断可能な方法で適用する機能が必要です。ライブプレビューのメリットを最大限に受けるには、ユーザーがさまざまなオプションをすばやく評価できる必要があります。
プレビューではテキストを使用しないでください。 使用する場合、プレビューイメージをローカライズする必要があります。

アイコン

ドロップダウンリスト、チェックボックス、ラジオボタンを除くすべてのリボンコントロールのアイコンを指定します。 ほとんどのコマンドでは、32 x 32 と 16 x 16 の両方のピクセルアイコンが必要です (クイックアクセスツールバーでは 16 x 16 ピクセルのアイコンのみ使用されます)。ギャラリーでは通常、16 x 16、48 x 48、または 64 x 48 ピクセルのアイコンが使用されます。
一意のアイコンを指定します。 異なるコマンドに同じアイコンを使用しないでください。
リボンアイコンがリボンの背景色に対して明確に表示されていることを確認します。 必ず、コンテキストに沿ってハイコントラストモードでリボンアイコンを評価してください。
特に頻繁に使用されるコマンドについては、その効果を明確に伝えるアイコンデザインを選択してください。適切なデザインのリボンにはわかりやすいアイコンがあり、ユーザーがコマンドを効率的に見つけて理解するのに役立ちます。
特に頻繁に使用するコマンドについては、認識しやすく区別しやすいアイコンを選択してください。必ず、アイコンは特徴的な形と色にしてください。そうすることで、アイコン記号を覚えていない場合でも、ユーザーはコマンドをすばやく見つけることができます。

正解です。不正解です

図形と色を使用して、区別しやすいアイコンを作成します。
同じ色のアイコンは区別が難しい
グループ内で最も目立つコマンドの 16 x 16 ピクセルのアイコンを 32 x 32 ピクセルのビジュアルコンテナー内に配置し、ポップアップグループアイコンを作成することを検討してください。ポップアップグループに異なるアイコンを作成する必要はありません。
役立つ場合、アイコンを変更して現在の状態を反映してください。 これは、既定の効果が変更される可能性がある分割ボタンには特に役立ちます。
リボンアイコンが Aero スタイルのアイコンガイドラインに準拠していることを確認します。 ただし、リボンアイコンは遠近法で表示されるのではなく、正面から表示されます。

正解です。	不正解です
図形と色を使用して、区別しやすいアイコンを作成します。	同じ色のアイコンは区別が難しい

正解です。	不正解です
2 次元アイコンを使用します。	3 次元アイコンは使用しないでください。

拡張ツールヒント

すべてのリボンコマンドには、コマンド名、ショートカットキー、説明、オプションの補足情報を指定するために拡張ツールヒントが必要です。単にラベルを言い直すだけのツールヒントは避けてください。

誤った例:

この例では、ツールヒントはコマンドラベルを言い換えたにすぎません。
可能であれば、簡潔な説明を使ってコマンドを十分に説明してください。 詳細な説明が本当に必要な場合のみヘルプにリンクしてください。

誤った例:

この例では、コマンドにヘルプは必要ありません。
役に立つ場合、プレビューを使用してコマンドの効果を示します。

この例では、ツールヒント画像はコマンドの効果を示しています。

ラベル付けのガイドラインについては、「拡張ツールヒントのラベル」をご覧ください。

アクセスキーと KeyTip

KeyTip は、リボンに直接表示されるコマンドのアクセスキーを表示するために使用されるメカニズムです。

ドロップダウンメニューコマンドのアクセスキーは、下線付き文字で示されます。メニューアクセスキーとは次の点で異なります。

2 つの文字アクセスキーを使用できる。たとえば、FP を使用して [書式のコピー/貼り付け] コマンドにアクセスできます。
アクセスキーの割り当ては下線ではなくヒントを使用して表示されるため、文字の幅や下に延びる部分は割り当てを行う際の要素にはなりません。
すべてのリボンタブとコマンドにアクセスキーを割り当てます。 考えられる唯一の例外は、レガシアドインからのコマンドです。
[アプリケーション] ボタンとクイックアクセスツールバーの場合:
- [アプリケーション] ボタンに F を割り当てます。この割り当ては、[アプリケーション] ボタンが従来の [ファイル] メニューと類似しているために使用されます。
- クイックアクセスツールバーと最近使用したファイルの一覧では、アクセスキーを数値で割り当てます。
タブの場合:
- H を [ホーム] に割り当てます。
- 最も頻繁に使用されるタブから、ラベルの最初の文字を割り当てます。
- 最初の文字に割り当てることができないタブの場合、ラベル内の固有の子音または母音を選択します。
- 以前メニューバーをサポートしていたプログラムについては、可能な限りアクセスキーの互換性を維持するように努めてください。従来のメニューカテゴリからのアクセスキーに異なる意味を割り当てないようにしてください。たとえば、プログラムの従来のメニューバーバージョンに [編集] メニューがあった場合、同等のタブに E アクセスキーを使用します。同等のタブがない場合、混乱を避けるため、どのタブにも E アクセスキーを割り当てないでください。
リボンコマンド、メニュー、サブメニューの場合:
- タブ内で一意のアクセスキーの組み合わせを割り当てます。さまざまなタブ内でアクセスキーの組み合わせを再利用できます。
- 可能な限り、よく使用されるコマンドに標準のアクセスキーを割り当てます。標準アクセスキーの表をご覧ください。
- 他のコマンドの場合:
  - 最も頻繁に使用されるコマンドの場合、ラベルの最初または 2 番目の単語 (できれば最初の文字) の先頭に文字を選択します。
  - 使用頻度の低いコマンドの場合、"Exit" の "x" など、ラベル内の固有の子音または母音である文字を選択します。
  - 使用頻度の低いコマンドとダイアログボックス起動ツールでは、必要に応じて 2 文字を使用します。
  - メニューとサブメニューの場合、1 文字を使用して、コマンド全体に必要なキーストロークの数を減らします。
  - J、Y、または Z で始まるアクセスキーは、コンテキストタブ、割り当てられていない KeyTip、ポップアップグループに使用されるため、使用しないでください。
ポップアップグループの場合:
- Z で始まる 2 文字のアクセスキーを使用します。
- 最も頻繁に使用されるグループから始めて、ラベルの最初の文字に 2 番目のアクセスキー文字を割り当てます。
- 残りのグループには、ラベル内の固有の子音または母音を選択します。

ショートカットキーのガイドラインについては、「キーボード」をご覧ください。

[アプリケーション] ボタン

ファイルに対して何らの操作を実行するコマンドのメニューを表示するには、[アプリケーション] ボタンを使用します。 例としては、ファイルの作成、開く、保存、印刷、ドキュメントの送信と公開を行うため、従来は [ファイル] メニューに含まれていたコマンドが挙げられます。
リボンを使用するときは、常に [アプリケーション] ボタンを追加してください。 プログラムがファイルを使用しない場合、[アプリケーション] ボタンを使用してプログラムオプションと [終了] コマンドにアクセスします。 [アプリケーション] ボタンでは、常にコマンドメニューが表示されます。単なる装飾ではありません。
必要に応じて、次の標準 [アプリケーション] メニューコマンドを使用してください。
- 新しい
- 始
- および
- 名前を付けて保存...
- 印刷...
- クイック印刷
- 印刷プレビュー
- 終
- [オプション]
- 終了
[アプリケーション] メニューに属するコマンドは、そのメニューにのみ予約します。 いずれのタブにも冗長に配置しないでください。
メニュー項目ごとに、以下を追加します。
- コマンド名を含むラベル。
- 32 x 32 ピクセルアイコン。
- 簡単な説明。 最大 2 行のテキストを使用して説明を表示できることを確認します。
ツールヒントを使ってショートカットキーをドキュメント化します。 通常のメニューとは異なり、[アプリケーション] メニューはラベルを使ってショートカットキーをドキュメント化しません。

クイックアクセスツールバー

クイックアクセスツールバーを使って、頻繁に使用されるコマンドにアクセスできます。 コマンドは、[アプリケーション] ボタンまたはリボンから実行できます。
リボンを使用する場合、必ずクイックアクセスツールバーを追加してください。 リボンにタブが 1 つしかない場合でも、これを行うと、プログラム間で一貫性が保たれます。
クイックアクセスツールバーには、[アプリケーション] メニューで頻繁に使用されるコマンドを事前に入力します。 プログラムでサポートされている場合は [保存] と [元に戻す] を追加し、サポートされていて頻繁に使用される場合は [開く] と [印刷] を追加します。
[クイックアクセスツールバーのカスタマイズ] メニューには、最も頻繁に使用される即時コマンドを最大 12 個追加します。 即時コマンドは、有効になる前に追加の入力を必要としないため、クイックアクセスツールバーに適しています。これらは任意の即時コマンドにすることができますが、ユーザーが選択する可能性が高いため、[ホーム] タブにないコマンドを優先してください。
[クイックアクセスツールバーのカスタマイズ] メニューに関連するコマンドのペアがある場合は、頻度に関係なく両方を追加してください。 一般的なペアは、開く/閉じる、戻る/進む、元に戻す/やり直すです。
[クイックアクセスツールバーのカスタマイズ] ダイアログで、コマンドを追加する方法を提供します。 最も頻繁に使用されるコマンドを表示する "よく使用されるコマンド" フィルターを提供し、このフィルターを既定で選択します。

ダイアログボックス起動ツール

使用頻度の低いコマンドと設定を含む関連ダイアログボックスがある場合、ダイアログボックス起動ツールを使用してグループを指定します。 ダイアログボックスには、グループ内のすべてのコマンドに加えて、グループとまったく異なるコマンドセットや同じコマンドではなく、その他のコマンドが含まれている必要があります。
ダイアログボックス起動ツールを使用してコマンドを直接実行しないでください。 ダイアログボックス起動ツールはダイアログボックスを表示する必要があります。
ダイアログボックス起動ツールを使用して、頻繁に使用されるコマンドと設定にアクセスしないでください。 リボン上に直接配置されているコマンドと比較すると、ダイアログボックスのコマンドと設定は比較的見つけにくくなります。
ダイアログボックスの名前とグループの名前を一致させてください。 完全に一致する必要はありませんが、ユーザーが結果に驚かないよう、十分に似た名前にする必要があります。

誤った例:

リマインダーサウンドはリマインダーオプションであるため、ダイアログボックス起動ツールを使用してリマインダーサウンドを設定することは予期されません。
グループに関連するコマンドと設定のみ表示してください。 ダイアログボックスに他の内容が表示される場合、ユーザーは、他のコマンドや設定へのこのパスが唯一のパスであると結論付ける可能性があります。

誤った例:

この例では、[フォント] ダイアログボックスに文字間隔の設定が表示されています。この設定は、関連するタブとは無関係です。

Labels

タブラベル

すべてのタブにラベルを付けます。
可能であれば必ず、標準リボンタブを使用してください。
簡潔な 1 つの単語ラベルを使用します。 複数単語のラベルも使用できますが、使用するスペースが増え、ローカライズが困難になります。
内容を明確かつ正確に説明するわかりやすいタブ名を選択してください。 名前は具体的な名前にする必要がありますが、具体的にしすぎないでください。タブ名は、ユーザーがその内容に驚かないように、十分に予測可能なものにする必要があります。 [ホーム] タブは、最も頻繁に使用されるコマンドに使用されるため、一般的な名前が付けられている点に注意してください。
"基本" や "高度" などのグループ名は使用しないでください。これらのグループ名を使用すると、ユーザーは探しているコマンドが基本コマンドか高度なコマンドかを判断しなければならなくなります。
目的を反映したタブ名を選んでください。 タブに関連付けられている目標またはタスクを検討してください。
他のすべてのタブ名と明確に異なるタブ名を選択してください。
タブには、名詞または動詞を使用します。 タブ名には並列フレーズは必要ないので、名詞か動詞かに関係なく最適なラベルを選択してください。
動名詞 ("-ing" で終わる名前) は使用しないでください。代わりに、その動名詞の派生元の動詞を使用してください。 (例: "描画している" ではなく "描画" を使用してください)。
特に隣接するタブでは、タブ名の最初の文字を同じにしないでください。 リボンが縮小されると、これらのタブ名のテキストが切り捨てられて同じような内容になります。
単数形の名前を優先してください。 ただし、単数名が不自然な場合は複数名を使用することもできます。
タイトルスタイルで大文字化します。
末尾に句点を付けないでください。

コンテキストタブとタブセットのラベル

コンテキストタブセットのラベルの最後は、[ツール] にしてください。 これを行うと、コンテキストタブの目的を特定可能になります。
タイトルスタイルで大文字化します。
末尾に句点を付けないでください。

グループラベル

グループに単一のコマンドがあり、グループとコマンドのラベルが同じになる場合を除き、すべてのグループにラベルを付けてください。
可能であれば必ず、標準リボングループを使用してください。
簡潔な 1 つの単語ラベルを使用します。 複数単語のラベルも使用できますが、使用するスペースが増え、ローカライズが困難になります。
内容を明確かつ正確に説明するわかりやすいグループ名を選択してください。 名前は、一般的なものではなく、具体的な名前にしてください。
目的を反映したグループ名を選んでください。 グループ内のコマンドに関連する目標またはタスクを検討してください。
動名詞 (「-ing」で終わる名前) の使用は避けてください。ただし、動名詞の派生元である動詞を使用すると混乱を招く場合は、動名詞を使用することができます。たとえば、"編集" や "文章校正" の代わりに "編集中" と "校正中" を使用します。
タブ名と同じグループ名は使用しないでください。 グループが存在するタブ名を使用すると情報が提供されず、別のタブの名前を使用すると混乱を招きます。
単数形の名前を優先してください。 ただし、単数名が不自然な場合は複数名を使用することもできます。
文スタイルの大文字を使用します。
末尾に句点を付けないでください。

コマンドラベル

すべてのコマンドにラベルを付けてください。 明示的なテキストラベルを付ければ、ユーザーがコマンドを見つけて理解することができます。 例外: コマンドのアイコンが非常によく知られており、スペースが限られている場合、コマンドにラベルを付けなくてもかまいません。ほとんどの場合、ラベルのないコマンドは [ホーム] タブにあります。この場合、その Name プロパティを適切なテキストラベルに割り当ててください。これにより、スクリーンリーダーなどのアシストテクノロジ製品が、グラフィックに関する代替情報をユーザーに提供できるようになります。
コマンドボタンの場合、簡潔でわかりやすいラベルを使用します。 可能であれば、1 つの単語を使用します (最大 4 単語)。
ドロップダウンリストでは、リストに常に値がある場合、現在の値をラベルとして使用します。
編集可能なドロップダウンリストに値がない場合、プロンプトを使用します。
説明が不要であったり、あまり使用されないドロップダウンリストには、明示的なラベルが必要です。 ラベルの末尾にコロンを置きます。
<br>テキストボックスの場合、明示的なラベルを使用します。ラベルの最後にコロンを付けます。
文スタイルで大文字化します。 このようにすると、Windows のトーンによりふさわしくなります。
ラベルは命令形の動詞で始めてください。 ただし、タブ名やグループ名、または "表示"、"作成"、"挿入"、"書式設定" などの一般的な動詞と同じである場合は除きます。
末尾に句点を付けないでください。
スペースを節約するため、リボンコマンドラベルに省略記号を付けないでください。 ただし、省略記号は、[アプリケーション] ボタンとドロップダウンメニューのコマンドで使用されます。

コマンド名とそのショートカットキー (該当する場合) を指定するには、タイトルを使用します。
タイトルでは、終了句読点を使用しないでください。
動詞で説明を開始してください。 説明を使用すると、特定の機能が探している機能であるかどうかをユーザーが判断するのに役立ちます。説明は、「これは、... する場合に使用するのに適切な機能です」という文を完成できるように表現する必要があります。
説明は短くしてください。 要点を述べてください。テキストが長いと読む気が失せてしまいます。
分割ボタンの場合、別のツールヒントを使って分割ボタンメニューを説明します。
オプションの補足説明を使って、コントロールの使用方法を説明します。 コントロール自体が状態を示していない場合、このテキストにはコントロールの状態に関する情報 (無効になっている理由を含む) を含めることができます。このテキストは短くし、より詳しい説明についてはヘルプトピックを使用してください。
説明と補足説明には、句読点をつけて完全な文章を使用してください。
文スタイルで大文字化します。

アプリケーションボタンのラベル

クイック印刷オプションを選択した状態のスクリーンショット
コマンドの即時バージョンであることを示すには、"クイック" を使用します。
コマンドにさらに情報が必要であることを示すには、省略記号を使用します。
文スタイルの大文字を使用します。

ドキュメント

リボンを参照する場合:

リボンとそのコンポーネントをリボン、タブ、グループ、コントロールと呼びます。これらの用語は大文字にしません。
丸いボタンをアプリケーションボタン、そこに含まれるメニューをアプリケーションメニューと呼びます。
ツールバーをクイックアクセスツールバーと呼びます。
タブは、ラベルと "タブ" という単語で参照します。大文字と小文字の区別を含め、正確なラベルテキストを使用してください。
コマンドはラベルで参照します。ラベルのないコマンドはツールヒント名で参照します。大文字と小文字を含む正確なラベルテキストを使用しますが、省略記号は含めないでください。単語ボタンやコマンドは含めないでください。
ユーザー操作を説明するには、タブとコントロールのクリックを使用します。編集可能なドロップダウンリストには、Enter を使用します。 "選択"、"選択する"、"選ぶ" は使用しないでください。
使用できない項目については、淡色表示、無効、または灰色表示ではなく、使用できないものとして参照してください。プログラミングドキュメントでは、無効を使用します。
可能な場合は、太字のテキストを使用してラベルを書式設定してください。それ以外の場合、混乱を防ぐため、必要な場合にのみラベルを引用符で囲みます。

例 :

[ホーム] タブの [形式を選択して貼り付け] をクリックします。
[ホーム] タブの [フォント] ボックスに「Segoe UI」と入力します。
[レビュー] タブの [変更履歴とコメントの表示] をクリックし、[レビュー担当者] をクリックします。
[書式] タブの [画像ツール] で、[画像の圧縮] をクリックします。

次の方法で共有

Windows 7 リボン

これが適切なユーザー インターフェイスであるかどうか

プログラムの種類

見つけやすさと学習の問題

コマンドの特性

コマンド スケール

7 つの最も重要な事柄

設計概念

既存のプログラムでのリボンの調整

リボンの性質

リッチ コマンドの性質

リボンには常に [アプリケーション] ボタンとクイック アクセス ツール バーがある

整理と見つけやすさ

タブ

グループ

プレビュー

リボンの拡大縮小

ガイドライン

全般

タブの使用

コンテキスト タブ

モーダル タブ

標準リボン タブ

通常のタブ

標準コンテキスト タブ

標準グループ

標準リボン グループ

メイン タブ

タブの挿入

ページ レイアウト タブ

レビュー タブ

[表示] タブ

コマンド

プレゼンテーション

相互作用

ギャラリー

ギャラリー内のサムネイル

コマンド プレビュー

アイコン

拡張ツールヒント

アクセス キーと KeyTip

[アプリケーション] ボタン

クイック アクセス ツール バー

ダイアログ ボックス起動ツール

Labels

タブ ラベル

コンテキスト タブとタブ セットのラベル

グループ ラベル

コマンド ラベル

拡張ツールヒントのラベル

アプリケーション ボタンのラベル