ローディング系

ローディングと画面切り替えを組み合わせたオーブ演出

ローディングの集約表現から、メイン画面への遷移までを一続きで見せるオーブアニメーションです。

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
62
63
64
65
66
67
68

はじめに

ローディング画面は、ただ待たせるためだけの時間として切り出すと、体験が少し途切れて見えやすくなります。短い待ち時間でも、次の画面へ向かう流れの一部として扱うと、見え方が少しなめらかになります。

このサンプルでは、読み込み中のオーブの動きがそのまま次の画面の空気感へつながるように組んでいます。ローダーを消して終わりにするのではなく、収束の動きを次の導入へ受け渡すことで、切り替えの違和感を減らしています。

組み合わせのポイント

  • 最初は待機中だと分かるように、単純すぎない揺れで時間を見せる
  • 準備完了のタイミングではローダーを急に消さず、まとまりながら次へ渡す
  • 次画面は一拍遅れて見せることで、切り替えより遷移として感じやすくする
  • 背景色や光のトーンを共有して、別画面に見えすぎないようにする
  • 読み込み演出の長さは必要以上に引き延ばさず、気持ちよさを優先する

まとめ

ローディング演出は、それ自体を目立たせるよりも、次の画面へどうつなぐかを考えた方がまとまりやすいです。待ち時間を完全に消せない場面でも、流れを途切れさせないだけで見え方は変わるので、導入の一部として考えておくと扱いやすいと思います。

タグ

GSAPアニメーションローディングトランジションUI

関連記事