線が描かれる・文字が書かれる・道すじを進む・形が変わる・グラフが伸びる・波が揺れるなど、SVGと図形の動きを10種類の型に分け、AIへの指示文・試せる見本・コードを載せています。見本の下で時間や速さを変えると、指示文とコードも同じものに変わります。
SVG・図形の動きはどの型を選ぶか
SVG の動きは、線を描くもの・形が動くもの・数字を見せるもの・背景や区切りの4つに分かれます。線を描く型と数字を見せる型は、画面に入ったときに1回だけ動かします。背景や区切りの型は動き続けるので、止める手段を付け、1ページに1か所までにします。
| こんなとき | 向いている動き | 形の型（UIパターン集） |
|---|---|---|
| ロゴやイラストを、ペンで描くように見せたい | 線が描かれるように引かれる（線画アニメーション） | — |
| 代表のあいさつの結びに、サインを書き入れたい | 手書きの文字が書き順どおりに書かれる（手書きアニメーション） | 著者・監修者ボックス |
| フォームを送ったことを、はっきり伝えたい | 円が描かれ、中にチェックが引かれる（チェックマークアニメーション） | フォーム（送信完了） |
| 配送の経路や手続きの流れを、「どこからどこへ」で見せたい | 決めた道すじに沿って進む（パスアニメーション） | フロー |
| 再生⇄一時停止のように、押すたびにアイコンの意味が変わる | アイコンが別の形に変わる（モーフィング） | — |
| ファーストビューに、雑誌のような目印のバッジを置きたい | 円に沿って並んだ文字がゆっくり回る（サークルテキスト） | — |
| 図形でできたロゴを、部品から組み上がるように見せたい | 丸・三角・四角が順に組み上がる（ジオメトリックアニメーション） | — |
| 実績やアンケートの数字を、グラフで見せたい | 棒グラフが伸び、円グラフが埋まる（グラフアニメーション）。数字そのものは数字が数え上がる | — |
| 写真の少ないセクションに、やわらかい印象を少しだけ足したい | 不定形の図形がゆっくり形を変え続ける（ブロブアニメーション） | — |
| セクションの境目を、まっすぐな線より柔らかく見せたい | セクションの境目の波がゆっくり揺れる（ウェーブアニメーション） | — |
ハンバーガーメニューの3本線が×に変わる動きは、形を変えずに線を回すだけで作れるので、部品の動きのハンバーガーメニューアニメーションにまとめています。
どの型でも守ること
- 描く前を隠す指定は、JavaScript が付ける class の下に書く。JavaScript が動かない環境でも、描き終わった線・組み上がった絵・伸びきったグラフが見えるようにします。
- 線は
pathLength="1"で描く。stroke-dasharray: 1 1とstroke-dashoffset: 1 → 0だけで、どの長さの線も同じ書き方で描けます。描く前はvisibility: hiddenにして、端の丸い点が先に見えないようにします。 - 線や形（
d）を動かす型は、数を絞る。stroke-dashoffsetやdの動きは描き直しが走ります。1つの絵の線は10本くらいまで、同時に動かす絵は1つまでにし、動き続けるものはtransformだけで作ります。 - 意味のある図は文言でも伝える。図の
svgにはrole="img"とaria-label、グラフには同じ数値の表、送信完了には見出しの文言を付けます。飾りだけの図形はaria-hidden="true"にします。 - 動き続けるものは止められるようにする。サークルテキスト・ブロブ・ウェーブには止めるボタンを付け、画面の外では止め、動きを控える設定では止まった絵にします。どれも1ページに1か所までです。
よくある質問 (FAQ)
path に pathLength="1" を付ければ、測らずに作れます。pathLength は「この線の長さを 1 とみなす」という指定で、stroke-dasharray: 1 1 と stroke-dashoffset: 1 から 0 への動きだけで、長い線も短い線も端から端まで描けます。手書きの文字のように、画の長さに合わせて時間を配りたいときだけ、JavaScript の getTotalLength() で本当の長さを測ります。
まず、SVG と CSS で足りないかを考えます。Lottie は After Effects で作った動きを JSON に書き出し、lottie-web などの読み込み用のライブラリで再生するしくみです。AI に頼むときは、書き出した JSON のファイル、置く場所と大きさ、再生のきっかけ（画面に入ったとき・押したときなど）、くり返すかどうか、動きを控える設定のときに見せる止まった絵、を伝えます。線を描く・形が組み上がる・チェックが引かれるくらいの動きなら、このページの型のほうが軽く、ライブラリも要りません。
1ページに1か所までにします。不定形の図形や波は、入れすぎると意味のない飾りに見え、かえって安っぽくなります。見本は、図形は1つ、色は落ち着いた1色、波は2本、揺れは小さく周期は長く、という控えめな形にしています。グラデーション・ぼかし・光る効果を重ねると、どこかで見たようなページになりがちです。
描き方の決まりと、描く前の隠し方です。「ロゴを描いて」だけだと、線の長さを目分量で決めて描き終わらない作りや、JavaScript が動かないと何も見えない作りになりがちです。ここの指示文は、pathLength の使い方、描く前を隠す class、時間と順番の数字、動きを控える設定で見せる状態を書き、Line Drawing Animation のような英語の一般名も添えています。