デスクトップ向けの制作系アプリケーションでよく見られる「インスペクタを備えたUI」の設計について、その考え方を深掘りしてみます。具体的な話をする前にまず「インスペクタ」とは何かを明らかにするため、私は次のように定義してみます。

インスペクタの定義と例

インスペクタ / Inspector
ある選択された状態にあるオブジェクトの詳細な情報を提示したり、オブジェクトの属性を編集するための手段を提供する機能。
フローティングウインドウやサイドパネル（スプリットビュー）の形式で提供されることが多く、基本的にはモードレスに振る舞う。選択されている対象オブジェクトが切り替わることで、合わせてインスペクタの内容も切り替わる。

これは私の経験則からの考察をまとめた内容であるため、もしも歴史的あるいは学術的な定義があるならばそれとは合致しない可能性があることを補足いたします。

インスペクタを備えたアプリケーションのうち、ウインドウ形式を採用している例には次のものが挙げられます。

ウインドウ形式の例：Keynote

Keynoteの一部の操作パネルはフローティングウインドウ形式のインスペクタとして提供されています。OS標準のカラーパネルのほか、配置に関するパネル、アニメーションのビルド順序を操作するパネルなどが挙げられます。対象オブジェクトが複数であったとしても同じインスペクタウインドウを再利用します。

ウインドウ形式の例：Safari

SafariのWebインスペクタはwebコンテンツの要素に対しての属性情報の表示や編集機能を提供します。このインスペクタは特定のWebView（タブ）と対になる形で存在していて、タブを閉じるのと同時にインスペクタウインドウも消滅します。一般的なデスクトップアプリケーションとは少し異なる振る舞いをしますね。

なお、SafariのWebインスペクタはウインドウ形式とサイドパネル（スプリットビュー）形式を切り替えることができます。

ウインドウ形式の例：Preview

画像ビューアであるPreviewのインスペクタはフローティングウインドウ形式で表示されます。ドキュメントウインドウが複数開く場合でも、同じインスペクタウインドウを再利用します。

ウインドウ形式の例：Finder

Finderの情報ウインドウはオプションでインスペクタとして振る舞うことができます。この状態では情報ウインドウがフローティングパネル化し、選択されたファイルやフォルダに関する情報を都度インスペクタに反映します。選択が変わるとインスペクタの内容もきちんとその対象物をとらえます。

そしてサイドパネル形式インスペクタを採用しているアプリケーションには次のものが挙げられます。

サイドパネル形式の例：Keynote

Keynoteは各ドキュメントウインドウの右側にインスペクタパネルを備えています。カンバスで選択したオブジェクトの属性や具体的な操作などをまとめたパネルを収めています。選択した対象オブジェクトによってインスペクタパネルの内容が切り替わります。

サイドパネル形式の例：Sketch

SketchはKeynote同様にドキュメントウインドウの右側にインスペクタパネルを備えています。制作系アプリケーションのUIはほぼこのレイアウトパターンに収まっていくのだろうと考えられます。
SketchはKeynoteをはじめとしたiWorkを参考にそのUIが設計されているのではないかと私は考えています。

サイドパネル形式の例：Finder

Finderのプレビュー機能を有効にするとブラウザーウインドウの右側にプレビューパネルが表示されます。選択したファイルやフォルダに関する情報をここに表示していて、いくつかのアクションも実行可能になっています。
名前としてはプレビューと名乗ってはいるものの、UIの振る舞い方が一般的なインスペクタと同様であるため、インスペクタの例として挙げてみました。

サイドパネル形式の例：Xcode

XcodeのUIはKeynoteなどと同様にマルチペイン形式のレイアウトであり、右側にインスペクタパネルを備えています。Xcodeの場合は扱うオブジェクトが多岐にわたりドメインも単一とは限らないため、インスペクタも複数種類あり、それらはタブによって区切られています。
それでもやはりXcodeのUIはとても複雑な構造なので、抽象化できる部分はまとめてしまう、必要なインスペクタを適宜表示する方針が取られているように見えます。例えば中央ペインがInterface Builderの場合はUI設計のためのインスペクタがタブとして用意されますが、中央ペインがコードエディタの場合はインスペクタ（タブ）の数が少なくなります。

Interface Builderのインスペクタは多くのタブを備えています。

インスペクタの設計原則

これらの例のほか様々なアプリケーションのパターンを観察すると、その傾向から、インスペクタの設計原則としては次のようにまとめられるのではないかと考えます。

・対象オブジェクトの選択が切り替わることで、インスペクタの表示内容も切り替わる
・インスペクタには、対象オブジェクトの属性や与える作用の手段を提示
・インスペクタの操作はモードレス
・インスペクタと対象オブジェクトは、一対多の関係性
・インスペクタパネルは、ドキュメントウインドウのサイドパネルまたはモードレスなフローティングウインドウ形式で表示
・対象オブジェクトの性質次第では、インスペクションの方法を抽象化するか、多数のインスペクタを区切って表示

オブジェクトの選択状態に合わせて属性情報や作用の手段を提示

対象オブジェクトをクリックするなどによって選択状態を明らかにするか、もしもビューそのものがインスペクションの対象であればそれ自体が表示された状態で、インスペクタの内容が切り替わります。選択状態にある対象オブジェクトが持つ属性情報や、オブジェクトに与える作用の実行手段—編集などの具体的な操作—を提示します。ユーザーはインスペクタの操作パネルを通じてオブジェクトの属性を編集したりすることができます。

Keynoteのサイドパネルでは、カンバスで選択したオブジェクトの持つ属性を表示しつつ、編集することができます。

ところで、選択状態によってインスペクタが変化するという振る舞い方ですが、これはCocoa的にみるとFirst Responderの変化に合わせてインスペクタが切り替わるのだと考えられそうです。macOSのGUIはフォーカスを起点としてさまざまなイベントを伝達する処理を行っていますが、インスペクタに関する処理もResponder Chainの枠組みに組み込まれるのではないだろうか、ということですね。

モードレス

インスペクタは操作の範囲を制限しません。ユーザーはいつでも選択対象を自由に変更することができ、いつでも編集することができ、いつでもインスペクタを隠すことができます。インスペクタがまずあって対象オブジェクトがあるのではなく、対象オブジェクトの詳細情報を提示する手段としてインスペクタが存在しています。状態はいつでも切り替えられることが重要です。

Keynoteなどの「イメージ調整」パネルは編集モードを発生させず、操作結果は即座に反映され、モードレスに振る舞います。画像オブジェクトの選択を外せば瞬時に編集を終えられます。

一対多の関係性

インスペクタの数を1とすると、対象オブジェクトの数は複数となります。一つのインスペクタで複数のオブジェクトを対象にできるという意味になります。要するに、インスペクタ自体はある一定範囲において同一のインスタンスであり続けます。

一つのインスペクタは同時に複数のオブジェクトを相手にするので、仮に選択されたオブジェクトが同一の属性を持つならば、それに対する操作は一度に行われるべきです。例えば〈ファイル〉や〈フォルダ〉は本来異なる性質のものですがいずれも「タグ」という共通のプロパティを持つのだとすれば、ファイルとフォルダを同時に選択した状態でもタグを一度に変更・反映することができます。

Finderのインスペクタでは複数のファイル、フォルダ、ディスク等を同時に選択した状態でタグを編集することができます。複数のアイテムに対して一度に同じ操作をする際に有効な手段です。

表示形式

インスペクタの表示形式は一般に次の2種類です：

・ドキュメントウインドウのサイドパネル
・モードレスなフローティングウインドウ

サイドパネル形式の場合、インスペクションの対象はインスペクタが属するドキュメントウインドウの内側に限られます。要するに、サイドパネルよりも左側にあるペインの中に表示されるオブジェクトが対象となるわけです。仮にシングルウインドウ・アプリケーションだとしてもこのレイアウト構造は成り立ちます。
このパターンでは基本的に「ウインドウを横方向に分割した際の、もっとも右側のペイン」がインスペクタとしての役割を与えられます。

フローティングウインドウ形式の場合、インスペクションの対象はドキュメントウインドウの内側に限定しません。特にドキュメントベースド・アプリケーション（複数のドキュメントを複数のウインドウで扱う形式のアプリケーション）では、有効にはたらく場合があります。前述のKeynoteの例にあるような、アニメーションの操作パネルやカラーパネルなどは特定のドキュメントに依存しないインスペクタの性質を持っています。PreviewやQuickTime Playerのようなビューア系アプリケーションでもフローティングウインドウ形式のインスペクタが実装されています。

昨今の制作系アプリケーションUIの傾向からすると、ドキュメントベースド・アプリケーションの場合でもサイドパネル形式のインスペクタを採用している事例が多々あります。Keynoteのようにどちらの形式も備えている場合もありますが、パネルが独立して浮遊しているよりは、ドキュメントウインドウと結合していた方がウインドウを管理しやすいということなのかもしれません。

インスペクタの表示形式を判断する基準

アプリケーションの性質や用途が次のような場合は、サイドパネル形式を採用することを検討します。

サイドパネル形式インスペクタの採用を検討：
・制作系や情報管理系のアプリケーションである
・広い作業領域のウインドウが必要で、フルスクリーンになりがちである
・作業領域がスプリットビューで区切られている
・対象オブジェクトの種類が多岐にわたり、複雑である
・対象オブジェクトのドメインがドキュメント内に閉じている
・UIが複雑である

Keynote、Xcode、Sketchはサイドパネル形式インスペクタを採用しています。

一方で次のような場合は、フローティングウインドウ形式を採用することを検討します。

フローティングウインドウ形式インスペクタの採用を検討：
・ビューア系アプリケーションである
・ドキュメントウインドウを複数同時に並べて表示する用途が考えられる
・ウインドウをフルスクリーンにする機会が少ない
・作業領域がデスクトップの延長にある
・対象オブジェクトが単一である
・対象オブジェクトのドメインがドキュメントの範囲を超える
・インスペクタの使用は一時的である
・UIがシンプルである

Preview、QuickTime Player、Finderはフローティングウインドウ形式インスペクタを採用しています。

インスペクタと対象オブジェクトの関係性の考察

対象オブジェクトの種類が多岐にわたる場合、その数だけインスペクタの種類も必要になる気がします。そうなるとインスペクタのペインの中でさらにタブで区切ったりセクションで区切るなりして、インスペクタを拡張していくことを検討する必要があります。それと同時に、似たような性質のオブジェクトに関しては別のインスペクタで扱うのではなく、同じインスペクタで扱うようにして統合していくことも検討すると良いでしょう。
ここで、オブジェクト指向の考え方を導入して対象オブジェクトの性質を抽象化していくと、この設計がうまくはまるのではないかと考えます。

一般によく知られるであろうオブジェクト指向の考え方に「継承」という概念があります。似たような性質を持つオブジェクト同士は同じ親から派生した親族類であるという関係性を設計に当てはめるものです。
例えば〈クレジットカード〉〈会員カード〉〈ポイントカード〉はそれぞれ別の性質を持っていますが、継承を導入するとこれらの「親」は〈カード〉という抽象概念にまとめられそうです。この抽象単位で物事を考えれば、具体はどうであれ《カードを持てる》《カードの券面を読める》《カードを読み取り機にスライドさせられる》《カードを財布のカードポケットに仕舞える》といった性質はいずれにも共通しますから、同質のカードオブジェクトで定義することが検討できます。

インスペクタでは対象オブジェクトを抽象単位で捉えるような設計にしておけば、フォルダ、設定ファイル、テキストファイル、画像ファイルなど、本来はそれぞれ個別の具体として捉えられるオブジェクト群を同質的に扱うことが検討できます。

XcodeのFile Inspectorは、ファイル的なオブジェクトであれば形式がどうであれ全てインスペクションの対象となります。

・・・

とりあえず一旦以上でインスペクタの設計観点についてのまとめとしたいと思います。具体的な実装方法については今回は言及しませんが、デザインの観点がわかればコードでの実装もそう難しくはないと思います。