動きのあるサイトとは、スクロールやマウス操作に合わせて文字・画像・図形がアニメーションするWebサイトのことです。最大のメリットは「第一印象に残りやすく、情報の順番を自然に伝えられる」ことで、反対にデメリットは「表示が重くなりやすく、作り方を誤ると読みにくくなる」ことです。この記事では、動きを入れるべきサイトと入れないほうがよいサイトの見分け方、GSAPとThree.jsでそれぞれ何ができるか、依頼する前に決めておきたいことを、Web制作会社の実務目線でまとめます。
動きのあるサイトとは？静的なサイトとの違い
動きのあるサイトと静的なサイトの違いは、「情報を見せるタイミングをサイト側がコントロールしているかどうか」です。静的なサイトはページを開いた瞬間にすべての要素が並びますが、動きのあるサイトはスクロール量や操作に応じて、見せる順番と速さを設計します。
「動き」に含まれる主な演出
ひとことで「動き」といっても、規模はさまざまです。ボタンにマウスを乗せたときの色変化のような小さなものから、スクロールに合わせて背景の3D空間が回り込む大がかりなものまで含まれます。代表的なものは、フェードイン（ふわっと表示）、スライドイン、パララックス（背景と前景の速度差）、テキストの一文字ずつの表示、ローディング演出、ページ遷移のアニメーション、3Dオブジェクトの表示です。
CSSだけの動きとJavaScriptライブラリの動きの違い
軽い動きはCSSのtransitionやanimationだけで作れます。ホバー時の変化や、要素がふわっと出る程度ならCSSで十分です。一方で「スクロール位置に合わせて複数の要素を順番に動かす」「途中で止める・逆再生する」「3D空間を描く」といった演出は、GSAPやThree.jsのようなJavaScriptライブラリを使うほうが確実で、修正もしやすくなります。
| 作り方 | 得意な動き | 向いている場面 |
|---|---|---|
| CSSのみ | ホバー、フェードイン、簡単なループ | コーポレートサイトの控えめな演出 |
| GSAP | スクロール連動、順番制御、文字分割、SVGの変形 | LP、ブランドサイト、採用サイト |
| Three.js | 3Dモデル、立体的な背景、カメラワーク | 製品紹介、キャンペーン、ブランドの世界観づくり |
| 動画（mp4） | 実写や複雑なCG映像の再生 | ファーストビューの雰囲気づくり |
動きのあるサイトの5つのメリット
動きのメリットは「見た目が派手になること」ではなく、「伝えたい順番どおりに読んでもらえること」にあります。目的に沿って入れた動きは、デザインの説得力を底上げします。
メリット1｜第一印象に残りやすい
人の目は止まっているものより動いているものを先に捉えます。ファーストビューでロゴやキャッチコピーが印象的に現れると、サイトを開いた数秒で「この会社らしさ」を感じてもらいやすくなります。競合が多く、どのサイトも似た構成になりがちな業種ほど、この差が効いてきます。
メリット2｜読む順番を誘導できる
見出し→説明→写真→ボタンの順に要素を出すと、読み手の視線をその順番で運べます。情報量の多いページでも、一度に全部を見せずに区切って出すことで、内容が頭に入りやすくなります。
メリット3｜操作の手ごたえが伝わる
ボタンを押したときに少し沈む、メニューが滑らかに開くといった小さな動きは、「押せた」「反応した」という手ごたえを伝えます。これはマイクロインタラクションと呼ばれ、派手さとは別の、使いやすさのための動きです。
メリット4｜言葉で説明しにくいものを見せられる
製品の内部構造、工程の流れ、サービスの仕組みなどは、文章や静止画より動きで見せたほうが早く伝わります。Three.jsで製品を360度回せるようにしたり、GSAPで工程図を順番に描いたりするのは、この目的に沿った使い方です。
メリット5｜ブランドの世界観を表現できる
動きの速さや緩急（イージング）にもブランドの性格が出ます。ゆっくり柔らかく動けば上品な印象に、キビキビ動けば先進的な印象になります。写真やフォントと同じく、動きもトーン&マナーの一部として設計できます。
動きのあるサイトのデメリットと注意点
動きのデメリットは、入れ方を誤ると「重い・読みにくい・酔う」サイトになることです。どれも設計段階で対策できるので、依頼前に知っておくと判断を誤りません。
デメリット1｜表示速度が落ちやすい
ライブラリの読み込み、大きな画像や3Dモデル、常に動き続ける処理は、どれもページを重くします。Googleが重視する表示速度の指標（Core Web Vitals）にも影響するため、特にスマホでの読み込み時間は必ず確認が必要です。
デメリット2｜動きに弱い人には負担になる
大きなスクロール連動の動きやパララックスは、前庭障害のある人や乗り物酔いしやすい人にめまいや吐き気を起こすことがあります。WebアクセシビリティのガイドラインであるWCAGでも、自動で5秒以上動き続ける要素は止められるようにすること（達成基準2.2.2）、操作で起きる動きを無効にできるようにすること（達成基準2.3.3）が示されています。
デメリット3｜制作と修正の工数が増える
動きはデザインカンプ（静止画）だけでは確認できないため、試作→確認→調整の往復が増えます。公開後に文章や写真を差し替えたとき、動きのタイミングがずれて再調整が必要になることもあります。
デメリット4｜情報が見つけにくくなることがある
演出が長すぎると、電話番号や料金といった「すぐ知りたい情報」にたどり着くまでに時間がかかります。ローディング演出を毎回見せる、スクロールしないと文字が出ないといった作りは、急いでいるユーザーほど離脱の原因になります。
GSAPでできること
GSAP（GreenSock Animation Platform）は、Webの動きを細かく制御するためのJavaScriptライブラリです。2025年にWebflow社の提供となってから、以前は有料会員向けだったプラグインも含めて、商用サイトでも無料で使えるようになりました（利用条件の最新情報は公式サイトでご確認ください）。
スクロールに合わせて動かす（ScrollTrigger）
ScrollTriggerを使うと、「この見出しが画面の中央に来たら写真を出す」「スクロールしている間だけ画面を固定して横に流す」といった演出が作れます。スクロール量と動きの進み具合を連動させられるので、戻ったときは逆再生されます。
複数の動きを順番に組み立てる（Timeline）
Timelineは、ロゴ→キャッチコピー→背景→ボタンのように、いくつもの動きを一本の流れとしてまとめる機能です。あとから「コピーをもう0.2秒早く」といった調整がしやすく、クライアント確認の往復に強いのが実務上の利点です。
文字やSVGを分解して動かす
SplitTextで見出しを一文字ずつ・一行ずつ動かしたり、SVGのロゴを線で描いていくように見せたりできます。日本語の見出しでも使えますが、改行位置や文字詰めが崩れないかは実機で確認が必要です。
Three.jsでできること
Three.jsは、ブラウザで3D表現を扱うためのJavaScriptライブラリです。MITライセンスで公開されており、商用サイトでも無料で使えます。WebGLという描画の仕組みを、扱いやすい形にまとめてくれる道具です。
製品やロゴを3Dで見せる
3Dモデル（glTF形式など）を読み込み、マウスやスクロールで回転・拡大できるようにします。家具、機械部品、パッケージなど、形そのものが商品の価値になる業種で効果的です。
背景に立体的な空間や質感をつくる
ゆっくり揺れる面、粒子、光の当たり方などを背景に描き、写真や動画とは違う「その場で動いている」質感を出せます。ただし常に描画し続けるため、スマホでの負荷対策（画質を落とす・止める）とセットで設計します。
GSAPと組み合わせてカメラを動かす
Three.jsで作った3D空間のカメラ位置を、GSAPのScrollTriggerで動かすと「スクロールすると空間の中を進んでいく」演出になります。両方を一緒に使うことは珍しくなく、役割は「Three.jsが描く、GSAPが動かす」と考えると分かりやすいです。実装の具体例は動きのあるWebサイトはこう作る｜PixiJS・GSAP・Locomotive Scrollの役割と実装で解説しています。
動きを入れるべきサイト・控えるべきサイト
判断の軸は「サイトを見に来た人が、まず何をしたいか」です。雰囲気を感じてもらうことが目的なら動きは強みになり、情報をすぐ探すことが目的なら控えめにするのが基本です。
動きが強みになるサイト
ブランドサイト、製品・キャンペーンのLP、採用サイト、クリエイティブ系企業のコーポレートサイト、イベント告知サイトなどです。「この会社・商品を好きになってもらう」ことが目的のサイトでは、動きが世界観づくりに直結します。
動きを控えめにしたいサイト
病院・クリニック、行政・公共機関、士業、ECサイトの商品一覧、高齢の方が主な利用者のサイトなどです。診療時間や料金、在庫などを早く確実に見つけてもらうことが最優先になるため、動きはホバーやメニューの開閉程度にとどめます。
| サイトの種類 | 動きの量の目安 | おすすめの演出 |
|---|---|---|
| ブランド・キャンペーンLP | 多め | スクロール連動、3D、ページ遷移 |
| 採用サイト | 中くらい | 写真のスライドイン、数字のカウントアップ |
| 一般的なコーポレートサイト | 控えめ〜中 | ファーストビューのみ印象的に、下層は控えめ |
| 医療・士業・公共 | 最小限 | ホバー、メニュー開閉、ページ内スクロール |
| ECの商品一覧・予約ページ | 最小限 | カート追加時のフィードバックなど操作の手ごたえのみ |
動きのあるサイトを依頼する前に決めること
依頼前に「目的」「見せ場」「参考サイト」「更新の仕方」の4つを決めておくと、見積もりのブレと手戻りが大きく減ります。順番に整理していきます。
ステップ1｜動きで達成したい目的を一文にする
「高級感を出したい」「製品の仕組みを分かってほしい」「若い応募者に新しい会社だと感じてほしい」など、動きの目的を一文で言える状態にします。目的があると、制作側も足し算ではなく引き算で演出を提案できます。
ステップ2｜見せ場をページの中で1〜2か所に絞る
全セクションを派手に動かすより、ファーストビューと、いちばん伝えたいセクションの1〜2か所に力を集中させたほうが印象に残ります。工数も見せ場の数にほぼ比例するので、予算の調整もしやすくなります。
ステップ3｜参考サイトを「どこが好きか」付きで集める
参考サイトのURLだけでなく、「ロゴが出てくる最初の3秒」「スクロールで写真が切り替わるところ」のように、気に入った箇所を具体的に書き添えます。同じサイトでも人によって見ているポイントが違うため、この一言で認識のずれがなくなります。
ステップ4｜公開後に誰がどこを更新するかを決める
お知らせや実績を社内で更新するなら、WordPressなどのCMSで編集する部分と、演出を固定する部分を分けて設計します。動きのある部分まで自由に編集できるようにすると、文字数の違いでレイアウトが崩れやすいためです。
動きのあるサイトでよくある失敗と対処法
公開後に起きやすい問題は「スマホで重い」「文字が出てこない」「酔うと言われた」の3つです。どれも原因の確認順序が決まっているので、症状ごとにまとめます。
スマホで表示が重い・カクつく
まずPageSpeed Insightsでモバイルのスコアを確認し、重い画像・3Dモデルのファイルサイズを見ます。次に、位置や大きさの変更をtransform（移動・拡大）とopacity（透明度）中心の動きに置き換えます。それでも重い場合は、スマホでは3D背景を静止画に差し替えるなど、端末ごとに演出を変えます。
文字や画像が表示されないまま止まる
最初に透明にしておき、スクロールで表示する作りでは、JavaScriptの読み込みに失敗すると要素が見えないまま残ります。ブラウザの開発者ツールでエラーを確認し、スクリプトが動かなくても内容は表示される作り（初期状態は表示、動かすときだけ隠す）に直すのが確実です。
「酔う」「読みにくい」と言われた
OSの「視差効果を減らす」設定を検知するCSSのprefers-reduced-motionに対応し、設定している人には大きな動きを止めます。GSAPにも同じ条件で動きを切り替える仕組み（matchMedia）があります。あわせて、自動で動き続ける要素には停止ボタンを付けます。
| 症状 | 最初に見るところ | 主な対処 |
|---|---|---|
| スマホで重い | PageSpeed Insightsのモバイル結果 | 画像・3Dの軽量化、端末別に演出を変える |
| 要素が出てこない | 開発者ツールのコンソールエラー | スクリプトが動かなくても表示される作りにする |
| 酔う・読みにくい | OSの視差効果設定での表示 | prefers-reduced-motion対応、停止ボタン |
| 更新したら崩れた | 差し替えた文字数・画像比率 | 編集できる範囲と演出部分を分ける |
制作会社が演出を設計するときの判断基準
制作の現場では、「その動きを止めても情報は伝わるか」を最初に確認します。止めても伝わるなら動きは装飾として控えめに、止めると伝わらないなら見せ場として時間をかける、という配分です。
動きの長さは0.2〜0.8秒を基本にする
ボタンやメニューなど操作への反応は0.2〜0.3秒程度、要素の登場は0.5〜0.8秒程度が待たされ感の出にくい目安です。1秒を超える動きは、ファーストビューなど本当に見せたい場面に限定します。
まずは静止画で成立するデザインを作る
サイト制作の観点では、動きを取り除いても読みやすく、きちんと情報が伝わるデザインが土台です。そのうえで動きを足すと、端末や設定によって演出が止まっても、サイトとしての品質は落ちません。
実機で確認してから公開する
動きの印象は、パソコンの大きな画面とスマホとで大きく変わります。iPhone・Androidの実機、Safari・Chromeの両方で、スクロールの引っかかりや文字の出方を確認してから公開するのが基本です。
よくある質問
Q. 動きのあるサイトはSEOに不利ですか？
A. 動きそのものが不利になるわけではありません。文字がHTMLとして書かれていて、表示速度が保たれていれば検索エンジンは内容を読み取れます。注意したいのは、文字を画像や3Dの中だけに入れることと、重さで表示が遅くなることです。
Q. GSAPは商用サイトで無料で使えますか？
A. はい、現在はプラグインも含めて商用サイトで無料で使えます。ライセンスの細かな条件は変わる可能性があるため、最新情報は公式サイトでご確認ください。
Q. Three.jsを使うと必ず重くなりますか？
A. 必ずではありません。3Dモデルの軽量化、画面外では描画を止める、スマホでは画質を下げるといった対策で、実用的な速さにできます。ただし静的なページより重くなる前提で設計する必要があります。
Q. WordPressのサイトでもGSAPやThree.jsは使えますか？
A. 使えます。テーマにスクリプトを読み込む形で組み込むのが一般的です。お知らせなど更新する部分はWordPressで編集し、演出部分はテーマ側に固定しておくと、更新しても崩れにくくなります。
Q. 今あるサイトに一部だけ動きを追加できますか？
A. できます。ファーストビューだけ、または特定のセクションだけに演出を追加する方法は、全面リニューアルより費用と期間を抑えられます。既存のHTML構造やCSSとの相性は事前に確認が必要です。
Q. 動きを入れると制作期間はどのくらい延びますか？
A. 演出の量によって変わります。ホバーやフェードイン程度ならほぼ変わりませんが、スクロール連動の見せ場や3Dを作る場合は、試作と調整の期間を別に見込みます。見せ場の数を先に決めると、期間も見積もりやすくなります。
まとめ
動きのあるサイトのメリットは、第一印象に残り、伝えたい順番どおりに読んでもらえることです。一方で、表示速度・アクセシビリティ・更新のしやすさへの配慮が欠かせません。GSAPは「動かす」、Three.jsは「立体を描く」道具と考え、目的と見せ場を絞ってから使い分けるのが、失敗しない近道です。
THREE D PLUS は大阪の Web 制作会社です。GSAPやThree.jsを使った演出実装にも対応しており、通常のコーディングから動きのあるサイトまでまとめてご相談いただけます。お問い合わせはこちら。
