背景・ビジュアル表現系

パーティクルとグラスモーフィズムを組み合わせた背景演出

背景のパーティクルアニメーションとガラス風パネルを重ねて、情報面を際立たせるビジュアル表現です。

Y
Yutaka Kizaki
@junkbranding
2026年5月19日
読了時間: 5分
構成 / File Structure
</>Code Viewer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

はじめに

背景に動きを入れたいけれど、肝心の情報はきちんと読ませたい。そういう場面では、背景と情報面のテンションを分けて設計するとバランスが取りやすくなります。両方を同じ強さで主張させると、きれいでも読みにくい画面になりやすいです。

このサンプルでは、背景側に粒子の動きを置き、前面にはガラス調のパネルを固定しています。視線は動く背景で引きつけつつ、読む場所は静かに保つことで、ビジュアルと実用性の両立を狙っています。

組み合わせのポイント

  • 粒子は小さめにして密度を上げすぎず、空気感として見せる
  • 情報面は中央に固定し、背景の動きに視線が流れすぎないようにする
  • ガラス表現は透明感だけでなく、文字の読みやすさを支える役割として使う
  • 背景色は増やしすぎず、光り方の差で表情を出す
  • パネルのぼかしや境界線を調整して、背景との距離感をきれいに見せる

まとめ

背景演出は、どれだけ派手に動かしたかより、前面の情報をどれだけ落ち着いて見せられるかで印象が変わりやすいです。動きのある背景と静かな情報面の差を作ると、見た目と読みやすさのバランスを取りやすくなります。

タグ

GSAPアニメーションUI

関連記事