選択したオブジェクト・要素・レイヤーのプロパティを表示・編集するサイドパネル。Figma（デザインプロパティ）・VS Code（変数ウォッチ）・DAW（トラックプロパティ）・ゲームエンジン（コンポーネントインスペクター） など、プロフェッショナルツールに広く使われる。選択状態に連動してパネルの内容が動的に切り替わり、複数のプロパティグループをアコーディオンまたはセクションで整理する。
この記事を読むと、プロパティの階層的なグループ化・選択状態連動・ラベルと入力欄のアライメント・数値スクラブ入力・リアルタイムプレビュー連動・空選択状態の設計が自分でできるようになります。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
選択されたオブジェクト・要素のプロパティを表示・編集するサイドパネル。選択状態に連動してコンテンツが動的に変化し、プロパティをグループ（セクション）に分けて整理する。
Inspector Panel の構成要素：
| 要素 | 説明 |
|---|---|
| パネルヘッダー | 選択中のオブジェクト名・タイプ表示 |
| プロパティセクション | アコーディオンで折り畳めるグループ |
| ラベル＋入力フィールド | ２列レイアウトで整列 |
| 空選択状態 | 何も選択されていない時のプレースホルダー |
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- デザインツール・グラフィックエディター：Figma・Sketch・Illustrator
- ゲームエンジン・3Dツール：Unity・Blender のコンポーネントインスペクター
- コード・デバッグツール：VS Code のデバッグ変数ウォッチ・ブラウザDevTools
- ダッシュボードビルダー：グラフやウィジェットのプロパティ編集
3.2 When NOT to use
- 一般ユーザー向けの設定画面：Inspector Panel はプロ向けUIで、一般ユーザーには複雑に見える。通常の設定フォームの方が適切
- 単一プロパティの編集：1〜2項目の編集なら Inspector Panel より Popover やインラインフォームが適切
4. 設計判断の核（Decision Principles）
Inspector Panelの核は「選択状態との連動」——選択オブジェクトが変わると即座にパネルの内容が切り替わり、編集した値がリアルタイムでプレビューに反映される。この双方向のフィードバックループが Inspector Panel の本質的な価値。
判断の優先順位：① 選択状態の連動 → ② プロパティのグループ化 → ③ ラベル幅の統一 → ④ キーボードでの数値操作
- 選択オブジェクトが変わったらパネルを即座に更新する：選択変更時に値を即座に反映し、アニメーションや遅延なく切り替える。切り替えアニメーションを入れるとプロ向けツールでは逆に邪魔になる
- プロパティは意味的なグループに分けてセクション化する：「位置・サイズ（Transform）」「塗り（Fill）」「ボーダー」「シャドウ」「テキスト」などのカテゴリに分ける。全プロパティをフラットに並べると視認性が下がる
- ラベル列幅を統一してフィールドを整列させる：ラベルと入力フィールドを
gridまたはflexで整列し、ラベル幅（例：64px）を全セクションで統一する。フィールドの開始位置が揃うことで視線の移動が減り、高速なプロパティ読み取りが可能になる - 数値フィールドは上下キーでインクリメント/デクリメントできるようにする：
<input type="number">はデフォルトで矢印キーで ±1 操作できる。Shiftキーを組み合わせて ±10、Altキーで ±0.1 のような複数刻みをサポートするとパワーユーザーの操作効率が上がる
5. 状態設計（States）
| 状態 | パネル表示 |
|---|---|
| 未選択 | 空状態（「オブジェクトを選択してください」） |
| 単一選択 | そのオブジェクトのプロパティを表示・編集 |
| 複数選択 | 共通プロパティのみ表示（異なる値は – や Mixed と表示） |
| セクション折り畳み | アコーディオンで非表示 |
| フィールドフォーカス | フォーカスリング表示 |
| 変更あり（未保存） | フィールドに変更インジケーター（オプション） |
6. バリエーション設計（Variants）
| バリアント | 配置 | 使用例 |
|---|---|---|
| 右サイドパネル | 画面右端 | Figma・Unity（最も一般的） |
| 左サイドパネル | 画面左端 | 一部のDAWツール |
| フローティングパネル | 画面上を自由移動 | Blender |
| ボトムバー型 | 画面下部 | 狭いキャンバスUI |
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 全プロパティがフラットに並ぶ：30以上のプロパティが1列に羅列され、目的のプロパティを探すのに時間がかかる
- ラベル幅がバラバラ：各プロパティのラベル幅が異なり、フィールドの開始位置が揃わず視線移動が増える
- 選択変更時に前のオブジェクトの値が残る：選択を変更してもフィールドの値がリセットされず、古い値が表示されたままになる
7.1 Bad（典型3つ）
- プロパティを意味的なグループに分けずフラットにレンダリングし、どのプロパティが何に関するかが分かりにくい
- ラベルを
<span>で自然幅にし、入力フィールドの位置がバラバラ - 選択オブジェクト変更時に
useEffectでプロパティをリセットせず、前の値が残る
7.2 Good（対になる3つ）
- プロパティを「Transform・Fill・Border・Shadow」などのセクションに分け、アコーディオンで折り畳める構造にする
- ラベルを
width: 64px; shrink-0で固定幅にし、全セクションで統一する useEffect(() => { setProps(getDefaultProps(selected)); }, [selected])で選択変更時にプロパティをリセット・更新する
7.3 How to fix（手順）
- プロパティをカテゴリオブジェクトに分類し、セクションコンポーネントでループレンダリングする
- ラベルの
widthを CSS で固定する - 選択state変更を
useEffectで監視してプロパティを更新する - 複数選択時は値が異なるフィールドに
"Mixed"プレースホルダーを表示する
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
Screen Reader
<aside aria-label="インスペクターパネル">
<div aria-live="polite" aria-atomic="true">
<!-- 選択オブジェクト名：選択変更時に読み上げ -->
<h2>矩形</h2>
</div>
<!-- セクション折り畳みボタン -->
<button
aria-expanded="true"
aria-controls="section-transform"
>
トランスフォーム
</button>
<div id="section-transform" role="group" aria-label="トランスフォームプロパティ">
<label for="prop-x">X</label>
<input id="prop-x" type="number" value="120" />
</div>
</aside>
10. 実装メモ（Implementation Notes）
- 数値スクラブ（ドラッグで数値変更）：ラベル上でマウスドラッグすることで数値を変更できる「スクラブ入力」はFigmaなどのプロツールでは一般的。
onMouseDownで開始座標を記録し、onMouseMoveでdeltaXを数値に加算するポインターキャプチャ実装が必要 - パフォーマンス：プロパティ変更のたびにキャンバス全体を再レンダリングするとパフォーマンスが下がる。
useCallback+React.memoでプロパティパネルとキャンバスを分離し、変更があったプロパティのみ更新する - キーボードショートカット：プロツールのパワーユーザーは特定プロパティフィールドにキーボードショートカットでジャンプすることを期待する。
useHotkeysライブラリが便利
11. 関連リンク
- 関連するUIデザイン原則: 情報密度 (Information Density), フィードバック (Feedback)
- 用語集（定義）: 情報アーキテクチャ
- 関連するUIコンポーネント（横）: Accordion（アコーディオン）, Resizable（リサイザブル）, Floating Panel（フローティングパネル）, Slider（スライダー）, Right Rail（ライトレール）
12. まとめ
Inspector Panelの設計で最重要なのは「選択状態との双方向連動」と「プロパティのグループ化」です。プロパティをフラットに並べるだけでは、プロ向けツールで必要な高速なプロパティ参照・編集が困難になります。ラベル幅の統一・セクションのアコーディオン折り畳み・空選択状態の実装をセットで設計してください。数値スクラブはプロツールの「触り心地」に大きく影響するため、余裕があれば実装を推奨します。
