テキスト演出系

文字分割とグラデーションを組み合わせたウェーブ見出し

文字分割アニメーションとグラデーションテキストを重ねて、見出しだけで空気感を作る表現です。

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

はじめに

見出し演出は、長い動きを見せるより最初の一瞬で印象を残す方が使いやすい場面が多いです。特にファーストビューや区切りの見出しでは、文章量が少ないぶん、文字そのものの見せ方が画面の空気を決めます。

このサンプルでは、文字を順番に立ち上げたあと、完全に止めずにごく弱いウェーブを残しています。登場だけで終わらせないことで、静止画にはならないけれど騒がしくもない、ちょうどよい余韻を狙っています。

組み合わせのポイント

  • 最初は文字ごとに順番をつけて、読み始めるリズムをつくる
  • グラデーションは派手さより面の流れを見せるために使う
  • 下線の出現を区切りとして入れ、見出しのまとまりを支える
  • 最後のウェーブは小さく保ち、常に動いている感じを出しすぎない
  • 文字数が多い場合は、分割数に対してアニメーション速度を少し抑える

まとめ

テキスト演出は、強いエフェクトを重ねるより、登場の順番と止まり方を丁寧に作る方が自然に見えやすいです。見出しだけで雰囲気を出したいときは、立ち上がりと余韻の 2 つを意識するだけでも印象を少し調整しやすくなります。

タグ

GSAPアニメーションテキスト

関連記事