dark-blue-contrasting-clean

ダークブルーの高コントラストなクリーンスタイル

使用する場面

• 強いコントラスト、コバルトのグラデーションを使った機能ブロック、シャープなフレーム構造、控えめな高級感のあるグローを備えた、ダークブルーのクリーンなデザインシステムを作成するときに使用します。

ワークフロー

適用範囲

• ページ背景、フレームのレール、ヒーローまたは CTA の帯、カード、リンクグループ、ナビゲーション、モーションまで、デザインシステム全体の方針として適用します。
• 深いネイビーの面と明るいコバルトの注目領域の間に強いコントラストを持たせ、インターフェースを上質で、ダークかつシャープなブルー主体の印象にしたいときに使用します。
• 開放的なクラウドブルーのシステムでも、派手なネオン系 SF でもありません。クリーンで建築的な印象を保ち、高いコントラストを実現します。

ビジュアルの目標

• ほぼ黒に近いネイビーをベースに、単調な純黒ではなく、色調にさりげない変化を持たせたダークブルーブラックの背景を使ってページを構成します。
• ヒーローバナー、CTA の帯、注目カード、製品セクションなど、コントラストを生み出す要素として、目立つコバルトブルーまたはロイヤルブルーのブロックを 1 つ以上取り入れます。
• ダークな配色の上に白い文字と淡いブルーの補助テキストを配置し、シャープで読みやすく、上質なコントラストにします。
• 細い外側のレール、コンテナの左右の境界線、小さなコーナースクエア、控えめなフレームのディテールを加え、統制の取れた設計的なレイアウトにします。
• ブルーのグローは柔らかく、範囲を絞って使います。背景の光の広がり、ボタンの強調、小さなライブインジケーターなどに使い、ページ全体を覆わないようにします。

実装ガイダンス

• 縦の境界線と控えめなコーナーマーカーで構成を支える、フレーム付きの最大幅シェルまたは内側コンテナを優先します。
• プレミアム感のあるブルーの機能ブロックやダークカードにはボーダーグラデーションのラッパーを使い、その内側にすっきりした塗りを配置して、エッジをシャープに保ちます。
• インパクトの強いコントラストブロック、控えめなインデックスやナビゲーション領域、そして抑制の効いた法務情報またはフッター領域の順に、すっきりと積み重ねてレイアウトを構成します。
• ボタンと CTA カードは、ダークな半透明の塗り、ブルーがかった境界線、淡いブルーのテキスト、少し明るくなるホバー状態を使い、しっかりとして上質な印象にします。
• タイポグラフィは細身で洗練された印象を保ちます。サンセリフ体の細字から標準のウェイト、ゆったりとした字間、セクション番号やメタデータを示す小さな大文字のユーティリティ行を使います。
• 抽象的なブルーの光、ぼかした大きなグロー、円形の軌跡、柔らかなオーバーレイを控えめに使い、クリーンな構造を損なわずに雰囲気を加えます。
• モーションは落ち着きと上質さを保ちます。マスクを使った単語の表示、セクションのフェードアップ、アイコンの控えめなドリフト、穏やかなホバー移動が適しています。

推奨パターン

• ダークなフレーム付きコンテナの中に、大きなコバルトグラデーションのバナーまたは CTA ブロックを配置し、白い見出しと淡いブルーの補助テキストを添えます。
• メインコンテンツの範囲を示す左右の境界線と小さなコーナースクエアを備えた、ダークネイビーのページシェル。
• 白い見出し、彩度を抑えたグレーブルーのリンク、小さな数字のユーティリティラベルを使った、すっきりとした複数列のリンクまたは情報インデックス。
• ブルーから透明へ変化するグラデーションのラッパーとダークな内側パネルで作る、上質な問い合わせカードまたはアクションカード。
• 選択的なサインとして鮮やかなブルーを使う、小さなライブドット、セクションカウンター、グローマーカー。
• 細い白のアルファルールと最小限のテクニカルアイコンで区切った、フッターまたはページ下部の法務情報エリア。

調整項目

• ブルーの強さ：デザインシステムに求める大胆さに応じて、鮮やかなロイヤルブルーと暗めのスチールブルーの間で調整します。
• コントラストの強さ：ダークなベースに対してテキスト、区切り線、主要ブロックをシャープに保ちつつ、過度な露出は避けます。
• グローの量：ぼかしや光の広がりは控えめに使い、柔らかく霞んだ印象にせず、ページに雰囲気を与えます。
• フレームの密度：レール、コーナースクエア、区切り線の数を調整し、レイアウトの構造の強さを変えます。
• バナーの存在感：ページのニーズに応じて、ブルーの機能ブロックをヒーローの中心要素にするか、二次的なコンバージョン領域にします。

避けること

• 淡いスカイブルーや、曇り空のような製品ページとして扱うこと。
• コントラストと洗練さを損なう、画面全体を覆う鮮やかなブルーの塗りつぶし。
• 意味のある枠組みやコントラストのあるブロックがなく、青いテキストだけを配した平坦なダークレイアウト。
• すべてのカードをグロー、グラデーション、ガラス効果で過剰に装飾すること。
• すっきりとした建築的なトーンを損なう、重厚なエンタープライズ向けダッシュボードのような煩雑さ。