【2026年】scroll-world完全ガイド！Claude Code/Codexで「スクロールする3D世界」を自動生成する革命的エージェントスキル

Q: 無料ですか？

スキル自体（GitHub公開）は無料ですが、生成基盤の **Higgsfield はクレジット課金** です。GPT Image 2 / Seedance の利用分が発生します。

Q: Next.js以外でも使えますか？

はい。生成されるスクラブエンジン（vanilla-JS）は **フレームワーク非依存** で、Next.js・Vue・Python配信ページの何れにも組込み可能です。

Q: どのエージェントで動きますか？

Claude Code・Codex・Cursor等、**`SKILL.md` 互換の20以上のエージェント** に対応しています。

「Webサイトをスクロールすると、カメラが空から建物の中へ滑り込み、次のシーンへ切れ目なく飛んでいく」 —— あのApple製品ページのような演出を、自分のブランドで数分で作れるとしたら？

scroll-world（スクロール・ワールド）は、そんな「スクロールでカメラが飛ぶ3Dワールド」を自動生成するエージェントスキルです。

X（Twitter）の @_vmlops さんが紹介し、GitHubで公開されています（github.com/oso95/scroll-world）。本記事では初心者向けに、なぜすごいのか、Claude Code/Codexでの使い方、実際の生成手順までをわかりやすく解説します。

この記事でわかること

scroll-worldとは何か、なぜ「Apple製品ページのような演出」が作れるのか
Claude Code / Codex でのインストール手順
实际にどんな資材（静止画・動画・接続クリップ）が生成されるか
必要なツール（Higgsfield等）と料金
他のランディングページ生成ツールとの比較

scroll-world（スクロール・ワールド）とは？

scroll-worldは、any 業界・ブランド向けの「スクロール駆動型3Dワールド」を生成するエージェントスキル です。

結論：スクロールするだけで、カメラが世界を縦横無尽に飛ぶ

スクロール位置に応じて、カメラが各シーンの外側から内部へ滑り込み、次のシーンへ カットなし（no cuts） で連続移動
まるでAppleの製品ページのような、1本の連続した飛行映像 が出来上がる
Claude Code / Codex などの SKILL.md 互換エージェントに、ブランドとシーンを説明するだけで自動生成

主な特徴：

エージェントスキル形式：Claude Code・Codex・Cursor等20以上のエージェントに対応
フレーム整合（frame-identical）：隣接シーンの継ぎ目が完全に一致し、カット感がない
フレームワーク非依存：生成されたスクラブエンジン（vanilla-JS）はNext.js・Vue・Python等どのスタックにも組込み可
Higgsfield 基盤：画像生成（GPT Image 2）と動画生成（Seedance）を内部で利用

なぜすごいのか：従来との違い

項目	従来のLP作成	scroll-world
演出	静的画像・単発動画	カメラが飛ぶ連続3Dワールド
シーン継ぎ目	カット・フェード	フレーム整合でカットなし
作成時間	数日〜数週（動画チーム）	数分（エージェント自動）
必要スキル	After Effects・Blender等	自然言語で説明するだけ
スタック	専用ツール必須	Next.js/Vue/Python何でも可

結論：プロ級の映像演出が、プロンプトだけで数分で

従来なら動画チーム数週の仕事が、エージェントに「〇〇業界のワールドを」と頼すだけで自動生成されます。

インストール手順（Claude Code / Codex）

Claude Code — プラグイン経由（推奨）

/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world

その後、スクロールするワールドLPを作るよう頼むか、/scroll-world と入力するだけ。

Codex & 他エージェント — skills CLI 経由

Vercelの skills CLI を使うと、Codex・Claude Code・Cursor等20以上のエージェントに一斉インストールできます：

npx skills add oso95/scroll-world            # プロンプトでエージェントを選択
npx skills add oso95/scroll-world -a codex   # またはCodexに直接

Codex内では $scroll-world で呼び出すか、/skills で一覧表示、あるいは直接「スクロールするワールドLPを」と頼みます。

手動（ドロップイン）

git clone https://github.com/oso95/scroll-world
cp -R scroll-world/skills/scroll-world ~/.claude/skills/   # Claude Code
cp -R scroll-world/skills/scroll-world ~/.codex/skills/    # Codex

必要な環境・ツール

Higgsfield CLI：認証済み（higgsfield auth login）、クレジット残高あり
ffmpeg / ffprobe：フレーム抽出・エンコード用
Python 3 + Pillow：透過シーン抜き出し用（任意）

実際に何が生成されるか

スキル起動時、以下の資材を Higgsfield で自動生成します：

各シーンの静止画（still）：GPT Image 2 で等角図法（isometric）ジオラマ風
各シーンの「ダイブイン」カメラクリップ：Seedance の image-to-video で、スクロール位置に同期
接続（connector）クリップ：隣接シーンの 実際のレンダリングフレーム から生成し、全シーンの継ぎ目がフレーム整合に

最後に、config駆動のスクラブエンジン が、これらを1本の連続飛行として再生します。

どんな人に向いているか

向き	具体例
LPを劇的に差別化したい	スタートアップ・新製品の発表ページ
動画チームがいない	個人開発者・小規模チーム
Claude Code/Codexを使っている	AIコーディング実践層
Apple風演出を模倣したい	ブランドサイト・ポートフォリオ

他のLP生成ツールとの比較

ツール	特徴	向き
scroll-world	スクロール駆動3Dワールド・カットなし	演出重視のLP
Framer	ノーコードLP・アニメーション	通常表示のLP
Framer	ノーコードLP・アニメーション	通常表示のLP
Originkit	コピペで動くUIコンポーネント	軽量な動き
Lovable	AIでLPを一発生成	プロトタイプ

scroll-worldは 「カメラが飛ぶ」演出に特化 している点が唯一無二です。

よくある質問（FAQ）

Q1. 無料ですか？

スキル自体（GitHub公開）は無料ですが、生成基盤の Higgsfield はクレジット課金 です。GPT Image 2 / Seedance の利用分が発生します。

Q2. 自分のブランドで作れますか？

はい。スキル起動時に「業界・ブランドキット（URL指定・手渡し・提案のいずれか）」を渡すと、それに合わせたワールドを生成します。

Q3. Next.js以外でも使えますか？

はい。生成されるスクラブエンジン（vanilla-JS）は フレームワーク非依存 で、Next.js・Vue・Python配信ページの何れにも組込み可能です。

Q4. どのエージェントで動きますか？

Claude Code・Codex・Cursor等、SKILL.md 互換の20以上のエージェント に対応しています。

Q5. 動画の長さは？

X投稿のデモでは約60秒の滑らかなスクロール演出が示されています。実際の長さはシーン数・スクロール量で調整可能です。

まとめ：誰に向いているか

結論：

Apple風の演出で差別化したい → scroll-world一択
動画チームなしで高品質LP → scroll-world一択
Claude Code/Codexを使っている → そのままスキル追加で即導入
通常表示のLPだけでいい → Framer等でも可

scroll-worldは「スクロールするだけでカメラが世界を飛ぶ」という、2026年いちばんインパクトのあるLP演出手法を、エージェントスキルとして誰でも使える形にしました。まずは GitHubリポジトリから git clone して、Claude Codeに /scroll-world と頼してみてください。