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

Manifest V3 に最適化された Chrome Extensions の包括的な UX/UI デザインガイド。8 つのカテゴリーにわたる 42 のルールを含み、影響度により優先順付けされており、extension UI 開発とコードレビューを実施するためのガイドとなります。

適用対象

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

• 新しい Chrome extension ユーザーインターフェースを構築する場合
• popup、side panel、content script UI の間での選択をする場合
• アクセス可能でキーボード操作が可能なインターフェースを実装する場合
• ローディング状態、エラーハンドリング、フィードバックパターンを設計する場合
• オプションページと設定の永続化を作成する場合

ルールカテゴリー (優先度順)

Priority	Category	Impact	Prefix
1	Component Selection	CRITICAL	comp-
2	Accessibility & Navigation	CRITICAL	access-
3	Popup Design	HIGH	popup-
4	Side Panel UX	HIGH	panel-
5	Content Script UI	MEDIUM-HIGH	inject-
6	Visual Feedback	MEDIUM	feedback-
7	Options & Settings	MEDIUM	options-
8	Icons & Branding	LOW-MEDIUM	brand-

クイックリファレンス

1. Component Selection (CRITICAL)

• comp-popup-vs-sidepanel - 永続的なタスクには Side Panel を選択
• comp-content-script-ui - ページ内 UI には Content Scripts を使用
• comp-single-purpose - 単一目的にデザイン
• comp-minimal-permissions - 最小限のパーミッションをリクエスト
• comp-action-tooltip - わかりやすいアクション説明を提供

2. Accessibility & Navigation (CRITICAL)

• access-keyboard-navigation - 完全なキーボードナビゲーションを有効化
• access-focus-visible - 見える フォーカスインジケーターを維持
• access-aria-labels - アイコンのみのボタンに ARIA ラベルを使用
• access-color-contrast - 十分な色対比を確保
• access-focus-trap - キーボードフォーカストラップを回避
• access-semantic-html - セマンティック HTML 要素を使用

3. Popup Design (HIGH)

• popup-size-constraints - popup サイズ制限内でデザイン
• popup-instant-render - popup コンテンツを即座にレンダリング
• popup-primary-action - プライマリアクションを明白に
• popup-auto-close - popup 自動クローズに適切に対応
• popup-external-js - JavaScript を外部ファイルに保持
• popup-dynamic-switch - 状態ベースの UI には動的 popup を使用

4. Side Panel UX (HIGH)

• panel-non-distracting - 邪魔にならない side panel をデザイン
• panel-tab-vs-window - タブ固有 vs ウィンドウ全体 panel を選択
• panel-responsive-width - 可変 panel 幅に対応
• panel-page-context - panel コンテンツをページコンテキストと同期
• panel-lazy-sections - panel セクションを遅延読み込み

5. Content Script UI (MEDIUM-HIGH)

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

6. Visual Feedback (MEDIUM)

• feedback-loading-states - 非同期操作のローディング状態を表示
• feedback-error-messages - 実行可能なエラーメッセージを記述
• feedback-badge-status - ステータス表示に badge を使用
• feedback-success-confirmation - 成功したアクションを確認
• feedback-notifications - 通知は控えめに使用
• feedback-progress-indication - 長時間操作の進行状況を表示

7. Options & Settings (MEDIUM)

• options-embedded-page - シンプルな設定には埋め込み options を使用
• options-sync-storage - デバイス間で設定を同期
• options-auto-save - 変更時に設定を自動保存
• options-sensible-defaults - 妥当なデフォルト設定を提供

8. Icons & Branding (LOW-MEDIUM)

• brand-icon-sizes - 必要なすべてのアイコンサイズを提供
• brand-distinctive-icon - 特徴的なツールバーアイコンをデザイン
• brand-badge-text - badge テキストは 4 文字以内に
• brand-consistent-styling - 一貫したビジュアルスタイルを維持
• brand-web-store-assets - 高品質な Web Store アセットを作成

使用方法

詳細な説明とコード例については、個別のリファレンスファイルを参照してください：

• Section definitions - カテゴリー構造と影響度レベル
• Rule template - 新しいルール追加用のテンプレート

リファレンスファイル

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