はじめに
Web サイトの背景、3D のテック感あるビジュアル、SNS 動画のオープニング……。こうした「動き」のあるコンテンツは、Canvas や Three.js、GSAP などのコードが使用されています。
本記事では、IBM Bob にプロンプトを書くだけでアニメーションのコードを生成してもらう方法を紹介します。
プロンプトに 4 つの要素 を入れることで、日本語の指示だけでも意図に近いアニメーションが出てきます。
記事の後半には、8 種類のアニメーションについて そのままコピーして使えるプロンプト を載せています。
本記事でいう「アニメーション」には、背景演出や 3D 表現だけでなく、UI のマイクロインタラクション、データビジュアライゼーション、ジェネレーティブアートなど、動きのある Web 表現全般を含みます。
紹介動画
まずは全体像を動画でどうぞ。8 種類のアニメーションとプロンプト例を順に紹介しています。
ちなみに、この紹介動画自体も IBM Bob で作成しました（作り方は別の記事で紹介予定です）。
---この記事で分かること
- IBM Bob にアニメーションを作ってもらうときのプロンプトの型（4 要素テンプレート）
- 「何が作れるか分からない」ときに、まずサンプルを見せてもらう進め方
- 8 種類のアニメーション表現と、それぞれのプロンプト例
対象読者
- IBM Bob を使い始めた方、これから使ってみたい方
- Web 制作でちょっとした動きを入れたいが、アニメーションの実装に詳しくない方
- 生成 AI へのプロンプトの書き方を知りたい方
IBM Bob とは
IBM Bob は IBM が提供する AI 開発パートナーです。
IDEでは、チャットの指示で、コードの生成から修正まで対話しながら進めらることができます。
本記事では IBM Bob で、アニメーションのコードを生成する例をご紹介します。
プロンプトの基本 ― 4 つの要素
アニメーションを意図どおりに生成してもらうには、次の 4 要素を指定するのが効果的です。
| # | 要素 | 何を書くか | 例 |
|---|---|---|---|
| 1 | 技術・形式 | 使うライブラリや技術 | Canvas 2D / Three.js / Remotion / React |
| 2 | 動きのロジック | 動きを生む数学的・物理的なしくみ | パーリンノイズ / サイン波 / スプリング物理演算 / スタッガー |
| 3 | デザイン・配色 | 色や雰囲気 | エメラルド＆シアン / グラスモーフィズム / ライトテーマ |
| 4 | インタラクション & 出力形式 | ユーザー操作への反応と、成果物の形 | マウスで反発 / クリックでバネ跳躍 / HTML 1 ファイル完結 |
これをテンプレートにすると次のようになります。
【技術・形式】を使って、【作りたい対象・目的】を作成してください。
- 動きのロジック: （例: パーリンノイズ、サイン波・コサイン波、スプリング物理演算、スタッガー等）
- デザイン・配色: （例: 白背景に映えるライトテーマ、パープル〜ピンクのグラデーション等）
- インタラクション: （例: マウスホバーで反発・拡散、ドラッグ移動可能、クリックでバネ跳躍等）
- 出力形式: （例: HTML 1ファイル完結、React コンポーネント、Next.js 向け等）
書き方のコツ
- 冒頭に「〇〇を使って」と技術名を書く ― ライブラリが決まると、生成されるコードの方向性が安定します。
- 動きのしくみを一言添える ― 「ふわふわ動く」よりも「パーリンノイズで流れる」のほうが、狙った動きになります。
- 色や雰囲気は具体的な言葉で書く ― 「きれいな色」ではなく「パープル〜ピンクのグラデーション」のように書きます。
- 出力形式は最後に書く ― 「HTML 1 ファイル完結」と指定すると、ブラウザで開くだけですぐ確認できます。
技術用語（パーリンノイズ、スタッガーなど）を知らなくても大丈夫です。後述の「まずサンプルを見せてもらう」手順で Bob に聞きながら、表現と用語を対応付けていくことができます。
まずは全体像を見せてもらう
「どんなアニメーションが作れるのかイメージが湧かない」という場合は、いきなり個別に作るのではなく、代表的なスタイルを 1 ファイルにまとめた Showcase を作ってもらう のがおすすめです。
Step 1. 作れるものを聞き、サンプルを出してもらう
Bob のコード生成で表現できるアニメーションのスタイルや技術を教えてください。
イメージが湧きにくいので、代表的なスタイルを実際にブラウザで動かして確認できる Showcase サンプル（HTML 1 ファイル）も見せてください。
Step 2. トーンを変える
最初のサンプルはダーク基調になることがあります。用途に合わせて雰囲気を変えてもらいましょう。
作成してもらった Showcase サンプルのデザインを、ダーク基調から白・パステル・鮮やかなグラデーションを使った「明るく爽やかなライトテーマ」に変更してください。
Step 3. 種類を増やす
Showcase のアニメーションの種類をもっと増やしてください。
（例: SVG 描画、力学ネットワークグラフ、バーチャートレース、数理アートなどを追加して 8 種類に拡張）
このように 「出してもらう → 直してもらう → 広げてもらう」 と段階的に会話すると、最初から完璧なプロンプトを書かなくても目的のものに近づけます。気に入った表現が見つかったら、次の章のプロンプトで個別に作り込んでいきます。
目的別プロンプト 8 選
ここからは 8 種類のアニメーションについて、プロンプト例と、そのプロンプトの中で 4 要素がどう書かれているかを紹介します。
① フローフィールド粒子（Canvas 2D / p5.js）
分類: パーティクルアニメーション / ジェネレーティブアート
用途: コーポレートサイトや LP のヒーロー背景
Canvas 2D（または p5.js）を使って、Web サイトの背景に使えるフローフィールド・パーティクルアニメーションを作成してください。
- パーリンノイズに基づいて数十〜数百の粒子が有機的に流れる軌跡を描く
- カラーはエメラルドグリーンとシアン系の明るいグラデーション
- マウスカーソルを近づけると粒子がフワッと反発・拡散するインタラクションを入れて
- HTML 1 ファイルで中央にヒーローカードを重ねて
| 要素 | プロンプト中の記述 |
|---|---|
| 技術 | Canvas 2D（または p5.js） |
| ロジック | パーリンノイズで粒子の流れる方向を決める |
| デザイン | エメラルドグリーンとシアン系のグラデーション |
| インタラクション | マウスを近づけると粒子が反発・拡散 |
パーリンノイズは「なめらかにつながったランダム値」を作る関数です。これで粒子の進む方向を決めると、水や風のような自然な流れになります。用途として「Web サイトの背景に使える」と書いておくと、主張しすぎない仕上がりになりやすいです。
(Gif 形式指定で作成)
② 3D 波動メッシュ（Three.js / WebGL）
分類: 3D グラフィックス（WebGL）
用途: テック感・先進感のあるランディングページ、3D 背景
Three.js（または Canvas 3D 投影）を使って、先進的なテック感のある 3D ワイヤーフレーム格子アニメーションを作ってください。
- サイン波・コサイン波でグリッドがリアルタイムに波打つように変形する
- 視点をゆっくり回転させ、パープル〜ピンクのグラデーションで発光させる
- 白背景に映えるクリーンで爽やかなデザインにして
- マウスの動きに合わせてカメラ視点が傾くパララックス効果を入れて
グリッドの各頂点の高さをサイン波・コサイン波で動かすことで、海面のようにうねるメッシュになります。カメラをゆっくり回転させると立体感が増します。
(Gif 形式指定で作成)
③ モダン UI・マイクロインタラクション（React + Framer Motion / CSS3）
分類: マイクロインタラクション / UI アニメーション
用途: SaaS ダッシュボード、プロダクト UI、操作フィードバック
React と Framer Motion（または HTML/CSS）で、ダッシュボード用のリッチなカード UI とボタンを作成してください。
- カードは白基調のすりガラス（グラスモーフィズム）で、ホバー時に浮き上がって影が広がる
- ボタンはクリック・タップ時にバネ（スプリング）のように弾む物理アニメーション
- プログレスバーにグラデーションが脈動するアニメーションを入れて
「すりガラス風」は グラスモーフィズム、「弾む」は スプリング と、名前の付いたデザイン手法を書くと意図が正確に伝わります。
(Gif 形式指定で作成)
④ キネティックタイポグラフィ（Remotion / GSAP）
分類: モーショングラフィックス
用途: 動画のオープニング、プロモーション動画、SNS ショート動画
Remotion（または CSS/GSAP）を使って、動画のオープニング風キネティックタイポグラフィを作成してください。
- 「REMOTION」という文字が 1 文字ずつ時間差（スタッガー）で飛び跳ねて登場する
- オレンジとピンクのビタミンカラーで明るくポップな印象
- 正確な秒数・フレームで滑らかにループ再生するようにして
文字ごとに表示タイミングをずらす手法を スタッガー と呼びます。Remotion はフレーム単位で動きを制御できる React ベースの動画フレームワークなので、そのまま MP4 として書き出すこともできます。
(Gif 形式指定で作成)
⑤ SVG パス自己描画（SVG + CSS / GSAP）
分類: SVG アニメーション / モーショングラフィックス
用途: ブランドロゴの描画演出、ロードマップ、インフォグラフィック
SVG と CSS/GSAP を使って、線画が自動で描かれていく自己描画アニメーションを作成してください。
- stroke-dashoffset を使って、幾何学的なインフィニティ（無限大）マークや幾何学図形がスルスルと描かれる
- 線にはピンク〜シアンの線形グラデーション（linearGradient）を適用
- 描き終わったら逆再生またはモーフィングして無限ループさせて
stroke-dashoffset を変化させると、線が少しずつ描かれていくように見えます。実装方法まで指定できる場合は、このようにプロパティ名を書いてしまうのが確実です。
(Gif 形式指定で作成)
⑥ 力学ネットワークグラフ（D3.js d3-force）
分類: データビジュアライゼーション（インタラクティブ）
用途: ナレッジグラフ、相関図、システム構成図
D3.js（または Canvas 物理エンジン）を使って、インタラクティブな力学モデル（Force-Directed Graph）を作成してください。
- Core, DB, API などのノードがバネ引力と反発力でゆらゆら安定配置される
- 各ノードをマウスで掴んでドラッグ移動でき、離すと物理法則に従って元のバランスに戻る
- 鮮やかで見やすいノード配色とラベル表示をつけて
ノード同士にバネの引力と反発力を設定すると、自動的にバランスのよい配置に落ち着きます。ノード名（Core, DB, API）を具体的に書いておくと、そのままデモに使えるものが出てきます。
(Gif 形式指定で作成)
⑦ バーチャートレース（ECharts / D3.js / Vanilla JS）
分類: データビジュアライゼーション（アニメーション付き）
用途: 時系列の統計データ、売上や人気ランキングの推移
HTML/CSS/JS（または ECharts）で、時系列データに応じて順位が入れ替わる「バーチャートレース」を作成してください。
- 4〜5 つのフレームワーク（React, Vue, Next.js 等）の数値が時系列で変動する
- 数値の増減に合わせてバーの長さが伸び縮みし、順位が上がったバーが滑らかに上下入れ替わる
- バーごとに異なるグラデーションカラーを適用して
実データがなくても、Bob がダミーの時系列データを用意してくれます。本番で使う場合は「このデータ形式（JSON）を読み込んで」と後から指示を追加すると差し替えやすくなります。
(Gif 形式指定で作成)
⑧ 数理ジェネレーティブアート（p5.js / Canvas 2D）
分類: ジェネレーティブアート / クリエイティブコーディング
用途: クリエイティブコーディング、デジタルアート
p5.js（または Canvas 2D）で、数理幾何学に基づいたジェネレーティブアートアニメーションを作成してください。
- 黄金角（137.5°）のフィボナッチ螺旋（Phyllotaxis）を描く
- 全体が呼吸するように拡大縮小・回転し、色相（HSL）が時間とともに変化する
- クリエイティブで美しい幾何学ループにして
ひまわりの種の並びと同じ、黄金角 137.5° の螺旋です。HSL の色相（H）を時間とともに回すと、色が途切れずに変化し続けるループとなります。
(Gif 形式指定で作成)
おまけ: 8 種類をまとめた Showcase
最後に、ここまでの 8 種類を 1 画面に並べたカタログを作るプロンプトです。デザイン比較やチーム内での共有に便利です。
Bob で生成できる主要なアニメーション（Canvas 粒子、Three.js 3D、UI インタラクション、タイポグラフィ、SVG 描画、力学グラフ、バーチャートレース、数理アート）を 1 画面にグリッド状に並べた Showcase HTML を、白基調の明るいデザインで作成してください。
(別途HTML指定で作成した表示のため、Gif の例と少し異なっています)
技術の選び方まとめ
| やりたいこと | 分類 | 技術 | 動きのキーワード |
|---|---|---|---|
| Web サイトの背景 | パーティクル / ジェネレーティブアート | Canvas 2D / p5.js | パーリンノイズ |
| 3D・テック感 | 3D グラフィックス | Three.js / WebGL | サイン波・コサイン波 |
| UI の操作感 | マイクロインタラクション | React + Framer Motion / CSS3 | スプリング、グラスモーフィズム |
| 動画のタイトル | モーショングラフィックス | Remotion / GSAP | スタッガー、イージング |
| ロゴの描画演出 | SVG アニメーション | SVG + CSS / GSAP | stroke-dashoffset |
| 関係性の可視化 | データビジュアライゼーション | D3.js (d3-force) | バネ引力・反発力 |
| ランキング推移 | データビジュアライゼーション | ECharts / D3.js | 時系列・順位入れ替え |
| デジタルアート | ジェネレーティブアート | p5.js / Canvas 2D | 黄金角、HSL |
おわりに
IBM Bob でアニメーションを作るときは、次の 4 つを日本語で伝えるのが基本です。
- 技術・形式（何で作るか）
- 動きのロジック（どういうしくみで動くか）
- デザイン・配色（どんな見た目か）
- インタラクション & 出力形式（どう反応し、何として受け取るか）
何を作れるか分からないうちは、まず Showcase を作ってもらい、会話しながらトーンや種類を調整していくのが近道です。本記事のプロンプトをベースに、色や用途を自分のプロジェクトに合わせて書き換えて試してみてください。
なお、冒頭の紹介動画も IBM Bob で作成しています。動画の作り方は、別の記事で紹介する予定です。
IBM Bob をとりあえず動かしてみたい方へ
30日間の無料トライアル枠があります。トライアルについては以下のページをご参照ください。