scroll-world とは？AIでブランドをスクロール型3D体験に変えるエージェントスキル

AIエージェントで没入型Webランディングページを自動生成する新しいワークフローが注目を集めています。GitHubで3201スターを超えて急上昇している scroll-world（oso95/scroll-world）は、Claude CodeやCodexに追加できるエージェントスキルで、スクロール操作に連動してカメラが世界を「飛翔」するランディングページを自動生成します。本記事では、その仕組みと実際の使い方を詳しく解説します。

scroll-world とは何か

scroll-worldは、SKILL.md互換エージェント向けのスキルパッケージです。Claude Code・Codex・Cursorなど20以上のAIエージェントにインストールでき、インストール後は自然言語で「スクロール型ランディングページを作って」と指示するだけで動作します。

技術的な核心は、Higgsfield AIによるシーン生成とJavaScriptスクラブエンジンの組み合わせです。カメラが各シーンの外側から内部へと飛び込み、次のシーンへシームレスにつながる「一本の連続飛行」を演出します。Appleの製品ページに代表されるスクロール体験を、あらゆるブランドに提供できます。

主な機能

スクロール位置に連動したカメラ飛行アニメーションを生成
Higgsfield AIで等角投影ジオラマシーン画像と動画を自動作成
コネクタークリップでシーン間をフレームレベルでシームレス接続
モバイル縦画面（9:16）向けの平行チェーン生成にも対応
HTML・Next.js・Vue・Pythonと幅広い環境で動作するフレームワーク非依存設計

インストール方法と使い方

Claude Codeへのインストール（推奨）

Claude Codeプラグインマーケットから追加するのが最も簡単です。

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

インストール後は「スクロール型ランディングページを作って」とチャットで伝えるか、/scroll-worldコマンドで直接起動できます。

Codexや他エージェントへのインストール

Vercelの skills CLIを使うことで、Codex・Cursor・Claude Codeなど複数のエージェントに一括インストールできます。

# デフォルト：プロンプトでエージェントを選択
npx skills add oso95/scroll-world

# Codexへ直接インストール
npx skills add oso95/scroll-world -a codex

手動インストール（ドロップイン）

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

scroll-world が生成するランディングページの仕組み

インタビュー → アセット生成 → 組み立ての3ステップ

スキルを起動すると、まずAIがユーザーにインタビューを行います。

ブランド・業種・ピッチ: どんな世界観・メッセージを表現するか
ブランドキット: URLから自動インポートするか、手動で提供するか
シーン順序: カメラが訪れるシーンの並び順
モバイル版の有無: 9:16縦画面の平行チェーンを生成するか
予算承認: クレジットコストを事前に確認してから実行開始

承認後、HiggsFieldが各シーンのスチル画像、シーン突入動画クリップ、そしてシーン間を繋ぐコネクタークリップを生成します。最終的に設定駆動のスクラブエンジン（scrub-engine.js）がすべてのクリップを「一本の飛行」として接続します。

スキル内のファイル構成

skills/scroll-world/
├── SKILL.md                 手順・シームルール・注意点
└── references/
    ├── prompts.md           インテークチェックリスト・Higgsフィールドプロンプトテンプレート
    ├── pipeline.md          バッチスクリプト（生成→フレーム→コネクタ→エンコード）
    ├── scrub-engine.js      可搬性の高いスクラブエンジン（blobシーク・遅延ロード）
    ├── index-template.html  スタンドアロンページの最小テンプレート
    └── knockout.py          背景除去（フローティングシーン用）

Apple風スクロール体験との違い・なぜ今このツールか

従来、Appleのスクロール連動アニメーションを再現するには、専門のアニメーターによる動画制作とフロントエンドエンジニアの高度なコーディングが必要でした。費用と時間のハードルから、大企業以外には手の届かない手法でした。

scroll-worldはこの状況を変えます。Higgsfield AIの動画生成とエージェントスキルを組み合わせることで、小規模ブランドやフリーランスでも数時間でApple品質のスクロール体験を実現できます。

類似ツールとして手動実装のGSAP（ScrollTrigger）やThree.jsがありますが、これらはコーディングスキルが必須で数日〜数週間の実装期間が必要です。scroll-worldはAIエージェントが設計・生成・実装を担当するため、アイデアから完成まで大幅に短縮できます。

GitHubで3201スターを集めたのは、2026年に普及したAIエージェントエコシステム（Claude Code・Codex等）とHiggsfield AIの高品質な動画生成能力が掛け合わさったタイミングだからこそです。

こんな人に向いている

フロントエンドエンジニア・Webデザイナー

ポートフォリオサイトやクライアントのサービス紹介ページに差別化要素を加えたい方に最適です。Higgsfield CLIのコマンドラインが扱えるエンジニアなら、数時間で没入型体験を実装できます。

ブランドマーケター・ECサイト担当者

商品ローンチや季節キャンペーンのランディングページに、AIが生成した「世界観の飛行体験」を加えることでコンバージョン率向上が期待できます。代理店に依頼する代わりに、Claude Codeを介して自社でコントロールできます。

AIエージェント活用を探るスタートアップのCTO

Vercel skills CLIで20以上のエージェントに対応しており、既存の開発ワークフローに組み込みやすい設計です。新規サービスのランディングページを短期間で高品質に仕上げたいスタートアップのCTOにも向いています。

使う前に知っておきたいこと

Higgsfield CLIとクレジットが必要

scroll-worldの動作にはHiggsfield CLI（有料サービス）のアカウントとクレジットが必要です。画像生成にN回、動画生成に約2N-1回（Nはシーン数）のクレジットを消費します。モバイル版を有効にすると動画生成量が倍になります。スキル起動時に予算確認ステップがありますが、事前にコスト感を把握してから使いましょう。

必要なツール

Higgsfield CLI: 認証（higgsfield auth login）済みであること
ffmpeg / ffprobe: フレーム抽出とエンコードに必要
Python 3 + Pillow: モバイル縦画面キャンバスとbackground knockout用
Codex CLI（任意）: ChatGPTサブスクリプション経由でGPT Imageモデルを使用可能

ライセンスと生成アセット

本リポジトリのコードはMITライセンスで商用利用・改変・再配布が自由です。ただし、Higgsfield AIが生成した画像・動画の商用利用権はHiggsfield AIの利用規約に従います。商用プロジェクトへの適用前に確認することを推奨します。

生成時間について

アセット生成（画像+動画クリップ）はバックグラウンドで実行されポーリングが行われますが、シーン数に応じて相応の時間がかかります。実装前にデモ用の少ないシーン数でテストすることをお勧めします。

まとめ

scroll-worldは、Claude CodeやCodexなどのAIエージェントとHiggsfield AIを組み合わせることで、従来は高コストだったApple風スクロール体験を誰でも実現できるようにした革新的なスキルです。フロントエンドエンジニア・Webデザイナー・ブランドマーケターにとって、Webプレゼンスを劇的に向上させる強力なツールと言えるでしょう。Higgsfield CLIのクレジットコストを把握した上で、ぜひ試してみてください。

この技術を学ぶ

Web開発・AIツール活用に興味を持った方には、Udemyのオンラインコースもおすすめです。

🎓 関連するWebコース一覧 — セール時（最大90%OFF）を狙うとお得です