ブロブ（有機曲線）背景ヒーロー
ブロブ背景ヒーローは、円形の span 2 個（ .hero-blob__b1 / .hero-blob__b2 ）に filter:blur(60px) を強くかけ、輪郭をぼかして液体のような有機シェイプに見せています。
解説
ブロブ背景ヒーローは、円形の span 2 個（.hero-blob__b1 / .hero-blob__b2）に filter:blur(60px) を強くかけ、輪郭をぼかして液体のような有機シェイプに見せています。@keyframes blob で translate と scale をゆっくり変化させ、animation-delay をずらした 2 個が別々の動きでふわふわ漂います。JavaScript は使わず、CSS のぼかしとアニメーションだけで柔らかな雰囲気を作るのが要点です。
使う場面
- スキンケアやコスメなど、やさしさを伝えたい DTC ブランド
- ウェルネス・ヘルスケア系の落ち着いたトップ
- SaaS で堅さを和らげ親しみを出したいとき
色はブロブの background を変えるだけでブランドカラーに馴染ませられます。blur の量を増やすとより溶けた印象に、減らすと形が残ります。pointer-events:none が指定済みなので、背景が前面の操作を邪魔しません。常時アニメーションするため、prefers-reduced-motion: reduce のメディアクエリで animation を止める配慮を加えると親切です。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
ブロブの色やにじみ具合を変えるには？
各ブロブの background でブランドカラーに変更できます。にじみは filter:blur の値で調整し、大きくするとより液体的に、小さくすると形がはっきり残ります。
アニメーションが苦手なユーザーへの配慮は？
prefers-reduced-motion: reduce のメディアクエリ内でブロブの animation を none にすると、動きを抑えたい設定のユーザーには静止状態で表示できます。