atmosphere-background

大気感のある背景スキル

使用する場面

• ゆっくり漂う縦方向の光のひだ、スクリーン合成のグロー、隅や下端に集中する光のにじみを備えた、暗く大気感のある背景を作成する場合に使用します。

ワークフロー

範囲

• これは没入感のある背景レイヤーにのみ適用し、ページ全体のレイアウト、タイポグラフィ、または無関係な WebGL／パーティクルシステムには適用しないでください。
• 幾何学的なグリッド、ブロブ、文字どおりのイラストではなく、流れるような光のカーテンやひだを使った、ムードのある大気感のある背景が必要なデザインに使用します。

ビジュアルの目標

• 明るく照らされた布、霧の層、光のカーテンのように、画面全体を漂う柔らかな縦方向の光のひだを備えた、深みのあるほぼ黒の背景を作成します。
• 複数の縦方向の帯を重ねてグローを作り、背景が平坦ではなく、レイヤーと空間を感じさせるようにします。
• 明るさは特定の領域、特に右下や下端に強く集め、均一な明るさではなく、映画のような焦点となる光のにじみを作ります。
• 色は控えめにします。ベースはダークネイビーまたはチャコールとし、デザインのプライマリカラーまたは最も強いアクセントカラーからグローの色を決めます。明確なブランドカラーがない場合は、寒色系のシアンブルーを使った雰囲気が適しています。

実装ガイダンス

• 動きが必要な場合、この効果には静的な CSS グラデーションではなく、canvas またはシェーダーによる描画を優先します。
• 背の高い複数の帯やひだを重ね、ゆっくりとしたサイン波状のドリフトを加えて、硬い柱ではなく、動きのある大気感のある光に見えるようにします。
• スクリーン合成または加算合成を使い、ひだが交差する部分が自然に明るくなるようにします。
• それぞれのひだに縦方向のグラデーションを適用し、上端ではフェードさせ、下端または焦点となる隅に向かって強めます。
• 焦点となる端や隅の近くに、控えめな放射状のグローを重ねて、奥行きと主要な発光領域を強調します。
• 動きはゆっくりと瞑想的なものにします。穏やかなドリフトとわずかな強度の変化にとどめ、ノイズの多いちらつきや急速な脈動は避けます。

調整項目

• ひだの数：大気感の密度に応じて、縦方向のひだの数を増減します。
• ドリフト：動きを穏やかに保つため、横方向の揺れの振幅と速度を調整します。
• 明るさの焦点：画面全体に均等に広げるのではなく、隅、端、または下部の領域に最も強いグローを配置します。
• 色：暗く高級感のあるベースを保ちながら、ひだを現在のデザインのアクセントカラーで色付けします。
• 柔らかさ：重なりの幅、グラデーションの減衰、グローの強さを調整し、背景に発光感を与えながらも白っぽくならないようにします。

避けること

• レイヤー状のひだの構造がない、平坦な複数色のグラデーション。
• 前景のコンテンツと競合する、派手な虹色の色遷移や画面全体を覆う明るいグロー。
• デザインが明らかに別のプライマリカラーを使っている場合に、シアンをハードコードすること。
• 穏やかな大気感のある見た目を損なう、速い乱流、ノイズの多いパーティクルの動き、または明白な反復パターン。