使用例	概要	推奨レイアウト
詳細コンテンツ	選択したオブジェクトの詳細情報を表示	オーバーレイ / モーダル
プロパティ・設定	選択したオブジェクトのプロパティや設定を編集する	スプリット / オーバーレイ / フローティング
インスペクタ	メタデータの表示	スプリット / フローティング
アクティビティフィード	メインコンテンツに対するアクティビティ（アップデート・通知など）を表示	スプリット / フローティング
チャット・メッセージ	メインコンテンツに対するコミュニケーションログを表示	スプリット / フローティング
ヘルプ・ドキュメント	メインコンテンツに関連するヘルプやドキュメントを表示	スプリット / モーダル / フローティング
プレビュー	メインコンテンツの編集プレビューを表示	スプリット
ツールパネル	メインコンテンツに対する操作パネルを表示	フローティング

サイドパネルは、提示する情報の性質上、画面幅の50%以下に収まるように留意してください。

ただし、詳細コンテンツを表示する場合はこの限りではありません。

LTR言語を主体とする場合は右側に、RTL言語を主体とする場合は左側に配置されます。

レイアウトと用途

メインコンテンツをレスポンシブで可変表示し、サイドパネルの領域を確保するパターンです。

特徴	メインコンテンツとサイドパネルの内容を両立させて表示するため、情報を並行して参照することができる
利用パターン	メインコンテンツで選択されたコンテンツの詳細情報や、関連する副次情報を表示する際に使用
使用上の注意	コンテンツエリアと関連性が低い情報は配置しないこと。また、詳細情報など、ページ内でメインとなりうる情報の表示には適さない

具体的な用途例
プロパティ・設定 / インスペクタ / アクティビティフィード / チャット・メッセージ / ヘルプ・ドキュメント / プレビュー表示など

メインコンテンツの上から、モードレスでパネルを表示します。

特徴	メインコンテンツの操作を許容しつつ、パネル内のコンテンツにユーザーの意識を集中させることができる。この場合、メインコンテンツエリアのオブジェクト選択で、パネル内の情報を切り替えることを想定する
利用シーン	個々のアイテムの詳細情報を表示/追加/編集/削除するために使用
使用上の注意	メインコンテンツは、横スクロールで全ての内容を表示できるようにすること

具体的な用途例
詳細コンテンツの表示 / 選択オブジェクトの設定・編集（軽微なもの）など

メインコンテンツにオーバーレイし、モーダル状態で表示するパターンです。

特徴	メインコンテンツを参照せず、パネル内のコンテンツにのみユーザーの意識を集中させる
利用シーン	メインコンテンツの内容確認が不要な際に使用
使用上の注意	編集や新規追加などのデータ変更を行う場合は、サブミットを配置すること

具体的な用途例
詳細コンテンツの表示 / 選択オブジェクトの設定・編集（軽微なもの）など

メインコンテンツの上に被せて、常時表示するパターンです。

特徴	メインコンテンツは表示領域を維持し、操作もブロックされない
利用シーン	メインコンテンツと並行して、補助的または補完的な情報やツールを提供したい場合に使用
使用上の注意	フローティングしているパネルは、表示・非表示（または最小表示）を切り替え可能な状態にすること

具体的な用途例
プロパティ・設定 / インスペクタ / アクティビティフィード / チャット・メッセージ / ヘルプ・ドキュメント / ツールパネルなど