global-toolbar-controls

グローバルツールバーのコントロール

ここに含めるもの

グローバルコントロールは、製品全体の利用体験に影響しますが、ユーザーの主なタスクではありません。アクセスされる頻度は低く、セッションごとに一度以下です。プライマリーナビゲーションやコンテンツと視覚的に競合しないようにします。

グローバルツールバーのコントロールの例：

• 通貨セレクター（eコマース、金融ツール）
• 言語／ロケール切り替え
• 地域または市場のセレクター
• 単位系（メートル法／ヤード・ポンド法）
• テーマの切り替え（ライト／ダーク）
• アクセシビリティ設定（フォントサイズ、コントラスト）

これらは、ユーザーアカウント設定（プロフィールメニューに配置）やコンテキスト設定（影響を与える機能の隣に配置）とは異なります。

このリストには、2種類のコントロールが含まれています。表示する内容を変えるコントロール（地域、市場、テナント）と、表示方法を変えるコントロール（言語、テーマ、単位）です。それぞれを分けてまとめます。設定項目は縦ではなく、横一列に配置します。縦に積み重ねると、設定項目が増えるたびに高さが増し、個人的な設定がデータを選択するコントロールと同じ重みを持ってしまいます。横一列なら、高さを変えずに次の設定項目を追加できます。

配置場所

ヘッダーのユーティリティストリップ

メインヘッダーの上、またはその中に設ける2段目の行で、右寄せにします。eコマースサイトや国際的なサイトでよく使われます。

[Logo]                    [EN | EUR | 🌍]  [Account]  [Cart]
────────────────────────────────────────────────────────────
[Main navigation]

ヘッダー右側 — コンパクト

メインヘッダー内の右端に、文字を小さくし、視覚的な重みを抑えて配置します。

[Logo]  [Nav items ...]              [EUR ▾]  [EN ▾]  [Account ▾]

フッター

一度設定したら、ほとんど変更しないコントロールに適しています。大規模な国際サイト（Airbnb、Apple）では、言語や地域のセレクターがフッターによく配置されています。本当に利用頻度が低いコントロールに適した場所です。

専用の設定エリア

設定項目が複雑な場合は、すべてをツールバーに詰め込むより、設定ページやパネルを設けるほうがすっきりします。ツールバーには設定エリアへのリンクを配置し、設定項目そのものは置かないようにします。

タイポグラフィと視覚的なスタイル

グローバルツールバーのコントロールはセカンダリー UI です。メインコンテンツから注意をそらさないようにします。

• フォントサイズ：13–14px — 意図的に本文より小さくします（タイプスケールでは最大14px）。
• 色：控えめ — プライマリーテキスト色ではなく、セカンダリーテキスト色（--color-text-secondary）を使用します。
• 太字は使わない — レギュラーウェイトのみを使用します。
• コンパクトな間隔 — プライマリーナビゲーション項目よりパディングを詰めます。
• 区切り — 隣接するコントロールの間に | または細い縦線を置くと（言語 | 通貨）、ボタン全体の装飾を使わずにグループ化できます。

.toolbar-control {
  font-size: var(--text-sm);       /* 13–14px */
  color: var(--color-text-secondary);
  font-weight: 400;
  padding: 4px 8px;
}

操作パターン

グローバルコントロールには、通常、コンパクトなドロップダウンを使用します。ラベルをクリックすると、選択可能な項目を含む小さなポップオーバーまたはセレクトが開きます。

• 現在の値をトリガーラベルに表示します：EUR ▾、EN ▾
• 言語コントロールには、現在の言語をコードまたは名称で表示し、地球儀や旗だけの表示にはしません。地球儀はカテゴリを示すもので、現在の状態は示しません。旗が示すのは国です。選択肢は自称名（「Suomi」、「Deutsch」）で表示します。このコントロールを必要とする人は、表示言語に翻訳された名称を読めない可能性があるためです。
• 通貨：記号 + コード
• 地域と言語は独立した軸です。すべてのリンクと地域の切り替えで、現在の言語を引き継ぎます。地域のデフォルト設定がフォールバックとして使われるのは、サイトへの入口だけです。
• 選択肢のリストは短く保ちます。約20項目を超える場合は、ドロップダウン内に検索入力欄を追加します。
• 選択時にはすぐに適用します。変更が目に見える影響を与える場合は、簡潔なステータス更新（トーストまたはインライン更新）で確認します。
• 保存される設定は、開いているタブ間でも同期します。ストレージイベントを監視し、状態を再読み込みします。このイベントは書き込み元のタブではなく、ほかのタブで発生するため、開発者が確認しているタブでは常に正しい状態になります。最初のフェッチを設定値に応じて制御する場合は、状態の復元が完了するまでフェッチを待機させます。

旗を変形しない

旗を円形または正方形のアイコンに収めるには、トリミングするか、その形状用に描かれたアートワークを使用します。枠線、行の高さ、フレックスコンテナによって一方の軸だけがサイズ変更されないよう、アイコンのボックスには幅と高さを同じ明示的な値で指定します。レンダリング後の幅と高さは、それぞれ個別に確認します。

レビューチェックリスト

• すべてのページで、グローバルコントロールは一貫して同じ場所に配置されていますか？
• タイポグラフィは、プライマリナビゲーションより小さく、控えめですか？
• コントロールのラベルには現在の値が表示されていますか？言語の場合、言語名はエンドニムで表示されていますか？
• 表示対象を指定するコントロール（地域、テナント）は、表示方法を指定する設定と分けてグループ化され、設定は横一列に配置されていますか？
• リンクや地域の切り替え後も、現在の言語が維持されていますか？
• 保存された設定はタブ間で同期され、その設定に依存する最初のフェッチより前に適用されていますか？
• ドロップダウンやポップオーバーはコンパクトで、キーボードで操作できますか？
• グローバルコントロールはユーザーアカウントの設定と分けられていますか？
• モバイルでは、目立ちすぎることなくグローバルコントロールにアクセスできますか？（小さな画面では、メニューやフッターに移動することがよくあります）
• 国旗はトリミングするか、形状に合わせて表示し、各辺の長さが明示的に等しいボックス内に収めていますか？縦横比を崩して拡大・縮小していませんか？