SVGとアイコンのアニメーション完全ガイド！初心者でもできるCSS連携
生徒
「ホームページのアイコンがくるくる回ったり、線が描かれるように現れたりするのって、どうやって作るんですか？」
先生
「それはＳＶＧという画像形式と、ＣＳＳのアニメーションを組み合わせているんですよ。」
生徒
「ＳＶＧって普通の画像とは違うんですか？なんだか難しそうですね。」
先生
「実はＳＶＧは数学の図形のようなデータなので、色や動きを自由自在に操れるんです。基本からゆっくり解説しますね！」
1. 拡大してもボケない魔法の画像ＳＶＧとは
ウェブサイトで使われる画像には、大きく分けて二つの種類があります。一つは、写真のような小さな点の集まりでできている「ビットマップ形式」。もう一つが、今回紹介する「ＳＶＧ（エスブイジー）」という「ベクター形式」です。
ビットマップ形式の画像は、無理やり大きく引き延ばすと輪郭がギザギザになったり、ぼやけたりしてしまいます。しかし、ＳＶＧは「点と線をどのように結ぶか」という計算データでできているため、どれだけ大きくしても、あるいはどれだけ小さくしても、常にクッキリと綺麗な状態で表示されます。これがＳＶＧの最大の特徴です。
プログラミング未経験の方にとって意外なのは、ＳＶＧは「画像」でありながら、その中身は「文字（コード）」で書かれているという点です。文字で書かれているからこそ、後から色を変えたり、特定の線だけを動かしたりといった高度なアニメーションが可能になります。アイコンやロゴマークなど、はっきりとした図形を扱うのに最も適した形式なのです。
2. アイコンフォントとＳＶＧアニメーションの違い
ウェブ制作でよく使われるものに「アイコンフォント」があります。これは、ＡやＢといった文字と同じように、特定の「絵」をフォントとして扱う技術です。有名なものに「Ｂｏｏｔｓｔｒａｐアイコン」などがあります。これらは文字と同じなので、サイズや色を簡単に変えられるのが魅力です。
一方で、ＳＶＧはさらに自由度が高いのが特徴です。アイコンフォントは「形そのもの」を変えることは難しいですが、ＳＶＧなら「星型のアイコンの角を丸くする」といった変形もプログラムで制御できます。アニメーションの面でも、ＳＶＧは一つ一つのパーツ（例えば時計のアイコンの短針と長針）を別々に動かすことができるため、より複雑で表現力豊かな演出が可能になります。
初心者のうちは、手軽に色や大きさを変えたいときはアイコンフォント、中身の線や図形を細かく動かしたいときはＳＶＧ、というように使い分けるのがおすすめです。どちらもＣＳＳという言葉を使って動かすことができるので、基本の書き方を覚えてしまえば応用が効きます。
3. ＣＳＳを使ってアイコンを回転させる基本の動き
まずは、最もシンプルで使いやすい「回転」のアニメーションを作ってみましょう。設定アイコンや読み込み中のマークなど、くるくると回る動きは多くのサイトで見かけますよね。
ＣＳＳには「＠ｋｅｙｆｒａｍｅｓ（キーフレーム）」という、アニメーションの台本を作る命令があります。ここで「０度から３６０度まで回転する」という指示を出し、それをアイコンに適用します。回転には「ｔｒａｎｓｆｏｒｍ（トランスフォーム）」という命令の中の「ｒｏｔａｔｅ（ロテート）」という設定を使います。文字通り、要素を回すための専用の道具です。
このアニメーションを「ｉｎｆｉｎｉｔｅ（インフィニット）」という設定にすると、途切れることなく永遠に回り続けます。たった数行のコードで、静止していたアイコンに命を吹き込むことができるのです。まずはこの基本をマスターしましょう。
<style>
.rotate-icon {
display: inline-block;
font-size: 50px;
color: #0d6efd;
/* spinという名前の台本を3秒かけて永遠に繰り返す */
animation: spin 3s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<div class="text-center p-4">
<i class="bi bi-gear-wide-connected rotate-icon"></i>
<p>設定アイコンがくるくる回ります</p>
</div>
4. ＳＶＧのパスを使った線画アニメーションの仕組み
ＳＶＧで最も人気のあるアニメーションの一つが、透明な紙にペンで線を描いていくような「ドローイングアニメーション」です。これには「ｄａｓｈ（ダッシュ）」という点線の設定を利用した、ちょっとした裏技を使います。
まず、ＳＶＧの線をものすごく長い点線にします。点線の「線」の部分と「空白」の部分を、その図形の全周と同じ長さに設定するのです。すると、最初は「空白」の部分が重なって何も見えない状態になります。そこから点線の位置をじわじわとずらしていくことで、隠れていた「線」がスルスルと現れ、まるで今描いているかのように見えるのです。
この仕組みには「ｓｔｒｏｋｅ－ｄａｓｈａｒｒａｙ（ストローク・ダッシュアレイ）」と「ｓｔｒｏｋｅ－ｄａｓｈｏｆｆｓｅｔ（ストローク・ダッシュオフセット）」という二つの難しい名前の命令を使いますが、最初は「点線の隙間を調整して見せているんだな」と理解するだけで十分です。これを使えば、ロゴマークをオシャレに出現させることができます。
<style>
.draw-svg {
/* 線の長さを設定（ここでは適当な長い数字） */
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: draw 4s ease forwards;
fill: none;
stroke: #ffc107;
stroke-width: 2;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
</style>
<div class="text-center">
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" class="draw-svg" />
</svg>
<p>円が描かれるアニメーション</p>
</div>
5. ホバー時にアイコンの色と形を同時に変える
ボタンの上にマウスをのせたとき（ホバー）、アイコンが反応すると「操作している感覚」が強まります。単に色を変えるだけでなく、少しだけ跳ねさせたり、大きさを変えたりする動きを組み合わせてみましょう。
例えば、メールのアイコンにマウスをのせたときに、封筒が開くような動きや、色が鮮やかになる演出です。これは「：ｈｏｖｅｒ」という条件指定と、「ｔｒａｎｓｉｔｉｏｎ（トランジション）」という滑らかに変化させる命令を組み合わせて作ります。複数の命令を同時に書くことで、色・大きさ・位置を一気に変化させることができます。
このようなアニメーションは、ユーザーに「ここは押せますよ」と優しく教える合図になります。派手すぎる動きは逆効果になることもありますが、ほんの少しの揺れや色の変化はサイトのクオリティを大きく底上げしてくれます。初心者のうちは、この「さりげない反応」を目標に練習してみましょう。
<style>
.hover-icon-box {
font-size: 60px;
cursor: pointer;
color: #6c757d;
transition: all 0.4s ease;
}
/* マウスをのせた時の変化 */
.hover-icon-box:hover {
color: #e83e8c;
transform: scale(1.3) rotate(-10deg);
}
</style>
<div class="text-center p-4">
<i class="bi bi-heart-fill hover-icon-box"></i>
<p>マウスをのせるとドキッと動きます</p>
</div>
6. ＳＶＧの中のパーツを個別に動かすテクニック
ＳＶＧの本当の凄さは、一つの画像の中にある「部品」をバラバラに扱えることです。例えば、家の形のＳＶＧがあったとして、「煙突の煙だけを出す」「窓の明かりだけを点滅させる」といった、まるでジオラマを動かすような楽しみ方があります。
これを実現するには、ＳＶＧのコードの中に、部品ごとの「名前（クラス名）」をつけてあげます。そして、その名前に対して別々のアニメーションを設定します。一つのファイルなのに、複数の命が宿っているような、非常にリッチな演出が可能になります。
最初は難しく感じるかもしれませんが、自分で描いたイラストや、無料配布されているＳＶＧ素材の中身を覗いてみることから始めてみましょう。コードの中に「＜ｐａｔｈ＞」や「＜ｃｉｒｃｌｅ＞」といった単語が見つかるはずです。それらが部品の正体です。これらを自由に操れるようになると、ウェブ制作の楽しさは何倍にも膨れ上がります。
7. アニメーションを繰り返すタイミングの微調整
すべてのアニメーションが同じタイミングで動いていると、少し機械的で不自然に見えることがあります。特に複数のアイコンを並べる場合は、動き出す時間を少しずつズラす「ｄｅｌａｙ（ディレイ）」というテクニックを使いましょう。
「１番目のアイコンはすぐ動く」「２番目は０.５秒待ってから動く」というように設定すると、リズムが生まれ、サイト全体に心地よい流れができます。また、動きの加減速を決める「イージング（ｅａｓｉｎｇ）」も重要です。最初はゆっくり、最後は素早く、といった変化をつけることで、生き物のような自然な躍動感を出すことができます。
これらは「数値」を少し変えるだけの作業ですが、その絶妙な調整がデザインのセンスとなります。何度も数字を書き換えて、自分の目で見て「これが一番心地いいな」と感じるタイミングを探してみてください。パソコン初心者の方でも、この「微調整」こそが最もクリエイティブで楽しい時間になるはずです。
8. ＳＶＧアニメーションを扱う際の注意点
自由度の高いＳＶＧアニメーションですが、注意点もあります。一つは、あまりに複雑な図形を大量に動かすと、パソコンの動作が重くなってしまう可能性があることです。複雑な計算が必要なＳＶＧは、特にスマートフォンのバッテリーを消費しやすいため、適度なシンプルさを心がけましょう。
また、古いブラウザ（インターネットを閲覧するソフト）では、最新のアニメーションが正しく表示されないこともあります。せっかく作った動きが見られないのは悲しいので、多くの人が使っている標準的な命令を使うのが安全です。まずは基本の「回転」「拡大」「移動」「透明度の変化」を組み合わせて作ることから始めれば、ほとんどの環境で綺麗に動かすことができます。
最後に、ＳＶＧコードはとても長くなることがあります。ファイルがごちゃごちゃしてくると間違いを見つけにくくなるので、こまめにメモを残したり、整理整頓しながら書く習慣をつけましょう。綺麗なコードは、綺麗なアニメーションへの近道です。
9. 無料素材を活用してすぐに始めよう
「自分でＳＶＧを作るなんて無理！」と思っている方も安心してください。世の中には、無料で使える高品質なＳＶＧアイコン素材が溢れています。「Ｂｏｏｔｓｔｒａｐ Ｉｃｏｎｓ」や「Ｆｏｎｔ Awesome」などはその代表です。これらを利用すれば、自分で一から形を描く必要はありません。
まずは気に入ったアイコンをダウンロードして、今回紹介したＣＳＳを適用してみることからスタートしましょう。他人が作った綺麗な図形が、自分の書いたコードで動き出す瞬間は、プログラミング学習の中で最高の喜びの一つです。その感動が、次のステップへ進む原動力になります。
どんなプロの制作者も、最初は誰かのコードを真似することから始めました。この記事で紹介した例をコピーして、色やスピードを変えるだけでも、それは立派な第一歩です。楽しみながら、自分だけの動くアイコンサイトを作ってみてくださいね！
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
