はじめに
自分用メモ。
背景に動きを入れつつ情報は読ませたいときは、背景と前面のテンションを分ける。両方を同じ強さで主張させるとすぐ読みにくくなる。
このサンプルでは、背景に粒子、前面にガラスパネルを置いて役割を分離している。視線は引きつけるけれど、読む場所は静かに保つ構成として覚えておく。
組み合わせのポイント
- 粒子は小さめにして密度を上げすぎず、空気感として見せる
- 情報面は中央に固定し、背景の動きに視線が流れすぎないようにする
- ガラス表現は透明感だけでなく、文字の読みやすさを支える役割として使う
- 背景色は増やしすぎず、光り方の差で表情を出す
- パネルのぼかしや境界線を調整して、背景との距離感をきれいに見せる
実装のポイント
- 背景の粒子は独立レイヤーで動かし、前面パネルには影響を与えない
- ガラスパネルは blur、透過、境界線をまとめて調整して読みやすさを確保する
- 粒子数や移動量は空気感が出る程度に留め、情報の可読性を優先する
- 前景と背景のコントラスト差を先に作ってから、装飾の密度を足していく
まとめ
覚えておくのは、背景演出は派手さより前面の読みやすさ。動く背景と静かな情報面の差を先に作る。