dark-glass-clean-layout

ダークガラスのクリーンなレイアウトスキル

使用する場面

• すりガラスのような高級感のあるシェル、すっきりとした複数列のワークスペース構成、浮遊するデータカード、控えめで奥行きのある雰囲気を備えたダークガラスのレイアウトシステムを作成するときに使用します。

ワークフロー

適用範囲

• 背景の雰囲気、ナビゲーション、外枠、レイアウトの列、ガラスパネル、浮遊するカード、モーションにわたるデザインシステム全体の方針として適用します。
• 落ち着いたガラスのシェルとすっきりした構造のレイアウトで構成された、高級感のあるダークなワークスペースやインテリジェンスコンソールのような印象にしたいインターフェースで使用します。
• 汎用的なパステル調のグラスモーフィズムでも、放射状に広がるSF風の計器パネルでもありません。ダークなすりガラスの奥行きと控えめな階層構造を備えた、クリーンなレイアウトシステムを重視します。

ビジュアルの目標

• ほぼ黒のベースに、柔らかな雰囲気の光や、ぼかした WebGL テクスチャをインターフェースの背後に配してページを構成します。
• 中央揃えの最大幅レイアウトシェルを使い、細い縦の境界線、小さなコーナーマーカー、控えめなフレームを加えて、ページが精密なワークスペース内に収まっているように見せます。
• ダークなすりガラスのシェルで主な階層構造を作ります。サイドバー、上部ナビゲーションのピル、浮遊するデータノード、運用カードはいずれも、ガラスの質感を保ちつつ、抑制された印象にします。
• 白、ジンク、スモークグレー、チャコールを中心としたモノクロームの配色にします。アクセントカラーが必要な場合はデザインから導き出すか、小さな状態インジケーターにのみ使用します。
• 中央のステージには視覚的な落ち着きと余白を保ち、周囲のカードやレールはそれを支えるものとして配置し、雑然とさせないようにします。

実装ガイダンス

• デスクトップでは、左側のナビゲーション、中央のヒーローまたはビジュアライゼーションステージ、右側の運用サイドバーなどを備えた複数列のワークスペースレイアウトを優先し、小さな画面では自然に縦積みになるようにします。
• ダークガラスのシェルの周囲に、1 ピクセルのグラデーションラッパーや淡いハイライトエッジを使い、内側には強い背景ぼかしを加えた、より暗く半透明の塗りを配置します。
• ガラス面は、スモーキーで高級感のある印象にします。不透明度を抑えたダークな塗り、くっきりした上端のハイライト、柔らかな影の減衰、控えめな内側の反射を使います。
• ログ、インテリジェンスメモ、アクションプラン、システムイベント用の補助カードを中央のステージ付近に浮かべます。ただし、数は絞り、間隔には十分な余裕を持たせます。
• モノスペースのマイクロラベル、システム ID、小さなメタデータ、コンパクトな運用見出しを使い、ガラスレイアウトに技術的な信頼感を与えます。
• ボタン、ピル、インタラクティブな行には、すっきりとした丸みのある形状、控えめなホバー時の明るさ、強い色の塗りつぶしではなく、控えめに強調した境界線を使います。
• 背景には、ぼかしたパーティクルフィールド、淡いラインの動き、抽象的な WebGL フォームを取り入れてもかまいませんが、ガラスレイアウトが主役であり続ける程度に抑えます。
• モーションには、浮遊感と高級感を持たせます。マスクを使ったテキスト表示、データカードのゆっくりとしたドリフト、ごく小さな視差、穏やかなぼかしやハイライトの変化が適しています。

推奨パターン

• 細いグラデーションエッジとダークガラスの塗り、強いぼかしを組み合わせた、固定式のピル型上部ナビゲーション。
• すりガラスのカード、ナビゲーショングループ、プロトコルの手順、テレメトリーモジュールを積み重ねた左右のシェル。
• 控えめな見出し、コピーの背後にある柔らかな放射状の光、シンプルでコントラストの高い CTA を備えた中央のヒーローステージ。
• 大画面では、中央の周囲に配置する浮遊情報カード。ダークガラスのラッパーと小さなメタデータフッターを使用します。
• ワークスペースに整列感と建築的な印象を与える、細い外側の縦レールと小さな四角形のコーナーマーク。
• すりガラスのシェルの奥行きと、すっきりとした内側の行、控えめなシステムラベルを組み合わせた、ターミナル風または I/O カード。

調整のポイント

• ガラスの強度：ぼやけたり白っぽくなったりせず、ガラスらしい透明感が伝わるように、ぼかしと不透明度を調整します。
• レイアウトの開放感：列と浮遊するカードの間に十分な余白を保ち、落ち着きと上質さを感じられるデザインにします。
• アクセントの抑制：アクセントカラーは、大きな塗りつぶしではなく、ステータスドット、アクティブなテキスト、小さなインジケーターに限定します。
• 奥行きの演出：レイアウトに求めるシネマティックな雰囲気に応じて、背景のぼかし、パーティクルの輝き、抽象的な WebGL テクスチャを加減します。
• フレームの視認性：ページを整理できる程度に外側のレールとコーナーマーカーを見やすくしつつ、堅苦しい技術的なグリッドにはしません。

避けること

• カラフルなぼかしの上に、明るい半透明のガラスカードを浮かべること。
• すりガラスのような奥行きやレイアウトの優雅さをなくし、インターフェースを単調な黒いボックスに平坦化すること。
• 中央に浮遊するカードを詰め込みすぎて、すっきりしたワークスペース構造を損なうこと。
• モノクロのダークガラスのデザインを圧倒する、強いネオングローや彩度の高いエフェクトを使うこと。
• ガラスをカードだけのスタイルとして扱い、ナビゲーション、サイドバー、補助モジュールまで含むレイアウト全体のデザイン言語として捉えないこと。