Geminiを活用した動的SVG生成とPHP・JavaScriptによる高度なWebアニメーション実装プロトコル
blog
Gemini・PHP・JavaScriptで実装する実務向けワークフロー
Webサイトの表現は、静止したデザインを見せるだけの時代から、動きのある体験をどう自然に作るかが問われる時代に変わってきました。そこで注目したいのが、SVGアニメーションです。SVGは拡大しても劣化しにくいベクター形式で、DOMから要素単位で操作できるため、軽量で扱いやすいUI表現に向いています。さらに現在は、GoogleのGemini 3.1 Proのようなマルチモーダルかつ高い推論能力を持つモデルを使うことで、SVGコードのたたき台作成や構造化の初動をかなり効率化できます。Gemini 3.1 ProはGoogleの公式情報でも複雑な推論向けモデルとして案内されており、テキスト・画像・音声・動画・PDFなどの入力を扱えるモデルとして提供されています。 (blog.google)
この記事では、GeminiでSVGのベースを作る → PHPで構造を整える → JavaScriptで動かすという流れを、実務で使いやすい形に絞って解説します。デザイン寄りの話だけではなく、実装・保守・パフォーマンスまで踏み込んで整理するので、コーポレートサイトやLP、サービスサイトの演出づくりにも応用しやすい内容です。 (PHP)
なぜSVGアニメーションを選ぶのか
まず前提として、SVGは「ただの画像」ではありません。<svg> 要素は独自の座標系とビューポートを持ち、viewBox で内部の座標空間を定義できます。そのため、同じSVGでもPCとスマホで柔軟に拡大縮小しやすく、レスポンシブ対応と相性が良いのが大きな強みです。さらに、各パスやグループにIDやクラスを付けておけば、CSSやJavaScriptから個別に制御できます。これはGIFや動画では難しい利点です。 (MDN Web Docs)
実務で特に便利なのは、デザインデータとしても、コードとしても扱えることです。たとえば、背景の装飾、ロゴの軽いモーション、フローチャート風の演出、線が描かれていく表現、パスに沿ってアイコンが動く演出などは、SVGで作っておくと後から調整しやすくなります。画像差し替えではなく、コード修正で色や形や速度を変えられるため、運用面でも扱いやすいです。 (MDN Web Docs)
まずはGeminiで「完成品」ではなく「たたき台」を作る
AIでSVGを作るときに大切なのは、最初から完璧な完成品を期待しないことです。
実務では、Geminiに一発で最終成果物を作らせるより、後で触りやすい構造のSVGを出させることの方が重要です。
Gemini系モデルは、画像理解や構造化出力にも対応しているため、参考画像を見せながら「この見た目をSVGで再現したい」「ただし各要素は個別のパスに分けたい」「IDを付けたい」といった依頼がしやすいのが利点です。さらに、Structured Outputsを使えば、SVG本体とメタ情報を分けて受け取るような設計もできます。たとえば「paths配列」「色情報」「アニメーション対象ID一覧」のように整理して返させれば、後工程のPHPやJavaScriptにつなぎやすくなります。 (Google AI for Developers)
実務でプロンプトに入れておきたいのは、次のような条件です。
「viewBox="0 0 1000 1000" のように座標系を固定すること」
「各要素を統合しすぎず、意味ごとに <g> または <path> を分けること」
「アニメーションしたい要素には id を付けること」
「色は16進数で指定すること」
「JavaScriptで操作しやすいように、不要な装飾やコメントを減らすこと」
この条件を入れておくと、後で「この円だけ動かしたい」「この線だけ描画アニメーションを入れたい」といった修正がしやすくなります。SVGのレスポンシブ制御では viewBox と preserveAspectRatio の理解が重要なので、ここを最初に揃えておくのがかなり大事です。 (MDN Web Docs)
実務でおすすめのAI指示の出し方
実際には、複雑なビジュアルを一度に全部生成させるより、段階的に作る方が安定します。
たとえば、こんな流れです。
最初にベースの図形だけ作る。
次に、動かしたい要素を追加する。
最後に、ID名やグルーピングを整理する。
この順番で作ると、コードが崩れにくくなります。
いきなり「凝ったアニメーション付きのSVGを全部出して」と投げると、見た目はそれっぽくても、パスが統合されすぎていたり、IDが不十分だったりして、後で触れないコードになりやすいです。
実務では、Geminiには次のように依頼すると扱いやすくなります。
添付画像を参考に、Web用のSVGコードを出力してください。
条件:
- viewBox は 0 0 1200 800
- アニメーション対象は個別の path または g に分ける
- 各主要要素に意味のある id を付ける
- fill と stroke は 16進数カラーで指定する
- 装飾用の不要な metadata は含めない
- 後から JavaScript で操作しやすい構造にする
さらに、画像を見せて生成させる場合は、「どこが独立要素か」まで言葉で補足すると精度が上がりやすいです。Geminiの公式ドキュメントでも、画像入力を使った理解や構造化出力が案内されているため、SVGづくりでも“画像＋テキスト指示”の組み合わせはかなり実用的です。 (Google AI for Developers)
AI生成SVGをそのまま使わず、PHPで整える
Geminiで生成したSVGは、そのままフロントに置くより、一度サーバー側で整形してから使うのがおすすめです。
ここで役立つのがPHPです。
SVGはXMLベースなので、PHPでは DOMDocument::loadXML() で文字列から読み込み、必要な要素や属性を取り出せます。PHPの公式マニュアルでも、DOMDocument でXMLを読み込み、SimpleXML と連携できることが案内されています。つまり、SVGを「画像」ではなく「構造化データ」として扱えるわけです。 (PHP)
たとえば、特定の id を持つパスの d 属性だけ取り出したり、色を差し替えたり、余計なタグを削除したりできます。
$dom = new DOMDocument();
$dom->loadXML($svgString);
$path = $dom->getElementById('main-line');
$d = $path ? $path->getAttribute('d') : '';
この段階でやっておきたいのは、次の3つです。
1つ目は、不要な属性やコメントを落とすことです。
AIが出したSVGには、表示に関係ない情報が混ざることがあります。
2つ目は、JavaScriptに渡したいデータだけをJSON化することです。
たとえば、id、d、fill、stroke だけを抜き出しておけば、フロント側で重い解析をしなくて済みます。
3つ目は、危険なタグや想定外の埋め込みを排除することです。
外部入力由来のSVGをそのまま通すのではなく、一度サニタイズしてから配信する方が安全です。
この「PHPで整理してから使う」ひと手間を入れるだけで、実装も保守もかなり安定します。 (PHP)
SVGアニメーション実装で最低限知っておきたい座標の考え方
SVGをJavaScriptで動かすなら、viewBox とパスの仕組みは最低限押さえておきたいです。viewBox はSVG内部の座標空間を決めるもので、min-x、min-y、width、height の4つで構成されます。これがあることで、CSS側では width: 100%; height: auto; のようにしても、内部の描画位置を崩しにくくなります。さらに preserveAspectRatio を使うと、コンテナに対してどのように収めるかを制御できます。 (MDN Web Docs)
また、SVGの <path> は d 属性に描画命令を持っています。
このパスに対してブラウザは getTotalLength() で全長を返し、getPointAtLength() で任意の距離地点の座標を返せます。これを使うと、線が徐々に描かれる演出や、パスに沿ってアイコンや丸を動かす演出を比較的きれいに実装できます。MDNでも、これらのAPIはSVGの長さ取得や座標取得のための標準手段として説明されています。 (MDN Web Docs)
JavaScriptでどう動かすか
JavaScript側の実装は、大きく分けて3パターンあります。
まず、単純な点滅や拡大縮小、ふわっと浮くような動きなら、SVG内または外部CSSで十分です。
このレベルならJavaScriptを使わない方が軽いです。
次に、パスに沿って要素を動かしたい場合は、JavaScriptが向いています。
特にGSAPには MotionPathPlugin があり、公式ドキュメントでもSVGパスやパスデータ文字列を使った移動アニメーションが案内されています。より複雑な形状変形では MorphSVGPlugin が d 属性のモーフィングに対応しています。SVG演出をしっかり作りたい案件では、このあたりがかなり強力です。 (GSAP)
たとえば、パス上を丸が移動するような処理は、こんな考え方で実装できます。
const path = document.querySelector('#guide-path');
const dot = document.querySelector('#moving-dot');
const length = path.getTotalLength();
let distance = 0;
function animate() {
distance += 2;
if (distance > length) distance = 0;
const point = path.getPointAtLength(distance);
dot.setAttribute('cx', point.x);
dot.setAttribute('cy', point.y);
requestAnimationFrame(animate);
}
animate();
このように、Geminiで作ったSVGをPHPで整理し、JavaScriptで動かすと、動きの自由度がかなり上がります。
モーフィングをやるなら「形」より「構造」を意識する
SVGで難しいのが、ある形を別の形へ滑らかに変形させるモーフィングです。
これは見た目の難しさというより、パス構造の整合性が重要になります。
単純な補間では、開始パスと終了パスでコマンドの並びやポイント構成が大きく違うと、きれいに変形できません。そこで、実務では最初から「変形前と変形後で構造を近づける」意識が大事になります。GSAPのMorphSVGPluginは、こうしたパス変形を扱うための公式プラグインとして提供されています。 (GSAP)
AIにモーフィング前提のSVGを作らせるなら、
「同じ構造のパスをベースに、座標だけ変えた別バージョンを作る」
という指示が有効です。
たとえば、チェックマークとバツ印をモーフィングしたいなら、「同じ数のアンカーポイントを意識して2種類出して」と頼む方が、後工程が楽になります。ここでも、AIに完成アニメーションを求めるより、JavaScriptで扱いやすい素材を出させる方が正解です。
レスポンシブ対応では width/height 固定より viewBox を優先する
SVGがスマホで崩れる原因の多くは、viewBox より先に width と height を固定してしまうことです。
実務では、SVGタグ側に固定サイズを強く持たせるより、viewBox を定義してCSSでサイズを決める方が扱いやすいです。preserveAspectRatio は、アスペクト比を保ったままどう収めるかを決める属性なので、背景のように端が多少切れてもよい場面と、全体を必ず見せたい場面で使い分けるのがポイントです。 (MDN Web Docs)
たとえば、次のような指定は実務でもよく使います。
.hero-svg {
width: 100%;
height: auto;
display: block;
}
この形にしておくと、親要素に合わせて自然に縮みやすく、WordPressやElementorのような環境でも比較的扱いやすいです。
本番公開前はSVGOで必ず軽量化する
AI生成SVGは、見た目は問題なくてもコードが無駄に長いことがあります。
そこで、本番前には SVGO を通すのがおすすめです。SVGOはNode.jsベースのSVG最適化ツールで、公式でもCLIやJavaScript APIから利用できると案内されています。不要なメタデータや冗長な記述を落とし、配信を軽くしやすいです。 (svgo.dev)
たとえば、不要な metadata、空の <g>、過剰な小数点精度などを整理するだけでも、ファイルサイズと可読性の両方が改善しやすくなります。
AIで作るからこそ、最後に人間側で軽量化・整理する工程は外さない方がいいです。
アクセシビリティも忘れない
SVGアニメーションを実装するときは、見た目だけでなくアクセシビリティにも配慮したいところです。
特に大きく動くアニメーションや常時ループする演出は、ユーザーによっては負担になることがあります。
CSSの prefers-reduced-motion メディア特性を使うと、端末側で「動きを減らしたい」と設定しているユーザーに対して、アニメーションを弱めたり止めたりできます。MDNでも、このメディア特性は不要な動きを減らしたいというユーザー設定を検出するためのものとして説明されています。 (MDN Web Docs)
たとえば、次のように書いておくと安心です。
@media (prefers-reduced-motion: reduce) {
.hero-svg .float,
.hero-svg .pulse {
animation: none;
}
}
インタラクティブなSVGには、必要に応じて title や desc を入れることも検討したいです。見た目が良いだけでなく、伝わる実装にしておくと、サイト全体の品質も上がります。
このワークフローが実務で向いている案件
この方法が特に向いているのは、次のようなケースです。
サービスサイトのFVで、軽い動きを入れたいとき。
図解やフロー図をインタラクティブに見せたいとき。
ロゴやアイコンに、軽量なアニメーションを付けたいとき。
LPで、動画ほど重くない演出を入れたいとき。
CMS運用の中で、後から色や形を調整したいとき。
逆に、写真ベースの複雑な映像演出や、After Effects前提の表現を完全再現したい案件では、SVGだけで無理に押し切らない方がいい場面もあります。
SVGは万能ではありませんが、軽さ・調整しやすさ・コード管理のしやすさという面ではかなり優秀です。
まとめ
AIでSVGアニメーションを作るときは、
Geminiで素材を作る → PHPで整える → JavaScriptで動かす
という分業で考えると、かなり実務に落とし込みやすくなります。
Gemini 3.1 Proのような高性能モデルは、複雑なコードや画像理解を含む作業の初速を大きく上げてくれます。ただし、AI出力をそのまま本番投入するのではなく、PHPで構造を整理し、JavaScriptで目的に合った動きを付け、最後にSVGOで軽量化する。この流れを挟むことで、見た目だけでなく、保守性や安全性まで含めた実装にしやすくなります。 (blog.google)
SVGアニメーションは、うまく使えば「派手すぎないのに印象に残る」表現を作れます。
Web制作の現場で、軽くて扱いやすい動きを入れたいなら、かなり有力な選択肢です。