リボン
Ribbon / 2007– / レイアウト / Microsoft UI
ウィンドウ上端にタブの列として命令を並べる命令帯で、メニューバーとツールバーの両方を置き換える。Office 2007で導入され、Microsoftはタブ、グループ、文脈タブ、ギャラリーという語彙を公式の指針で定義した。命令には必ずラベルが付き、使う頻度によって大きさが変わる。
ひと目で判断
見た目の特徴
- ウィンドウ最上部にタブで切り替わる帯が常駐し、その高さは48ピクセルに固定される
- 帯の中は名前の付いたグループに区切られ、区切りの下端にグループ名が並ぶ
- 命令の絵は32×32と16×16の二段階で、頻度の高い命令だけが大きい絵で先に置かれる
- 選択した対象の種類に応じて色の付いた文脈タブが現れ、そのタブ集合の名前は Tools で終わる
向いている用途
- 命令が数十を超える業務ソフトで、メニューとツールバーを一つの面に統合し直すとき
- 命令の効果を選ぶ前に見せたいとき、ギャラリーとライブプレビューで選ばせる画面を設計するとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- すべての命令にテキストラベルを付ける。アイコンだけで済ませるのは、誰でも知っている命令が並ぶ場所に限る。
- 構成
- 上端に固定の帯を置き、タブは七つ以内に抑える。最初のタブをHomeとして頻度の高い命令を集め、帯の中は名前付きのグループで区切る。
- 素材
- アイコンは32×32と16×16の二種を用意し、頻度の高い命令に大きい方をあてる。帯の中に置くギャラリーのサムネイルは、48ピクセルの高さに収まる寸法から選ぶ。
- 注意
- 既存のメニューとツールバーをそのまま帯に並べ替えるだけだと、占める面積が増えるだけで、結果を先に見せるという利点が出ない。
- 関連研究
- Office 2007がメニューバーを捨てた理由 / 文脈タブとモーダルタブの違い / Altから始まるキーチップが、タブと命令をどう二段階で絞り込むか
関連項目
- エアロ（Aero）同じ「Microsoft UI」の系統。リボンとエアロの違いを見る
- Windows 95 インターフェース（Windows 95 Interface）同じ「Microsoft UI」の系統。リボンとWindows 95 インターフェースの違いを見る
Microsoft UIをさらに見る
同じ「Microsoft UI」から、共通する印象が多い順に次の項目を選んだ。
- フルーエント2（Fluent 2）共通する印象：信頼 / 技術。
- メトロ（Metro）共通する印象：技術 / 信頼。
- ルナ（Luna）共通する印象：信頼。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/ribbon-ui
- Markdown
- [リボン（Ribbon） — デザインスタイル辞典](https://indexstyle.org/ja/styles/ribbon-ui)
- HTML
- <a href="https://indexstyle.org/ja/styles/ribbon-ui">リボン（Ribbon） — デザインスタイル辞典</a>