こんにちは。Development事業部でフロントエンドエンジニアとして働くG.Nです。

動きのあるWebサイトって、見ているだけでワクワクしますよね。 最近では、訪れるたびにユーザーを驚かせるような、ギミック満載のサイトが増えています。 「一体どうやって動かしているんだろう？」と見入ってしまった経験はありませんか？

じつは、一見複雑そうに見えるアニメーションも、数行のコードで実装されていることが少なくありません。今回はフロントエンドの視点から、Webアニメーションを支える技術とその裏側を解説します。

G.N：新卒からコーダーとしてキャリアを開始。メルボルンに約１年留学後、2025年5月からフロントエンドエンジニアとしてGIGにジョイン。主に受託案件やLeadGrid開発を担当。愛犬２匹と、登山後のお酒・サウナが大好き。

アニメーションを取り入れたWebサイト・デザインを作る主な技術

Webアニメーションは一見複雑ですが、基本的には「CSS」と「JavaScript」の役割分担で成り立っています。

CSS：見た目の変化を定義する

CSSは、色を変える、形を動かすといった「スタイルの変化」を定義するのが得意です。ブラウザの最適化（GPU加速など）の恩恵を受けやすく、滑らかで軽量な動きを実現できます。

JavaScript：動きのタイミングを制御する

JavaScriptは、「いつ・どのように動かすか」という司令塔の役割を担います。スクロール量やクリック、マウスの動きなど、ユーザーのアクションに反応してアニメーションを開始させるのが得意です。

CSSアニメーションでできること

「ふわっと表示させる」「ボタンの色を滑らかに変える」といった演出は、CSSだけで完結できます。

・手軽さ： JavaScriptを記述せずに実装可能。
・パフォーマンス： 描画負荷が低く、モバイル端末でもスムーズ。
・主なプロパティ： transition（単純な変化）や @keyframes（複雑な工程）を使用して動きを作ります。

キーとなる技術：@keyframes と animation

動きのプロセスを定義する @keyframes と、それを適用する animation プロパティを組み合わせます。

.box {
  /* 1秒かけて、緩急をつけながらフェードイン */
  animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

JavaScriptでできること

JavaScriptを使うと、CSSだけでは不可能な「動的な演出」が可能になります。

・スクロール連動： 画面のどの位置まで読み進めたかに合わせてアニメーションを進行させる。
・計算に基づいた動き： マウスの座標を追いかけるストーカー演出や、要素がランダムに飛び散る演出。
・条件分岐： 「もしログインしていたらこの動き」といったロジックを組み込めます。

アニメーション実装に最適なGSAPとは？

実務でより高度な演出を求められた際、エンジニアが真っ先に選ぶのが GSAP (GreenSock Animation Platform) というライブラリです。

GSAPには下記の特長があり、数行のシンプルなコードで複雑なアニメーションを実装することができます。

・高機能： 複数のアニメーションを連結する「タイムライン機能」
・クロスブラウザ： ブラウザごとの挙動の差異を自動で修正してくれる
・軽量・高速： 複雑な動きをさせても動作が非常に滑らか

GSAPでよく見るアニメーションを作ってみる

たとえば、よくある「下からふわっと浮き上がりながら表示される」アニメーションがあります。

GSAPならこれだけで実装できます。

// .fade-upというクラスがついた要素を、
// 元の位置から50px下に配置した状態から、1秒かけて元の位置に戻す
gsap.from(".fade-up", {
  opacity: 0,
  y: 50,
  duration: 1,
  ease: "power2.out"
});

これだけで、プロっぽい上品なフェードインが完成します。
※実装の前にgsapのCDN貼り付け、またはnpmでインポートする必要があります。

アニメーションのコードを分解して解説

先ほどのコードをもっと詳しく分解してみましょう。

• gsap.to / gsap.from：
  • to：現在の状態から「指定した状態へ」動かす。
  • from：指定した状態から「現在の状態へ」戻す。
• target（第一引数）：動かしたいHTML要素（クラス名など）。
• vars（第二引数）：
  • x, y：移動距離。
  • duration：アニメーションにかける秒数。
  • ease：動きの加減速（バウンドさせたり、ゆっくり止めたり）。

さらにボックスをそれぞれずらしてふわっと表示させたい場合は、

たった１行、stagger:0.3：0.3秒ずれて順番に動く　というプロパティを追加すれば簡単に再現できます。

3Dアニメーションを作りたい場合

平面的な動きだけでなく、奥行きのある「没入感」を演出したい場合は、Three.jsというライブラリを使用します。

Three.jsはブラウザ上で3Dグラフィックスを表示するための技術です。 「3Dなんて難しそう……」と感じるかもしれませんが、Sketchfabなどのサイトで配布されている3Dモデルを読み込んで、GSAPでカメラを動かすだけでも、映画のようなリッチなWebサイトが作れます。

まとめ

Webアニメーションは、特別な魔法ではありません。

1.シンプルな動きなら CSS
2.インタラクティブな制御なら JavaScript
3.高品質・複雑な演出なら GSAP
4.究極の没入感なら Three.js

このように使い分けることで、ユーザーの記憶に残る素晴らしいWebサイトを構築できます。まずは小さなボタンの動きから、自分の手で命を吹き込んでみませんか。

GIGではこうした細やかな演出を含めたサイト制作を行なっています。理想のイメージを形にするお手伝いをいたしますので、ぜひお気軽にご相談ください。

株式会社GIGは、コーポレートサイト・採用サイト・ステークホルダー向けサイトのリニューアルや、企業理解を踏まえた情報設計、サイトリリース後の運用伴走支援がそろったデジタルコミュニケーション企業です。

・制作実績1,500社以上
・サービス利用継続率98%以上
・「Web制作会社」Google検索 1位獲得率55.8％
・AWS公式Technology Partner認定
・ASPICクラウドアワード先進技術賞受賞

ブランド表現と更新しやすさを両立したサイト設計と、公開後も改善し続ける伴走支援が強みです。

株式会社GIGは、お客様と丁寧で密なコミュニケーションを重ねてきたと自負しております。「まず話だけでも」という段階でも、ぜひお問合せ（https://giginc.co.jp/contact）ください。専任の担当者が、お客様の状況にあわせた最適な提案をいたします。

■株式会社GIG
・お問い合わせはこちら
https://giginc.co.jp/contact
・制作実績はこちら
https://giginc.co.jp/works
・事例インタビューはこちら
https://giginc.co.jp/blog/casestudy
・求人応募はこちら（GIG採用サイト）
https://recruit.giginc.co.jp/
・求人応募はこちら（Wantedly）
https://www.wantedly.com/companies/giginc

G.N

新卒からコーダーとしてキャリアを開始。メルボルンに約１年留学後、2025年5月からフロントエンドエンジニアとしてGIGにジョイン。主に受託案件やLeadGrid開発を担当。愛犬２匹と、登山後のお酒・サウナが大好き。