blue-laser-clean-glass-layout

ブルーレーザーのクリーングラスレイアウトスキル

使用する場面

• 細いブルーレーザーが漂う雰囲気、上質なフロスト加工のシェル、洗練されたダッシュボード構成を備えた、クリーンなダークグラスのレイアウトシステムを作成するときに使用します。

ワークフロー

適用範囲

• 背景の雰囲気、ナビゲーション、ヒーロー、フローティングカード、ダッシュボードのシェル、テーブル、モーションを含む、デザインシステム全体の方向性として適用します。
• 控えめなレーザービームをクリーンなグラス調レイアウトに取り入れた、上質でダーク、ブルーを基調とする実用的な印象のインターフェースにしたいときに使用します。
• これはレーザー効果だけのものでも、ありきたりなダークグラスモーフィズムでもありません。ビーム、霧、ガラスのシェル、ダッシュボードのフレーミングが、すべて一体感のあるシステムを支えるようにします。

ビジュアルの目標

• ほのかなブルーの色調を帯びたほぼ黒のベースに、インターフェースの背後へ固定した、雰囲気のあるレーザー背景を配置してページを構成します。
• 白く灼けるような芯、柔らかなハロー、軽いボリューメトリックな煙や霧を備えた細いブルーまたはインディゴのレーザービームを使い、映画的でありながら精密な印象にします。
• ダークなフロスト加工のシェル、グラデーションの境界線を持つラッパー、半透明のピル、上質なガラス調カードを使って、レーザーの上に UI を重ねます。
• タイポグラフィは、白い見出しテキスト、彩度を抑えたブルーグレーの補助テキスト、製品の信頼感を高める簡潔で読みやすいラベルで、シャープかつモダンに保ちます。
• 全体として、騒がしい SF ではなく、クリーンで高級感のある雰囲気にします。レーザーは派手な見せ物ではなく、空間に焦点を与えるモチーフとして扱います。

実装ガイダンス

• レーザーと霧には、固定されたフルスクリーンのキャンバスまたは背景レイヤーを使い、前景の UI はすべて、その上に配置する独立したスクロール可能なコンテンツレイヤーに置きます。
• レーザーは細く優雅に保ちます。ビームの太さとグローの幅を分け、線は細いまま、ハローと煙は柔らかく広がるようにします。
• ナビゲーションは、背景ぼかし、細い境界線、落ち着いた白いテキストを備えた、フローティングまたはスティッキーなダークグラスのピルとして作成します。
• 枠で囲まれた中央シェルまたは最大幅のアプリケーションコンテナを使い、左右の境界線、小さなコーナーマーカー、または控えめな縦の境界を加えてページを構成します。
• ダークな半透明の塗りつぶし、1 ピクセルのグラデーション境界線、柔らかなシャドウの減衰、チャート、ステータスチップ、アイコンに使う控えめなブルーのアクセントを備えたグラスカードを取り入れます。
• ダッシュボードのセクションは、洗練されたモジュール式に仕上げます。サイドバー、メトリックカード、イベントストリーム、データテーブル、検索コントロールには、共通のダークグラスの表面表現を使用します。
• アクティブインジケーター、CTA の強調、アイコンのアクセント、レーザーの雰囲気にはブルーを選択的に使い、それ以外の大部分の表面はニュートラルで暗いままにします。
• モーションは落ち着きと上質さを保ちます。マスクを使った見出しの表示、カードのわずかな移動、ビームの柔らかなパルス、ホバー時の穏やかな明るさの変化が適しています。

おすすめのパターン

• 中央のグラスダッシュボードまたはヒーローシェルの背後に、固定されたブルーレーザーと霧を配置します。
• 暗い塗りつぶしにぼかしを加え、全幅の丸みのある形状と控えめな白い境界線を備えた、フローティングピル型ナビゲーション。
• ヒーローテキストの横または上に浮かぶ、グラデーション境界線のメトリックカードとイベントパネル。
• フロスト加工のヘッダーバー、彩度を抑えたタブ、サイドバーモジュール、見やすいデータテーブルを備えた、大型のダッシュボードコンテナ。
• ブルーの CTA ボタンに、控えめなアウトラインボタンまたはグラス調のセカンダリーボタンを組み合わせます。
• 小さなブルーのライブドット、アンダーグローのアクセント、ビームや注目モジュールの近くに広がる柔らかな大気の光。

調整項目

• レーザーの強さ：ハロー、パルス、煙を個別に調整しながら、ビームを細く、読み取りやすく保ちます。
• ブルーの雰囲気：システムに求める高級感と活気のバランスに応じて、インディゴ、コバルト、またはより冷たいエレクトリックブルーに調整します。
• ガラスの奥行き：シェルが濁った印象にならず、上質に見えるよう、ぼかし、不透明度、エッジのハイライトを調整します。
• レイアウトの密度：クリーンな構図が窮屈に感じられる前に、ヒーローの周囲へ配置するフローティングカードとダッシュボードモジュールの数を決めます。
• 雰囲気の量：霧と光の広がりでビームを引き立てますが、ページ全体を霞で覆わないようにします。

避けること

• レイアウトを圧倒する、太いネオンのレーザーバー。
• 意味のあるガラスの奥行きや、雰囲気を演出するビームの流れがない、青いアクセントだけを加えた平坦なダークダッシュボード。
• 暗く高級感のある雰囲気を損なう、パステル調のグラスモーフィズム、鮮やかな光の塊、半透明の白いカード。
• すべてのコンポーネントを、グロー、ぼかし、ボーダー効果で過剰に装飾すること。
• レーザーや霧によって、手前のコンテンツの読みやすさを損なうこと。