アニメーションで魅せる！CSSとGSAPの使い分け

〜動きで伝えるデザインのセンスを磨く〜

はじめに：Webサイトは「静止画」から「体験」へ

近年のWebデザインでは、
見た目の美しさだけでなく、“動き”による体験設計が求められています。

ボタンがふわっと浮かぶ。
スクロールに合わせて要素が滑らかに現れる。
背景がゆっくり動くことで、ページに奥行きが生まれる。

こうした演出は、ユーザーの目を引き、
「印象に残るサイト体験」を作り出します。

その中心にあるのが、CSSアニメーションとGSAP（GreenSock Animation Platform）。

この2つの技術をどう使い分けるかで、
あなたのWeb表現力は大きく変わります。

CSSアニメーションの特徴と得意分野

まずは基本。CSSアニメーションは、軽量で手軽なアニメーション表現に向いています。

たとえば、ボタンのホバーやフェードインなど、
「単発的」「シンプル」「繰り返しの少ない」動きに最適です。

CSSアニメーションの代表的な書き方

.btn {
  transition: all 0.3s ease;
}
.btn:hover {
  transform: scale(1.1);
  background-color: #0078ff;
}

たったこれだけで「ホバー時にふわっと拡大」する演出が可能。
読み込みも速く、JavaScript不要で動作します。

CSSアニメーションの得意分野

ジャンル	例	利点
ボタン・リンク	ホバー、クリック時の変化	軽量・レスポンシブ
フェード系	出現、消失、遷移	transitionだけでOK
ループ系	ローディング、アイコン点滅	keyframesで簡単
トランジション	ページ内の微細な動き	コードが短い

こんなときはCSSアニメーションを選ぼう

• HTMLとCSSだけで完結させたい
• スクロールイベントなどの複雑な制御は不要
• 軽量で高速に動作させたい（LCPに優しい）
• デザイナーも直接調整したい

キーワード：軽量・簡単・滑らか

GSAPの特徴と可能性

一方で、GSAP（GreenSock Animation Platform）は、
JavaScriptベースの超高機能なアニメーションライブラリです。

GSAPを使えば、CSSでは不可能な複雑な動きやタイムライン制御が実現できます。

基本の書き方

gsap.to(".box", {
  duration: 1,
  x: 200,
  rotation: 360,
  ease: "power2.out"
});

このたった数行で、要素を右に移動させながら回転させるアニメーションが作れます。

GSAPの強み

機能	説明
タイムライン制御	連続・同時・逆再生も自由自在
スクロール連動	ScrollTriggerで簡単実装
複数要素制御	数百個の要素を滑らかに動かせる
SVG・Canvas対応	アイコンやイラストの動きも可能
トランジション同期	複数アニメを1つの流れに統合できる

GSAPでできる表現例

• スクロール演出： ページを進むたびに要素が浮かぶ／スライドする
• タイムラインアニメーション： ロゴ → 見出し → ボタンが順番に出現
• 背景パララックス： スクロールに合わせて奥行きを表現
• SVGアニメーション： 線画が描かれるような動き

キーワード：制御・連動・創造

CSSとGSAPの「使い分け基準」

では、実際にどんな基準で使い分ければいいのでしょうか？
以下の3つの観点で判断すると迷いません

① 複雑さ：どの程度の動きを求めるか？

レベル	技術	例
⭐️ シンプル	CSS	ホバー・フェードイン
⭐⭐️ 中程度	CSS + JS	スクロールで表示切替
⭐⭐⭐ 高度	GSAP	タイムライン・多要素制御

② 制御性：どれだけ自由に動かしたいか？

要件	適切な技術
自動で動くだけでOK	CSS
スクロールやクリックで連動	GSAP
逆再生・ループ・一時停止をしたい	GSAP
動きのタイミングを細かく調整したい	GSAP

③ パフォーマンス：処理負荷を意識する

GSAPは強力ですが、重いアニメーションを多用すると
CPU負荷が高くなり、モバイルではカクつくことがあります。

一方CSSアニメーションはGPU支援が効くため、軽量でスムーズ。

結論： 軽い動きはCSS、ストーリー性のある動きはGSAP。

実案件を想定した“使い分けシナリオ”

シナリオ①：企業サイトのヒーローアニメーション

• 目的： 印象的なファーストビュー演出
• 技術構成： GSAP + ScrollTrigger
• 内容： テキストが一文字ずつフェードイン、背景がスライド

gsap.from(".hero-text span", {
  y: 30,
  opacity: 0,
  duration: 0.8,
  stagger: 0.1,
  scrollTrigger: ".hero-section"
});

→ 「動きのリズム」を作るにはGSAPが最適。

シナリオ②：サービス紹介カードのホバーエフェクト

• 目的： UIのアクセント
• 技術構成： CSSのみ

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

→ 単発・軽量な動きはCSSで十分。

シナリオ③：ランディングページ全体のストーリー演出

• 目的： ブランド体験・没入感を高める
• 技術構成： GSAPタイムライン＋ScrollTrigger

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    end: "bottom center",
    scrub: true
  }
});
tl.to(".bg", { scale: 1.2, opacity: 0.8 })
  .from(".headline", { y: 100, opacity: 0 })
  .to(".cta", { opacity: 1 });

→ ページ全体で動きを「物語」にできるのはGSAPならでは。

アニメーション制作で意識すべき3つの“設計思考”

① 動きに「目的」を持たせる

「動く＝かっこいい」ではなく、“伝えるための動き”を設計しましょう。
例：CTAボタンの強調・読了誘導・注目の分散防止。

② 「テンポ」と「リズム」を設計する

音楽のように、速さ・間・強弱を意識します。
GSAPのstaggerやeaseを使うと、心地よい流れが作れます。

③ コードは“パターン化”して再利用する

頻出アニメーション（フェードイン、スライドアップなど）は関数化して使い回す。
プロジェクトの一貫性が上がり、保守性も向上します。

おすすめ学習ステップ

ステップ	学ぶ内容	使用技術
Step 1	transition / keyframes で基本動作	CSS
Step 2	scrollイベントやhover効果の組み合わせ	CSS + JS
Step 3	GSAPの基本API（to, from, timeline）	GSAP
Step 4	ScrollTriggerで連動アニメーション	GSAP
Step 5	実案件の模写・リファレンス研究	両方併用

目標： “デザインを動かせるコーダー”になる。

まとめ：CSSとGSAPを“楽器”のように使いこなそう

アニメーションは、Webサイトに「感情とリズム」を与える表現手法です。

• 軽やかに動かしたい → CSS
• 物語的に魅せたい → GSAP

どちらが上位というわけではなく、
用途に応じて“奏で分ける”ことがプロの発想。

アニメーションは、コードで作るデザイン。
見せたい体験を、動きで語ろう。

Favorite