Apple公式サイトのようなスクロールアニメーションWebサイトをAIだけで作る方法【Claude×Seedance】

Appleの製品ページを見て、

「スクロールするとカメラが寄ったり、背景が変化したり、まるで映画のように動くサイトってどうやって作っているんだろう？」

と思ったことはありませんか？

一見すると、高度なプログラミング技術が必要そうですが、現在はAIを組み合わせるだけで初心者でも制作できる時代になりました。

今回紹介する方法では、

1枚の画像
Claude
Seedance
HTML・CSS・JavaScript

この4つだけで、スクロールに合わせて映像が動くWebサイトを作ることができます。

制作の流れは4ステップだけ

全体の流れは次の4ステップです。

動かしたい画像を1枚用意する
Claudeで動画用プロンプトを作成する
Seedanceで4秒動画を生成する
スクロール連動Webサイトへ組み込む

それぞれ詳しく見ていきましょう。

ステップ1　お気に入りの1枚絵を用意する

まずはベースとなる画像を用意します。

自分で描いたイラスト
画像生成AIで作った作品
写真風イラスト

どれでも構いません。

今回は、

「桜の木の下に立つ女の子」

というイラストを例に説明します。

最初の表情が少し切なげだったり、静かな雰囲気の画像を選ぶと、その後の感情変化がよりドラマチックになります。

ステップ2　Claudeで動画の演出設計を作る

動画生成AIは、指示が曖昧だと思い通りに動いてくれません。

そこで活躍するのがClaudeです。

Claudeには画像を読み込ませ、動画全体の演出を文章として設計してもらいます。

例えば、

最初は切ない表情
途中で何かに気付く
最後は優しく微笑む

さらに、

ゆっくりズームイン
木漏れ日がキラキラ増えていく

といった時間経過まで細かく指定できます。

Claudeへ入力するプロンプト

添付した画像を最初の1コマとして使用し、動画生成AIの「Seedance」で4秒間の動画を作りたいです。

以下の演出意図に沿って、Seedanceが時間経過による変化を正確に理解できる【英文のプロンプト】を作成してください。

■演出意図
・0秒：切ない表情
・2秒：何かに気づく
・4秒：優しく微笑む

■カメラワーク
・ゆっくり顔へズームイン

■光の演出
・木漏れ日などの光粒子が徐々に増えていく

■出力形式
Seedanceへそのまま貼り付けられる英文プロンプトのみ出力してください。

これだけで、Seedance向けの高品質な英文プロンプトを自動生成してくれます。

ステップ3　Seedanceで映画のような4秒動画を作る

次はSeedanceを使います。

設定はとてもシンプルです。

「Image to Video」を選択
用意した画像をアップロード
動画時間を4秒に設定
Claudeが作った英文プロンプトを貼り付ける
Generateをクリック

完成した動画では、

表情が自然に変化し
カメラがゆっくり寄り
光が美しく変化する

映画のワンシーンのような映像が出来上がります。

ステップ4　スクロールで動くWebサイトにする

ここが一番面白い工程です。

完成した動画を、そのままWebサイトへ貼るわけではありません。

動画を100〜120枚程度の連番画像へ分解し、それらをスクロール位置に応じて切り替えて表示します。

つまり、

動画ではなく「超高速パラパラ漫画」をスクロールで再生しているわけです。

さらにClaudeへ、

HTML
CSS
JavaScript

のコード生成を依頼すれば、スクロールに合わせて画像が切り替わる仕組みまで一気に作ってくれます。

プロンプトの例は次のようになります。

「3DスクロールWebサイト用として、この連番画像（image_001.jpg〜）をスクロール位置に合わせて切り替えるHTML・CSS・JavaScriptを作成してください。」

これだけで、Apple公式サイトのようなスクロール演出の基本形が完成します。

AIを組み合わせると制作の幅が一気に広がる

今回使った役割を整理すると、

あなたが演出を考える
Claudeが設計図を書く
Seedanceが映像を作る
ClaudeがWebサイトのコードを書く

という分担になります。

以前なら複数の専門家が必要だった作業が、AIのチームプレーによって一人でも実現できるようになりました。

プログラミング経験がなくても、デザイン経験がなくても、自分だけのインタラクティブなWebサイトを作れる時代です。

まとめ

Apple公式サイトのようなスクロールアニメーションは、もはや大企業だけの技術ではありません。

AIを活用すれば、

1枚の画像から動画を生成し、
スクロールに連動した映像演出を作り、
インパクトのあるWebサイトとして公開する

ところまで、一人でも実現できます。

興味のある方は、ぜひお気に入りのイラストやAI画像を使って挑戦してみてください。

思っている以上に簡単で、そして何より作っていて楽しいですよ。

Apple公式サイトのようなスクロールアニメーションWebサイトをAIだけで作る方法【Claude×Seedance】

YouTube制作で痛感したAIのすごさ