split-layout-technical

スプリットレイアウトのテクニカルスキル

使用する場面

• 2つのパネル、細いフレーム線、モノスペースのメタデータ、控えめなエディトリアルタイポグラフィ、高級感のあるインセットサーフェスを備えた、テクニカルな分割画面のデザインシステムを作成する場合。

ワークフロー

範囲

• インターフェースを明確な2つのパネルまたは半分に分ける場合、ページ全体のレイアウトとデザインシステムの方針として適用します。
• 規律ある分割画面構成が効果的な製品ページ、ショーケース、ポートフォリオ、エディトリアルとテクノロジーを融合したレイアウト、コンセプトプレゼンテーションに使用します。
• これはまずレイアウトシステムです。縦の区切り線を追加するだけでなく、フレーミング、間隔、タイポグラフィ、メタデータの扱い、パネルの挙動を制御します。

ビジュアルの目標

• ページの中心に明確なスプリットレイアウトを構成します。通常、デスクトップでは同じ幅か、ほぼ同じ幅の2つの縦長パネルを並べ、それぞれに異なる役割を持たせます。
• 一方はヒーローまたは没入感のあるフォーカルパネルとして機能させ、もう一方では説明、仕様、メタデータ、補足コンテンツ、ナビゲーションを扱います。
• 細いフレーム線、インセット境界線、小さなコーナーマーカー、精密な間隔を使い、各パネルをテクニカルな表示面のように見せます。
• 控えめなエディトリアルタイポグラフィとモノスペースのユーティリティラベルを組み合わせ、知的で建築的、かつ制御された印象に仕上げます。
• ニュートラルなサーフェスと、デザインに合わせて選んだ1色のアクセントカラーを使い、パレットを抑制します。固定の色相をハードコードしないでください。

実装ガイダンス

• デスクトップでは flex-row、分割カラム、または明確な2パネルグリッドを使い、小さい画面では各ゾーンが分かれている印象を保ちながら、パネルを縦に積み重ねます。
• 各パネルに独自の内部フレーミングを設けます。インセットの縦罫線、端からのオフセット、コーナーの四角形、細い境界線、または計測されたパディングで、パネルを囲むシェルを作ります。
• 上部のレール、メタデータストリップ、ラベル、座標、システムマーカー、仕様、ステータス文には、モノスペースまたはユーティリティテキストを使います。
• メイン見出しは派手にせず、すっきりと自信のある印象にします。トラッキングを調整し、階層を抑制し、余裕のある間隔を設けて支えます。
• 少なくとも一方のパネル内に、枠線付きメディアフレーム、キャンバス領域、ビジュアライゼーション領域、画像ウィンドウなど、高級感のある埋め込みサーフェスを1つ設けます。
• 一方のパネルは情報量を多くし、もう一方は視覚的、空間的、または雰囲気を重視したものにして、有用なコントラストを生み出します。

推奨パターン

• 左右分割のヒーロー：片側に没入感のあるアートワークやメディア、もう片側に説明コンテンツと構造化された詳細を配置します。
• テクニカルレール：モノスペースで、細い上部ラベル、フッターメタデータ、座標、バージョンマーカー、タイムスタンプ、発行元風のマイクロコピーを配置します。
• 仕様ブロック：コンパクトな2列の情報、細い区切り線、行ごとに分けた項目、控えめな表形式を使います。
• フレーム付きサーフェス：グラデーションボーダーのラッパー、インセットシャドウ、切り抜かれたメディアウィンドウ、または落ち着いた外側のシェル内に配置したダークなテクニカルキャンバスを使います。
• パネルの非対称性：全体の分割バランスは保ちつつ、各半分のコンテンツ密度や縦方向のリズムには変化をつけます。

調整項目

• 分割比率：デフォルトは50/50とし、一方をより目立たせる必要があれば少し変更します。
• フレーム密度：システムをどれほどテクニカルに見せるかに応じて、インセット線、コーナーマーカー、区切り線の数を増減します。
• タイポグラフィの雰囲気：大きなセリフ風のディスプレイ表現を使ってよりエディトリアルにするか、すっきりしたサンセリフ体とモノスペースの強調でより製品技術的にするかを調整します。
• サーフェスの奥行き：境界線のグラデーション、インセットシャドウの強さ、パネル内部のコントラストを調整し、埋め込みサーフェスに重厚すぎない高級感を持たせます。
• アクセントの抑制：アクセントカラーは、アクティブなディテール、システムの手がかり、フォーカルコンテンツに使い、全体を覆う色の演出には使いません。

避けること

• 構造的な枠組みや技術的な詳細を欠いた、汎用的な2カラムのマーケティングレイアウト。
• 両方のパネルに同じように要素を詰め込み、分割の階層性や目的が失われること。
• 落ち着いた技術的なトーンを損なう、明るく多彩な色使い。
• 精緻なアーキテクチャレイアウトと相反する、丸みを帯びた遊び心のある UI パターン。
• 分割を単なる装飾として扱い、左右それぞれに異なる機能的な役割を持たせないこと。