映像制作・モーショングラフィックスで使われるシェイプアニメーション408種を、20のカテゴリに分類したビジュアル辞典。すべてのエフェクトにライブデモとRemotionでの実装コード解説付き。
この辞典について
なぜ作ったか
Remotionで映像制作をしていると、「あのアニメーション何だっけ?」「この動きをどう実装するんだっけ?」という場面に頻繁に遭遇します。Web上の情報は断片的で、網羅的にまとまった日本語リソースは存在しません。
この辞典は、シェイプを使ったモーショングラフィックスのパターンを408種収録し、すべてにブラウザ上で動作するライブデモを付けることで、「見て→動かして→実装する」という流れをワンストップで完結させることを目指しています。
使い方
- 1 下のカテゴリグリッドから、探しているアニメーションの種類を選ぶ
- 2 各カテゴリページで再生ボタンを押して、実際の動きをブラウザ上で確認する
- 3 気に入ったエフェクトのコード解説を読み、Remotionプロジェクトに組み込む
3つの実装方式
各エフェクトは上記いずれかの方式で実装されています。Remotionでは主にReactコンポーネントとして記述しますが、CSSアニメーションやCanvas描画も組み合わせて使用します。
20カテゴリ 一覧
1. シェイプの登場(Shape Entrances)
28種シェイプがscale 0から110%にオーバーシュートし、100%に収まる定番の登場演出
ボタン出現 / モーダル表示 / アイコン登場 / 通知バッジ
弾けるような活力と注目感。ポップで親しみやすい印象を与える
バネのようなオーバーシュート&バウンスで弾力的に拡大。GSAPのelastic.outイージング
ゲームUI / キャラ登場 / リアクションアニメーション / 強調表示
弾力感が「生きている」印象を与え、楽しさとダイナミズムを感じさせる
画面端(左/右/上/下)からスライドインして所定位置に到達する基本的な登場演出
メニュー出現 / カードリスト / スライドショー / サイドパネル
方向性が「到着」を暗示し、自然で違和感のない動き
上から落下し、着地時にscaleY圧縮+scaleX拡張のスクワッシュ変形後に復帰
通知ドロップ / ゲームアイテム獲得 / モーダルダイアログ / バッジ付与
重力感が「実体」を感じさせ、物理的な存在感と重要性を演出
clip-path circleが中心の0%から100%に広がり、シェイプが内側から出現する
フォーカスポイントの展開 / マップピン / プロフィール画像表示
中心から広がる動きが「発生」「誕生」を暗示し、有機的な印象
scaleX 0→1で左端を起点に横に展開する。折り畳まれた紙が開くイメージ
プログレスバー / パネル展開 / アコーディオン / メニュー開閉
段階的な開示が「丁寧さ」を演出。情報を整理して見せる効果
カメラの絞りのように中心から円形に開いて内容が現れる映像的トランジション
シーン切替 / 映画風演出 / フォトギャラリー / ビデオオープニング
映画・映像の文法で「次の場面へ」の期待感を生む。シネマティック
左から右にマスクが通過してシェイプが徐々に露出する。clip-path insetで実装
ビフォーアフター / スライドショー / テキスト表示 / コンテンツ切替
「覆いを取る」動作が発見の喜びを演出。自然な時間の流れを表現
斜め45度の切り口でシェイプが出現。polygon clip-pathで斜め方向にマスク拡張
ポートフォリオ / ファッション系サイト / 映像トランジション
斜めの動きがダイナミズムと洗練された印象を同時に与える
回転しながらスケールアップして登場。回転の勢いが注目を集める
ローディング完了 / アイコン登場 / ゲームエフェクト / バッジ獲得
回転が「変化」「変身」を暗示し、エネルギッシュで劇的な印象
Y軸回転で裏面から表面へ。3Dperspectiveで奥行きのあるフリップ
カードフリップ / 情報切替 / クイズの答え表示 / プロダクトカード
裏返す動作が「秘密の開示」を暗示し、好奇心と発見の喜びを刺激
上下のシャッター(幕)が開いて中身のシェイプが見える。映画の幕開け風
プロダクトリビール / 映画風オープニング / ギャラリー / イベント告知
「幕が上がる」メタファーが特別感と期待感を最大化する
4つの小さなブロックが左から順にスタガー(時間差)で出現するタイプライター風
ステップ表示 / プログレス / ドット読み込み / リズム感のある登場
順序立てた出現がリズム感を生み、「整理された情報」の印象を与える
ドットがランダム位置から集合して四角形を形成する。Canvas2Dで粒子シミュレーション
テクノロジー系演出 / データ集約の可視化 / ロゴ組み立て / SF風UI
混沌から秩序への変化が「知性」「テクノロジー」を暗示する
SVGの枠線がstroke-dashoffsetで描画された後、中身がフェードインする二段階演出
アイコン描画 / ロゴアニメーション / インフォグラフィック / イラスト表示
手描き感が「丁寧さ」「クラフト感」を演出。完成への過程を見せる
ゴムのように引き伸ばされて飛んできて所定位置に収まる。GSAP elastic easing使用
ゲームUI / キャラクターアニメ / インタラクティブ要素 / 遊び心のあるUI
弾力的な変形が「柔軟性」「遊び心」を表現。子ども心をくすぐる
左右に分割された面が両側から合体して1つのシェイプになる
ロゴ表示 / 合流・統合のメタファー / コラボ表現 / パートナーシップ
分離から統合への動きが「結合」「協力」を象徴。完成の達成感
矩形マスク枠が移動しながら中身を順次露出させる。スキャン風の演出
スキャン演出 / 検索結果表示 / テクノロジー系UI / データ解析風
走査線が「分析」「探索」を暗示し、テクノロジカルな印象を与える
強いぼかしから徐々にクリアになり実体化する。filter: blurで実装
夢から覚める演出 / フォーカス効果 / 回想シーン / 視点変化
ぼやけた状態が「不確かさ」、クリアになることで「確信」「発見」を表現
上から叩きつけるように出現し、着地時に画面全体が微震動する
承認スタンプ / 実績解除 / 重要通知 / ゲームクリア演出
衝撃的な着地が「決定」「確定」を暗示。力強さとインパクト
渦巻き状の軌道で外周から中心に向かって登場する。JS制御の座標変化
ロゴ登場 / マジック演出 / ゲームアイテム出現 / 集約のメタファー
渦巻きが「集中」「引き寄せ」を暗示し、催眠的な魅力を持つ
3つのシェイプが時間差でバウンドしながら着地する。カスケード(連鎖)演出
リスト項目の登場 / ステップ表示 / 複数要素の順次表示 / 評価スター
連鎖的な動きがリズム感と楽しさを生む。複数要素の「チームワーク」感
3枚のカードが重なった状態から扇子のように広がって並ぶ
カード選択 / メニュー展開 / ギャラリー表示 / ゲームの手札
扇形の展開が「選択肢の提示」を暗示。優雅で洗練された印象
小さな円(ドット)から徐々に四角形にモーフィングしてシェイプが完成する
ローディング→コンテンツ / マップピン展開 / UI要素の生成
形状の変化が「進化」「成長」を暗示。有機的で自然な変化
ジグザグ軌道を描きながら左からスライドインする。JS座標制御
ゲームUI / キャラクター登場 / 遊び心のある演出 / 注目集め
不規則な動きが「遊び心」「予測不能な楽しさ」を表現
下から上にカーテンが上がるようにclip-pathで徐々に露出する
劇場風オープニング / プロダクトリビール / セレモニー / イベント告知
カーテンが上がるメタファーが「開演」「始まり」の高揚感を演出
時計の針のようにconic-gradientの扇形が12時方向から時計回りに広がって出現
タイマー完了 / 円グラフ / ローディング / カウントダウン演出
時計の動きが「時間の経過」「達成」を暗示。進行感と達成感
デジタルノイズ→ちらつき→安定して出現。clip-pathとtranslateの断片的な表示
テクノロジー系 / SF演出 / エラー→復帰 / サイバーパンク風UI
グリッチが「デジタル」「未来」を暗示。不安定から安定への安心感
2. シェイプの退場(Shape Exits)
18種110%に一瞬膨張してからscale 0に収縮して消える。登場のScale Popの逆再生
モーダル閉じ / 通知消去 / アイテム削除 / ポップアップ退場
「弾けて消える」感覚が軽快さを演出。消去のストレスを和らげる
opacity 1→0で静かに消える最も基本的な退場。他のアニメーションと組み合わせやすい
セクション切替 / 要素の非表示 / トースト消去 / 背景トランジション
穏やかで自然な消え方。ユーザーに「消えた」ことを意識させない上品さ
画面端(右方向)へスライドして退場。translateXで水平移動しながらフェード
リスト要素の削除 / スワイプ退場 / カルーセル切替 / パネル閉じ
移動方向が「退出」を明確に伝え、空間的な理解を助ける
上方向にふわっと浮き上がりながらフェードアウト。重力に逆らう軽やかな退場
完了メッセージ / 送信アニメーション / 成功通知 / アイテム消費
上昇は「昇華」「達成」を暗示。ポジティブな消去演出に最適
clip-path circleが中心に向かって収縮し、点になって消える。Grow From Pointの逆
フォーカス解除 / マップピン消去 / 閉じるアニメーション / 最小化
中心に吸い込まれる動きが「格納」「保存」を暗示。消えても存在は残る感覚
右端を起点にscaleX 1→0で横方向に折り畳まれて消える。Unfoldの逆再生
パネル閉じ / アコーディオン収納 / メニュー格納 / サイドバー
折り畳む動作が「整理」「片付け」を連想させ、秩序感を保つ
clip-path circleが100%→0%に絞られ、カメラの絞りのように中心に閉じる
シーン終了 / エンディング演出 / フォトギャラリー閉じ / ビデオクロージング
映画のフェードアウト。「幕が閉じる」終わりの美学を表現する
左端から右端へマスクが閉じてシェイプが消去される。clip-path insetで実装
スライド切替 / コンテンツ消去 / ビフォーアフター逆再生
拭き取る動作が「清掃」「リセット」を連想させ、すっきりとした印象
斜め方向にpolygon clip-pathが収縮してシェイプが消える。Diagonal Wipeの逆
ポートフォリオ切替 / 映像トランジション / ファッション系退場演出
斜めの動きが退場にもダイナミズムを加え、単調さを打破する
回転しながら縮小して消える。Rotate Inの逆。渦に吸い込まれる印象
ゲームエフェクト退場 / ローディング終了 / アイコン消去 / トランジション
回転の勢いが「消え去る」動作にエネルギー感を付加する
Y軸回転で裏側に回転しながら消える。3D perspectiveで奥行きのある退場
カード裏返し退場 / 情報切替 / クイズ終了 / パネル閉じ
表から裏への移行が「片付ける」「しまう」を暗示する立体的退場
シェイプがパーティクルに分解されて散逸する。Canvasで粒子が四方に飛散
消滅演出 / ゲームキャラ退場 / マジック風消失 / データ削除
物質が粒子に還る様が「無に帰す」「変容」を暗示。劇的で印象的
filter blurが0→20pxに増加しながらopacityが低下。焦点が外れて消える
夢の終わり / 回想シーン退場 / ソフトフォーカス遷移 / 幻影消失
焦点が合わなくなる=「記憶から薄れる」。余韻を残す退場
シェイプが複数の破片に分裂し、放射状に飛び散って消える。Canvas描画
敵撃破 / ブロック破壊 / ゲームオーバー / 劇的な消滅演出
爆発は最も強いインパクト。破壊と解放のカタルシスを与える
scaleYが1→0に潰れ、同時にscaleXが一瞬1.3に膨らむスクワッシュ変形で消える
アコーディオン閉じ / 通知消去 / パネル折畳み / UI要素の最小化
潰れる動きが物理的な「圧縮」を感じさせ、格納された実感を与える
螺旋を描きながら外側へ拡大移動し、画面外に消える。Spiral Inの逆
ポータル退場 / 魔法エフェクト / ワープ演出 / ゲームアイテム消費
螺旋の軌道が「渦に吸い込まれる」「異世界へ去る」を表現する
横方向に加速しながらスワイプされ、回転を伴いながら画面外に飛ばされる
通知のスワイプ消去 / Tinder風カード退場 / リスト要素削除
物理的に「弾き飛ばす」動作の模倣。快感と操作実感を最大化する
デジタルグリッチノイズで画面が乱れながら消失。clip-pathの断片的表示で崩壊を表現
エラー演出 / サイバーパンク退場 / 敵消滅 / データ破損表現
デジタル的な崩壊が「バグ」「異常」を暗示。不穏さとクールさの共存
3. シェイプ変形(Shape Morphing)
22種シェイプが一定のリズムで拡大・縮小を繰り返す。心臓の脈動のような基本パルス
注目ボタン / アクティブ状態 / 通知アイコン / 待機アニメーション
規則的な拍動が「生命感」「重要性」を暗示。適度な注意喚起
ゆっくりとした拡縮+opacity変化で呼吸するようなリズム。Scale Pulseより有機的
ローディング中 / 瞑想アプリ / 待機状態 / 環境音楽系UI
呼吸のリズムが安心感を与え、ユーザーに「待つこと」を受容させる
アニメーション12原則の基本。潰れと伸びを交互に繰り返し弾力感を表現
キャラアニメーション / ボタンタップ反応 / ゲームUI / 楽しいローディング
弾力性が「生きている」印象を最大化。カートゥーン的な親しみやすさ
ゼリーのように不規則に揺れ動く。複数のscale値が減衰しながら振動
タッチフィードバック / エラー表示 / 新着通知 / ゲーム報酬獲得
柔らかさと弾力が遊び心を伝え、インタラクションへの応答を実感させる
360度の回転をリニアに繰り返す最もシンプルな回転アニメーション
ローディングスピナー / 処理中表示 / ギア・歯車 / リフレッシュアイコン
終わりのない回転が「処理中」「進行中」を明確に伝える
振り子のように左右に揺れる。上端を支点にtransform-originを設定
時計 / メトロノーム / 揺らぎ演出 / アイドルアニメーション
規則的な往復運動が時の経過とリズムを暗示。催眠的な落ち着き
X軸(横軸)を中心に回転。コインが手前に倒れて起き上がるような動き
カード裏返し / コイン回転 / 情報トグル / ゲームアニメーション
奥行きのある回転が3D空間の実在感を生む。表裏の切替を物理的に表現
Y軸(縦軸)を中心に回転。ページをめくるような横方向の回転
ページめくり / 情報切替 / プロダクトビュー / 3Dショーケース
横方向の回転が「次のページ」「別の面」を暗示。好奇心を刺激
skewXで左右に傾斜が交互に変化。風に揺れる旗のような動き
バナー揺れ / テキスト強調 / 遊び心のあるUI / ホバーエフェクト
斜めの変形が動的な緊張感を生み、静止画にない活力を与える
横方向にscaleXが1→0.3→1と収縮・復帰を繰り返す。アコーディオンの蛇腹
パネル開閉 / メニュー伸縮 / データ圧縮表現 / リズミカルな装飾
横方向の伸縮が「呼吸」「収縮」を表現。変化しながらも安定感を保つ
縦方向にscaleYが1→0.3→1と収縮・復帰。上下方向のアコーディオン
ドロップダウン開閉 / リスト伸縮 / 高さアニメーション / ステータスバー
縦方向の変形は「潰れる・立ち上がる」を連想。存在のオンオフを体感
GSAPのelastic.inOutイージングでゴムのように振動しながら拡縮する
ゲームUI反応 / 特別なボタン / アテンション誘導 / リワード演出
自然では見られない弾性振動が「超現実的な楽しさ」を生む
border-radiusが50%(円)→8px(角丸四角)に変化する形状モーフィング
アバター切替 / モード切替 / 状態遷移表示 / トグルアニメーション
有機的な円から人工的な四角への変化が「構造化」「確定」を表現
四隅のborder-radiusが非対称に変化し、有機的な形状が次々に遷移する
クリエイティブ背景 / アート系装飾 / ローディング / ブランドアイデンティティ
不規則な角丸変化が「有機的」「自然」な印象。生物的な形状変容
8値のborder-radiusが複雑に変化し、アメーバのような不定形の形状が連続変形
ヒーロー背景 / グラデーション装飾 / アート作品 / 環境アプリ
生物的な形状変化が「成長」「変容」「流動性」を強く表現
clip-path polygonで星形の頂点が微妙に変化し、星が脈動するように変形
レーティング / お気に入り / 実績バッジ / ゲームエフェクト
星の変形が「輝き」「特別さ」を強調。静止した星より存在感が増す
心臓の鼓動パターン(ドクッ・ドクッ)を模した二段階の拡大。医療モニター風
健康アプリ / いいねボタン / 緊張表現 / バイタルサイン
心拍リズムが本能的に注意を引き、「生きている」「大切」を強く暗示
左右に素早く振動し徐々に減衰する。エラーや拒否のフィードバック
ログイン失敗 / バリデーションエラー / 操作拒否 / 注意喚起
首を横に振る動作の模倣。「NG」「ダメ」を直感的に伝える
2D方向にランダムに微振動する。スマホのバイブレーション的な触覚フィードバック
緊急通知 / ホラー演出 / 地震エフェクト / 携帯着信
不規則な微振動が不安定さ・緊急性を伝え、即座の注意を促す
ゆっくりと上下に浮遊する。重力から解放された無重力感
ヒーロー要素 / CTA強調 / ファンタジーUI / 宇宙空間表現
浮遊感が「特別」「軽やか」を表現。地に足がつかない夢幻的な印象
跳ねるボールのように上下運動+着地時のスクワッシュを繰り返す
ゲームキャラアイドル / 待機中表示 / 楽しいUI / 子ども向け
弾むリズムが楽観的なエネルギーを伝え、退屈さを打破する
中心点の周りを楕円軌道で周回し続ける。衛星の公転運動
ローディング / 太陽系表現 / 原子モデル / ダッシュボード装飾
周回運動が「循環」「秩序」「システム」を暗示。科学的な洗練
4. パスドロー&ストローク(Path Draw & Stroke)
24種stroke-dashoffsetを使い、線が始点から終点へ描画される最も基本的なパスアニメーション
ロゴ描画 / 署名アニメーション / 地図のルート表示 / チュートリアルガイド
「今まさに描かれている」臨場感。手仕事・丁寧さを暗示する
円形パスがstroke-dashoffsetで描画される。ゲージ・進捗表示の定番
プログレスサークル / スキルレベル / タイマー / 達成率
円の完成が「達成」「満了」を視覚化。進捗が一目でわかる
矩形パスの外周を一筆書きで描画。フレーム・ボーダーの動的生成
カードボーダー / 選択枠 / フォーカスインジケータ / フレーム装飾
枠線が描かれることで「囲い込み」「保護」の印象を動的に構築
三角形パスを一筆書きで描画。再生ボタンやアイコンの動的描画
再生ボタン登場 / 警告アイコン / ナビゲーション矢印 / 幾何学装飾
三角形は方向性と安定性を同時に持ち、描画により存在感が増す
五芒星パスを一筆書きで描画。星形が線で浮かび上がる演出
レーティング / お気に入り登録 / 実績アイコン / 特別感の演出
星が描かれる過程を見ることで「付与される」「獲得する」感覚が強まる
中心から外側に向かって螺旋が描画される。渦巻き模様のパスアニメーション
ローディング / 催眠効果 / 渦巻き装飾 / 宇宙・銀河表現
螺旋の展開が「成長」「拡大」を暗示。見入ってしまう催眠的な魅力
心電図のような波形パスが左から右に描画される。医療モニター風
ヘルスケアアプリ / バイタル表示 / 生命感の演出 / テクノロジーUI
心電図パターンが「生命」「鮮度」を暗示。データの「生きた」感覚
正弦波パスが左から右に描画される。滑らかな波形の動的生成
音声波形 / 海・水面表現 / 信号波形 / デコレーション
波の規則的な動きが「流れ」「リズム」を表現。心地よい視覚体験
ジグザグの折れ線パスが描画される。鋭角的な動きの軌跡
エネルギー・電気表現 / デコレーション / ゲームパス / 株価チャート
鋭角の繰り返しが「電気」「エネルギー」「変動」を連想させる
チェックマーク(✓)がサッと描画される。完了・成功のフィードバック
フォーム送信完了 / タスク完了 / 成功通知 / 承認表示
チェックマークの描画が「達成」「OK」の瞬間を劇的に演出する
バツ印(×)が2本の線で描画される。エラー・閉じるのフィードバック
エラー通知 / 閉じるボタン / 削除確認 / 失敗表示
交差する線の描画が「否定」「取消」を明確かつ劇的に伝える
矢印が描画される。軸線の後に矢じりが描かれる2段階アニメーション
チュートリアル / 方向誘導 / フロー図 / CTA強調
矢印の描画が「方向」「進め」を動的に指し示し、誘導力が増す
手書き風の文字パスが描画される。署名・キャッチコピーの動的表示
署名アニメーション / ブランドロゴ / 手紙風演出 / クリエイター紹介
手書きの軌跡が「人の温もり」「個性」を伝え、デジタルに人間味を加える
複数のパスが時間差で順番に描画される。並列ラインのスタガー表示
データグラフ / 多層表現 / ネットワーク / 楽譜
順次描画が情報の階層構造を視覚化し、複雑さを整理して伝える
破線がパスに沿って流れるように移動する。stroke-dasharrayとoffsetのループ
データフロー / パイプライン / 電流 / ネットワーク接続表示
破線の流れが「転送」「移動」「プロセス」を視覚的に表現する
ドット(点線)がパスに沿って流れる。小さな丸が軌跡を描くように移動
軌跡表示 / GPS経路 / パーティクルトレイル / 装飾ライン
点の連なりが「軌跡」「旅路」を暗示。線より軽やかな動き
ストロークにグラデーションが適用された状態でパスが描画される
ブランドライン / プレミアム装飾 / エネルギービーム / 魔法陣
色の変化を伴う線が「高級感」「エネルギーの流れ」を表現
描画済みのストロークの太さが時間経過で変化する。細→太→細のパルス
強調ライン / アクティブパス / ホバーフィードバック / 脈動エフェクト
線の太さ変化が「呼吸」「脈動」を表現し、静的な線に生命感を与える
パスのストロークが描画された後、内部がフェードインで塗りつぶされる
ロゴアニメーション / アイコン出現 / マップ領域表示 / 図形教育
「線→面」の2段階が「設計→完成」のプロセスを可視化する
描画済みのストロークが始点から順に消えていく。Draw & Fillの逆
パス退場 / アンドゥ演出 / データ削除 / リセットフィードバック
線が消える過程が「取り消し」「巻き戻し」を視覚的に表現する
中央から両端に向かって同時に描画される。左右対称の展開
区切り線 / タイトル装飾 / バランス表現 / 対称デザイン
中央起点の展開が「均衡」「調和」を表現。左右対称の安定感
描画される線に光の軌跡(グロー)が追従する。ネオン・レーザー風
ネオンサイン / レーザーエフェクト / SF風UI / 魔法陣描画
光の軌跡が「エネルギー」「魔法」を暗示。近未来的な演出
多角形(六角形)が頂点を結びながら自動で描画される。幾何学パターン生成
テクノロジーUI / ブロックチェーン / 結晶構造 / 幾何学アート
規則的な多角形の構築が「秩序」「テクノロジー」「精密さ」を演出
∞(無限大)記号のパスが描画される。8の字の軌跡
ローディング / 無限スクロール / 永続性の表現 / ブランドマーク
無限記号が「終わりなき可能性」「永遠」を象徴する
5. クリップ&マスク(Clip & Mask)
22種中心から円形にclip-pathが拡大してコンテンツが出現する
シーン切替 / ポートレート表示 / フォーカス演出 / 映画風トランジション
円の拡大が「発見」「開眼」を暗示。中心から広がる有機的な登場
円形clip-pathが中心に収縮してコンテンツが消える。Circle Revealの逆
シーン終了 / エンディング / フォーカスアウト / トランジション閉じ
収縮する円が「終幕」「閉じる」を演出。映画的な余韻
四辺から均等にinsetが縮小してコンテンツが中央から外に向かって出現
画像ギャラリー / パネル展開 / モーダル表示 / カード出現
均等な拡大が「枠の解放」を表現。バランスの取れた安定的な登場
四辺が均等に内側に迫りコンテンツを圧縮して消す。Inset Revealの逆
閉じるアニメーション / 最小化 / コンテンツ退場 / パネル閉じ
四方から圧縮される動きが「格納」「収束」を表現する
左端から右に向かってinset clip-pathが開きコンテンツが出現
スライドショー / テキスト表示 / 横スクロール連動 / ビフォーアフター
左→右の動きが読み方向と一致し、自然な情報の流れを作る
右端から左に向かってinset clip-pathが開きコンテンツが出現
逆方向スライド / RTL言語対応 / 巻き戻し演出 / 特殊トランジション
右→左の動きが通常と逆で意外性を生む。「戻る」「振り返る」の暗示
下端から上に向かってinset clip-pathが開きコンテンツが上昇的に出現
スクロール連動表示 / カーテンライズ / リスト要素出現
下→上の動きが「上昇」「浮上」を暗示。力強い登場感
上端から下に向かってinset clip-pathが開きコンテンツが落下的に出現
ドロップダウン / メニュー展開 / 通知パネル / カーテンドロップ
上→下の動きが「降下」「カーテンが降りる」を暗示。重力感のある登場
菱形(ダイヤモンド型)のclip-pathが中心から拡大してコンテンツが出現
特別コンテンツ表示 / ジュエリー系 / ゲームアイテム / VIP演出
菱形が「宝石」「特別」を暗示。円形よりシャープで洗練された印象
菱形clip-pathが中心に収縮してコンテンツが消える。Diamond Revealの逆
退場演出 / シーン切替 / 特殊トランジション / ゲームクリア
菱形の収縮が「結晶化」「凝縮」を暗示。幾何学的な美しさのある退場
星形のclip-pathが中心から展開してコンテンツが星型に出現
報酬獲得 / スペシャル演出 / 子ども向け / ゲームクリア
星形の出現が「特別」「ご褒美」を最大限に演出する
六角形のclip-pathが中心から展開してコンテンツが出現
テクノロジーUI / ハニカム / ボードゲーム / 化学・科学系
六角形が「構造」「効率」「テクノロジー」を暗示する
三角形のclip-pathが中心から展開してコンテンツが出現
再生ボタン / 方向表示 / 警告 / ピラミッド的階層表現
三角形が「方向性」「階層」「注意」を暗示。鋭角的な緊張感
十字形のclip-pathからフルサイズに展開。十字型の窓が開くような演出
医療系 / 教会・宗教 / レッドクロス / ゲームアイテム
十字形が「救済」「回復」「追加」を暗示する象徴的な展開
水平方向のブラインド(スリット)が一つずつ開いてコンテンツが現れる
写真ギャラリー / スライドショー / 映像トランジション / 窓の演出
ブラインドが開く動作が「覗く」「少しずつ見える」好奇心を刺激
垂直方向のブラインドが一つずつ開いてコンテンツが現れる
ポートフォリオ / 画像切替 / カーテン風演出 / グリッド表示
縦のスリットが「ドアが開く」「カーテンが引かれる」を連想させる
円をピザのように分割し、各セグメントが順番に開いてコンテンツが現れる
ローディング完了 / パイチャート / 時計風 / ゲームステージ解放
セグメントの順次展開が「段階的な解放」「タイマー」を表現
チェスの盤面のように、市松模様でセルが順にオンになりコンテンツが現れる
レトロゲーム / ピクセルアート / ノスタルジー演出 / グリッド切替
市松模様が「レトロ」「ゲーム」を連想させ、遊び心を演出
conic-gradientマスクが螺旋的に展開してコンテンツが現れる
ポータル / 魔法陣 / 催眠効果 / 特別なローディング
螺旋展開が「渦の中心からの出現」「魔法的な登場」を表現
円形clip-pathが画面上を移動し、スポットライトのようにコンテンツを照らす
スポットライト / ゲームの視界 / 謎解き / フォーカス誘導
移動するスポットが「探索」「発見」を暗示。ユーザーの注目を誘導
clip-path polygonが複数の形状間を連続的にモーフィングする
アート系背景 / ブランド装飾 / 有機的なUI / クリエイティブ表現
形状の連続変化が「変容」「流動性」を表現。生命的な印象
clip-pathの位置が移動しながら内部コンテンツも逆方向に動くパララックス効果
ヒーローセクション / 奥行き演出 / スクロール連動 / 映像的表現
マスクと内容の逆動きが「覗き窓」「奥行き」を作り、没入感を生む
6. spring()物理(Spring Physics)
20種バネ物理でscale 0→1にオーバーシュート&バウンスしながら登場
モーダル表示 / ボタン出現 / 通知ポップ / ゲームUI
バネの弾性が「生きている」「弾力がある」物理的実在感を与える
バネ物理でtranslateXが目標位置を超えて振動しながら定位置に収束
メニュー出現 / カードスライド / パネル展開 / リスト要素
オーバーシュートが「勢いよく到着」を表現し、ダイナミックな登場
バネ物理で回転角度が目標を超えて往復振動しながら安定する
ダイヤル / スイッチ切替 / 矢印方向転換 / コンパス
回転の振動が「調整中」「最適化」を暗示。最終的に安定する安心感
上から落下してバウンド。重力+バネの組み合わせで自然な着地
通知ドロップ / アイテム獲得 / バッジ付与 / ゲームオブジェクト
重力落下+弾みが物理的な「重さ」「実在感」を最大化する
複数要素が連鎖的にバネアニメーション。前の要素の動きが次に伝播
リスト表示 / メニュー展開 / カードグリッド / ステップ表示
連鎖反応が「ドミノ倒し」「波及」を表現。順序感とリズム
減衰率が高くオーバーシュートなしで滑らかに目標値に到達するバネ
UIトランジション / モーダル / ゆったりとした動き / 上品な登場
振動のない到達が「落ち着き」「高級感」「制御された動き」を表現
減衰率が低く大きくオーバーシュートして何度も振動しながら収束
弾むボール / ゲームエフェクト / 楽しいUI / 遊び心のある動き
大きな振動が「遊び心」「活発さ」を表現。子ども向けUIに最適
振動と無振動の臨界点。最短時間でオーバーシュートなく目標に到達
UIアニメーション標準 / マテリアルデザイン / プロダクション品質
最適化された動きが「洗練」「計算された美しさ」を暗示
バネ定数が高く、高速で目標値に到達。素早い反応でカチッとした動き
ボタンクリック / トグル切替 / タブ選択 / 即時フィードバック
素早い応答が「正確さ」「確実性」を表現。操作への即時性
バネ定数が低く、ゆっくりと大きな振幅で目標に到達。優雅な動き
ゆったりUIアニメーション / 瞑想アプリ / ファンタジー / ドリーミー
ゆっくりとした振動が「穏やかさ」「夢見心地」を表現
バネ物理でscaleX/scaleYが交互にオーバーシュートするスカッシュ変形
キャラアニメ / ゲームUI / 弾むボタン / 楽しい反応
弾力的な変形が「生物的」「カートゥーン的」な生命感を最大化
バネ物理で3D回転がオーバーシュートしながら安定する
カード裏返し / 情報切替 / コイントス / プロダクト表示
回転の弾みが「めくる」動作に物理的な重みを加える
磁石に引き寄せられるように加速→スナップ位置でバネ振動して停止
ドラッグ&ドロップ / スナップポイント / グリッド吸着 / スロット
加速→急停止が「吸い付く」「ピタッとはまる」快感を生む
ゴムバンドのように引っ張って離すとパチンと戻る。iOS風のバウンス
スクロール端バウンス / プルトゥリフレッシュ / リスト引っ張り
ゴムの弾力が「限界」「境界」を暗示。引っ張った分だけ反動
振り子の振幅がバネ減衰で徐々に小さくなる自然な振り子
時計演出 / 吊り下げアニメ / 自然な揺れ / メトロノーム
減衰振動が「自然法則」「時の流れ」を物理的にシミュレーション
螺旋軌道のバネ。半径がバネ振動しながら中心に収束する楕円運動
ローディング / 軌道シミュレーション / ポータル / 渦巻き
収束する螺旋が「集約」「焦点化」を表現。催眠的な動き
opacityがバネ物理で振動。明滅しながら最終的に完全表示に落ち着く
ホログラム / グリッチ登場 / 不安定な出現 / SF的演出
明滅が「不安定→安定」の遷移を表現。信号が安定する過程
色相がバネ振動で変化。目標色を超えて振動しながら収束する
状態変化 / テーマ切替 / レベルアップ / モード変更
色の振動が「変化の過程」を可視化。最終色に到達する達成感
filter blurがバネ物理で振動。ぼけ→シャープ→ぼけ→シャープと収束
フォーカス演出 / カメラ風ぼけ / 登場エフェクト / 夢の覚醒
焦点の振動が「ピントを合わせる」プロセスを表現。覚醒の過程
width/heightがバネ物理で目標サイズに振動しながら到達する
パネルリサイズ / ウィンドウ拡大 / コンテナ展開 / レイアウト変更
サイズの振動が「伸縮する有機体」を連想させ、硬いUIに柔らかさを加える
7. スタガー&群体(Stagger & Swarm)
22種複数要素が均等な時間差で左から右に順番に登場。最も基本的なスタガー
リスト表示 / メニュー展開 / カードグリッド / ナビゲーション
規則的な順序が「整然」「秩序」を伝え、情報の階層を視覚化
右から左に逆順で登場。退場時や巻き戻し演出に使用
リスト退場 / 逆順表示 / 巻き戻し演出 / アンドゥビジュアル
逆順が「巻き戻し」「回帰」を暗示。通常と異なる方向性で注目を集める
中央から外側に向かって順番に登場。中心から放射状に展開
タイトル文字 / 対称デザイン / バランス演出 / 展開アニメ
中央起点の展開が「中心から広がる」「焦点」を強調する
ランダムな順序で各要素が登場。予測不能な楽しさ
パーティクル登場 / 楽しいローディング / ゲーム / クリエイティブ
ランダム性が「遊び心」「カオス」を表現。規則とは違う新鮮さ
グリッド配置の要素が左上→右下に向かって斜めに順番に登場
ポートフォリオグリッド / 画像ギャラリー / ダッシュボード / タイル表示
斜めの波紋が「整列」と「動き」を両立。グリッドに生命を吹き込む
波のように上下しながら順番に登場。sinカーブのスタガー
テキスト文字 / 音楽ビジュアライザー / 海洋系 / リズミカルUI
波の動きが「流動性」「リズム」を表現。音楽的な心地よさ
上から下に滝のように順番に登場。縦リストのスタガー
サイドバーメニュー / 通知リスト / タイムライン / 設定項目
上→下の流れが「滝」「時系列」を暗示。情報の自然な流れ
螺旋軌道で外側から中心に向かって順番に登場
ダッシュボード / データポイント / 渦巻きレイアウト / アート
螺旋が「収束」「中心への集約」を表現。求心的な動き
中心から放射状に要素が飛び散るように登場
メニュー展開 / FAB展開 / 花火エフェクト / データ散布
中心からの爆発が「拡散」「エネルギー放出」を最大化する
タイプライターのように左から1要素ずつ叩かれるように登場
テキスト入力 / コード表示 / チャット / ターミナル風
一つずつ現れる感覚が「入力中」「書き込み中」のリアルタイム感
ドミノ倒しのように前の要素が倒れると次の要素が連鎖的に倒れる
リスト退場 / 連鎖反応 / ゲーム / 物理演出
連鎖の快感が「因果」「波及効果」を視覚的に体感させる
ランダムなタイミングで要素が弾けるように登場。ポップコーン風
パーティ演出 / 成功祝い / ゲーム報酬 / 楽しいフィードバック
ランダムな弾けが「祝祭」「歓喜」を表現。予測不能な楽しさ
中心からの距離に比例した遅延で要素が登場。水面の波紋
グリッドUI / マテリアルデザイン / タッチフィードバック / データマップ
波紋が「衝撃の伝播」を表現。タッチ地点からの影響を可視化
散らばった要素が集まって整列する。逆も可能(整列→散布)
データ整理 / ソートビジュアル / パズル / 構成アニメ
カオス→秩序の変化が「整理」「解決」「完成」を表現する
アコーディオンのようにscaleYが0→1に順番に展開
FAQ展開 / アコーディオンメニュー / ステップ表示 / 情報段階開示
順次展開が「段階的な情報開示」を表現。読み手のペースを尊重
群体が呼吸するように全体的に拡縮。各要素に微妙な位相差
アンビエント装飾 / 海中生物 / 細胞分裂 / 環境アプリ
群体の呼吸が「有機体」「共生」を表現。生命的な一体感
複数要素が中心の周りを異なる速度・半径で公転する
原子モデル / 太陽系 / ローディング / 装飾エフェクト
多重周回が「複雑な秩序」「宇宙的スケール」を暗示する
鳥の群れのように要素が集団で移動。先頭に追従する群体行動
群体AI / 自然シミュレーション / データフロー / ビジュアルアート
群体行動が「一体感」「自然の法則」「社会性」を表現
パルス(拡縮+色変化)が左から右に伝播する波のような連鎖
イコライザー / 信号伝達 / ネットワーク / 心拍伝播
パルスの伝播が「信号」「エネルギーの流れ」を直感的に可視化
左から右に行が「埋まる」ようにbackgroundが順番に塗られる
プログレスバー / スキルレベル / 投票結果 / ローディング
充填の進行が「達成度」「完了への道のり」を直感的に可視化
要素の位置がランダムに入れ替わるシャッフルアニメーション
カードゲーム / リスト並替 / ソート可視化 / ランダム化
シャッフルが「ランダム性」「公平さ」「再配置」を表現する
散らばった要素が磁石に引き寄せられるように中心に集合する
データ集約 / グループ化 / フィルタリング結果 / マージ演出
集合の動きが「統合」「集約」「一致団結」を力強く表現する
8. グリッド&パターン(Grid & Pattern)
24種4x4グリッドのアイテムが左上から右下へ順番にフェードインする
画像ギャラリー / ポートフォリオ / ダッシュボード / カードUI
規則的な出現が「整然」「秩序」を伝え、コンテンツの一覧性を強調
グリッドアイテムがscale(0)から1にスタガー付きで拡大出現する
アプリアイコン / サムネイル / スキルバッジ / タグクラウド
ゼロからの出現が「生成」「創造」を表現。各要素の存在感を強調
グリッドアイテムがY軸180度回転して表面を見せるフリップ演出
カードゲーム / 記憶ゲーム / 情報開示 / Before/After
裏返しが「隠された情報の発見」「秘密の解明」を暗示する
各アイテムが上下左右の交互方向からスライドして定位置に収まる
マガジンレイアウト / ニュースフィード / コンテンツグリッド / メニュー
多方向からの合流が「集合」「統合」を表現。動的で活気ある印象
各アイテムがランダムな角度から回転しながら定位置に収まる
写真コラージュ / クリエイティブポートフォリオ / アート展示 / 散乱効果
回転の多様性が「自由」「創造性」を表現。整列との対比が面白い
高さの異なるアイテムが列ごとに上から滝のように現れるメイソンリー配置
Pinterestレイアウト / ブログ / 商品一覧 / 画像ボード
不規則な高さの調和が「多様性の中の統一」を表現。自然な流れ
六角形のグリッドが中心から外側に向かって放射状に出現する
地図UI / 戦略ゲーム / ハニカム表示 / テクノロジー演出
六角形の規則性が「効率」「テクノロジー」を暗示。中心展開で集中力を誘導
タイルがメモリカードのようにランダム順で裏返り色付きの表面を見せる
神経衰弱ゲーム / クイズ / 情報カード / プロダクト紹介
裏返し動作が「発見」「驚き」を演出。ゲーム的な楽しさを付与
パルス波が中心からグリッド全体に放射状に伝播し、各アイテムがスケールする
ヒートマップ / 心拍モニター / 衝撃波 / データビジュアル
波紋の伝播が「衝撃」「影響力の広がり」を直感的に可視化する
列ごとにアイテムが上から下に降り注ぐマトリックス風の雨演出
サイバー演出 / ハッキングシーン / テクノロジー / コード表現
上から下への連続的な流れが「データフロー」「デジタル世界」を象徴
チェス盤のように白マスと黒マスが交互に出現するパターン
ボードゲーム / 市松模様 / デザインパターン / トランジション
交互パターンが「バランス」「二面性」「秩序」を強く印象付ける
レンガ積みのように下段から上段へ、偶数行をオフセットしながら積み上がる
建築演出 / プログレス表示 / 壁面デザイン / レベルアップ
積み上げが「構築」「成長」「堅牢性」を力強く表現する
ランダムな位置にピースが次々と現れ、モザイク画が組み上がる
画像ローディング / パズル完成 / アート生成 / データ集約
ランダム配置から完成形へ向かう過程が「創造」「完成」を象徴する
正弦波がグリッドを横断し、通過点のアイテムがスケール変化する波動効果
音楽ビジュアライザー / 水面エフェクト / ステータス表示 / アンビエント
波の通過が「流動」「エネルギーの伝播」を滑らかに表現する
バラバラの位置にあるアイテムがソートされるように正しい位置にスライドする
ソートアルゴリズム可視化 / データ整理 / パズル / 復元演出
カオスから秩序への遷移が「解決」「整理整頓」「論理」を表現する
整列したグリッドから各アイテムがランダム方向に散り散りになる
削除演出 / 爆発エフェクト / 分解 / コンテンツ退場
秩序の崩壊が「解放」「破壊」「変革」を表現。インパクト大
三角形のテセレーション(敷き詰め)パターンが順番に組み上がる
幾何学デザイン / 低ポリアート / 建築 / アブストラクト演出
幾何学的な敷き詰めが「精密」「数学的美」「秩序」を強く印象付ける
色の変化がグリッドの左から右に波のように流れ、グラデーションを形成する
ヒートマップ / 気象データ / ムード表示 / 音楽ビジュアライザー
色彩の流動が「変化」「推移」「感情の波」を鮮やかに表現する
繰り返しパターンのタイルが順次出現してエリアを埋め尽くす
壁紙生成 / テキスタイル / 背景パターン / デザインプレビュー
反復の美しさが「統一」「調和」「無限の広がり」を表現する
縦横のストライプが交互にスライドして全体を覆うリビール演出
トランジション / スライドショー / ページ遷移 / タイトル表示
ストライプの規則性が「洗練」「モダン」を表現。スタイリッシュな印象
斜め線が交差して描画され、クロスハッチング模様を形成する
スケッチ風演出 / 製図 / テクスチャ / 陰影表現
手描き風の交差線が「アナログ」「職人技」「温かみ」を表現する
ドットが行列状に波のように出現し、マトリックスパターンを形成する
LED表示 / レトロディスプレイ / ドットアート / 電光掲示板
ドットの整列が「デジタル」「レトロ」「精密」を表現する
対称的なパターンが回転しながら万華鏡のように組み上がる
アート演出 / ローディング / 瞑想アプリ / デコラティブ背景
万華鏡の対称性が「美」「調和」「無限の変化」を幻想的に表現する
グリッドの全アイテムが中心に向かって吸い込まれるように収縮する
コンテンツ退場 / ブラックホール / 最小化 / 集約演出
中心への収束が「収束」「集約」「終結」を力強く表現する
9. ジェネラティブ&ノイズ(Generative & Noise)
20種パーティクルがパーリンノイズのフローフィールドに沿って流動する
背景演出 / アンビエント / データビジュアライゼーション / 風の表現
有機的な流れが「自然」「生命」を暗示し、見る者に穏やかな安心感を与える
ノイズ関数に基づいたカラーグラデーションがアニメーションする
背景テクスチャ / ヒーローセクション / ローディング画面 / アート表現
流動的な色変化が「神秘」「深淵」を感じさせ、没入感を高める
群れの法則(分離・整列・結合)に従ってパーティクルが群体行動する
群れシミュレーション / 背景アニメ / ソーシャルメディア / ゲーム演出
集団行動が「一体感」「社会性」を表現し、生物的な親しみを生む
ノイズで曲率が変化する曲線を複数本同時に描画する
アート背景 / ポスターデザイン / 地形図風 / 等高線演出
不規則な曲線が「手描き感」「温かみ」を表現し、機械的な冷たさを打ち消す
グリッド上のドットがノイズ値に応じて位置とサイズが変位する
インタラクティブ背景 / テクスチャ / ビジュアルエフェクト / UI装飾
規則と不規則の共存が「秩序の中の混沌」を表し、知的な好奇心を刺激する
L-system風のルールで枝分かれしながら有機的に成長する
自然表現 / 植物アニメ / ネットワーク図 / データツリー
成長の過程が「生命力」「進化」を象徴し、ポジティブな印象を与える
移動する母点によるボロノイ図が動的に更新される
テクスチャ生成 / 細胞表現 / マップ分割 / 有機パターン
細胞状のパターンが「生物学的」「ミクロの世界」を想起させ知的関心を引く
2つの化学物質の拡散・反応をシミュレートしてパターンを生成する
テクスチャ生成 / 生物模様 / サイエンスアート / 装飾パターン
自己組織化するパターンが「自然の神秘」「複雑系の美」を伝える
ローレンツアトラクタの軌跡をリアルタイムに描画する
サイエンス演出 / カオス理論ビジュアル / 背景装飾 / データアート
カオス的な軌跡が「予測不能」「深遠」を表現し、知的好奇心を刺激する
2Dノイズをハイトマップとしてグラデーションカラーで地形描画する
地形生成 / ゲームマップ / 背景テクスチャ / ビジュアライゼーション
地形的パターンが「広大さ」「冒険」を暗示し、想像力を掻き立てる
コンウェイのライフゲーム風ルールでセルが生死を繰り返す
ゲーム演出 / サイエンスアート / 背景パターン / 教育コンテンツ
単純ルールから生まれる複雑さが「創発」「可能性」を感じさせる
フィボナッチ数列の黄金角に基づいて点が螺旋状に配置される
自然パターン / ひまわり模様 / ローディング / 数学ビジュアル
黄金比の配置が「調和」「自然の美」を体現し、普遍的な美しさを伝える
複数のエージェントがランダムに歩行し軌跡を残す
軌跡アニメ / データ可視化 / 株価チャート風 / パスアニメーション
偶然性のある動きが「探索」「自由」を表現し、予測不能な面白さを生む
再帰的な枝分かれでフラクタル樹形を段階的に描画する
自然表現 / 教育 / アート生成 / ネットワーク図
自己相似な構造が「無限」「再帰的な美」を想起させ、深い印象を残す
複数の正弦波が重なり干渉パターンを生成する
水面エフェクト / 音波ビジュアル / サイエンス演出 / 背景装飾
干渉パターンが「科学」「波動」を表現し、理知的な雰囲気を醸す
パーティクルが上昇しながら拡散・透明化して煙を表現する
雰囲気演出 / ゲームVFX / タイトル背景 / ミステリアス演出
立ち上る煙が「神秘」「儚さ」を表現し、ドラマチックな雰囲気を作る
再帰的な分岐でプロシージャルに稲妻を生成・描画する
天候演出 / 電撃エフェクト / インパクト演出 / ゲームVFX
瞬間的な閃光が「衝撃」「パワー」を伝え、強烈な印象を残す
サークルパッキングアルゴリズムで円が隙間を埋めるように配置される
ポスターデザイン / インフォグラフィック / アート生成 / 充填パターン
隙間なく詰まる円が「充実」「密度」を表現し、完成度の高さを感じさせる
接続されたメッシュポイントがノイズで変位し有機的なネットワークを形成する
ネットワーク図 / テクノロジー背景 / 接続演出 / SaaS背景
繋がり合うメッシュが「接続」「テクノロジー」を象徴し、先進的な印象を与える
多層のグラデーション帯がノイズで揺らぎオーロラを表現する
背景演出 / ヒーローセクション / 幻想的演出 / 自然現象
幻想的な光のカーテンが「神秘」「壮大さ」を伝え、畏敬の念を呼び起こす
10. ローワーサード&テロップ(Lower Thirds & Telops)
26種水平バーが左からスライドインし、テキストがフェードアップで出現する二段階演出
ニュース速報 / インタビュー名前表示 / プレゼンテーション / YouTube動画
安定した横移動が「信頼感」と「正式な紹介」の印象を与える
clip-pathで左からワイプしてバーを露出させ、テキストが追従して現れる
テレビ番組テロップ / ドキュメンタリー / バラエティ / 字幕
覆いが剥がれる動きが「発見」と「情報開示」の期待感を生む
バーが中央から左右に分裂して広がり、テキストが中央に浮かび上がる
タイトルコール / スポーツ中継 / イベント告知 / ライブ配信
中心から広がる動きが「インパクト」と「注目」を強く惹きつける
タイトルバーが先にスライドインし、続いてサブタイトルバーが下に積み重なる
番組出演者紹介 / 肩書き表示 / 情報階層表示 / レポーター名
段階的な構築が「丁寧な紹介」と「情報の整理」を印象づける
細いアクセントラインが上から下に描画され、その横にテキストがフェードイン
ミニマルデザイン / ドキュメンタリー / 映画クレジット / アート系映像
細い線が「繊細」「上品」を暗示し、洗練されたミニマルな印象
小さな点からボックスが拡大し、中にテキストがタイピング風に出現する
テック系動画 / プログラミング解説 / HUD表示 / データ表示
点から広がる動きが「情報の展開」と「デジタル感」を演出
L字型のコーナーピースが四隅からアニメーションインしてテキストを囲むフレームを形成
フォーカス表示 / ターゲット指示 / スコープ風UI / 写真フレーム
四隅のフレームが「狙い」「フォーカス」を暗示し、注目を集中させる
テキストが先にフェードインし、その下にアクセントラインが左から描画される
名前テロップ / 解説字幕 / キャプション / シンプルなテロップ
下線が「強調」と「確定」を示し、テキストに権威ある存在感を付与
丸みのあるバッジがscale 0→110%→100%でポップアップし、ラベルテキストを表示
LIVE表示 / NEW表示 / タグバッジ / ステータス表示
弾けるような登場が「新着」「重要」のインパクトを強調する
テキストがニュースティッカーのように右端から左端へ水平にスクロールし続ける
ニュース速報 / 株価ティッカー / ライブ配信アラート / お知らせ
連続的な流れが「最新情報」「リアルタイム」の緊迫感を演出
テキストがデジタルグリッチ(色ずれ・ちらつき・位置ずれ)を伴って出現する
SF映像 / サイバーパンク風 / ゲーム実況 / テクノロジー系動画
グリッチが「デジタル」「未来」を暗示し、エッジの効いた印象を与える
テキストが1文字ずつ順番にタイピングされるように表示される古典的な演出
字幕テロップ / ナレーション字幕 / ストーリーテリング / コード表示
1文字ずつの表示が「語りかけ」と「集中」を促し、読む速度をコントロール
テキストがネオン管のようにフリッカーしながら点灯し、グロウ効果で発光する
ナイトライフ / バー・クラブ映像 / レトロ風 / 80sスタイル
ネオンの温かい光が「夜の魅力」「ノスタルジア」と「華やかさ」を演出
テキストが上からスタンプのように叩きつけられ、インパクトと共に着地する
承認印 / APPROVED表示 / ゲームクリア / 重要アナウンス
衝撃的な着地が「決定」「確定」「権威」を強く暗示する
リボン形状のバナーが画面左からスライドインし、テキストを載せて停止する
セール告知 / 受賞表示 / 特別イベント / キャンペーンバナー
リボンの装飾性が「特別感」「祝い」「プレミアム」を演出する
カード型ローワーサードがY軸回転で裏面から表面へフリップして登場する
クイズ番組の答え / カード演出 / 情報切替 / プロフィール表示
裏返す動作が「秘密の開示」を暗示し、サプライズ感を高める
グラデーションカラーのバーがスライドインし、シマー(光沢)が走る二段階演出
プレミアムコンテンツ / 高級ブランド / アワード / ランキング
グラデーションの光沢が「高級感」「プレミアム」「輝き」を演出
超クリーンなフェードイン。細い水平ラインと共にテキストが静かに出現する
映画字幕 / ドキュメンタリー / アート映像 / ミニマルデザイン
控えめな出現が「上品」「知的」「落ち着き」を印象づける
[ ] 角括弧が左右から閉じるようにアニメーションし、中のテキストを囲む
テック系UI / コード風表示 / データラベル / プログラミング動画
括弧が「分類」「定義」を暗示し、テクニカルで知的な印象
タグ(ラベル)形状のシェイプが横からスライドインしてテキストを表示する
カテゴリ表示 / タグ付け / 商品ラベル / ジャンル表示
タグ形状が「分類」「ラベリング」を直感的に伝え、整理された印象
プログレスバーが左から右に充填され、同時にテキストがフェードインする
ローディング表示 / スキルレベル / 進捗表示 / ステータスバー
充填される動きが「進行」「達成」を暗示し、完了への期待感を生む
斜めにカットされたエッジを持つバーが左からスライドインする
スポーツ中継 / ニュース速報 / アクション映像 / ダイナミックな場面
斜めのカットが「スピード」「ダイナミズム」を暗示し、躍動感を演出
上下2本の水平ラインが左右から伸びてテキストを挟み込むサンドイッチ演出
映画タイトル / 高級ブランド / フォーマルな場面 / クレジット表示
二本線のフレームが「格式」「エレガンス」「権威」を表現する
円形のマスクが左端から広がり、ローワーサード全体を露出させる
トランジション / 映画風演出 / フォーカス効果 / シネマティック
円形の広がりが「発見」「開示」の有機的な印象を与える
各単語が個別にバウンス・回転・スケールしながら順番に着地するキネティック演出
ミュージックビデオ / 歌詞表示 / ポップな動画 / SNS向けコンテンツ
個別の動きが「リズム」「エネルギー」「楽しさ」を最大限に表現
始点からラインが伸び、端点にテキストラベルが出現するコールアウト演出
図解・解説 / 製品紹介 / 部品名表示 / インフォグラフィック
線で繋ぐ動きが「関連付け」「説明」を暗示し、理解を促進する
11. トランジションワイプ(Transition Wipes)
28種左から右へclip-path insetが開いてScene Bが出現する最も基本的なワイプトランジション
スライドショー切替 / シーン遷移 / ビフォーアフター / ニュース映像
水平方向の流れが「時間の経過」「物語の進行」を自然に表現する
上から下へclip-pathが開いてScene Bが現れる縦方向のワイプトランジション
ページ遷移 / 縦スクロールサイト / ストーリー切替 / メニュー展開
上から降りてくる動きが「幕が開く」印象を与え、舞台的な演出効果
斜め方向にpolygon clip-pathが拡大してScene Bが斜線カットで出現する
ポートフォリオ / ファッション系 / 映像トランジション / PV制作
斜めの動きがダイナミズムと洗練さを同時に表現。視線を誘導する
中心から円形にclip-path circleが拡大してScene Bが現れるカメラ絞り風ワイプ
シーン切替 / 映画風演出 / フォトギャラリー / レトロアニメ
中心から広がる円がフォーカスを集め、シネマティックな期待感を生む
時計の針のようにconic-gradientマスクが12時方向から回転してScene Bを露出する
タイマー演出 / 時間経過表現 / カウントダウン / レトロTV風
時計回りの動きが「時の流れ」を直感的に伝え、期待感を段階的に高める
中心から星型のclip-path polygonが拡大してScene Bが星形に現れるポップなワイプ
キッズ向け / バラエティ番組 / ゲーム演出 / お祝い・イベント
星形が「特別感」「ハイライト」を演出し、楽しく華やかな印象を与える
中心からハート型のclip-pathが拡大して愛らしくScene Bが出現する形状ワイプ
ウェディング / バレンタイン / 恋愛系コンテンツ / SNSエフェクト
ハート形が「愛情」「温かさ」を直感的に伝え、感情的なつながりを演出
中心からダイヤモンド(菱形)のclip-pathが拡大してScene Bが現れるワイプ
ジュエリー系 / 高級感演出 / プレゼンテーション / MV映像
菱形のシャープな幾何学が「高級感」「洗練」を暗示。フォーマルな印象
中心から十字型のclip-pathが拡大してScene Bが十字形に広がるワイプ
医療系 / 救急表示 / ゲームUI / シンボリックな切替
十字の対称性が「バランス」「秩序」を表現。方向性の安定感を与える
Scene Aが中央から左右に分かれて開き、背後のScene Bが現れる扉開放ワイプ
ステージオープニング / 映画予告 / 製品発表 / イベント開始
扉が開く動きが「開放」「発表」を暗示。期待感とドラマチックな印象
水平なブラインド状のストリップが順次開いてScene Bが段階的に露出するワイプ
プレゼン切替 / インテリア系 / ビジネス映像 / 写真ギャラリー
段階的な露出が「整然とした変化」を表現。秩序正しく上品な印象
チェッカーボード(市松模様)パターンでセルが順次反転しScene Bが現れるワイプ
ボードゲーム / レトロ演出 / パターン系デザイン / ピクセルアート
格子状の変化がパズル的な面白さを演出。レトロでゲーム的な印象
ランダムなピクセルノイズパターンでScene AがScene Bにじわじわと溶け込む遷移
映画的フェード / 夢の場面 / 回想シーン / 時間経過
柔らかく溶け合う遷移が「融合」「変容」を暗示。穏やかで詩的な印象
Scene Aの右下角がめくれるようにCSS 3D transformで回転し、裏のScene Bが露出
電子書籍 / デジタルマガジン / フォトアルバム / ストーリーブック
ページをめくる物理的な動きが「読書体験」を想起させ、親しみやすい
Scene Aが拡大して消え、奥からScene Bが拡大して出現するズーム貫通ワイプ
ドリルダウンナビ / 階層遷移 / 地図ズーム / ゲームステージ移行
ズームインが「深く入り込む」探究心を刺激。空間的な没入感を演出
Scene BがScene Aを押し出すように左方向へ同時スライドする物理的なワイプ
カルーセル / タブ切替 / カード送り / スワイプナビゲーション
押し出す動きが「次へ進む」勢いを表現。テンポよい連続性を感じさせる
Scene Bが右から左へScene Aの上に覆い被さるようにスライドインするワイプ
モーダル表示 / パネルオーバーレイ / サイドメニュー / 通知パネル
上に重なる動きが「更新」「上書き」を暗示。新情報の到来を表現
回転するバーが通過しながらScene AをScene Bに塗り替えるダイナミックなワイプ
スポーツ中継 / アクション系 / ゲーム切替 / ダイナミック演出
回転のエネルギーが「変革」「転換」を力強く表現。アクティブな印象
放射状のセグメントが中心から外側へ開いてScene Bが現れるラジアルワイプ
ロゴ表示 / エネルギー系演出 / 太陽光表現 / 放射状UI
放射状の展開が「エネルギーの放出」「覚醒」を暗示。力強い印象
モザイクタイルが順次反転してScene AからScene Bに切り替わるタイルフリップワイプ
モザイクアート / パズルゲーム / クイズ番組 / インフォグラフィック
タイルの反転が「発見」「解明」を一つずつ表現。インタラクティブ感を演出
水面の波紋のように同心円が広がりながらScene Bが揺らぎとともに出現するワイプ
水系演出 / 幻想的なシーン / ドリーム演出 / 自然テーマ
波紋が「波及」「影響の広がり」を暗示。穏やかで幻想的な印象
Scene Aがピクセル化して粗くなり、ピクセルが解消されるとScene Bが現れるワイプ
レトロゲーム / デジタルアート / テック系 / グリッチ演出
ピクセル化が「デジタル変換」を表現。テクノロジー感と懐かしさを共存
グリッチノイズのようにランダムな水平ストリップが乱れながらScene Bに切り替わる
サイバーパンク / ホラー / テック系 / 破壊的演出
信号の乱れが「異常」「不安定」を表現。緊張感とエッジの効いた印象
白いフラッシュが一瞬画面を覆い、光が収まるとScene Bに切り替わっているカット
カメラフラッシュ / 衝撃演出 / 場面転換 / 写真撮影風
フラッシュが「瞬間」「インパクト」を表現。強烈で記憶に残る印象
有機的な楕円clip-pathがモーフィングしながら拡大してScene Bが現れる流体ワイプ
オーガニック系 / アート作品 / クリエイティブサイト / ブランド演出
有機的な形状変化が「生命感」「創造性」を表現。柔らかく芸術的な印象
渦巻き状にマスクが広がりScene Bが螺旋軌道で徐々に露出するスパイラルワイプ
サイケデリック / 催眠演出 / トンネル効果 / ファンタジー系
螺旋の動きが「吸い込まれる」没入感を生む。異世界への導入に最適
マトリックス風の文字列が上から流れ落ち、文字が消えるとScene Bが現れるワイプ
サイバー演出 / ハッカー系 / SF映画 / テック系プレゼン
流れるコードが「デジタル世界」「解読」を表現。テクノロジカルな神秘感
Scene Aがガラスのように破片に砕けて飛散し、背後のScene Bが現れる破壊ワイプ
アクション演出 / ゲームオーバー / 衝撃的場面転換 / 破壊エフェクト
破砕が「破壊」「解放」を暗示。衝撃的でインパクトの強い場面転換
12. タイトルカード&フレーム(Title Cards & Frames)
22種タイトル文字が中心からスケールアップし、装飾ラインが四辺に伸びる
映画タイトル / エピソード冒頭 / チャプター表示 / ロゴ表示
中心から広がる動きが「主役感」と「堂々とした登場」を演出
タイトルとサブテキストが左右からスライドし、中央でロックイン
番組タイトル / 対戦画面 / VS表示 / イベント告知
左右からの合流が「合体」「決定」のイメージを生む
装飾フレームが一筆書きのように四辺を描画し、最後にタイトルが表示
高級感あるタイトル / 証書風 / ギャラリー / フォトフレーム
手描きの軌跡が「手間をかけた特別感」を演出する
上下にレターボックス(黒帯)が閉じてからタイトルがフェードイン
映画予告 / シネマティック演出 / ドラマチック場面転換 / PV冒頭
レターボックスが「映画的」「シネマスコープ」の高級感を生む
パーティクルが飛び交い集約した後、タイトル背景が形成される
ゲームOP / ファンタジー演出 / 魔法エフェクト / テクノ系タイトル
粒子の収束が「エネルギーの集中」「覚醒」を暗示する
画面が左右に割れてタイトルが露出する開幕演出
ドラマチックOP / 重厚な場面転換 / ゲームステージ開始 / カーテンオープン
「幕が開く」メタファーが期待感と高揚感を誘う
タイトルが遠方から高速ズームインし、放射状ブラーが残像を演出
アクション系タイトル / スポーツ中継 / インパクトシーン / ロゴ登場
高速接近が「迫力」「緊迫感」「スピード感」を生む
グリッチノイズが走った後にタイトルが安定表示される
サイバーパンク / ホラー演出 / テクノ系 / ハッキング演出
不安定さが「デジタル」「異常」「緊張感」を演出する
グラデーションがタイトル文字上を横断してスイープする
プレミアム感 / ラグジュアリーブランド / 受賞表示 / ゴールド演出
光の走査が「輝き」「特別感」「高級」を暗示する
細いラインが伸びた後、ミニマルなタイポグラフィが表示される
アート系 / 建築 / ポートフォリオ / ミニマルデザイン
余白と線の緊張感が「洗練」「知性」「静謐」を表現
四隅にL字型ブラケットがアニメーションで出現し、タイトルを囲む
カメラUI / ターゲットロック / 写真フレーム / HUD風デザイン
四隅のフレームが「注視」「フォーカス」「捕捉」を表現
円形フレームがSVGストロークで描画され、中央にタイトルが表示
ロゴ演出 / エンブレム / バッジ表示 / 完了マーク
円の完成が「完全」「統一」「達成」を象徴する
文字が1文字ずつ時間差で出現するタイポグラフィ演出
テキストアニメ / タイプライター / ドラマ字幕 / ゲームUI
文字の逐次出現が「物語の始まり」「語りかけ」を感じさせる
タイトルが表示された後、下に反射テキストとシマー効果が出現
水面演出 / 高級感 / ロゴアニメーション / エレガントなOP
反射が「深み」「奥行き」「格調高さ」を演出する
ネオン発光するフレームがタイトル周囲に出現し、脈動する
ナイトクラブ / レトロ / サイバーパンク / ネオン看板
ネオンの発光が「夜」「都会」「エネルギッシュ」を表現
斜めストライプがスライドインし、その上にタイトルが表示される
警告表示 / 工事中 / セール / カジュアルなバナー
ストライプが「注意喚起」「工業的」「力強さ」を表現
単語が縦に積み上がるように1つずつアニメーションで登場
詩的な演出 / クレジット / モダンタイポ / 歌詞表示
縦の積み上げが「構築」「詩的リズム」「重層感」を表現
円形マスクが中央から広がってタイトルを露出させる
ドラマチック登場 / ロゴ演出 / フォーカスイン / ポータル
マスクの拡大が「発見」「開示」「世界が広がる」を表現
設計図風のグリッドと寸法線が描画された後、技術テキストが出現
建築 / エンジニアリング / テクニカル / 設計図風デザイン
青焼き設計図が「精密」「技術力」「計画性」を表現
スタンプ/印鑑が上から押し付けられるように着地し、振動する
承認マーク / 認証 / 合格表示 / レトロポスター
スタンプの着地が「認定」「確定」「オフィシャル」を象徴
3→2→1とカウントダウンした後にタイトルが表示される
イベント開始 / レース / ゲーム開始 / 番組OP / ライブ配信
カウントダウンが「期待の高まり」「クライマックスへの昂揚」を生む
文字が波のように上下にうねりながら登場するテキストアニメーション
遊び心あるタイトル / キッズ向け / ポップ演出 / 音楽系
波の動きが「リズム」「楽しさ」「生命力」を表現する
13. データビジュアライゼーション(Data Visualization)
22種棒グラフが下から順番に成長するスタガーアニメーション
売上データ / 比較分析 / レポート画面 / ダッシュボード
成長の動きが「上昇」「達成」を視覚化し、データへの注目を促す
円グラフのセグメントが一つずつ描画されていくアニメーション
構成比表示 / マーケットシェア / 予算配分 / アンケート結果
全体から部分への分割が「構成」「割合」の理解を直感的にする
折れ線グラフのパスが左から右へ順に描画されるアニメーション
時系列データ / トレンド分析 / 株価チャート / アクセス推移
軌跡を辿る動きが「流れ」「変遷」を自然に伝え、ストーリーを生む
ドーナツ型チャートのセグメントが順番にアニメーションで出現
KPI表示 / 進捗状況 / カテゴリ比率 / リソース配分
中央の空白が「余白」「焦点」を作り、中心に数値を配置できる
面グラフが左から右へ塗りつぶされながら展開するアニメーション
累積データ / 領域比較 / ストリームグラフ / 収益推移
面の広がりが「量」「蓄積」を視覚化し、ボリューム感を与える
散布図のドットがひとつずつポップアップして出現するアニメーション
相関分析 / 分布表示 / クラスタ可視化 / 統計データ
点の散らばりが「多様性」「分布」を示し、パターンの発見を促す
横棒グラフが左から右へ伸びるスタガーアニメーション
ランキング表示 / スキルバー / 投票結果 / 項目比較
横への伸びが「進行」「到達度」を直感的に表現する
積み上げ棒グラフのセグメントが順番に積み重なるアニメーション
内訳表示 / 複合データ / カテゴリ別集計 / 年度比較
積み上がりが「累積」「構成」を示し、全体と部分の関係を明確にする
半円ゲージの針がスイープして値を指すアニメーション
速度メーター / パフォーマンス指標 / 健康スコア / 信頼度
針の動きが「計測」「判定」を連想させ、即座に良し悪しを伝える
数値が0から目標値まで高速でカウントアップするアニメーション
統計数値 / フォロワー数 / 売上額 / ダウンロード数
数字の変動が「成長」「インパクト」を演出し、大きな数値を印象づける
ミニ折れ線グラフがコンパクトに描画されるアニメーション
インライン指標 / テーブル内チャート / KPIカード / ミニトレンド
最小限の情報でトレンドを伝え、文脈を損なわず一目で傾向がわかる
バブルが異なるサイズでポップアップ出現する散布図アニメーション
3次元データ / 市場分析 / 人口統計 / ポートフォリオ比較
サイズの違いが「重要度」「規模」を直感的に伝え、比較を容易にする
レーダーチャートのポリゴンが中心から広がって描画されるアニメーション
能力値表示 / 製品比較 / 多軸評価 / キャラクターステータス
多角形の広がりが「バランス」「総合力」を一目で把握させる
ファネル(漏斗)の各段階が上から順にアニメーション表示
コンバージョンファネル / 採用プロセス / 販売パイプライン / 離脱分析
段階的な絞り込みが「プロセス」「効率」を視覚的に表現する
ツリーマップの矩形が面積に応じてスタガーで出現するアニメーション
ディスク使用量 / ポートフォリオ配分 / カテゴリ面積 / 組織構成
面積の大小が「比重」「優先度」を空間的に理解させる
グリッドセルが色温度に応じて順番に色づくアニメーション
アクティビティ表示 / コミット履歴 / 温度分布 / 利用頻度
色の濃淡が「強度」「頻度」を直感的に伝え、ホットスポットを発見させる
円形プログレスリングが弧を描いて目標値まで充填されるアニメーション
達成率 / ローディング / スキルレベル / 完了状態
円の充填が「完成度」「進捗」を一目で伝え、残りの量も直感的にわかる
滝グラフのセグメントが上から階段状にカスケード表示されるアニメーション
損益分析 / 予算変動 / 増減要因分解 / 財務レポート
段階的な増減が「因果関係」「要因分解」を論理的に伝える
ヒストグラムの棒が正規分布の形状で成長するアニメーション
度数分布 / 統計分析 / 品質管理 / テスト成績分布
分布の形が「集中」「ばらつき」を視覚化し、データの特性を即座に把握させる
フローパスがノード間をアニメーションしながら接続されるサンキーダイアグラム
エネルギーフロー / ユーザー遷移 / 予算配分 / データパイプライン
流れの太さが「量」「重要度」を示し、全体の構造を俯瞰的に理解させる
水平タイムラインのラインが伸び、イベントが順番に出現するアニメーション
沿革 / プロジェクト工程 / 歴史年表 / リリース履歴
時間の流れに沿った配置が「進展」「歴史」を自然に物語る
複数のKPIカードがスタガーでアニメーション表示されるダッシュボード
経営ダッシュボード / 分析レポート / モニタリング画面 / サマリーページ
複数指標の同時提示が「全体像」「一覧性」を提供し、意思決定を支援する
14. アイコン&シンボル(Icon & Symbol)
20種SVGのstroke-dasharray/dashoffsetを使い、アイコンのストロークが一筆書きで描画される
ロゴ表示 / 機能紹介 / チュートリアル / ローディング完了
手描きの温もりと「今まさに出現する」ライブ感を演出
アイコンが下から上へ色で塗りつぶされるクリップパスアニメーション
レベルアップ / ゲージ充填 / スキル解放 / 進捗表示
エネルギーが注がれ満たされる感覚。達成感を視覚化
アイコンがscale(0)から回転しながら拡大して登場する
設定ギア / リフレッシュ / 読み込み完了 / アイテム獲得
機械的・技術的な印象。ギアやツールに最適
アイコンが弾むように登場する弾性モーション
通知到着 / 新機能バッジ / いいね反応 / ゲーム報酬
楽しさ・ポジティブさを強調。ユーザーの注目を自然に引く
再生ボタンが一時停止アイコンへスムーズにモーフィングする
再生/停止 / メニュー開閉 / 状態切替 / トグルUI
状態変化を自然に伝える。操作の因果関係を視覚化
アイコンが光るアウトラインと共に脈動するように拡縮を繰り返す
アクティブ状態 / 注目ポイント / 接続中 / ライブ配信中
生命感・脈動感。「今動いている」存在感を持続的に示す
アイコンが左右に震えてユーザーの注意を引く警告モーション
エラー通知 / 未入力警告 / 新着メッセージ / 緊急アラート
不安定さ・緊急性を伝える。見逃し防止に効果的
アイコンが3Dパースペクティブで回転して表面が現れる
カード裏返し / 情報開示 / 切替アニメーション / 結果発表
隠されていたものの出現。期待感・発見の喜びを演出
アイコンが上方から大きく登場し、ドンと着地するインパクト演出
承認スタンプ / 認証バッジ / 完了マーク / 品質保証
権威・確定感。重みのある決定的な印象を与える
アイコンのパーツが四方から飛んできて一つのアイコンに組み上がる
ビルドプロセス / チーム結成 / パズル完成 / 組立表現
統合・構築の過程を可視化。達成感と構造理解を促す
アイコンのアウトラインが描画された後、内部が塗りつぶされる2段階演出
お気に入り登録 / 選択確定 / ブックマーク / いいねアクション
段階的な完成。選択→確定のフィードバックを二重に表現
アイコンが連続して小刻みに揺れるかわいらしいモーション
削除確認 / 編集モード / iOSアプリ並べ替え / 注目アイテム
不安定さの中のかわいらしさ。操作可能性を暗示する
アイコンがポップインで登場し、周囲にキラキラ粒子が飛び散る
達成 / 報酬獲得 / 新規解放 / お祝い演出
華やかさ・特別感。成功体験を強化し満足度を高める
スワイプジェスチャーで旧アイコンが去り新アイコンが入ってくる
タブ切替 / カルーセル / ビュー変更 / モード切替
方向性のある切替。次の画面・状態へ進む実感を与える
ローディングスピナーが回転し、完了時にチェックへ変化する
データ読み込み / 送信中 / 処理待ち / ファイルアップロード
処理中の安心感。動き続けることで「止まっていない」と伝える
円が描画されつつ中央にチェックマークがドローオンで出現する成功演出
送信完了 / バリデーション成功 / タスク完了 / 支払い成功
安心感・完了感。ユーザーの操作が正しかったことを即座に伝達
×マークがドローオンで描画された後、全体がシェイクするエラー演出
入力エラー / 認証失敗 / 拒否 / 404エラー
明確な否定・失敗。視覚と動きの二重表現でエラーを確実に伝える
矢印がスムーズに方向転換する(右→下→左→上)モーフィング
ナビゲーション / ソート順変更 / 展開/折畳 / スクロール誘導
方向の明示的な変化。ユーザーの視線を新しい方向へ自然に誘導
アイコン右上に通知バッジがポップアニメーションで出現する
未読通知 / メッセージ数 / カートアイテム数 / アラート表示
見逃し防止の視覚的フック。数字の出現で即座に注意を引く
アイコンがステッカーを剥がして貼り付けるような3D回転で登場する
ラベル付与 / バッジ授与 / シール演出 / コレクション追加
物理的な貼り付け感。デジタルに触覚的なリアリティを付与
15. 背景&テクスチャ(Background & Texture)
18種CSSグラデーションの色が滑らかにアニメーションし、背景の雰囲気が変化し続ける
LP背景 / ヒーローセクション / 雰囲気演出 / アンビエント背景
色の流動が「変化」「創造性」を暗示し、見る者を引き込む没入感を生む
無数の微粒子がCanvasに浮遊し、緩やかに移動するアンビエント背景演出
テック系LP / ポートフォリオ / ダッシュボード背景 / 宇宙風演出
粒子の浮遊が「自由」「広がり」を暗示し、未来的で知的な印象を与える
星が奥から手前に流れるパララックス深度効果で、宇宙空間を飛行する感覚を演出
SF演出 / ゲームOP / 宇宙テーマLP / ワープ演出
奥行き方向の移動が「前進」「冒険」を暗示し、ワクワク感と没入感を生む
グリッド線がスクロールしながら遠近感を表現するサイバー風の背景パターン
レトロフューチャー / ゲーム背景 / テクノロジー系UI / データ可視化
規則的なグリッドが「秩序」「構造」を暗示し、テクノロジカルな信頼感を与える
柔らかい円形のボケライトがふわふわと浮遊する、幻想的な背景演出
写真系サイト / ウェディング / 夜景演出 / エレガントな背景
ぼけた光が「夢幻」「ロマンチック」を暗示し、柔らかく温かい印象を与える
Canvasに細い雨粒が上から下へ落下し続ける天候エフェクト
天気演出 / ムーディーな背景 / ゲーム環境 / 感傷的な雰囲気
雨が「静寂」「内省」を暗示し、メランコリックで詩的な雰囲気を演出
雪の結晶がゆっくり落下しながら水平方向にも揺れる、冬の背景演出
冬季キャンペーン / クリスマスLP / 天候演出 / ファンタジー背景
雪の静かな落下が「穏やかさ」「純粋さ」を暗示し、清潔感と静謐さを演出
ランダムなノイズ/グレイン粒子がちらつくフィルムグレイン風オーバーレイ
映画風演出 / レトロフィルター / テクスチャ背景 / ヴィンテージ風
ノイズが「アナログ感」「手触り」を暗示し、デジタル一辺倒を和らげる温もりを付加
水面に落ちた滴のように同心円の波紋が広がり消えていく、水面風エフェクト
水のテーマ / 禅・瞑想系 / リラクゼーション / インタラクティブ背景
波紋が「波及」「影響の広がり」を暗示し、穏やかで瞑想的な印象を与える
上部から差し込むボリューメトリックな光の筋(ゴッドレイ)が脈動する演出
神秘的演出 / 森林シーン / 教会風 / ドラマチック背景
光の筋が「希望」「神聖さ」を暗示し、荘厳で感動的な雰囲気を醸成する
泡が下部から浮かび上がり、ゆらゆら揺れながら上昇して消える水中演出
水中テーマ / 飲料広告 / アクアリウム / 爽やかな背景
泡の上昇が「軽やかさ」「解放」を暗示し、爽快でリフレッシュ感のある印象
三角形・四角形・六角形などの幾何学模様が回転しながら反復表示される背景
テクノロジー系 / ブランド背景 / パターンデザイン / 幾何学アート
幾何学図形の反復が「秩序」「数学的美」を暗示し、知的で洗練された印象
複数のサイン波ラインが位相差をつけて流れる、海や音波を連想させる背景
音楽系サイト / オーディオ可視化 / 海テーマ / サウンドウェーブ
波の流れが「リズム」「調和」を暗示し、心地よい律動感を感じさせる
カラフルな紙吹雪が回転しながら落下する、お祝い・達成演出
成功画面 / 購入完了 / お祝い / ゲームクリア / 記念日
紙吹雪が「祝福」「達成」を暗示し、幸福感とお祭り気分を最大化する
複数レイヤーの煙/霧がゆっくり漂い、幻想的な雰囲気を醸し出す背景演出
ダークテーマ / ミステリアス演出 / ホラー系 / 高級感のある背景
漂う霧が「神秘」「不確実性」を暗示し、深みと奥行きのある雰囲気を創出
緑色の文字列が列ごとに異なる速度で落下するマトリックス風デジタルレイン
ハッカー風UI / サイバーセキュリティ / テクノロジー演出 / SF背景
流れるコードが「デジタル世界」「ハッキング」を暗示し、テック感を最大化
ランダムな稲妻/プラズマアークがCanvasに発生し消滅する電撃エフェクト
エネルギー演出 / SF背景 / ゲームエフェクト / テスラコイル風
電撃が「エネルギー」「パワー」を暗示し、迫力と緊張感のある印象を与える
複数のグラデーションポイントが個別に移動し、色の融合が変化し続けるメッシュ背景
Apple風背景 / モダンLP / ブランドサイト / クリエイティブ背景
色の融合と変形が「流動性」「革新」を暗示し、洗練されたプレミアム感を演出
16. 3D&パース(3D & Perspective)
18種Y軸回転でカードが裏返り、背面の情報が現れる。backface-visibilityで制御
プロダクトカード / クイズ回答 / 情報切替 / ゲームカード
「裏側を見せる」動きが秘密の開示・発見の喜びを刺激する
3Dキューブが回転して各面を順に表示。4面に異なるコンテンツを配置可能
コンテンツ切替 / ステップ表示 / ダッシュボード / プレゼン
立体回転が「多面性」「奥行き」を暗示し、情報の豊富さを感じさせる
6つのアイテムが3D円環上に配置され、Y軸回転で次々と前面に来る
商品カタログ / ギャラリー / チーム紹介 / ポートフォリオ
回転展示が「選択肢の豊富さ」を表現。ショーケースのような特別感
左右のページが背表紙を軸に開く。rotateYで奥行きのある展開
電子書籍 / カタログ / 招待状 / ストーリー演出
本を開く動作が「知識の開示」「物語の始まり」を暗示する
パネルが上辺を軸にrotateXで折り畳み状態から展開。蓋が開くイメージ
メニュー展開 / FAQ開閉 / 通知パネル / ドロップダウン
折り畳みが「収納→展開」を物理的に表現。整理整頓の印象
perspective付きでX/Y軸に交互傾斜。立体的な揺れで奥行き感を強調
カードホバー / 3D UI効果 / インタラクティブ要素 / 商品表示
微妙な傾きが「手に取って見ている」ような臨場感と親密さを生む
左辺を軸にrotateYでドアが開く。パネルの背後にコンテンツが見える演出
メニュー開閉 / リビール演出 / ナビゲーション / ポータル
ドアを開ける動作が「招待」「歓迎」「新世界への入口」を暗示
重なったカードが手前からrotateXで奥へめくれ、次のカードが順番に現れる
カードデッキ / 画像ギャラリー / ニュースフィード / タスクリスト
めくる動作が「次へ進む」「発見」を暗示。ページをめくる楽しさ
Y軸回転しながら奥から手前に登場。perspectiveで立体的な出現演出
モーダル表示 / カード登場 / ヒーロー要素 / プロダクト紹介
回転登場が「舞台袖から現れる」劇的な印象。注目度が高い
深度の異なるレイヤーがマウス位置に応じて異なる速度で動く。視差効果で奥行き表現
ヒーローセクション / ゲームBG / インタラクティブカード / ポートフォリオ
視差が「空間の深さ」を感じさせ、没入感とリアリティを高める
テキストがX軸回転でシリンダー状に巻かれ、ロールしながら次の面を表示
数値カウンター / スロットマシン / テキスト切替 / ティッカー
ロール動作が「切り替え」「更新」を物理的に表現。メカニカルな印象
三角柱が120度ずつ回転して3つの面を順に表示。独特な幾何学的切替演出
テキストローテーション / バナー切替 / コンテンツスイッチ
三角柱の回転がユニークな幾何学的美しさを演出。印象に残る
4枚のパネルが交互にrotateYで折り畳まれ、アコーディオンのように開閉
FAQ / メニュー展開 / 追加情報表示 / パネル開閉
蛇腹の開閉が「情報の圧縮と展開」を直感的に表現。整理された印象
奥からtranslateZで手前に飛び出しながらスケールアップ。迫力ある登場
CTA強調 / 通知ポップ / ゲームアイテム / 商品ハイライト
手前への飛び出しが「重要性」「緊急性」を強調。画面を飛び出す迫力
アイソメトリック視点のグリッドが1セルずつ浮き上がりながら構築される
ゲームマップ / ダッシュボード / インフォグラフィック / 3D都市
積み上げ動作が「構築」「成長」を暗示。戦略的・建設的な印象
perspectiveトンネルの中を手前に向かってズーム。矩形リングが奥から手前に飛来
ワープ演出 / トランジション / SF風UI / スピード感のある場面転換
奥からの接近が「加速」「突入」を暗示。スピード感と没入感
上辺を支点にX軸回転で振り子のように揺れながら正面を向く。3D振り子登場
通知カード / ドロップダウン / メニュー登場 / ラベル表示
振り子の動きが「吊り下がり」「物理的実在感」を与える。自然な登場
箱の4面が中心面から展開図のように平らに開く。rotateX/Yで各面が倒れる
パッケージ演出 / 展開図アニメ / プロダクトリビール / 教育コンテンツ
展開が「開封」「中身を見せる」メタファー。ワクワク感と発見の喜び
17. カラー&グラデーション(Color & Gradient)
16種リニアグラデーションの角度が滑らかに360度回転する
ローディング / 背景演出 / カードハイライト / アイキャッチ
回転するグラデーションが「流動」「進行中」の印象を与える
放射状グラデーションが拡大・縮小を繰り返す脈動エフェクト
注目喚起 / ボタンホバー / 通知 / エネルギー表現
脈動が「生命」「鼓動」を暗示し、有機的な印象を与える
コニック(円錐)グラデーションが回転する。プログレスリング風
プログレス / ローディング / レーダー / タイマー
円錐回転が「スキャン」「走査」を表現し、処理中の感覚を伝える
HSLの色相を0〜360度まで連続的に変化させ、スペクトラムを一周する
ゲーム演出 / パーティ / レインボー / ステータス変化
虹色の循環が「多様性」「無限」を象徴する
グラデーションの中心位置が要素内を移動する
ホバーエフェクト / スポットライト / 追跡UI / インタラクティブ背景
光源の移動が「追従」「インタラクティブ」な印象を生む
複数のグラデーションストップ(色停止点)の位置が同時にシフトする
データ可視化 / グラフ / 進捗バー / ヒートマップ
多層の色変化が「複雑さ」「豊かさ」を表現する
高速に色がフラッシュのように切り替わるシーケンス
衝撃演出 / ダメージ / 警告 / ストロボ / カウントダウン
急速な色変化が「衝撃」「緊張」を引き起こす
RGBの各チャンネルがわずかにずれて色収差を発生させる
グリッチ / レトロ / カメラ風 / サイバーパンク / VHS風
色のズレが「歪み」「デジタルノイズ」の雰囲気を演出する
2色のトーンが別のカラーパレットへ滑らかに変化する
テーマ切替 / ムードチェンジ / スライドショー / ブランディング
2色の変化が「気分転換」「変容」を穏やかに伝える
虹色のグラデーションが波のように横方向に流れる
ゲームUI / 祝祭演出 / プライド / ファンタジー / ロゴ
流れる虹が「祝福」「歓喜」「多彩」の強い印象を与える
グラデーションをマスクとして使い、下の要素を段階的にリビールする
画像表示 / テキスト出現 / ローディング / スライドイン
段階的な露出が「発見」「期待」を効果的に演出する
ネオンサインのように色が脈動しながら発光するエフェクト
ネオンサイン / サイバーパンク / ナイトクラブ / ゲームUI
発光の明滅が「夜」「都市」「未来」の雰囲気を醸成する
ある色から別の色へ粒子的に溶けるように変化する
シーン遷移 / テーマ変更 / ムード切替 / 状態変化
溶解する変化が「変容」「移行」を自然に感じさせる
メタリックなハイライトが表面を横切るように流れる
高級感演出 / カード / ロゴ / バッジ / メダル
光沢の走りが「高級」「プレミアム」「価値」を表現する
ボーダー(枠線)にアニメーションするグラデーションを適用
カードUI / 入力フォーム / 選択状態 / フォーカス表示
光る枠が「選択中」「アクティブ」の状態を華やかに示す
ホログラムのように角度によって虹色に変化するイリデッセント効果
カード / ID / チケット / プレミアム演出 / コレクション
見る角度で変わる色が「希少」「特別」「未来的」な価値を感じさせる
18. 合成&ブレンド(Composite & Blend)
14種2つのシェイプの重なり部分が乗算合成で暗くなる。色が重なるほど深い色になる
影の表現 / テクスチャ合成 / ヴィンテージ風加工 / 印刷物デザイン
色の掛け合わせが「深み」「重厚感」を演出し、高級感を与える
重なり部分がスクリーン合成で明るくなる。乗算の逆で光を加算するような効果
発光演出 / レンズフレア / ライトリーク / 光の重なり表現
明るさが増す合成が「希望」「輝き」を暗示し、ポジティブな印象を与える
multiplyとscreenの組み合わせ。暗い部分はより暗く、明るい部分はより明るくなる
コントラスト強調 / テクスチャオーバーレイ / 写真加工 / ドラマチック演出
コントラスト増強が「インパクト」「ドラマ性」を高め、視線を引き付ける
上下レイヤーの色の差分を取り、反転したような鮮やかな色を生成する
サイケデリック演出 / ネガポジ反転 / アート表現 / 音楽ビジュアライザ
予想外の色彩が「驚き」「非日常」を演出し、実験的な印象を与える
下のレイヤーを明るくして上のレイヤーの色で焼く。強烈なハイライトを生成
光線演出 / 爆発エフェクト / ネオンサイン / 輝くハイライト
眩い発光が「エネルギー」「強さ」を象徴し、目を引く強烈な印象
上のレイヤーの輝度のみを下のレイヤーに適用。色相・彩度は下のレイヤーを維持
明暗調整 / 写真の雰囲気統一 / モノクロ風加工 / 映画的カラーグレーディング
輝度分離が「洗練」「繊細さ」を表現し、プロフェッショナルな印象
backdrop-filterでぼかしフィルタをかけたオーバーレイが背景のシェイプを透過ぼかしする
フロストガラス / すりガラス効果 / UIオーバーレイ / フォーカス演出
すりガラス越しの視界が「奥行き」「レイヤー感」を演出し、先進的な印象
filter: brightnessが脈打つように明暗を繰り返す。シェイプが呼吸するような演出
警告表示 / ハートビート / 集中線 / エネルギー充填
明滅が「鼓動」「生命力」を暗示し、有機的で緊張感のある印象
filter: contrastがアニメーションし、淡い色から鮮烈な色へコントラストが変化する
フォーカスイン / ドラマチック演出 / 映画風カラー / ビフォーアフター
コントラスト変化が「焦点化」「覚醒」を暗示し、集中力を喚起する
filter: hue-rotate()で色相環を一周する。全ての色を巡りながら元に戻る
カラーサイクル / レインボー演出 / モード切替 / 色変化アニメーション
色相の全域を巡る動きが「多様性」「変化」を表現し、万華鏡のような魅力
filter: saturate()が波のように増減し、彩度がモノクロから極彩色まで変化する
感情表現 / ハイライト演出 / 雰囲気切替 / ムービーフィルター
彩度の波が「感情の高まり」を表現し、視覚的なリズムを生む
filter: sepia()でセピア調に変化し、ノスタルジックなトーンを経て元に戻る
回想シーン / ヴィンテージ演出 / 時間経過表現 / フォトエフェクト
セピアが「懐かしさ」「古い記憶」を暗示し、感傷的な雰囲気を演出
2つのレイヤーをscreenブレンドで重ね、フィルム写真の二重露光を再現する
アート写真 / MVエフェクト / ポートレート合成 / ドリーミーな演出
二重の像が「記憶の重なり」「夢」を暗示し、幻想的な世界観を表現
backdrop-filter: blur + saturateで半透明ガラス風カードが背景を透過ぼかしする
カードUI / ダッシュボード / モダンUI / iOS風デザイン
ガラスの透明感が「先進性」「洗練」を演出し、未来的でモダンな印象
19. Remotion固有API(Remotion-Specific APIs)
20種Remotionのinterpolate()関数を再現。入力範囲を出力範囲に線形マッピングし、値を補間する
位置制御 / サイズ変化 / 不透明度遷移 / 任意のプロパティ補間
滑らかな値変化が「計算された精密さ」と「制御された美しさ」を表現
Remotionのspring()関数を再現。物理ベースのバネ減衰振動で自然なアニメーションを生成
登場演出 / バウンス / 物理的な動き / オーバーシュート効果
物理シミュレーションが「生き生きとした実在感」と「有機的な動き」を演出
RemotionのuseCurrentFrame()フックを再現。現在のフレーム番号をリアルタイムに表示する
フレーム同期 / タイミング制御 / デバッグ表示 / 進捗計算の基盤
数値の更新が「精密な時間管理」「フレーム単位の制御力」を可視化する
Remotionの<Sequence>コンポーネントを再現。各要素にfrom/durationDurationを指定して時間軸上に配置
タイムライン制御 / 順次登場 / シーン構成 / パートごとの独立制御
時間的な構造化が「物語性」「段階的な展開」を演出する
Remotionの<Series>コンポーネントを再現。各要素が前の要素の終了後に自動的に連続再生される
連続アニメーション / スライドショー / ステップバイステップ / 自動連結
途切れない連続性が「流れ」「リレー」のような一体感を表現する
Remotionの<Loop>コンポーネントを再現。指定区間のアニメーションを自動的に繰り返す
ローディング / 背景アニメーション / 反復モーション / 待機状態の演出
繰り返しが「継続」「安定」「リズム」を感じさせ、心地よい周期性を生む
Remotionの<Freeze>コンポーネントを再現。アニメーション途中の特定フレームで静止させる
一時停止演出 / ハイライト / 静止画キャプチャ風 / ドラマチックな停止
突然の静止が「衝撃」「注目」を生み、時間の停止感で緊張を演出する
Remotion.Easingモジュールの各イージング関数を並列比較。linear/easeIn/easeOut/easeInOutの挙動差
イージング選定 / 動きの比較 / 学習・リファレンス / プレゼン資料
比較表示が「選択肢の理解」「最適解の発見」を促し、知的な満足感を与える
RemotionのmeasureSpring()を再現。バネパラメータからアニメーション持続時間と振動波形をグラフ化
パラメータ調整 / 持続時間の事前計算 / デバッグ / アニメーション設計
波形の可視化が「科学的理解」「パラメータの直感的把握」を促進する
damping: 10
duration: --
Remotionの<AbsoluteFill>を再現。複数レイヤーが同じ領域を完全に覆い、重なりで合成する
レイヤー合成 / 背景+前景 / オーバーレイ / 複数要素の重ね合わせ
レイヤーの積み重ねが「深み」「複合的な表現力」を可視化する
Remotionの@remotion/transitionsのfade()を再現。コンポーネントAがフェードアウトしBがフェードイン
シーン切替 / スライドショー / ページ遷移 / コンテンツ差し替え
滑らかな溶け合いが「自然な移行」「穏やかな変化」を演出する
Remotionの@remotion/transitionsのslide()を再現。Bが横からスライドしてAを押し出す
カルーセル / ページ送り / パネル切替 / 横スクロール型遷移
方向性のある移動が「前進」「次のステップ」を暗示する
Remotionの@remotion/transitionsのwipe()を再現。マスクが左から右へ拭き取るようにシーンを切替
映像的切替 / ビフォーアフター / ドラマチック遷移 / プレゼン
拭い取る動作が「覆いを剥がす」「新しい面の発見」を暗示する
Remotionのタイムラインスクラバーを再現。スライダーでフレームを自在にシーク可能
プレビュー制御 / フレーム指定 / インタラクティブ操作 / 編集UI
直接操作が「完全な制御権」「自由な探索」を体感させる
RemotionのfpsプロパティによるフレームレートをCSSのstep()で可視化。30fps vs 60fpsの滑らかさの違い
フレームレート選択 / 品質比較 / パフォーマンス調整 / 出力設定
段階的な動きと滑らかな動きの対比が「品質の違い」を直感的に理解させる
RemotionのdurationInFramesプロパティを再現。同じ動きでも持続フレーム数で速度が変わる
速度調整 / テンポ制御 / スローモーション / クイックカット
同一モーションの速度差が「緩急」「テンポ感」の重要性を体感させる
Remotionのspring()のdelay引数を再現。各要素に異なるディレイを設定して連鎖的に登場させる
スタガー登場 / リスト表示 / カスケード / ウェーブ効果
時間差が「波紋」「伝播」を演出し、リズミカルで心地よい連鎖感を生む
RemotionのinterpolateColors()を再現。フレーム進行に応じてRGBA色空間で滑らかに色を補間する
グラデーション遷移 / テーマ切替 / 時間帯表現 / ムード変化
色の連続変化が「移り変わり」「グラデーションの美しさ」を表現する
Remotionの<Composition>を再現。独立したタイムラインを持つネストされた構造で個別にアニメーション
コンポーネント設計 / 独立制御 / ネスト構造 / 再利用可能な単位
入れ子構造が「階層」「整理された複雑さ」を示し、構造的な美しさを表現
RemotionのrenderMedia() / onProgress を再現。フレーム単位のレンダー進捗バーをシミュレーション
レンダリング表示 / エクスポート進捗 / バッチ処理 / 完了通知
進捗バーが「確実な前進」「完了への期待」を可視化し安心感を与える
20. 実用テンプレート(Practical Templates)
24種3→2→1→GO!のカウントダウン。数字がスケールポップで切り替わる
動画オープニング / イベント開始 / ゲームスタート
期待感と緊張感を高め、注意を集中させる
ベルアイコンからテキスト展開、色が切り替わるインタラクティブボタン
YouTube風登録 / フォローボタン / アクション促進
マイクロインタラクションが操作の手応えと達成感を付与
4つのアイコンがスタガーで下からスライドイン
SNS共有バー / フッターリンク / プロフィール
順次登場が視線を誘導し、各アイコンへの認知を促す
枠線がドローで展開→テキストフェード→署名がスライドイン
名言表示 / テスティモニアル / レビュー引用
段階的な情報公開が読者の注意を引きつけ保持する
0→100%のバーアニメーションと数値カウントアップ
ファイルアップロード / スキル表示 / 達成度
進行の可視化が達成感と完了への期待を生む
右からスライドイン→3秒滞在→右へスライドアウト
成功通知 / エラー表示 / システムメッセージ
非侵入的な通知が体験を中断せずに情報を伝える
4種のスピナーを横並び表示(回転/ドット/パルス/バー)
データ読込中 / ページ遷移 / 処理待ち
動きのあるフィードバックが待ち時間のストレスを軽減
3カードがスタガーで起き上がり、中央カードがハイライト
料金プラン / サービス比較 / プラン選択
中央ハイライトが推奨プランへ自然に視線を誘導する
チェックマーク付きリストがスタガーでスライドイン
機能紹介 / メリット訴求 / 仕様一覧
順次表示がリスト各項目への注目度を均等に高める
- ✓無制限プロジェクト
- ✓カスタムドメイン
- ✓優先サポート
- ✓APIアクセス
- ✓チーム管理
グラデ背景上にテキスト登場→ボタンがパルスアニメーション
ランディングページ / 申込誘導 / メルマガ登録
パルスする行動喚起がクリック衝動を刺激する
5つのバッジがスタンプ風にポップインで登場
タグ表示 / スキルバッジ / カテゴリラベル
スタンプ動作が「認定・承認」の印象を与える
縦線が伸びながら3つのノードがフェードイン
沿革表示 / ロードマップ / ステップ説明
時系列の流れが「進歩」と「成長」の物語を演出
数値が0からカウントアップし最終値に到達する統計表示。ダッシュボードやインフォグラフィックに最適
KPI表示 / 実績紹介 / ランディングページ / データ可視化
数値の動的な増加が「成長」「信頼性」「具体的な実績」を直感的に伝える
タブクリックでアンダーラインがスライドし、コンテンツがフェード切替される。UIパターンの基本
コンテンツ切替 / 設定画面 / 商品詳細 / ダッシュボード
滑らかなスライドが「構造化された情報」「直感的な操作性」を演出
クリックで項目が展開・折りたたみされるFAQ形式のUI。コンテンツの整理に最適
FAQ / ヘルプ / メニュー / 設定パネル
段階的な情報開示が「整理された構造」「ユーザー主導の探索」を促す
6つの画像タイルがグリッド配置でスタガーフェードインする。ポートフォリオ表示に最適
作品集 / 商品一覧 / フォトギャラリー / ポートフォリオ
順次出現が「豊富なコンテンツ」「発見の楽しさ」を段階的に提供
画面が中央から左右に分割展開し、各面にテキストが出現する。比較・対比演出に最適
ビフォーアフター / 機能比較 / チーム紹介 / コンセプト提示
分割と統合が「二面性」「選択肢」「対比の明確さ」を表現
オーバーレイがフェードイン→モーダルがスケールポップ→閉じボタンで消滅する一連のUI演出
確認ダイアログ / 詳細表示 / ログインフォーム / 通知
背景暗転と浮上が「注目の集中」「重要な情報」を強く印象づける
画面上部の横バーが左から右に伸長し、読了進捗を示すインジケーター
記事進捗 / ローディング / ステップ表示 / タイムライン
進捗の可視化が「達成感」「残り量の把握」「読み進める動機」を与える
ボタンクリックで粒子に分解→散逸→再構築される演出。インタラクションの驚きを生む
送信ボタン / いいねボタン / 削除確認 / ゲームUI
分解と再生が「変容」「達成」「魔法のような体験」を演出
マスクがワイプで開き、ロゴにグロー効果が加わり定位置に定着する。ブランド演出の定番
オープニング / ブランディング / スプラッシュ / エンドロゴ
段階的な出現が「ブランドの格」「プレミアム感」「記憶への定着」を促進
2枚のカードと登録ボタンがスライドインする動画エンド画面。YouTube風のアウトロ演出
動画エンディング / 関連コンテンツ / CTA / チャンネル誘導
終了後の導線が「次のアクション」「継続的なエンゲージメント」を自然に促す
clip-pathで左右分割し、ドラッグで比較位置を変更できるスライダー。ビジュアル比較の定番
加工前後 / デザイン比較 / リフォーム / 性能比較
操作可能な比較が「変化の実感」「自分で確かめる納得感」を提供
引用文→名前→星評価の順にフェードインし、自動で次のレビューに遷移する口コミ表示
レビュー / お客様の声 / 推薦文 / ソーシャルプルーフ
段階的な出現と自動遷移が「信頼の積み重ね」「多くの支持」を演出
全カテゴリの統計
20カテゴリ・合計408種のシェイプアニメーションを収録しています。各エフェクトは以下の3つの実装方式のいずれかで構築されています。
CSS Animation — @keyframes と CSS プロパティによる宣言的アニメーション。Remotion の style prop 経由で適用。シンプルなトランジションやループに最適。
JavaScript / React — Remotion の useCurrentFrame() と interpolate() を組み合わせたフレーム単位の精密制御。spring() による物理ベースのイージングもここに含まれます。
Canvas / SVG — <canvas> や SVG パスを使った描画ベースのアニメーション。パーティクル、ジェネラティブアート、複雑なパス操作に使用。
各カテゴリの件数は以下の通りです。
| CAT | カテゴリ名 | 件数 |
|---|---|---|
| 01 | シェイプの登場 | 28 |
| 02 | シェイプの退場 | 18 |
| 03 | シェイプ変形 | 22 |
| 04 | パスドロー&ストローク | 24 |
| 05 | クリップ&マスク | 22 |
| 06 | spring()物理 | 20 |
| 07 | スタガー&群体 | 22 |
| 08 | グリッド&パターン | 24 |
| 09 | ジェネラティブ&ノイズ | 20 |
| 10 | ローワーサード&テロップ | 26 |
| 11 | トランジションワイプ | 28 |
| 12 | タイトルカード&フレーム | 22 |
| 13 | データビジュアライゼーション | 22 |
| 14 | アイコン&シンボル | 20 |
| 15 | 背景&テクスチャ | 18 |
| 16 | 3D&パース | 18 |
| 17 | カラー&グラデーション | 16 |
| 18 | 合成&ブレンド | 14 |
| 19 | Remotion固有API | 20 |
| 20 | 実用テンプレート | 24 |
| 合計 | 408 |