制作工程ぜんぶ見せます（前編）

Claude Code（Opus 5.5）と一緒に、FunTechのショーリールと、その映像の中をそのまま遊べる体験型サイトを作りました。

完成したショーリール（音あり）

映像は、カメラも光もモーションも、すべて three.js のコードからレンダリングしています。最初に検証した日から、動画とサイトの仕上げまで約1週間（FunTechの動画とWebだけだと約3日）。カット表の作り方から、「AIっぽさ」を抜くUIの話、細部の詰め方まで、制作工程をまるごと振り返ります。

体験型サイトはこちら → https://experience2026.funtech.inc

Opus 5.5のモーショングラフィックがバズっていた

タイムラインで、Opus 5.5 に作らせたモーショングラフィックがバズっていました。気になったので、自分でも試してみることに。投げたプロンプトはこれだけです。

あなたがどれほど素晴らしいモーションデザイナーかを示す、ダイナミックな15秒のモーショングラフィックスビデオを作成してください。履歴書用のショーリールのような感じで、全力でやって。

出てきたのがこれ。15秒。いい感じです。

続けて「この動画はすべてWebGLやHTMLで構成されているはずですよね？ 各シーンを活用して、スクロールで展開する体験型ウェブコンテンツをつくってください」とお願いすると、Webにもなりました。

できたWebを操作している様子（この紹介動画もAIに作ってもらったもの）

ただ、タイムラインに流れてくる作品を見ていると、**誰もが同じような出力になっている。黒い背景に太いタイポ、パーティクル、グリッチ……。プロンプト一発だと、どうしても「それっぽい平均」**に寄っていきます。

これ、シーンごとに柔軟に指示を出せないか？

そう思って中身を見てみると、この映像は画像も音声も素材を使わず、すべてコードでレンダリングされていました。コードなら、シーン単位で直せる。同じコードがそのままWebの体験にもなる。

そこで、弊社FunTechのPR動画と体験型コンテンツを作ってみることにしました。

カット割フォーマットを作ってもらった

まず「今回みたいにショーリールを作って体験型Webにするワークフローを、私が構想した絵コンテをもとに作れる？」と聞いてみました。できるとのことなので、Figmaにカット表のテンプレートを作ってもらいます（Claude CodeがFigmaのMCP経由で、直接Figmaに作ってくれます）。

1行＝1カット。画は「はじめ」と「おわり」の2コマ、動きは文章で。体験型サイトにする前提なので「Webでの操作」の列もあります。

先に音楽を聴いてイメージを膨らませたかったので、音楽ブリーフのフォーマットも追加してもらいました。

あとはここに入力していけば……と思ったのですが、全体の完成像がいまいちイメージできていない。白紙のカット表を前に、手が止まりました。

雑なシーン展開だけ渡して、まずはカットを作ってもらうことに

そこで、順番を逆にしました。どういう印象にしたいかと、使える素材のリストだけを渡して、AIにコマ割りと音楽ブリーフを提案してもらう。それを元に、私が修正を加えていく形です。

Figmaの「アイデア」ページに書いたのは、シーンごとの雑なメモだけ。こんな感じです。

• 全体：BoldなフォントでTypoもシーンに効果的に出現させたい。単調にならないように、WebGLワールドで登場させたり、画面を覆い尽くして、シーン展開に利用したり、工夫を凝らしてください

• シーン1：キャラが登場する。ノーマルマップ質感になったり、ワイヤーになったり、音楽に合わせてテンポよく質感が切り替わるみたいな演出

• シーン2：キャラにカメラが寄ってロゴが出現。ロゴには稲妻とステッカー演出（コーポレートサイトに実装済みのものを流用）。キャラはロゴと稲妻に照らされているような質感

• シーン3：メンバー写真から深度を計算して、それをパーティクル化

• シーン4：メンバーのパーティクルを使って、何か抽象的なシーン、宇宙。次第にそれらがトンネルを形成、カメラがトンネルを進んでいく

• シーン5：トンネルを進んだ先にキャラが再登場。ステージ上でキャラがバックライトに照らされているような

• シーン5（続き）：カメラが引いて、これまでの世界がモニターの中の世界だったとわかる。バレル歪みや色収差でワープしている感じを強く。一枚のグラフィックデザイン、ポスターのような世界観に

• シーン6：モニターの画面を割って、キャラクターがこちらの世界に登場

• シーン7：キャラが走り始める。トゥーン、アスキーアート、8bitなど、あらゆる世界観に変わっていく。徐々にノイズやグリッチが強くなり……

• シーン8：パリーンと全体が割れるような演出。最後には、見ている人の世界に到達する

• シーン9：最後に白地にロゴが出現して終了

• 場面転換：ステッカーのGIFが画面を覆っていき、再びステッカーが剥がれたときにはシーンが変わっている

渡すときに添えた指示は、こんな感じ。

AIエージェントによる映像制作→体験型Webサイトの制作で、どこまで表現できるのかの実験でもあります。表現は過剰でもOKです。思いっきりクリエイティビティを発揮してくださいアイデアはあくまでヒントです。再現を目指す必要はありません。

特にシーン3のメンバー写真は、画像から深度を推定するモデルがあるはずなので、それを使ってパーティクルで表現しようと思っていました。

技術検証

このシーン展開をもとに、まずは技術検証をしてもらいました。キャラクターの3Dモデルの取り込み、質感の切り替え、ロゴや稲妻の移植、メンバー写真の深度推定、シーンごとの試作ページ……。結果は、Figmaの「技術検証 v1」ページにまとめて返ってきます。

メンバー写真の深度推定の結果がこちら。電撃ヘアの毛先まできれいに切り抜けていて、思ったより精度が高い。

写真から、切り抜き・深度・法線を計算。商用利用できるモデル（MoGe-2・Depth Anything 3・BiRefNet）の組み合わせです

これを見て、「これなら銅像や粘土みたいな、いろんな像が作れるな」と思いました。そこで、パーティクルをやめて、いろんな質感の像を見せる博物館のようにしたい、と修正しました。

深度ですが、私が想定してる以上に正確に綺麗に計算できていますね。このnormalや深度を使えばパーティクルだけじゃなく、粘土版やブリキ彫刻のような質感もつくれそうで、メンバー紹介部分の見せ方をもう少し面白く工夫できそうです

出てきたのがこれ。メンバー1人に1素材の「素材の図鑑」です。かなり気に入りました。

v1

検証を踏まえて、v1を作ってもらいました。

v1（60秒・144 BPM、音楽も仮）。キャラクターの名前は、この時点ではモデルのファイル名から取った仮のものです（v2で直してもらいました）

カット表も埋めてもらいました。各カットの「はじめ」と「おわり」には実際のレンダリング画像が入り、右端の黄色い列が、私がフィードバックを書き込む欄です。

カット表 v1 のメンバーのシーン。右端のFB欄に「例えば美術館を歩いて進んでいくとか？」

ここでようやく、シーンごとにブラッシュアップしていく下準備が整いました。ここからは「カット表にFBを書く → 直してもらう」の繰り返しで、v9まで進みます。

v1 → v2：「本気でやってください！」

最初のFBはこれでした。

全体的にコマ割りは良い感じですが、ちょっと質感やモーションがチープです。ここからブラッシュアップかと思いますが、本気でやってください！

あわせて「全体的に間延びしていてテンポが悪い」「もっと疾走感のあるドラムンベースやテクノ、ヒップホップをリミックスしたような印象に」とも。これで144 BPM・60秒が174 BPM・約50秒になり、ブランドのフォントやグラフィック、そしてメンバーの像が並ぶ美術館を歩いて進む構成が入りました。

v2の冒頭から美術館まで

v2 → v3：未完成っぽいものは削る

• 冒頭の質感パスのうち、Normal・Depth・Clayは「未完成っぽく見えすぎる」ので削除。かっこよかったクロームを目立たせる

• 冒頭の最後の「赤背景×赤いリム」が気に入ったので、次のシーンのキャラにも赤いリムを

• 宇宙とトンネルのパートは省略して、記念碑のパートを長く、雷をピークに

v3 → v4：テーマカラーで一続きの世界に

ポスターの世界を、テーマカラー（#FF481B）に揃えました。

C19~21までも背景をテーマカラーに揃えてください。一連のポスター世界のはずです

v4 → v5：技術検証の像を美術館へ

美術館の胸像を、技術検証の「素材の図鑑」の電撃ポーズの像に差し替え。最初のメンバーだけは写真で始まり、落雷で像に変わります。像は画面の中央に置いて、メンバーごとに画角を変え、ease in-outでカメラを動かしてもらいました。

v5 → v9：細部を詰める

ここからは、細かい修正の積み重ねです。

• 台座に比べて像が小さい → 像を大きく、台座を低く（v6）

• モニターの中を、ひとつ前のシーンのネオンの路地に（v6）

• ホログラムのとき、輪郭の周りに謎の模様 → 原因は、画面に重ねていたレンズの汚れの素材だった（v7）

• 最後に画面が割れるところのガラスが少しチープ → 途中のシーンのガラスの質感に揃える（v8）

• 破片が「周りに飛び散る層」と「中心に残って遅れて落ちる層」の2層に見える → 306枚すべてを1つの式で動かす（v9）

v9のカット表には、FBへの対応やメンバーの像の一覧まで載るようになりました。

v1とv9を並べると、こう変わりました。

テクスチャ

コードだけで描いた絵は、どうしても「CGっぽい」きれいさになります。そこで、実写のテクスチャで質感を足しました。

Adobe Stockで使えそうな素材をAIにリストアップしてもらい（ID・解像度・使いどころ付き）、私がダウンロードする分担です。ガラスのヒビ、リソグラフの網点、レンズの汚れ、ブラウン管の蛍光体など、全部で32点。

たとえばガラスのヒビ。計算で作ったヒビに、実写のヒビを重ねると、こう変わります。

画像生成

ネオン街の看板は、最初はコードで文字を描いていたのですが、どうしても平たい。そこで、看板を1枚ずつ画像生成で作ることにしました。

AIに「必要な画像のリスト、サイズと内容をプロンプトにまとめて」とお願いして、そのプロンプトでGPTの画像生成にかけています（看板は36枚）。アクリルのくすみ、ネオン管のガラス、錆びた金具まで指定。看板の文言（「電脳ワクワク横丁」「バグ修正中」など）も、プロンプトの段階でAIが考えたものです。

AIっぽいUI

次はWebのUIです。体験型サイトは、最初はスクロールで進む作りでしたが、スクロール量で行き過ぎたり、体験を損ねたりする。そこで、シーンごとにアクションを用意して、それをクリアすると次に進む形にしました。これを「遷移アクション」と呼んでいます。

後編に続く（X記事のメディア枚数上限に達してしまいました）