そのWeb演出、Claude Codeで作れます。クリエイティブWeb表現のプロンプト集 #01 Generative Particle Journey
株式会社グルーヴサインの米沢です。
弊社は普段、他社が開発したPHPシステムの保守や引き継ぎを主な業務にしています。地味で堅い仕事です。ただ、日々の業務でAIコーディングツールを使うようになってから、「これは保守以外の場面でも、かなり景色が変わったな」と感じることが増えました。
最近、「リッチなWebアニメーションを簡単に作れる」「コードを書かずに3Dサイトが作れる」といったサービスをよく見かけるようになりました。黒い空間の中で、無数の光の粒がまるで生き物のように流れ、球になり、波になり、渦を巻いていく ── デジタルアートのような、あの手の表現です。以前ならThree.jsやGLSL（GPUで動く描画用の言語）の深い理解が必要で、正直、片手間で作れるものではありませんでした。
しかし2026年現在、Claude CodeをはじめとしたAIコーディングツールを使うと、この辺りの状況もかなり変わってきています。そこで、「実際にClaude Codeへプロンプトを渡すだけで、どこまで作れるのか？」を、弊社自身で試してみることにしました。
その過程と、実際に使えるプロンプトそのものを公開していくのが、この「PROMPT → WEB」というシリーズです。第1回は Generative Particle Journey ── 同じ粒子の群れが、星雲 → 球体 → 波 → 渦（銀河）→ トンネルと、約20秒かけて姿を変えていく、ジェネレーティブアート寄りの表現です。
RESULT
まず、御託より現物です。下のボタンを押してみてください。
クリックすると、この画面の上で Generative Particle Journey が再生されます（何度でも再生可能）。ESC または CLOSE で終了します。
いま読んでいるこの記事の上に、WebGLのキャンバスが重なって再生されます。動画を貼っているわけではなく、このページ自身がデモです。ブラウザがその場で数万個の点を動かし、次々と別の立体へ変形させています。何度でも再生できるので、気になる場面は繰り返し見てください（ESC または CLOSE で途中終了できます）。
そして、この演出を作るためにClaude Codeへ渡したプロンプトは、この記事の後半でそのまま公開しています。
WHAT WE MADE
今回作ったものを、技術的に分解すると次のようになります。専門用語には一言ずつ補足を付けます。
- Three.jsによるパーティクルシステム ── Three.jsはWebGLを扱いやすくするライブラリ。数万個の粒子（点）を扱います。
- GPU描画（THREE.Points / BufferGeometry） ── 点の集合をまとめてGPUに渡し、一括で描画する仕組み。
- 5つの形状を1つの粒子群で表現 ── 各粒子は「星雲」「球面」「波」「渦」「トンネル」それぞれでの位置を同時に持ちます。
- 位置のブレンドによるモーフ ── 時間に応じて各形状の「重み」を変え、目標位置を混ぜ合わせることで、形が別の形へなめらかに変わります。突然切り替わるのではなく、粒子が移動して変形します。
- 密度差と奥行き ── 均一に散らすのではなく、密集する場所と空っぽの空間を作ることで、霧や星雲のような質感を出します。手前は大きく、奥は小さく。
- 狭いカラーパレット ── cyan → blue → indigo → violet 付近だけを使用。レインボーにはしません。
- シネマティックなカメラ ── 激しく動かさず、ゆっくりとオービット／ドリーさせる。主役はあくまで粒子です。
要するに、「形ごとに別々のアニメを作った」のではなく、同じ粒子群の“行き先”を時間で切り替えているのがポイントです。粒子そのものが、オブジェクトであり、表面であり、空間であり、トランジションを兼ねています。
HOW IT WORKS
仕組みを、Three.js講座になりすぎない範囲で簡単に。
数万個の粒子を<div>で作って動かしたら、ブラウザはすぐに悲鳴を上げます。そこでWebGLを使い、点をまとめてGPUへ渡します。
今回の肝は「モーフ」です。各粒子に、それぞれの形状での目標位置をあらかじめ持たせておき、GPU上で「重み付きの足し算」をするだけで、なめらかに姿が変わります。概念としては、これだけです。
// 頂点シェーダの考え方（抜粋・イメージ）
// 5つの形状の位置を、シーンの重み(合計=1)で混ぜる
vec3 pos =
pCloud * wCloud + // 星雲
pSphere * wSphere + // 球体（表面はノイズで凹凸）
pWave * wWave + // 波（複数のsinで有機的に）
pVortex * wVortex + // 渦（中心が密な螺旋）
pTunnel * wTunnel; // トンネル（手前へ流れる）
重みはCPU側が時間から計算し、形の切り替わりで一方を0→1、もう一方を1→0へ（smoothstepで滑らかに）動かします。これだけで、粒子が球から波へ、波から渦へと「飛んで」いくように見えます。重い座標計算はGPU、進行の管理はCPU、という役割分担です。
THE PROMPT
ここが本題です。上のデモを作るためにClaude Codeへ渡せる、汎用プロンプト全文を掲載します。右上の COPY ボタンでそのままコピーできます。BRAND_NAME や SCENES（見せたい形の並び）、色を自分好みに置き換えれば、そのまま使えます。
あなたはWebGLとThree.js、GLSLに精通したクリエイティブエンジニアです。
「Generative Particle Journey」＝黒い3D空間で、数万の発光粒子が複数の形へ
連続的に変形していく、デジタルアート寄りの高品質なWebGLデモを実装してください。
# 最重要の考え方
- 粒子は「背景の飾り」ではない。粒子そのものが、物体・表面・空間・トランジションを兼ねる。
- 中央にロゴをFadeInするだけの演出にはしない。粒子群そのものを連続変形させることが主役。
# 置き換える変数
- BRAND_NAME = "GROOVESIGN"
- SCENES = [星雲Cloud, 球体Sphere, 波Wave, 渦Vortex, トンネルTunnel] を約20秒で巡る
- PALETTE = cyan / electric blue / indigo / violet（青〜紫の狭い範囲。Rainbow禁止）
- TAGLINE = "システムを、長く使い続けるために。"
# モーフの設計（核心）
- 粒子は一組だけ。各粒子に「各形状での目標位置」を属性として持たせる:
aCloud / aSphere / aWave / aVortex / aTunnel
- GLSL 頂点シェーダで、形状の重み(合計=1)により目標位置をブレンドして最終位置を決める:
pos = pCloud*wCloud + pSphere*wSphere + ... （線形補間で「飛んでいく」モーフ）
- 重みは CPU 側でタイムラインから smoothstep で滑らかに 0↔1 させる（段階的に切替えない）
- 形状の質感:
- Cloud : 均一にせず、密なブロブと空虚な空間を作り、星雲/霧のような密度差を出す
- Sphere: フィボナッチ球 + ノイズで表面に凹凸。単なる球ではなく惑星のように
- Wave : 複数の sin を重ねた式 + ノイズで、自然にうねる流体面に
- Vortex: 中心ほど密な螺旋（銀河）。回転しながら
- Tunnel: 円筒シェルを手前へ流し、消失点へ吸い込まれるワープ感
# 技術要件
- Three.js / THREE.Points / BufferGeometry / ShaderMaterial / GLSL
- 位置・サイズ・色はシェーダで計算（CPUで毎フレーム個別計算しない）
- 各点は「中心が明るく周囲が柔らかい」加算合成のソフトスプライト
- Glow/Bloom は控えめに。ネオンで白飛びさせない（高級感を優先）
- 色は距離・位置・形状でグラデーションするが、PALETTE の範囲は崩さない
# カメラ / タイミング
- カメラはゆっくり。slow dolly / subtle orbit / gentle rotation 程度。激しく動かさない
- 動きは linear ではなく easeInOut / smoothstep で常に滑らかに
# レスポンシブ / パフォーマンス
- PC 40,000〜50,000 / モバイル 10,000〜15,000 程度に粒子数を可変
- devicePixelRatio は Math.min(window.devicePixelRatio, 2) で上限を設ける
- リサイズ・画面回転に追従する
# 堅牢性
- position: fixed のオーバーレイとして被せ、通常ページのレイアウトに影響させない
- 何度でも再生でき、ESC / CLOSE で途中終了できる
- WebGL非対応時はエラーを出さず自動でスキップ（またはブランド名を短く表示）
- prefers-reduced-motion では粒子を再生せず、ブランド名を短く表示して終了
- JavaScriptが失敗しても本体ページは必ず表示される Progressive Enhancement
- 終了時に RAF停止・イベント解除・geometry/material/renderer を dispose し、
WebGLコンテキストを解放（何度再生してもリソースが増殖しないこと）
# 避けたい表現
- Matrix風 / Hacker画面 / Cyberpunk / Rainbow neon / 大量のHUD / Terminal /
loading percentage / Star Wars風 / confetti / fireworks / 派手なLens Flare /
安っぽいGlow / Glassmorphismカードの乱用 / 粒子が雪のように降るだけ
# 目指す質感
- 「派手」ではなく「美しい」。「未来的」ではあるが「SFゲーム」ではない。
- Digital Art × Generative Design × Luxury × Technology × Minimalism。
- 完全コピーではなく、同じ技術的・視覚的水準を持つ独自作品にすること。
まず最小構成のオーバーレイと粒子・各形状の属性を用意し、位置ブレンドのシーンマネージャ、
カメラのブレンド、モバイル最適化・reduced motion・dispose・本番ビルド確認まで
順に進めてください。
弊社がこのデモを作った際も、ほぼこの粒度のプロンプトから始めました。もちろん一発ではなく、「星雲が暗い」「トンネルが画面外に散る」「渦の中心をもっと密に」といった調整は対話しながら詰めていきます。特に、どの形を・どの順で・何秒ずつ見せるかという構成は、何度も並べ替えました。それでも、ゼロから資料を調べて書き始めていた頃と比べると、最初の動くものが立ち上がるまでの速さは、明らかに変わりました。
CUSTOMIZE
上のプロンプトは、変数を置き換えるだけで自分用に変えられます。読者の方が「これなら自分でも触れそう」と思える範囲で、主な変更点を挙げておきます。
- 形と順番を変える ──
SCENESの並びを変える。球だけ、波だけ、あるいは2〜3形状に絞ってもよい。尺（長さ）は各形状の秒数を変えるだけで、コード量はほとんど増えません。 - 色を変える ──
PALETTEを自社のブランドカラー寄りに。ただし範囲を広げすぎるとRainbowになり安っぽくなります。狭く保つのがコツです。 - 粒子を増減する ── 密度を上げると濃く、下げると軽くなります。「多いほど良い」わけではありません。
- カメラの動き ── ゆっくりが基本。動かしすぎると粒子が主役でなくなります。
- 会社名・コピー ──
BRAND_NAME/TAGLINEを差し替える。
「もっと長く・もっと多彩に」したい場合でも、増えるのは主に形状の種類であって再生時間ではありません。同じ粒子基盤を使い回せるので、思ったほどは膨らみません。
PERFORMANCE
華やかに見えるWebGL表現ですが、実際のサイトに載せるなら注意点があります。「AIに作らせれば何でもOK」ではありません。ここは運用者としての実感も込めて書きます。
- 粒子数を増やしすぎない ── 密度と描画負荷はトレードオフです。全形状で同じ粒子を使うので、いちばん重い場面に合わせて数を決めます。
- モバイルでは減らす ── スマートフォンのGPUはPCほど強くありません。端末で粒子数を落とす前提で作ります。
- 解像度（DPR）に上限を設ける ── 高精細スマホで
devicePixelRatioをそのまま使うと、描画ピクセルが跳ね上がって重くなります。 - 使い終わったら破棄する ── WebGLのリソースは放置するとメモリを食い続けます。このデモも、閉じるたびにキャンバスとGPUリソースを解放しています。
- WebGL非対応・reduced motionに備える ── 動かない環境・動きを抑えたい人がいる前提で、必ずフォールバックを用意します。
これらは「演出のクオリティ」とは別の、地味だが必須の配慮です。弊社が普段やっている保守の感覚に近い部分でもあります。
AIで全部が終わるわけではない
今回の実験で、あらためて実感したことがあります。
AIコーディングによって、実装のハードルは劇的に下がりました。 以前なら数日がかりだった試行錯誤が、数十分の対話に置き換わる場面も珍しくありません。これは間違いなく大きな変化です。
一方で、AIに丸投げして最高の演出が勝手に出てくる、というわけでもありませんでした。
- どの形を、どの順で見せるのか
- それぞれ何秒ずつか
- どこで色を変え、どこで光らせるのか
- どこで動きをやめるのか
- 「派手」に振れて安っぽくなっていないか
こうした判断 ── いわばクリエイティブディレクションの部分は、依然として人間の仕事として残ります。実際、今回いちばん時間をかけたのは実装ではなく、「形と形の間（ま）」や「発光をどこで止めるか」といった、構成のさじ加減でした。
AIは、実装という険しい坂道をなだらかにしてくれます。ただ、どこへ向かって歩くかは、まだこちらが決める必要がある。そのくらいの距離感が、今の実感に近いです。
次回予告
「PROMPT → WEB」は、今後も不定期で続けていく予定です。クリエイティブなWeb表現を、実際に作りながら、プロンプトごと公開していきます。
候補として考えているのは、こんなテーマです。
- Kinetic Typography（動く文字組み）
- Fluid / Metaball（流体・メタボール）
- Network Visualization（ノードとエッジの可視化）
- Image Distortion（画像を歪ませる表現）
- Scroll-driven 3D Story（スクロール連動の3D）
全部を約束するものではありませんが、「これは面白そう」というものから順に取り上げていきます。
最後にもう一度。この記事で伝えたかったのは「Claude Codeがすごい」でも「Webデザインは誰でも簡単」でもありません。これまで専門知識が必要だった表現に、AIコーディングによって手が届きやすくなった ── その一点です。
上のプロンプトは丸ごとコピーして使えます。自社の色や形に置き換えて、ぜひ一度Claude Codeに渡してみてください。動くところまで、思ったより早くたどり着けるはずです。
レガシーPHPシステムの保守・引き継ぎのご相談を受け付けています。
初回のご相談・ヒアリングは無料です。