アニメーションと動的エフェクト
読了 5分 ＋ 実践 30分
対象読者: デザインに動きを加えたい方、JSアニメーションライブラリを使ってみたい方
前提知識: CSSの基礎（`opacity`、`transform`、`transition`）を知っているとより理解しやすいです
動きのあるUIはユーザーの注目を引き、情報の階層を直感的に伝えます。アニメーションの指示で重要なのは、「どう動くか」だけでなく「いつ・どのくらいの時間で・どんな速度で」を伝えることです。
CSSアニメーションの基本4種
Section titled “CSSアニメーションの基本4種”フェードイン（Fade-in）
Section titled “フェードイン（Fade-in）”要素が透明から不透明へと徐々に現れます。最も汎用的で邪魔にならない登場演出です。
ヒーローセクションに、opacity 0 から 1 へ 800ms・ease-in-out で遷移する
シンプルなフェードインアニメーションを追加してください。スライドイン（Slide-in）
Section titled “スライドイン（Slide-in）”要素が画面外から移動して現れます。サイドバーやドロワーに最適です。
サイドバーに、transform: translateX(-100%) から translateX(0) へ遷移する
スライドインアニメーションを追加してください。ブラーエフェクト（Blur Effect）
Section titled “ブラーエフェクト（Blur Effect）”ぼかしが取れながら要素が鮮明になる、印象的な登場演出です。
画像に、filter: blur(10px) から blur(0) へ遷移するブラーイン効果を
ビューポートに入ったタイミングで適用してください。スタッガードアニメーション（Sequenced）
Section titled “スタッガードアニメーション（Sequenced）”複数の要素が少しずつ時間をずらして順番に現れます。リストや機能紹介に効果的です。
リストアイテムが前のアイテムから 150ms ずつ遅れて順番に表示される
スタッガードアニメーションを作ってください。アニメーションのタイミング制御
Section titled “アニメーションのタイミング制御”アニメーションの「速さ感」はタイミング関数で決まります。
| プロパティ | 意味 | 指示例 |
|---|---|---|
animation-duration | アニメーションの長さ | 500ms（0.5秒） |
animation-delay | 開始までの待機時間 | 250ms（0.25秒遅れて開始） |
animation-timing-function | 速度の変化パターン | ease-in-out（始まりと終わりがなめらか） |
アニメーション設定：
- duration: 500ms
- delay: 250ms
- timing-function: ease-in-out負のdelay値を使うと、アニメーションの途中から始まった状態を作れます。
animation-delay: -2s を設定して、アニメーションが2秒進んだ状態から始めてください。テキストアニメーション
Section titled “テキストアニメーション”タイポグラフィに動きを加える6つのテクニックです。
キャラクター表示（Character Reveal）
Section titled “キャラクター表示（Character Reveal）”文字が1文字ずつ順番に現れるタイピングエフェクト。
メインヘッドラインに、各文字が 50ms 間隔で順番に現れる
キャラクター表示アニメーションを Inter フォントで作ってください。ワードフェードアップ（Word Fade Up）
Section titled “ワードフェードアップ（Word Fade Up）”単語ごとにフェードしながら上から現れるアニメーション。タグラインや引用文に映えます。
タグラインの各単語が 100ms 間隔でフェードアップするアニメーションを
Inter フォントで作ってください。レター表示（Letter by Letter）
Section titled “レター表示（Letter by Letter）”文字ごとにスケールアップしながら現れるダイナミックな演出。
各文字が 80ms 間隔でスケールエフェクト付きで現れる
レター表示アニメーションを太めのディスプレイフォントで作ってください。グラデーションテキスト
Section titled “グラデーションテキスト”テキストにアニメーションするグラデーションを適用します。
メイン見出しに、青からパープルへ 3秒ループで水平方向にアニメーションする
グラデーション背景をテキストにクリップして適用してください。クリップリビール（Clipped Reveal）
Section titled “クリップリビール（Clipped Reveal）”クリッピングマスクでテキストが左から右へ徐々に現れます。
タイトルテキストが左から右へクリッピングマスクで 800ms・ease-out で
スライドインするアニメーションを作ってください。JavaScriptアニメーションライブラリの活用
Section titled “JavaScriptアニメーションライブラリの活用”より高度なアニメーションには、専用のJSライブラリを指定します。
プロフェッショナルグレードのアニメーションライブラリ。複雑なシーケンスや物理演算に対応します。
GSAPを使って、ページスクロール時に機能一覧のアイテムが
スタッガードフェードインするアニメーションを実装してください。Vanta.js
Section titled “Vanta.js”設定最小限で美しいアニメーション背景を実装できるライブラリ。
Vanta.js の BIRDS エフェクトを、ニュースレター登録セクションの
さりげないアニメーション背景として追加してください。Three.js
Section titled “Three.js”ブラウザ上で3Dシーン・モデル・アニメーションを作るライブラリ。
Three.js を使って、ランディングページの背景にゆっくり回転する
プロダクトの3Dモデルを追加してください。COBE.js
Section titled “COBE.js”インタラクティブな3Dグローブを軽量に実装できるライブラリ。
COBE.js を使って、「グローバル展開」セクションに
拠点のマーカーを表示したインタラクティブな地球儀を追加してください。アニメーションのベストプラクティス
Section titled “アニメーションのベストプラクティス”- UIインタラクション（ボタン押下・ホバーなど）は 500ms 以内 に収める
- アニメーションは「控えめ・目的あり」が原則。過剰な動きはUXを損なう
prefers-reduced-motionメディアクエリを実装して、アニメーション軽減設定を持つユーザーを尊重する
prefers-reduced-motion: reduce を設定しているユーザーに対しては
すべてのアニメーションを無効化してください。 クイズ