アニメーションの基本を理解する
スムーズな動きの仕組みと、実装の第一歩
SVGアニメーションの力は、その流動性にあります。ただ動くだけじゃなく、意図的に作られた動きがユーザーを引き込む。実は、アニメーション効果を作るのはそこまで複雑じゃありません。CSSと少しのJavaScriptで、プロレベルの動きが実現できます。
基本は3つです。まず、CSSアニメーションで単純な移動やスケール変化を実装する。次に、トランジションで要素間の変化を滑らかにする。最後に、JavaScriptで複雑なシーケンスを制御する。この3つの組み合わせで、ほぼすべての動きが作れます。
重要なポイント：アニメーションは見た目だけじゃなく、ユーザーの認識をガイドする。適切なタイミングと速度で動きをつけることで、インタラクションがより自然に感じられます。
CSSアニメーションで動きをつける
@keyframesを使った実装方法と最適なタイミング設定
CSSアニメーションは、@keyframesルールで定義します。開始状態（0%）から終了状態（100%）までの変化を記述する。シンプルなので、ほとんどのケースでこれで十分。例えば、SVG要素を2秒かけて右に200px移動させたい場合、animation-durationを2sに、transform: translateX(200px)で移動を指定するだけです。
タイミング関数も重要。linear（一定速度）はロボットっぽく見えます。ease-in-outだと、最初と最後がゆっくりで、中間が速い。これが自然な動きに見えます。cubic-bezierを使えば、もっと細かく調整できます。
@keyframes animation-nameで開始地点と終了地点を定義
animation-durationで再生時間を指定（例：2s、3s）
animation-timing-functionで動きの質感を調整
JavaScriptで複雑な動きを制御する
ユーザーのインタラクションに応じた動的なアニメーション実装
CSSだけでは、ユーザーのアクションに応じた複雑な動きは作れません。そこで登場するのがJavaScript。クリックやホバーに反応して、複数のアニメーションを順番に再生したり、スクロール位置に合わせて動きを変えたりできます。
例えば、SVGパスの描画アニメーション。ユーザーがセクションにスクロール到達したとき、自動的に線が描かれるように見せる。これには、SVG.jsやGSAPといったライブラリが便利。でも、プレーンなJavaScriptでも実装可能です。requestAnimationFrameを使って、毎フレーム位置を計算し、SVG要素に反映させる方法もあります。
実装のポイント：
- イベントリスナーでユーザーアクションを検出
- classList.addで特定のクラスを付与してアニメーション開始
- transitionendイベントで完了時の処理を実行
パフォーマンスを最適化する
滑らかなアニメーションを実現するための実装工夫
アニメーションがカクついて見えるのは、たいていパフォーマンス問題。60fps（毎秒60フレーム）を維持することが滑らかさの鍵です。重い計算をメインスレッドで実行すると、ブラウザがカクついてしまいます。
対策は3つ。まず、will-changeプロパティでブラウザにこのプロパティは変わるよと教える。次に、transform と opacity だけを変更する。これらはGPUで高速処理される。最後に、複雑な計算はWeb Workersに任せる。フロントエンド開発歴13年の経験から言うと、transform を活用するだけで劇的に改善することがほとんどです。
推奨される実装方法：
positionやwidthの変更を避け、transform: translateX() を使う。margin-leftは避けてtransformを選ぶ。これだけで、モバイルでも滑らかなアニメーションが実現できます。
実践的な例：ポートフォリオで使える3つのアニメーション
実装して、今すぐプロジェクトに活かせるテクニック
1. パスの描画アニメーション
SVGのパスが、左から右へ描かれるように見せる。stroke-dashoffsetを使って、破線を段々と見える状態にする。ロゴやアイコンの登場シーンに最適です。スクロール到達で自動再生させると、見た目の印象がぐっと上がります。
2. 要素の浮遊アニメーション
transform: translateY を使った上下の微妙な動き。背景のイラストに使うと、ページに生命感が出ます。35秒のループアニメーションで、自然に見えます。ほぼCSSだけで実装できるので、JavaScriptなしで軽い。
3. マウスホバー時の色変化
fill や stroke の色をなめらかに変更。0.3秒程度の短いトランジションで、ボタンやアイコンの反応が自然に見えます。ユーザーのインタラクションに直感的に応答するので、UXが向上します。
次のステップへ
アニメーション効果は、ポートフォリオを際立たせるための強力な武器です。でも、すべての要素を動かす必要はありません。重要なのは、意図を持った動き。ユーザーの目をどこに向けたいのか、どの瞬間に印象を残したいのかを考えて、そこにアニメーションを配置する。そうすると、あなたのポートフォリオは確実に他とは違う存在になります。
これまでに学んだCSSアニメーション、JavaScriptによる制御、パフォーマンス最適化は、すべて実務で必要な知識です。次は、実際にコードを書いてみてください。試行錯誤の中で、あなたの動きのセンスが磨かれます。
ポートフォリオへの組み込み方法や、さらに高度なテクニックについて知りたい方は、次の記事も参考にしてください。
免責事項
このガイドは教育目的で提供されています。記載されているテクニックや実装方法は、特定のプロジェクトやブラウザ環境によって動作が異なる場合があります。ブラウザの互換性確認やパフォーマンステストは、各自の環境で行ってください。本記事の情報に基づいて実装した結果についての責任は負いかねます。