Webサイトのアニメーションの種類と名前｜AIに動きを伝える頼み方の例

2026年10月14日

Webサイトのアニメーションは、メニューを開くとき、カーソルを合わせたとき、スクロールしたときなど、場面ごとに呼び方があります。ただ、動きは言葉で伝えにくく、AIに頼むときも「ふわっと」「かっこよく」だけでは意図した動きになりにくいものです。

この記事では、よく使うアニメーションの種類と名前を、場面ごとに見本の画像で紹介します。画像を押すと、moatway library の動く見本とAIへの頼み方のページが開きます。

Webサイトのアニメーションの種類

ハンバーガーメニューの変形
三本線のボタンが、押すと×の形に変わる動き。スマートフォンのメニューボタンに使います。

ドロワー
画面の端からパネルが滑り出て、メニューを表示する動き。

円形に広がるメニュー
押したボタンを中心に円が広がり、画面全体のメニューになる動き。

ズームイン
枠の大きさはそのままで、中の画像だけが少し拡大する動き。商品や記事の一覧に使います。

浮き上がる
カードが少し上へ動き、下の影が広がる動き。

下線が伸びる
リンクの下線が、左から右へ伸びる動き。ナビゲーションのリンクに使います。

フェードイン
透明な状態から、少しずつ表示される動き。見出しや本文に使います。

スタッガー
複数の要素を、時間を少しずつずらして順番に動かす方法。

パララックス
背景と手前の要素を違う速さで動かし、奥行きを出す動き。

タイプライター
文字を1文字ずつ表示し、最後にカーソルを点滅させる動き。

カウントアップ
数字が0から目標の値まで増えていく動き。導入社数などの実績に使います。

マーキー
文字や画像を、横方向に途切れず流し続ける動き。

グラデーション背景アニメーション
背景のグラデーションが、ゆっくり位置や色を変え続ける動き。

パーティクル
小さな点が漂い、近くの点どうしが線でつながる背景の動き。

バウンス
要素が弾むように跳ね返ってから止まる動き。通知の件数などに使います。

スケルトンスクリーン
読み込み中に、文字や画像の位置を灰色の図形で示す動き。

ローディングスピナー
輪の回転で、読み込み中であることを知らせる動き。

トースト通知
操作のあとに小さな通知が現れ、数秒で消える動き。

ここで紹介したのは一部です。ほかの動きの名前は、アニメーションの名前の一覧で見られます。

AIに動きを頼むときは、名前に加えて「どの要素が」「いつ動くか」「何秒で」を書くと伝わりやすくなります。moatway library の動きのページにある「AIへの頼み方」は、この3つを含んだ文で、「コピー」を押すとそのまま貼れます。

よく使う動きの頼み方の例です。

メニューボタンを押したら、ボタンの位置を中心に円を0.6秒で画面いっぱいまで広げ、その上にメニュー項目を0.08秒ずつずらして表示してください。開いている間はボタンの文字を「閉じる」にし、もう一度押したら円を縮めて閉じてください。

カードにマウスを重ねたら、カードを0.25秒で6px上へ動かし、下の影を広げてください。キーボードで選んだとき（:focus-visible）も同じ動きにしてください。

各セクションが画面に入ったら、0.6秒かけてフェードインさせてください。

Claude Code で、メニューの動きを2通りの頼み方で作ってみました。

「かっこいい動きでメニューが開くように」と3回頼んだ場合：円が広がるものが2回（0.9秒と1秒）、縦のパネルが伸び上がるものが1回でした。どれも動きますが、動きの種類と速さはAIが決めていました
「円形に広がるメニュー」の頼み方をそのまま貼った場合：円が0.6秒で広がり、項目が0.08秒ずつずれて表示され、ボタンの文字が「閉じる」に変わりました