chrome-extension-ui

Chrome Extensions UX/UI のベストプラクティス

Chrome Extensions 向けの包括的な UX/UI デザインガイドです。Manifest V3 に最適化されています。8 つのカテゴリにわたる 42 のルールを含み、拡張機能の UI 開発とコードレビューに役立つよう、影響度の高い順に優先順位を付けています。

適用するタイミング

以下の場合に、これらのガイドラインを参照してください。

• Chrome 拡張機能の新しいユーザーインターフェースを構築するとき
• ポップアップ、サイドパネル、コンテンツスクリプト UI のいずれを使うか選択するとき
• アクセシブルで、キーボード操作が可能なインターフェースを実装するとき
• 読み込み状態、エラー処理、フィードバックのパターンを設計するとき
• オプションページと設定の永続化を作成するとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	コンポーネントの選択	CRITICAL	comp-
2	アクセシビリティとナビゲーション	CRITICAL	access-
3	ポップアップのデザイン	HIGH	popup-
4	サイドパネルの UX	HIGH	panel-
5	コンテンツスクリプト UI	MEDIUM-HIGH	inject-
6	視覚的なフィードバック	MEDIUM	feedback-
7	オプションと設定	MEDIUM	options-
8	アイコンとブランディング	LOW-MEDIUM	brand-

クイックリファレンス

1. コンポーネントの選択（CRITICAL）

• comp-popup-vs-sidepanel - 継続的なタスクにはサイドパネルを選択する
• comp-content-script-ui - ページ内 UI にはコンテンツスクリプトを使用する
• comp-single-purpose - 単一の目的に合わせて設計する
• comp-minimal-permissions - 必要最小限の権限を要求する
• comp-action-tooltip - アクションに説明的なツールチップを設定する

2. アクセシビリティとナビゲーション（CRITICAL）

• access-keyboard-navigation - キーボードでの完全なナビゲーションを可能にする
• access-focus-visible - フォーカスインジケーターを常に表示する
• access-aria-labels - アイコンのみのボタンには ARIA ラベルを使用する
• access-color-contrast - 十分な色のコントラストを確保する
• access-focus-trap - キーボードのフォーカストラップを避ける
• access-semantic-html - セマンティック HTML 要素を使用する

3. ポップアップのデザイン（HIGH）

• popup-size-constraints - ポップアップのサイズ制限内で設計する
• popup-instant-render - ポップアップのコンテンツを即座に描画する
• popup-primary-action - 主なアクションをわかりやすくする
• popup-auto-close - ポップアップの自動終了を適切に処理する
• popup-external-js - JavaScript は外部ファイルに記述する
• popup-dynamic-switch - 状態に応じた UI には動的ポップアップを使用する

4. サイドパネルの UX（HIGH）

• panel-non-distracting - 邪魔にならないサイドパネルを設計する
• panel-tab-vs-window - タブ単位とウィンドウ全体のどちらに適用するか選択する
• panel-responsive-width - パネル幅の変化に対応できるよう設計する
• panel-page-context - パネルのコンテンツをページのコンテキストと同期する
• panel-lazy-sections - パネルのセクションを遅延読み込みする

5. コンテンツスクリプト UI（MEDIUM-HIGH）

• inject-shadow-dom - スタイルを分離するために Shadow DOM を使用する
• inject-z-index - オーバーレイには最大の Z インデックスを使用する
• inject-document-ready - DOM の準備完了後に UI を挿入する
• inject-unique-ids - 競合を防ぐために一意の ID を使用する
• inject-cleanup - 削除時に挿入した要素をクリーンアップする

6. 視覚的なフィードバック（中）

• feedback-loading-states - 非同期処理の読み込み状態を表示する
• feedback-error-messages - 対応可能なエラーメッセージを書く
• feedback-badge-status - ひと目でわかるステータスにバッジを使う
• feedback-success-confirmation - 操作が正常に完了したことを確認する
• feedback-notifications - 通知は必要最小限にする
• feedback-progress-indication - 時間のかかる処理の進捗状況を表示する

7. オプションと設定（中）

• options-embedded-page - シンプルな設定には埋め込みオプションを使う
• options-sync-storage - デバイス間で設定を同期する
• options-auto-save - 変更時に設定を自動保存する
• options-sensible-defaults - 適切なデフォルト設定を用意する

8. アイコンとブランディング（低〜中）

• brand-icon-sizes - 必要なアイコンサイズをすべて用意する
• brand-distinctive-icon - 目を引くツールバーアイコンをデザインする
• brand-badge-text - バッジのテキストを4文字未満にする
• brand-consistent-styling - 一貫したビジュアルスタイルを保つ
• brand-web-store-assets - 高品質なウェブストア素材を作成する

使用方法

詳しい説明とコード例については、各リファレンスファイルをお読みください。

• セクションの定義 - カテゴリー構成と影響度
• ルールのテンプレート - 新しいルールを追加するためのテンプレート

リファレンスファイル

ファイル	説明
references/_sections.md	カテゴリーの定義と順序
assets/templates/_template.md	新しいルール用のテンプレート
metadata.json	バージョンとリファレンス情報