No. 01
アンティシペーションAnticipation
動く直前に、逆向きへ少し沈んでから飛び出す。
頼み方の例ボタンが右へ動く前に、いったん左へ少し沈む「アンティシペーション」を入れて
使いどころ: ボタン・アイコンの登場
動きは「名前」で頼むと、狙いどおりになる
AIに動画やWebページの動きを頼むとき、「いい感じに動かして」だけでは、狙った動きはなかなか出てきません。 動きの演出には、映像やアニメーションの世界で使われてきた名前があります。 その名前を添えて頼むと、AIは迷わずその動きを組んでくれます。 ここでは、よく使う24種類を、実際に動く見本と「頼み方の例」と一緒に並べました。
見本は画面に入ると動きます。見本をタップすると止めたり動かしたりできます。
動きの質感
ものの「動き方」につく名前です。同じ移動でも、どれを指定するかで重さや楽しさが変わります。
No. 02
フォロースルーFollow-through
本体が止まったあとも、旗や髪など端の部分が遅れて揺れる。
頼み方の例止まったあと旗だけ遅れて揺れる「フォロースルー」をつけて
使いどころ: キャラクター・マスコットの動き
No. 03
イージングEasing
動きの速さの変化。等速（上）と、ゆっくり始まりゆっくり止まる動き（下）の比較。
頼み方の例移動は等速ではなく「イーズインアウト」で、止まり際をやわらかく
使いどころ: あらゆる移動・拡大の基本
No. 04
バウンスBounce
落ちてきて、何度か跳ねながら止まる。
頼み方の例タイトルが上から落ちて2〜3回「バウンス」して止まるように
使いどころ: 告知の見出し・子ども向け
No. 05
ウィグルWiggle
小刻みに左右へ揺れて、注意を引く。
頼み方の例通知ベルを小刻みに「ウィグル」させて目立たせて
使いどころ: 通知・「受付中」の札
No. 06
パルスPulse
鼓動のように大きくなったり戻ったりを繰り返す。
頼み方の例申込ボタンを2秒おきにゆっくり「パルス」させて
使いどころ: 申込・予約ボタン
No. 07
モーションパスMotion path
決めた曲線に沿って動く。
頼み方の例船のアイコンが波形の「モーションパス」に沿って左から右へ進むように
使いどころ: 地図・ルート紹介・順路
No. 08
スタッガーStagger
同じ動きを、少しずつ時間をずらして順に始める。
頼み方の例5つのカードを0.1秒ずつずらして下から出す「スタッガー」で
使いどころ: 一覧・メニュー・箇条書きの登場
文字と図形
文字や線そのものを動かす演出です。リールの冒頭や、数字を見せたい場面で効きます。
No. 09
テキストスクランブルText scramble
文字がランダムに入れ替わってから、正しい文字に決まる。
頼み方の例「NAGATO」の文字が乱数のように入れ替わってから決まる「テキストスクランブル」で
使いどころ: リールの冒頭・発表の見出し
No. 10
タイプライターTypewriter
1文字ずつ打ち込まれるように現れる。
頼み方の例見出しを1文字ずつ打ち込む「タイプライター」演出で、カーソルの点滅つき
使いどころ: AI講座の紹介・チャット画面の再現
No. 11
ウェーブテキストWave text
文字が波のように、順番に上下する。
頼み方の例「うみ」の文字が順番に上下する「ウェーブテキスト」にして
使いどころ: 海・温泉など地域の話題
No. 12
テキストマスクText mask
文字の形にくり抜いた中を、別の絵や模様が流れる。
頼み方の例「OCEAN」の文字の中だけに波の模様が流れる「テキストマスク」で
使いどころ: タイトル・ロゴの見せ場
No. 13
カウントアップCount up
数字が0から目標の値まで増えていく。
頼み方の例「参加者 312人」の数字が0から増える「カウントアップ」で、2秒で止める
使いどころ: 実績・参加者数の紹介
No. 14
ラインドローLine draw
線が描かれていくように現れる。
頼み方の例青海島の輪郭線が手書きのように描かれていく「ラインドロー」で
使いどころ: 地図・イラスト・署名
No. 15
モーフMorph
形がなめらかに別の形へ変わる。
頼み方の例四角いボタンが丸に変わる「モーフ」でつないで
使いどころ: 状態の切り替え（送信中→完了）
No. 16
パララックスParallax
手前と奥の層が違う速さで動き、奥行きが出る。
頼み方の例山・波・船の3層を違う速さで動かす「パララックス」で奥行きを出して
使いどころ: 風景写真・LPの背景
場面の切り替え
画面から次の画面へ移るときの名前です。動画やスライドの「つなぎ」を指定するときに使います。
No. 17
ワイプWipe
境目の線が横切って、次の画面に塗り替わる。
頼み方の例昼の写真から夕方の写真へ、左から右への「ワイプ」で切り替えて
使いどころ: ビフォーアフター
No. 18
クロスフェードCrossfade
前の画面が薄れながら、次の画面が重なって現れる。
頼み方の例写真3枚を1.5秒の「クロスフェード」でつないで
使いどころ: 写真のスライドショー
No. 19
プッシュPush transition
次の画面が、前の画面を押し出して入ってくる。
頼み方の例次のページが前のページを左へ押し出す「プッシュ」で
使いどころ: 手順の説明・ページ送り
No. 20
ケン・バーンズKen Burns effect
静止画をゆっくり拡大しながら少しずらし、動きを出す。
頼み方の例風景写真をゆっくりズームしながら右へ寄る「ケン・バーンズ」で
使いどころ: 活動写真のリール・振り返り動画
No. 21
アイリスIris transition
円が広がって次の画面が現れる（閉じるのは逆）。
頼み方の例真ん中から円が広がって次の場面が出る「アイリスイン」で
使いどころ: オープニング・エンディング
No. 22
ブラインドBlinds transition
細い帯がブラインドのように開いて、次の画面が出る。
頼み方の例横の帯がブラインドのように開く「ブラインド」で切り替えて
使いどころ: カレンダー・日付の切り替え
No. 23
キューブCube transition
立方体が回るように、面ごと次の画面へ回り込む。
頼み方の例箱が回るような「キューブ」の切り替えで次の講座を見せて
使いどころ: 商品・講座の並び紹介
No. 24
スプリットスクリーンSplit screen
画面を分けて、複数の場面を同時に見せる。
頼み方の例画面を3分割して、海・温泉・講座の映像を同時に流す「スプリットスクリーン」で
使いどころ: 地域の魅力を一度に見せる
名前は組み合わせて使えます
- 「見出しはスタッガーで1文字ずつ出して、最後にバウンスで止める」
- 「活動写真はケン・バーンズで動かし、写真同士はクロスフェードでつなぐ」
- 「数字はカウントアップ、終わったら申込ボタンをパルスさせる」
速さ（何秒で）と回数（何回・繰り返すか）も一緒に書くと、さらに狙いどおりになります。
動画やWebの動き、自分で頼めるようになりませんか
お店の告知リール、講座の振り返り動画、ホームページの見出しの動き——名前を知っているだけで、AIへの頼み方が変わります。
画像の加工は AIアートポスター・ギャラリー にまとめています。実物のサイトの動きは デザインの参考サイト集 から探せます。