TDMO

SVGロゴをWebアニメーションさせる方法 — CSSの基本と、要素ごとに動かすコツ

結論: SVGロゴのWebアニメーションは、外部ライブラリなしのCSSだけでかなりのことができる。透明度・移動・回転はもちろん、「線が描かれる」「文字が順番に出る」といったロゴらしい演出も、@keyframes と stroke-dashoffset、animation-delay の3つを押さえれば作れる。この記事では、コピーしてそのまま使えるコードで基本を解説し、最後に手作業がつらくなったとき用の無料エディターも紹介する。

なぜロゴはSVGで動かすのか

ロゴをGIF動画で用意すると、拡大するとぼやけ、色数も限られ、ファイルも重くなる。SVGは図形を数式で持つベクター形式なので、どんな解像度でも輪郭が鮮明で、ファイルも軽い。さらに重要なのは、SVGの中身が path や circle、g（グループ）といった個々の要素に分かれていることだ。つまり「シンボルの輪郭だけ」「社名の文字だけ」を狙って別々に動かせる。これがロゴアニメーションの肝になる。

まず最小の一歩 — CSSでフェードイン

SVGはHTMLに直接貼れる（インラインSVG）。貼ってしまえば、中の要素は普通のHTML要素と同じようにCSSで動かせる。もっとも基本的なフェードインはこれだけだ。

<svg viewBox="0 0 240 80">
  <g class="logo">
    <!-- パスや図形 -->
  </g>
</svg>

<style>
.logo {
  animation: fade-in 0.8s ease-out both;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
</style>

ポイントは末尾の both。これは animation-fill-mode の指定で、「開始前は最初のフレーム、終了後は最後のフレームの見た目を保つ」という意味だ。これを付けないと、再生前に一瞬ロゴが見えてしまったり、終了後に消えたりする。

ロゴらしい定番 — 線が描かれる演出

輪郭が一筆書きのように描かれていく演出は、stroke-dasharray（破線の間隔）と stroke-dashoffset（破線の開始位置のずれ）を組み合わせて作る。線全体をいったん「見えない破線」にしておき、そのずれをゼロに戻すことで、線が現れていくように見せる仕組みだ。

<path class="draw" pathLength="100"
      d="M10 40 C40 10 60 70 90 40"
      fill="none" stroke="#1967d2" stroke-width="4" />

<style>
.draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw 1.2s ease-in-out forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}
</style>

コツは pathLength="100" だ。本来 stroke-dasharray には実際の線の長さ（ピクセル）を入れる必要があり、パスごとに違って面倒になる。pathLength を指定すると「この線の長さを100とみなす」という宣言になり、どんなパスでも dasharray: 100 で全長を表せる。forwards は前述の fill-mode で、描き終わった状態を保つ指定だ。

つまずきやすい本題 — 「一括」ではなく「要素ごと・順番に」

多くの簡易ツールは、SVG全体にまとめてフェードをかけて終わりだ。しかしプロっぽく見えるロゴアニメーションは、たいてい要素が時間差で登場する。「輪郭を描いてから、少し遅れてシンボルが出て、最後に社名の文字が1文字ずつ」——この時間差（ディレイ）こそが印象を決める。

文字を1つずつずらして下から出す例を見てみよう。各文字に animation-delay を少しずつ足していくのがポイントだ。

<g class="name">
  <path class="ch" d="..." />  <!-- T -->
  <path class="ch" d="..." />  <!-- D -->
  <path class="ch" d="..." />  <!-- M -->
  <path class="ch" d="..." />  <!-- O -->
</g>

<style>
.ch {
  opacity: 0;
  transform-box: fill-box;      /* SVG要素の変形はこれが重要 */
  transform-origin: center;
  animation: rise 0.5s ease-out forwards;
}
.ch:nth-child(1) { animation-delay: 0s;    }
.ch:nth-child(2) { animation-delay: 0.06s; }
.ch:nth-child(3) { animation-delay: 0.12s; }
.ch:nth-child(4) { animation-delay: 0.18s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
</style>

見落としがちなのが transform-box: fill-box; だ。SVG内の要素をCSSの transform で動かすと、既定では原点がSVGの左上（0,0）になり、回転や拡大が意図しない位置を軸に暴れる。transform-box: fill-box を付けると、原点がその要素自身の枠を基準になり、transform-origin: center で「その要素の中心」を軸にできる。回転や拡大縮小を使うときは、ほぼ必須の一行だ。

忘れてはいけない — 動きを止めたい人への配慮

動きに酔いやすい人や、OSで「視差効果を減らす」を有効にしている人のために、アニメーションを止める設定を用意するのがWebの作法だ。これは prefers-reduced-motion というメディアクエリ一つで対応できる。

@media (prefers-reduced-motion: reduce) {
  .logo, .draw, .ch {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;   /* 線は最初から描き終わった状態に */
  }
}

動きを消すだけでなく、「最終的な見た目（完成したロゴ）」がちゃんと表示されるようにしておくのが大事だ。アニメーションを消した結果ロゴが透明のまま消えてしまう、という事故を防ぐ。

手で書くと、どこがつらくなるか

ここまでのコードは仕組みとしては単純だが、実際のロゴは要素が数十個ある。「どの要素を、何秒から、何秒かけて、どんなイージングで動かすか」を全要素ぶん、数値を少しずつ変えては保存してブラウザで再読み込み……を繰り返すのは、かなり根気がいる。特にタイミングの微調整——0.06秒の時間差を0.08秒に変えたときの印象の違いを詰める作業は、コードとプレビューを往復していると日が暮れる。

そこで、この往復をブラウザ上で完結させ、最終的に上のようなHTML/CSSを書き出すためのエディターを作った。

ブラウザだけで仕上げる — TDMO SVG Motion

TDMO SVG Motion（SVG Motion Studio）は、無料・登録不要で使えるSVGアニメーションエディターだ。手元のSVGを読み込むと、パスやグループが要素ごとに一覧化され、タイムライン上で開始時刻・長さ・イージングを視覚的に調整できる。この記事で説明した「要素ごとに時間差で動かす」作業を、数値の手打ちではなくドラッグで詰められる。

扱える効果は、透明度・移動・拡大縮小・回転・線描画・塗り色・線色・線幅・破線・モーフィング・マスク表示・ぼかしの12種類。開始のきっかけも、ページ表示時・クリック・hover・スクロールから選べる。仕上げたら、次の形式へ書き出せる。

AIによる下書き機能もあるが、思想は「AIに丸投げしない」だ。AIは大まかな下書き（編集しやすい基本効果）だけを提案し、速さ・強さ・時間差といった仕上げは人が手で詰める。AIが勝手に生のHTMLやCSS、JavaScriptを書くことはなく、アプリが検証済みの内部形式だけを生成する設計になっている。

プライバシー面も、ロゴという資産を扱う前提で設計している。通常の編集はすべてブラウザ内で完結し、APIキーはご自身のものを使う方式（BYOK）で、タブを閉じると消える。AIを使うときも、SVG本体やパスの座標そのものは送らず、送信内容と料金が発生する可能性を生成前に確認できる。対応AIはOpenAI・Gemini・Anthropic・Kimi。

使い方は4ステップ

難しい準備はいらない。svg.tdmo.org を開けば、その場で始められる。

  1. SVGを開く — 手元のロゴを読み込む。用意がなければサンプルSVGでも試せる（最大2MB・1,500要素まで）。
  2. 動きを追加 — プリセット、詳細設定、またはAIの下書きから効果を付ける。
  3. 人の手で調整 — 右パネルで数値を、タイムラインで開始時刻と長さを整える。
  4. 書き出す — HTML＋CSSやSVG、GIF・MP4などへ出力し、コピーして自分のサイトに貼る。

まとめ

SVGロゴのWebアニメーションは、「@keyframesで動きを定義」「stroke-dashoffsetで線を描く」「animation-delayで要素を順番に出す」——この3つの型を押さえれば、ライブラリなしのCSSだけで十分に作れる。まずは手を動かして仕組みを理解し、要素が増えてタイミングの微調整が面倒になったら、TDMO SVG Motion のようなエディターで往復作業を短縮するとよい。どちらの道でも、出力されるのは依存ゼロの素直なコードだ。

← 記事一覧へ