そのWeb演出、Claude Codeで作れます。クリエイティブWeb表現のプロンプト集 #02 Kinetic Typography
株式会社グルーヴサインの米沢です。
AIコーディングでクリエイティブなWeb表現を実際に作り、そのプロンプトごと公開していく「PROMPT → WEB」の第2回です。
PROMPT → WEB #002
Kinetic Typography
INTRODUCTION
前回（#01 Generative Particle Journey）は、黒い3D空間で数万の光の粒が渦や球へ変形していく、WebGLのジェネレーティブ表現でした。
このシリーズは「毎回まったく別の表現に見えること」を大事にしています。そこで今回は、前回と正反対の方向に振りました。
- 前回：暗い空間・3D・粒子・WebGL
- 今回：明るい紙のような背景・平面・巨大な文字・Canvas 2D
テーマは Kinetic Typography（動くタイポグラフィ） です。粒子はいっさい使いません。主役は「文字そのもの」。大きな文字が組み上がり、カーソル（スマホではタッチ）に反応してうねります。ポスターやエディトリアルデザインのような、静かで力強い方向を狙いました。
派手なエフェクトではなく、文字の動き・間・コントラストだけで見せる ── というのが今回のクリエイティブディレクションです。
RESULT
まず、御託より現物です。下のボタンを押してみてください。
クリックすると、この画面の上で Kinetic Typography が再生されます（何度でも再生可能）。ESC または CLOSE で終了します。
いま読んでいるこの記事の上に、紙のような画面が広がり、大きな文字が組み上がります。マウスを動かす（スマホは画面をなぞる）と、カーソルの近くの文字が持ち上がって拡大します。 動画ではなく、このページ上でリアルタイムに描画しています。ESC または CLOSE で終了します。
そして、この演出を作るためにClaude Codeへ渡したプロンプトは、この記事の後半でそのまま公開しています。
WHAT WE MADE
今回作ったものを、技術的に分解すると次のようになります。
- Canvas 2Dによる文字描画 ── WebGLではなく、ブラウザ標準の2D描画API（
<canvas>の2Dコンテキスト）を使用。テキスト表現ではこちらが素直で軽量です。 - 1文字ずつの登場アニメーション ── 文字を1つずつ、下から時間差（stagger）で立ち上げる。
- 常時のうねり ── 完成後も、各文字がsinカーブで微妙に上下し、生きている印象に。
- ポインタに反応するレンズ効果 ── カーソルとの距離に応じて、近い文字ほど持ち上がり拡大する（インタラクティブの核）。
- エディトリアルなレイアウト ── 紙色の背景、極太の黒い文字、朱色のアクセント（→）、細い罫線、隅のノンブル風ラベル。
- 高DPI対応 ──
devicePixelRatioを考慮して、文字の輪郭をくっきり描画。
要するに、粒子で空間を作った前回に対し、今回はタイポグラフィという「平面のデザイン」を、動きとインタラクションで立体的に感じさせるアプローチです。
HOW IT WORKS
仕組みは、前回よりずっとシンプルです。WebGLもシェーダも使いません。
やっていることは「毎フレーム、キャンバスを塗り直して文字を描く」だけ。各文字の位置に、次の3つを足し合わせて描画位置を決めています。
// 各文字の見た目（イメージ）
// 1) 登場: 下からせり上がる（easeOutCubic）
const introY = (1 - ease(t - i * stagger)) * 落差;
// 2) うねり: 常時ゆっくり上下
const wave = Math.sin(t * 1.6 + i * 0.55) * 振幅;
// 3) レンズ: カーソルに近い文字ほど持ち上げ＆拡大
const lens = Math.exp(-distance2 / R2); // ガウシアンの山
const lift = -lens * 持ち上げ量;
const scale = 1 + lens * 拡大量;
Math.exp(-d² / R²) は「カーソルに近いほど1、遠いほど0」というなだらかな山（ガウシアン）です。これを持ち上げ量と拡大率に掛けるだけで、カーソル周辺の文字がふわっと反応します。難しい数式は、この1行だけです。
CPUで文字を描くだけなので軽く、スマホでも問題なく動きます。
THE PROMPT
ここが本題です。上のデモを作るためにClaude Codeへ渡せる、汎用プロンプト全文を掲載します。右上の COPY ボタンでそのままコピーできます。BRAND_NAME / PHRASE（大きく見せたい文字）/ ACCENT_COLOR などを置き換えれば、自分用になります。
あなたはCreative Codingとタイポグラフィデザインに精通したフロントエンドエンジニアです。
「Kinetic Typography」＝大きな文字が組み上がり、カーソルに反応して動く、
エディトリアルで上品なWeb表現を、Canvas 2D で実装してください。
（WebGL/Three.js は使わない。テキスト表現に素直な技術を選ぶ）
# 置き換える変数
- BRAND_NAME = "GROOVESIGN"
- PHRASE = "PROMPT→WEB" // 大きく見せる主役の文字（→はアクセント色）
- PAPER_COLOR = "#f2efe6" // 紙のような明るい背景
- INK_COLOR = "#17130e" // 極太の文字色（ほぼ黒）
- ACCENT_COLOR = "#ff3b1f" // 朱色などの1色アクセント
- LABEL = "KINETIC TYPOGRAPHY"
# ビジュアル / クリエイティブディレクション
- 明るい紙のような背景に、画面幅いっぱいの極太サンセリフで PHRASE を描く
- 主役は文字。装飾は最小限。エディトリアル/ポスターのような静かな力強さ
- 細い罫線、隅に小さなラベル（ノンブル風）を置き、雑誌のような構図にする
- ダークな宇宙・粒子・ネオン・glassmorphism・rainbow は使わない（前作と差別化）
# アニメーション
- 文字は1つずつ、下からせり上がって登場（stagger, easeOutCubic）
- 完成後も各文字が sin でわずかに上下し、生きている印象を保つ
- ポインタ（マウス/タッチ）位置との距離で lens = exp(-d^2/R^2) を計算し、
近い文字ほど「持ち上げ」「拡大」する（インタラクションの核）
- 動きは linear ではなく ease を使い、常に滑らかに
# 実装要件
- <canvas> の 2D コンテキストで、毎フレーム塗り直して描画する
- 文字は measureText で幅を測り、画面幅の ~86% に収まるフォントサイズを計算
- devicePixelRatio を考慮（canvas を dpr 倍で作り、ctx.setTransform で拡大）。
ただし Math.min(window.devicePixelRatio, 2) で上限を設ける
- リサイズ・画面回転でレイアウトを再計算する
- マウスとタッチの両方に対応（スマホは touchmove で座標を取る）
# 堅牢性 / 品質
- position: fixed の全画面オーバーレイとして被せ、通常ページに影響させない
- CLOSE ボタンと ESC で必ず終了できる（インタラクション主役なので自動終了は任意）
- prefers-reduced-motion では、登場アニメやうねりを止め、完成形を静的に表示
- Canvas 2D が使えない等の失敗時はエラーを出さず自動でスキップ
- JavaScript が失敗しても本体ページは必ず表示される Progressive Enhancement
- 終了時に requestAnimationFrame を停止し、イベントリスナ（mouse/touch/resize/key）を
すべて解除、canvas を DOM から除去（何度実行してもリークしないこと）
- production 品質。共通のオーバーレイ/CLOSE/後始末は再利用できる形に分離する
# アクセシビリティ
- CLOSE は button 要素。ESC で閉じられる。オーバーレイに aria-label
- コントラストを十分に取る（紙×極太の黒文字）
- 動きが苦手な人向けに prefers-reduced-motion を尊重
まず全画面オーバーレイと文字レイアウト（フィット計算）を作り、登場→うねり→
ポインタ反応→ラベル/罫線、の順に組み上げ、モバイル・reduced motion・後始末・
本番ビルド確認まで進めてください。
弊社がこのデモを作った際も、この粒度のプロンプトから始めました。調整で時間をかけたのは、コードよりも「フォントサイズの詰め方」「朱色をどこに1点だけ効かせるか」「うねりの振幅（大きいと落ち着かない）」といった、タイポグラフィのさじ加減でした。
CUSTOMIZE
変数を置き換えるだけで、自分用に変えられます。
- 文字を変える ──
PHRASEを自社のキャッチコピーやブランド名に。長すぎると小さくなるので、短い語が映えます。 - 色を変える ──
PAPER_COLOR（背景）/INK_COLOR（文字）/ACCENT_COLOR（1色アクセント）。紙×黒×差し色1つ、が上品にまとまるコツです。 - 反応の強さ ── レンズの
R（効く範囲）と持ち上げ・拡大量。大きくすると派手に、小さくすると上品になります。 - うねりの速さ・振幅 ──
sinの係数。ゼロにすれば完全に静的なタイポにもできます。
PERFORMANCE
Canvas 2Dは軽い技術ですが、実運用では次の点に気をつけます。
- devicePixelRatioの上限 ── 高精細スマホでdprをそのまま使うと、キャンバスの実ピクセルが増えて重くなります。上限2に。
- 毎フレームの描画量 ── 文字数が多いほど描画コストが上がります。主役の語は短く。
- リサイズ時の再計算 ── フォントサイズ計算は毎フレームではなくリサイズ時だけ行う。
- 後始末 ── requestAnimationFrameとイベントリスナを確実に解除する。今回のデモも、閉じるたびに全リスナとキャンバスを片付けています。
- フォールバック ── reduced motionでは静的表示、Canvas非対応ではスキップ。
WHAT AI DID / WHAT HUMAN DIRECTION MATTERS
AIコーディングによって、実装のハードルは今回も劇的に下がりました。 「Canvas 2Dで巨大タイポを組み、ポインタにレンズで反応させて」と伝えれば、動く土台はすぐに立ち上がります。measureTextでのフィット計算や、DPR対応、後始末といった定番の面倒ごとも、ほぼ任せられます。
一方で、AIに任せきりにはできない部分もはっきりしています。
- どの語を、どれだけ大きく見せるか
- 紙の色と黒の濃さ、差し色をどこに1点だけ置くか
- うねりや反応の「強さ」── やりすぎると一気に安っぽくなる
- 余白と罫線の配置（エディトリアルの品は、ほぼ余白で決まる）
こうしたタイポグラフィとしての判断は、人間のディレクションが要る領域です。実際、今回いちばん時間をかけたのも、実装ではなく「朱色を矢印だけに絞る」「うねりを控えめにする」といった引き算でした。
AIは坂道をなだらかにしてくれる。ただ、どんな絵を目指すかは、まだこちらが決める。前回と同じ手応えです。
NEXT
「PROMPT → WEB」は今後も、毎回まったく別の技術・別のデザインで続けていきます。
第1回は粒子（WebGL）、第2回は文字（Canvas 2D）。次回はまた違う素材 ── たとえば流体、物理エンジン、画像処理、SVG、音（Web Audio）といった方向を考えています。
一覧で見たときに「毎回違う驚きがある」状態を目指します。そして毎回、完成作品だけでなく、それを作るためのプロンプトごと公開します。
今回のプロンプトも丸ごとコピーして使えます。自社の言葉と色に置き換えて、ぜひ一度Claude Codeに渡してみてください。
レガシーPHPシステムの保守・引き継ぎのご相談を受け付けています。
初回のご相談・ヒアリングは無料です。