おしゃれなサイトの動きの名前と作り方｜よく見る演出10個と頼み方

結論: 動きの「名前」さえ分かれば、AIにも制作者にもそのまま頼めます。

• 下の早見表で、気になる動きの名前（英語名も）を探す
• 「CSSだけでできるか」「GSAPが要るか」を見て、どれくらい重いかを見当づける
• 依頼文は名前＋道具＋スマホのとき＋動きを減らす設定のときの4点セットで書く

参考サイトを開いたクライアントに「こういう感じで」と言われる。スクロールすると、見出しが下からふわっと出てくるあれです。

名前が出てこないから検索もできない。AIにも「なんかふわっとするやつ」としか言えない。

MDN、GSAP、W3Cなどの公式ドキュメントをもとに、よく見る10個を整理しました。

この記事の目次

1. あの動きの名前は？よく見る演出10個の早見表
2. CSSだけで作れる？GSAPが要る？重さは3段階で考える
3. AIや制作者にどう頼む？「名前＋条件3つ」で伝わる
4. スマホで動かない演出、重くなる演出はどれ？
5. 動きが苦手な人への配慮は、何をすればいい？
6. よくある質問
7. この記事のまとめ

あの動きの名前は？よく見る演出10個の早見表

この記事の10個は、動くきっかけで「スクロール・マウス・ページ移動・時間」の4つに分けられます。

ここでの名前は業界でよく使われる呼び方で、正式な用語ではありません。AIに頼むときは英語名も添えると通じやすくなります。

← 表は横にスクロールできます →

「マウスストーカー」は日本での呼び方です。英語なら「custom cursor」「cursor follower」。作例は英語で調べたほうが多く見つかります。

CSSだけで作れる？GSAPが要る？重さは3段階で考える

追従ヘッダー・スナップ・色が変わるホバー・マーキーはCSSだけ。フェードアップは全ブラウザ向けならIntersection Observer（JS）＋CSS、マグネティック系のホバーもJSが要ります。文字分割と横スクロールはGSAPが近道です。

← 表は横にスクロールできます →

GSAPは、こうした動きを作るためのJavaScriptのライブラリ（部品の詰め合わせ）です。

この1〜2年で一番大きな変化はここでした。2025年4月29日のGSAP 3.13で、商用でも無料になっています。「横スクロールはお金がかかる」という前提は、もう古い話です。

• 無料になった範囲：SplitTextなど、以前は会員限定だったプラグインも含む
• AIで書いたコード：ライセンスに「禁止用途にあたらない」と明記
• 確認しておくと安心な用途：コードを書かずにアニメーションを作るツールへの組み込みなどは禁止。そうした商品を作る人はライセンス本文を一読を

CSSだけのスクロール連動（animation-timeline）は、2026年10月時点でChrome 115以降とSafari 26で動きます。Firefoxの安定版はまだ未対応です。

あなたの案件が「全員に同じ見た目を届けたい」なら、今はGSAPかIntersection Observerが手堅いと考えています。

3Dの定番はthree.jsというライブラリです。

MITライセンスの無料ライブラリです。3D表現は一般に描画の負担が大きくなりがちなので、LPの1か所だけに使うなど、範囲を決めて入れると扱いやすくなります。

AIや制作者にどう頼む？「名前＋条件3つ」で伝わる

「ふわっとさせて」ではなく、名前・道具・スマホのとき・動きを減らす設定のとき、の4つを書きます。

そのままコピペできる依頼文を3つ置いておきます。

見出しをGSAPのSplitTextで1文字ずつ分割し、maskで下から出現させてください。
ScrollTriggerで画面に入ったときに1回だけ再生。
prefers-reduced-motion: reduce のときは動かさず、そのまま表示。
単体のHTMLファイルで。

実績セクションを横スクロールにしてください（縦スクロールで横に流れる）。
GSAP ScrollTriggerのpinを使用。横移動はease: "none"。
スマホ幅（768px未満）では横スクロールにせず、縦に並べるだけ。

カスタムカーソル（マウスストーカー）を付けてください。
@media (hover: hover) のときだけ有効にし、タッチ端末では何もしない。
動きはtransformだけで。

条件を足すほど、AIの1回目の出力をそのまま使える確率は上がります。

個人的に効くと見ているのは「スマホのときどうするか」の一行です。横スクロールは小さい画面だと窮屈になりやすく、ここを書くかどうかで手直しの量がかなり変わります。

まず試すだけなら、ClaudeのArtifacts（チャットの横で動くHTMLを表示する機能）で足ります。2026年10月10日時点では、Freeプランでも1ページのWebサイトを作れます。

CodePenなど他人のデモをもとに頼むなら、そのデモのライセンスも見ておきましょう。

スマホで動かない演出、重くなる演出はどれ？

マウス系の2つ（マウスストーカーとホバー）は、スマホでは基本的に動きません。

理由は単純で、タッチ画面にはカーソルも「上に乗せる（ホバー）」もないからです。

これは地味に見落としがちです。スマホからの閲覧が多いLPだと、マウスストーカーに力を入れても多くの人の目には入りません。Wixのヘルプにも、マウスエフェクトは「タッチスクリーン端末では再生されません」とはっきり書かれています。

あなたがノーコードで作りたいなら、Wixのこの設定画面で追従の強さ・方向・速度を選べます。コードなしで見た目を確かめられるので、まず雰囲気をつかみたい人に向いています。

重さの話は、Googleのweb.devが明快でした。

← 表は横にスクロールできます →

AIへの依頼文に「transformとopacityだけで」と一言足しておくと安全です。

動きが苦手な人への配慮は、何をすればいい？

チェックは2つ。「動きを減らす」設定の人には止める。5秒を超えて自動で動くものには停止ボタンを付ける。

• prefers-reduced-motion に対応する：端末の「動きを減らす」がオンかどうかを、CSSやJSで判定できます。iPhoneなら「設定 > アクセシビリティ > 動作」にある設定です。パララックスのような動きは、人によってはめまいや吐き気の原因になります
• 自動で動き続けるものに止める手段を付ける：流れる文字やスライダーのように、自動で始まって5秒を超えて続くもの。これには一時停止・停止・非表示の仕組みが要ります（W3CのWCAG 2.2、レベルAの基準）

さっきの依頼文に「prefers-reduced-motion のときは動かさない」を入れていたのは、このためです。最初から条件に入れておけば、あとで直さずに済みます。

よくある質問

Q. GSAPは有料ですか？ 2025年4月29日から、プラグインも含めて無料です。商用利用も標準ライセンスの対象です（2026年10月10日時点）。

Q. ページの切り替えをふわっとさせるには？ View Transitionsという仕組みを使います。2026年10月時点で、同じページ内の切り替えはChrome 111、Edge 111、Firefox 144、Safari 18.0から対応しています。ページをまたぐ切り替えは、CSSの @view-transition で有効にします。

Q. CSSだけでスクロール連動を作ったのに動きません。 animation をまとめて書く書き方（ショートハンド）は、animation-timeline を初期値に戻してしまいます。animation-timeline は animation の後に書いてください。Firefoxの安定版で動かないのは、まだ対応していないためです。

この記事のまとめ

• この記事の10個は、スクロール・マウス・ページ移動・時間の4つのきっかけに分けられる
• 追従ヘッダー、スナップ、色が変わるホバー、マーキーはCSSだけで作れる。フェードアップは全ブラウザ向けならIntersection Observer（JS）＋CSS、マグネティック系のホバーはJSが要る
• 文字分割と横スクロールはGSAPが近道。2025年4月から商用でも無料
• マウス系の演出はスマホでは基本的に動かない
• 頼むときは「名前＋道具＋スマホのとき＋動きを減らす設定のとき」

次にやることは1つです。早見表から気になる動きを1つ選び、上の依頼文の名前の部分だけ差し替えて、AIに投げてみてください。

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。