dither-laser-dark-mode

ディザ・レーザー・ダークモードスキル

使用する場面

• ほぼ黒のサーフェス、控えめな順序ディザテクスチャ、アクセントカラーの細いレーザーが織りなす、プレミアムなダークデザインシステムを作成します。

ワークフロー

適用範囲

• 背景、サーフェス、パネル、コントロール、余白、境界線、動きにわたるデザインシステム全体の指針として適用します。
• 控えめなレーザーモチーフと繊細なディザテクスチャを用い、インターフェースをプレミアムでテクニカルかつ雰囲気のあるダークな印象にしたい場合に使用します。
• 単なる背景効果ではありません。ダークモードの奥行き、精密なフレーミング、抑制された発光アクセントを軸に、UI 全体に統一感を持たせます。

ビジュアルの目標

• ほぼ黒またはチャコールを基調に、その上にプレミアムなダークサーフェスを重ねてインターフェースを構築します。
• 背景や優先度の低いサーフェスレイヤーに、控えめな順序ディザ、粗いピクセル、または柔らかなデジタルグレインのテクスチャを加え、暗闇に平坦ではなく素材感を持たせます。
• 細いレーザービームや走査線の雰囲気を、焦点となるビジュアルモチーフとして使います。固定の青色ではなく、デザインの主要色または最も強いアクセントカラーで色付けします。
• レーザーはシネマティックで控えめに保ちます。太いネオンバーではなく、細い白熱したコア、柔らかなアクセントのハロー、軽いボリューム感のある霞やブルームを使います。
• 雰囲気のある背景に、シャープなパネル、ダークガラスのカード、落ち着いたストローク、グラデーションの境界線、選択的なグローを組み合わせ、UI を洗練されたコマンドサーフェスのように仕上げます。

実装ガイダンス

• ダークサーフェスには控えめな色調差を付けます。深い黒のベース、少し明るいパネル、目立たない半透明のオーバーレイ、細い白またはアクセント色の境界線を使います。
• ディザやグレインは、背景、大きく空いた領域、二次的な塗りに控えめに適用します。インターフェースを雑然とさせたり、レトロゲーム風にしたりせず、質感と雰囲気を加えます。
• WebGL、canvas、シェーダーレイヤーを使う場合は、UI の背後に固定し、pointer-events: none を設定して、コンテンツをより高いスタッキングコンテキストに配置します。
• レーザーのグロー、煙のような霞、ブルームはアクティブなアクセントカラーを基にします。ただし、明瞭さを保つため、最も明るいレーザーコアは白に近い色にします。
• レーザーを構図の要として使います。中央のライン、ずらしたビーム、角に向けた収束、背景を横切る光などが考えられます。コンテンツを圧倒せず、階層構造を支えるようにします。
• パネル、ダッシュボード、ナビゲーションには、派手なグラスモーフィズムやありきたりなカードではなく、精密な余白、控えめなぼかし、暗めのハイライト、抑えた立体感を使います。

推奨パターン

• 背景ぼかし、細い境界線、控えめなアクセントのアクティブ状態を備えた、浮遊感のあるダークなナビゲーションシェル。
• 柔らかくディザ処理したダーク領域の上に、コーナーマーカー、細いグリッド線、垂直の境界線を重ねた、フレーム付きダッシュボードコンテナー。
• 1 ピクセルのグラデーション境界線、柔らかなシャドウ、限定的なアクセントグローを使った、ダークガラスまたはほぼ不透明なカード。
• ヒーロー領域の背後、中央軸の周囲、または焦点となる領域の近くで収束する、かすかな煙や霞を伴った細いレーザーまたはビームのモチーフ。
• 白またはニュートラルなテキストで読みやすさを保つデータサーフェス。その一方で、ステータスチップ、アクティブなタブ、アイコン、プログレスバー、焦点となるコントロールにアクセントカラーを使います。

調整項目

• ディザの密度：背景を豊かにするのに十分な視認性を保ちながら、コンテンツの背後では目立たなくなる程度に抑えます。
• レーザーの強度：ビームの太さとハローの幅を個別に調整し、ビームを細く保ちながらグローに柔らかな広がりを持たせます。
• アクセントの抑制：ブランドカラーは選択的に使い、システム全体ではニュートラルなダークトーンを主役にします。
• サーフェスのコントラスト：ページ背景、パネル、オーバーレイの差を調整し、濁った印象にせずインターフェースに奥行きを持たせます。
• 雰囲気：霞、ブルーム、霧は画面全体を覆うのではなく、焦点となるレーザー領域の周囲にだけ加えます。

避けるべきこと

• 太いネオンのレーザーバー、過剰なブルーム、可読性を損なう画面全体を覆うフォグ。
• デザインで明らかに別のアクセントカラーが使われているのに、インディゴやシアンを固定で使うこと。
• どこにでも強いディザをかけ、インターフェースを上質ではなく、汚れたレトロ調や低解像度に見せること。
• テクスチャ、奥行き、素材の違いがない、平坦な黒のレイアウト。
• レーザーとディザのビジュアルシステムを無視した、ありきたりな SaaS カードやグラデーション。