ちょっとした動きでここまで変わる！SVGとマイクロインタラクションで作る、使っていて楽しいWebサイト

2026.07.13
目次

最近のWebサイト、なんか「触っていて気持ちいい」と思いませんか？

スマホを操作したり、色々なWebサイトを見たりしているとき、ボタンを押した瞬間のちょっとしたアニメーションや、ページを引っ張って更新するときの動きが、なんだかクセになることってありますよね。

最近のWebサイトでは、ただ「情報が載っている」「エラーが出ずに動く」というだけでは、少し物足りなく感じられてしまうことが増えました。ユーザーは、操作したときの「心地よさ」や「ちゃんと動いているよ」という直感的なフィードバックを無意識のうちに感じ取り、選択しています。

この心地よさを裏で支えているのが「マイクロインタラクション」という考え方。そして、それを軽くて綺麗に表現するために欠かせないのが「SVG」という画像形式です。

今回は、この2つを組み合わせて、サイトの使い心地をグッと良くするためのヒントをまとめてみました。

そもそも「マイクロインタラクション」ってなんだろう？

マイクロインタラクションとは、一言でいうと「ユーザーの操作に対するちょっとした画面の反応」のことです。画面全体が切り替わるような大きな動きではなく、ボタンを押したときに形が変わる、通知が来たときにアイコンが少し揺れる、といった本当に小さな動きを指します。

普段は目立たない部分ですが、これがあるかないかで、サイトやアプリの印象はガラリと変わります。動きがあることで、味気ない画面がより親しみやすく感じられるでしょう。

4つの要素で考えてみる

このマイクロインタラクションをうまく設計するために、UXデザイナーのダン・サファー氏は以下の4つのステップで考えると分かりやすい、と教えてくれています。

  1. トリガー（きっかけ）
    動きが始まるきっかけのことです。「ユーザーがボタンをクリックした」「画面を下にスクロールした」という操作のほか、「システムから通知が届いた」という場合もトリガーになります。
  2. ルール（仕組み）
    きっかけが起きたあと、画面がどう動くかの「条件」です。例えば、「ボタンを押したら、0.3秒かけて色が変わって、中のアイコンが1回転する」といった、仕組みづくりの部分ですね。
  3. フィードバック（見た目の変化）
    １つ前に作ったルールに沿って、実際に画面が動いてユーザーに見せる表現のことです。ボタンの色が変わったり、音が鳴ったり、スマホがブルッと震えたり。ここがデザイナーやエンジニアの腕の見せ所になります。
  4. ループとモード（繰り返しや期間）
    その動きがどれくらい続くのか、2回目以降はどうなるのか、という決まりです。例えば、「初めてサイトに来たときだけアイコンを揺らして、2回目以降は静止させる」といった細かい調整をここで考えます。

なんでここでSVGを使うの？3つのいいところ

ボタンやアイコンを動かすとき、昔ながらのPNGやJPEGといった画像を使うと、どうしても動きがカクついたり、画質が荒くなったりしてうまくいきません。そこで大活躍するのがSVGです。なぜSVGがこれほど選ばれているのか、理由はシンプルに3つあります。

① どんな画面で見てもクッキリ綺麗

SVGは、点と線を数式で計算して描く「ベクター形式」の画像です。そのため、スマホの高画質ディスプレイや、大きな4Kモニターでどれだけ拡大しても、輪郭が絶対にぼやけません。いつでもクッキリ、綺麗に見せることができます。

② CSSやJavaScriptで自由自在に動かせる

SVGの中身は、実はHTMLにそっくりなテキストデータ（XML）でできています。つまり、WebブラウザにとってはHTMLの一部と同じ。SVGの中にある丸（<circle>）や線（<path>）の1つひとつにクラス名をつけ、CSSやJavaScriptで直接色を変えたり、移動させたり、回転させたりできるのが強みです。

③ とにかく軽くてサクサク動く

凝ったアニメーションをGIF画像や動画で作ろうとすると、ファイルサイズが重くなって、ページの読み込みが遅くなりがちです。でもSVGなら、文字のコードだけで動かせるので、データ量が驚くほど軽くて済みます。スマホの通信環境でもサクサク動いてくれるので、ユーザーにストレスを与えません。

実際に作ってみよう！よくある実装パターン2つ

ここからは、実際のWebサイトでよく見かける具体的な動きの作り方を2つ紹介します。

パターン1：ハンバーガーメニューが「×」に変わる動き（CSS）

スマホサイトでよくある、三本線のメニューアイコンをタップすると、スムーズに「×（閉じる）」に変形する動きです。SVGの線をCSSで動かしてみましょう。

【HTML / SVG】

<button class="menu-trigger" aria-label="メニューを開く" aria-expanded="false">
  <svg viewBox="0 0 100 100" width="60" height="60">
    <line class="line line-top" x1="20" y1="30" x2="80" y2="30" stroke="black" stroke-width="6" stroke-linecap="round" />
    <line class="line line-middle" x1="20" y1="50" x2="80" y2="50" stroke="black" stroke-width="6" stroke-linecap="round" />
    <line class="line line-bottom" x1="20" y1="70" x2="80" y2="70" stroke="black" stroke-width="6" stroke-linecap="round" />
  </svg>
</button>

【CSS】

/* ボタンの余計な枠線などを消す */
.menu-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
}

/* 全ての線に滑らかな変化をつける */
.line {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center; /* 回転するとき、線の中心を軸にする */
  transform-box: fill-box;
}

/* メニューが開いた状態（is-activeがついたとき）の動き */
.menu-trigger.is-active .line-top {
  transform: translateY(20px) rotate(45deg); /* 下に移動して45度傾ける */
}

.menu-trigger.is-active .line-middle {
  opacity: 0;
  transform: scaleX(0); /* 真ん中の線はスーッと消す */
}

.menu-trigger.is-active .line-bottom {
  transform: translateY(-20px) rotate(-45deg); /* 上に移動して逆向きに45度傾ける */
}

【JavaScript】

const trigger = document.querySelector('.menu-trigger');

trigger.addEventListener('click', () => {
  // クラスの付け外し
  const isActive = trigger.classList.toggle('is-active');
  // 読み上げソフト用の設定を切り替える
  trigger.setAttribute('aria-expanded', isActive ? 'true' : 'false');
});

パターン2：いいね！ボタンを押すとハートが弾ける動き（JS + CSS）

SNSでおなじみの、クリックした瞬間にハートがポンッと大きくなり、周りに小さなドットが飛び散る楽しい動きです。

【HTML / SVG】

<button class="like-button" aria-label="お気に入りに追加">
  <svg viewBox="0 0 100 100" width="80" height="80">
    <g class="particles">
      <circle cx="50" cy="15" r="3" />
      <circle cx="85" cy="50" r="3" />
      <circle cx="50" cy="85" r="3" />
      <circle cx="15" cy="50" r="3" />
    </g>
    <path class="heart-path" d="M50,80 C50,80 15,55 15,35 C15,20 27,15 37,15 C44,15 48,22 50,25 C52,22 56,15 63,15 C73,15 85,20 85,35 C85,55 50,80 50,80 Z" fill="none" stroke="#ccc" stroke-width="6" />
  </svg>
</button>

【CSS】

.like-button {
  background: none;
  border: none;
  cursor: pointer;
}

/* ハートの基本設定 */
.heart-path {
  transition: fill 0.2s, stroke 0.2s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center;
}

/* マウスを乗せたとき */
.like-button:hover .heart-path {
  stroke: #ff4757;
}

/* クリックされたとき（いいね！状態） */
.like-button.is-liked .heart-path {
  fill: #ff4757;
  stroke: #ff4757;
  animation: heartPop 0.3s forwards;
}

/* 周りのドットの初期状態（隠しておく） */
.particles circle {
  fill: #ff7f50;
  opacity: 0;
  transform-origin: center;
}

/* ハートがポンッと弾けるアニメーション */
@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ドットが広がるアニメーション */
@keyframes burst {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.like-button.is-liked .particles circle {
  animation: burst 0.6s ease-out forwards;
}

【JavaScript】

const likeBtn = document.querySelector('.like-button');

likeBtn.addEventListener('click', () => {
  likeBtn.classList.toggle('is-liked');
});

気持ちいい動きを作るために、気をつけておきたいこと

SVGとマイクロインタラクションを組み合わせて使うとき、ただ「かっこいい動き」を作るだけでは、逆に使いにくくなってしまうことがあります。作るときに頭の片隅に置いておきたいポイントを3つにまとめました。

1. 誰もが同じように使える工夫（アクセシビリティ）

画面の動きは目で見て楽しいものですが、目が不自由で画面読み上げソフトを使っている人には、その変化が伝わりません。また、チカチカした動きが苦手な人もいます。

  • ボタンには aria-label を使って「何をするボタンなのか」を言葉で入れておく。
  • メニューが開いたときなどは、JavaScriptで aria-expanded="true" のように状態が変わったことをシステムに伝える。
  • パソコンやスマホのOS設定で「アニメーションを減らす」にしている人のために、動きを控えめにするCSSコード（prefers-reduced-motion）を書いておく。

2. データを軽くしてスムーズに動かす

SVGは軽いのが魅力ですが、イラストが複雑すぎて線の数が何万本もあるようなデータだと、ブラウザが描画するのに疲れてしまい、動きがガクガクになります。

  • IllustratorやFigmaからSVGを書き出すときは、いらないレイヤーや透明なパスをきれいに整理しておく。
  • 「SVGOMG」などの無料のWEBツールを使って、コード内にある無駄なデータを削ってから使う。

3. 現実っぽい動き（イージング）にこだわる

アニメーションのスピードが最初から最後までずーっと同じ（等速）だと、ロボットのようでなんだか不自然に感じられます。現実世界のモノは、動き始めるときに加速して、止まるときにゆっくり減速しますよね。

  • CSSの transition-timing-function で ease-out や cubic-bezier() を使い、心地よい「加減速」をつける。
  • 動きの長さは 0.15秒〜0.4秒 くらいにする。これより長いと、ユーザーは「反応が遅くて重いサイトだな」と感じてしまいます。

小さなこだわりが、サイトをもっと魅力的にする

マイクロインタラクションは、ユーザーとWebサイトとの「挨拶」のようなものです。そして、その挨拶を自然に、スムーズに表現できる道具が「SVG」です。

最初から難しいものを作る必要はありません。まずは、よく使うボタンのホバー効果や、お気に入りアイコンのクリック時の反応など、小さなところからSVGアニメーションを試してみてください。そのちょっとしたこだわりが、サイトを訪れた人を楽しい気持ちにさせてくれるはずです。

前回の記事でSVG pathの操作方法やSVG maskの使い方について書いています！
よかったらそちらもどうぞ。

SVGパスを自在に操るアニメーション手法
SVGマスク、クリップパス、そしてモーフィングについて

才木 啓 MARKUP ENGINEER

マークアップエンジニアとしてフムフムに入社。子煩悩で超絶優しい性格から人と出会うとその人を虜にしてしまう。現在は完全リモートワークで、フムフムと家族を支えている。 釣りが好きで、今までにアジを３４匹釣り上げた。

関連記事