今日のテーマは「AIでリッチなWebデザインを作る」。スクロールに合わせて映像がコマ送りされるApple風の演出を手作業でどう組み立てるか、そして3D制作そのものをAIエージェントに任せる新しい潮流の両方を見ていきます。ローンチされたばかりの新機能から実装のコツまで、作例づくりに直結する情報をまとめました。
Apple風「スクロール連動コマ送り」演出を自作する
iPhoneやAirPodsの製品ページでおなじみ、スクロール位置に応じて連番画像が切り替わり、まるで3D映像を操作しているように見える演出は「スクロール画像シーケンス」と呼ばれます。実体は動画ではなく、動画から書き出した数百枚の静止画を<canvas>に描画し、スクロール量をフレーム番号に変換しているだけの仕組みです。
定番の実装方法は、アニメーションライブラリGSAPのプラグインScrollTriggerを使う方法です。手順はシンプルで、以下のような流れになります。
| ステップ | やること |
|---|---|
| 1. 素材準備 | 3D制作ソフトやAI動画生成で作った映像を、フレーム抽出ツール（例: frame-extractor.com）で連番画像に分解し圧縮 |
| 2. マークアップ | 画面いっぱいの固定用コンテナと、その中に<canvas>を1つ配置 |
| 3. プリロード | 全フレームをあらかじめ読み込み、主要チェックポイントのフレームを優先ロードして体感速度を上げる |
| 4. スクロール連動 | GSAPで仮想のindexプロパティを0〜フレーム数までアニメーションさせ、更新のたびに該当フレームをcanvasに描画 |
| 5. 配慮 | prefers-reduced-motionに対応し、モーションを抑えたい利用者には静止画やフェードに切り替える |
詳しい実装コードはGSAP Vaultのチュートリアルにまとまっています。Lottieで作るより軽く、動画をそのままスクロール制御するより滑らかに動くのが画像シーケンス方式の強みです。ノーコードで組みたい場合は、WebflowやFramer向けの解説動画も増えており、Webflow APIでアセットURLを一括取得してGSAPのカスタム属性に流し込むテクニックも紹介されています。
Spline「Omma Canvas」——100体のAIエージェントで3Dサイトを並列生成
3DデザインツールSplineは、AIツール群「Omma Studio」の新機能としてOmma Canvasを公開しました。最大100体のAIエージェントを同時に走らせ、サイトやWebアプリ、インタラクティブな3D体験をまとめて生成できるのが特徴です。
Omma Studioにはモーショングラフィックスやシェーダーを生成するAIツール、コードを直接編集できる「コードレイヤー」機能も追加されており、Omma Canvasでは動画ファイルや3Dファイルをそのまま入力素材として使い、既存の3Dモデルや背景動画を反映したポートフォリオサイトをブラウザ上だけで組み立てて公開できます。「プロンプト1つで一発生成」ではなく、複数のAIが並行して案を出し合う設計思想は、他の3D系AIツールとの差別化ポイントと言えそうです。
Claude Code＋AI動画生成で「映えるヒーロー」を組む
コーディングをAIエージェントに任せるClaude Codeを使い、AI生成のループ動画とGSAPのスクロール演出を組み合わせて、モーションデザイナー不要でハイエンドなランディングページを作るワークフローも注目されています。
- ヒーローセクションにはAIで生成したループ動画を敷き、奥行きを一気に演出
- Claude CodeにHTML/CSS/JSの実装を任せ、細かい調整はチャットで指示
- スクロールに応じた視差やフェードはGSAPのタイムラインで制御
この一連の流れはMindStudioの解説記事で、トークンと生成AIのクレジット合わせて10ドル以下という具体的なコスト感とともに紹介されています。
Claude Code用の”GSAPスキル”も公開が進む
Claude Codeにはタスク特化の知識を渡せる「Skills」という仕組みがありますが、これを3Dサイト制作に特化させたオープンソースのスキル集も出てきています。claudedesignskillsには、Three.js・GSAP・ScrollTriggerを組み合わせた1枚HTMLのスクロール演出サイトを組み立てるための手順やパターンがまとめられており、Claude Codeに読み込ませるだけでピン留めスクロールや視差効果のベストプラクティスを再利用できます。
また、WordPress上でClaude CodeとGSAPを連携させ、MCPサーバー経由でアニメーションを組み込む実践例も動画で公開されており、ノーコード寄りの制作者にもAI×アニメーションの活用範囲が広がっています。
まとめ
Apple風のスクロール演出は仕組みさえ理解すれば軽量に自作でき、GSAP ScrollTriggerが定番の選択肢であり続けています。一方でSplineのOmma Canvasのように、3D制作そのものを複数のAIエージェントに委ねる動きも本格化してきました。Claude CodeとAI動画生成を組み合わせれば、モーションデザイナーがいなくても”映える”ヒーローセクションを低コストで作れる時代になっています。まずは小さなセクション1つから、スクロール演出やAI生成素材を試してみてはいかがでしょうか。
主な情報源
- GSAP Vault: Apple-Style Scroll Image Sequences
- Createwith: Spline Launches Omma Canvas With 100 Parallel AI Agents
- Spline公式Threads: Omma Studioの発表
- MindStudio: How to Build Animated 3D Websites with Claude Code and AI Video Generation
- GitHub: claudedesignskills（GSAP ScrollTriggerスキル）
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。