こんにちは、AI事業部の森山です。
前回のコラムでは、画像生成AIを使えば素材サイトに頼らず、自分のイメージに合ったビジュアルを手軽に用意できる、というお話をしました。
実はこの流れは「動きの表現」にも広がっています。
Webサイトにほんの少しアニメーションを加えるだけで、印象や情報の伝わり方は大きく変わります。ただ、「アニメーションは難しそう」「コードが必要そう」と感じて、まだ手を出せていない方も多いのではないでしょうか。
しかし現在は、生成AIの進化によって、コードを書かなくても“動きのある表現”を気軽に試せるようになってきました。特にWordPressであれば、カスタムHTMLブロックにそのまま貼り付けるだけで動作するため、HTMLやCSS、JavaScriptの細かな前提知識に悩まされることなく、表現そのものに集中できます。
今回のコラムでは、AIを使ってシンプルなアニメーションを実装する方法と、実務で活かせる考え方を、できるだけ分かりやすく紹介していきます。
動きはメッセージを強くする
少しのアニメーションが、視線の誘導や理解の助けになります。たとえば、問い合わせボタンにわずかなホバーアニメーションやフェードインを入れるだけでも、「押せる要素」として認識されやすくなり、結果としてクリック率や問い合わせ数の向上につながるケースがあります。
生成AIが一般化した今、コードを書かずに試作できる環境が整い、制作の重心は「ゼロから組む」ことではなく「目的に合わせて仕上げる」ことに移りました。
デザイナーの価値は、クライアントの狙いを汲み取り、必要なところにだけ適切な動きを置く判断と創造性、そしてビジョンにあります。AIは下描きの高速化を担い、最終的な調整は人が行う。この分担が、成果の安定につながります。
表現と速さを両立させる設計
見た目がどれだけきれいでも、表示が遅いとユーザー体験は大きく損なわれてしまいます。そこで重要になるのが、Core Web Vitals（LCP・INP・CLS）といった「表示の快適さ」を測る指標です。
たとえばCanvasを使ったアニメーションでは、いくつか気をつけるポイントがあります。
まず、表示エリアの高さをあらかじめ確保しておくことで、読み込み時のレイアウト崩れ（CLS）を防げます。
次に、描画の負荷を軽くすることで、操作の反応が遅くなるのを防ぎ（INP対策）、
さらに、最初に見える重要な要素（LCP）の読み込み順を整えることも大切です。
そしてこれらも、難しく考える必要はありません。
「表示が崩れないようにしたい」「動きを軽くしたい」といった意図をAIに伝えるだけで、基本的な対策を踏まえたコードを提案してくれます。
「つくる時に、速さも一緒に設計する」
この視点を持つことで、演出と高速化の両立がしやすくなります。
本屋さんで理解するサイトの仕組み
ここでWebサイトの仕組みを、ざっくり復習しておきます。難しく考えず本屋さんに例えてイメージしてください。
- Webサーバー（店員）：来店したお客様に本＝HTML/CSS/JSを手渡す窓口
- Webアプリケーションサーバー（バックヤード）：裏で注文内容を確認し、ページを組み立てる担当
- データベース（倉庫）：在庫＝記事や商品データを保管する場所
つまり、最初に店員さん（Webサーバー）からHTML・CSS・JavaScriptがまとめて渡され、その中のJavaScriptがブラウザ上で動き、Canvasという領域に直接グラフィックを描いていきます。
イメージとしては、ページを受け取ったあと、その場で小さな実演が始まるような感覚です。あらかじめ用意された画像ではなく、その場で描かれるからこそ、動きやインタラクションを自由にコントロールできます。
プロンプトは設計図（AIへの伝え方）
プロンプトはAIへの指示書です。完成イメージ、使用環境、制約条件、調整できる要素を整理して伝えることで、安定した出力が得られます。
- 目的と雰囲気： 落ち着き、信頼感、未来感など
- 環境： WordPressのカスタムHTMLブロックで動作、外部ライブラリ不要
- 品質条件： レスポンシブ、高DPI対応、prefers-reduced-motion対応、画面外で停止、CLS回避
- 調整点： 色、速度、粒子数、反応（スクロール・マウス・タッチ）
一度に詰め込みすぎず、まずは最小構成から作っていき、後から要素や動きを追加して調整していくとスムーズです。
AIで土台コードを用意する
慣れるまでは、AIに「コピペで動く最小構成」を依頼するところから始めましょう。
WordPressのカスタムHTMLブロックに貼り付ける前提も伝えて、
- 依存なし
- 表示領域の確保
- コメント付き
といった条件を添えると、そのまま使える状態でソースコードが出力されます。本格的なプログラムを作るとかではないので、ここで使用するAIはChatGPTやGeminiなどの無償アカウントで充分です。
WordPressのカスタムHTMLブロックはとても便利で、スクラッチ開発のようにCSSやJavaScriptの配置場所を意識する必要がなく、WordPress側が適切に処理してくれるため、AIが出力したコードをただ貼り付けるだけ。実装のハードルがぐっと下がります。プレビュー機能もあるので、まずは動くものを作り、そこから微調整して仕上げていくことができます。
WordPressを使った事がない方は、下記のコラムで管理画面の解説をしていますので、参考にしてみてください。
WordPressのカスタムHTMLブロックに実装する
コードを貼り付ける場所は編集画面で「+」をクリックして表示されるブロックエディターで「カスタムHTML」をクリック。
HTMLが入れられるフォームのようなブロックが表示されるので、その中にAIに作ってもらった<div>から</div>や<script>から</script>まで囲まれたコードを丸ごとコピーしてそのまま貼り付けます。プレビューボタンをクリックすると編集画面上で確認することができます。
もし、イメージと違えばAIに修正をしてもらい、問題なければ画面右上にある公開ボタンをクリックすると記事が公開されます。WordPressの場合はたったこれだけなので、慣れてしまえば数分でアニメーションを作れてしまいます！
わからないことがあれば、そのままAIに伝えれば細かく教えてくれるので検索して調べる手間もかかりません。
そのまま使えるプロンプト3例
どうやってAIに伝えれば良いかわからない方へ、そのまま使えるプロンプトをご紹介。下記のプロンプトをそのままAIに渡しても良いですし、これらを参考にアレンジしても大丈夫です。 AIに依頼する際、環境と品質条件を含めて依頼すると、再現性が高まります。
以下は外部ライブラリ不要で、WordPressのカスタムHTMLブロックに貼れるコードを想定したプロンプトです。
粒子が跳ねるバックグラウンド
WordPressの『カスタムHTMLブロック』にそのまま貼り付けて動作する、外部ライブラリ不要のHTML + CSS + JavaScriptを作成してください。Canvas 2Dで、幾何学的な粒子が弾性のある動きで跳ね、近い粒子同士を細い線で結ぶ背景アニメーションにします。レスポンシブ・高DPI対応・prefers-reduced-motion対応・IntersectionObserverで画面外は停止・CLS回避のため表示領域の高さを先に確保・日本語コメント付き、という条件を満たしてください。
スクロール連動のスモークエフェクト
WordPressの『カスタムHTMLブロック』向けに、Canvasのみで実装する柔らかい煙のアニメーションコードを作成してください。画面下部から立ち上るPerlinノイズ風のスモークを描画し、ページのスクロール量に応じて煙の濃さ・上昇速度・乱れが滑らかに変化する構成にします。外部ライブラリ不要、requestAnimationFrameで描画、スクロール処理はスロットル化、IntersectionObserverで画面外は停止、prefers-reduced-motion対応、CLSを避けるため領域の高さを固定、日本語コメントを入れてください。マウスの軌跡に光の尾
WordPressの『カスタムHTMLブロック』へ貼り付け可能な、依存なしのHTML + CSS + JavaScriptを生成してください。Canvas 2Dで、マウス（およびタッチ）の軌跡に沿って発光する粒子が尾を引く表現を実装します。加算合成（lighter）で残光を表現し、フレームごとにわずかにフェードさせてトレイルを描きます。レスポンシブ・高DPI対応・pointer/touch対応・イベントはパッシブで最小限・prefers-reduced-motion対応・日本語コメント付き、という要件を満たしてください。もちろんこんな専門的な用語を使わず、「ふわっとした動き」「キラリと光らせる」などでもAIは解釈してくれます。
何も思いつかない場合でも大丈夫！ターゲットやイメージカラー、業種など、どんなサイトに入れるのかを伝えて、「アニメーションのアイデアを10個考えて」と言えば色々と提案してくれます。
貼るだけで動くアニメーションサンプル：浮遊する粒子
下記のアニメーションはChatGPTに作ってもらったコードを、そのままカスタムHTMLブロックに貼り付けただけ。
例えばこのアニメーションを背景にして、上に時間差で文字を乗せる なんていうこともAIなら簡単にできてしまいます。
ただの1枚の画像の上に文字を乗せるよりも、ずっと目に留まりますよね。
以前まではコードの知識がないと作れなかったこのようなアニメーションを、AIを使えば自由にしかも数分で作れてしまいます。コーダーに説明しても中々伝わらず、イメージ通りのものが仕上がらなかった経験のあるデザイナーにとってはとても嬉しいですよね。
速度はKUSANAGIとWEXALに任せて表現に集中する
AIを取り入れた制作フローは、試行錯誤のスピードを上げ、提案力の強化にもつながりますね。
ただアニメーションを多く取り入れる時に注意していただきたいのは、表示速度が低下する場合がある ということ。そのあたりも意識するようにAIに指定を入れると考慮はしてくれますが、画像ファイルを軽くすると画質が劣化するようにアニメーションでも軽くするには限界があります。
どれだけ表現を工夫しても、表示が遅ければ体験は損なわれます。
KUSANAGIによるWordPressの高速実行基盤や、WEXALによる自動最適化を活用することで、Core Web Vitalsの改善が期待できます。インフラや最適化を任せることで、デザイナーは表現に集中しやすくなります。
ここまで読んでいただきありがとうございます。Webデザイナー向けコラムでは、質問やコラムで特集してほしい内容のリクエストをお待ちしています！
AIを活用したWebデザインは、画像生成だけでなくアニメーション作成にも利用できます。まだAIを使った事のない方も少しでも興味を持っていただけたら幸いです。
今回のコラムはここまで、また次回のコラムでお会いしましょう。
執筆者/森山砂葵（GMOプライム・ストラテジー株式会社）
「プライム・ストラテジー株式会社」AIビジネス部所属
医療事務、Webディレクターを経て、現在はPythonを勉強中。趣味は画像生成や旅行を兼ねた聖地巡礼です。
