「動きのあるサイトを作りたいけれど、ゼロから組むのは重い」——そんな人に向けたライブラリが Scrollhaus（スクロールハウス） です。スクロール連動のアニメーションサイトを実際にプレビューしてから、用意された「ビルド用プロンプト」やソースをAI制作ツールで活用できます。公式から2本のデモ動画をお借りして、どんなツールか・どう使うかを詳しく紹介します。
Scrollhaus とは
Scrollhaus は、スクロールで動くWebサイトのテンプレートを集めたライブラリです。各テンプレートには「実際にスクロールして確かめられるライブプレビュー」が付き、多くにはソースコードやAIコーディングツール向けの制作指示（プロンプト）が同梱されています。公式の言葉を借りると「Animated website templates with working scroll previews（動くスクロールプレビュー付きのアニメーションサイトテンプレート）」。
各テンプレートはヒーロー・コンテンツ各セクション・スクロール演出（パララックス、ピン留めシーン、なめらかなreveal など）まで含んだ“1ページまるごとのデザイン”です。重要なのは、これは「WordPressテーマ」ではないという点。コード上で自分のプロジェクトに取り込んで調整していく“ソース”として使います。
デモを見る
公式から提供された2本のデモです。スクロールでどう動くか、世界観の作り込みが伝わります。
MR. DAB — 遊び心のあるインタラクティブな3Dサイト
タイトルは「MR. DAB — Interactive 3D Website Template」。インタラクティブな3D表現を軸にした、遊び心のあるページ構成のデモです。
ONI RONIN — 映像的な世界観とスクロール演出
タイトルは「ONI RONIN — Cinematic Scroll Website Template」。シネマティック（映像的）な世界観を、スクロール連動の演出で見せるデモです。
どんな課題を解決するのか／誰向けか
動きの多いサイトをゼロから作るのは時間がかかります。Scrollhaus は「作り始める前に、自分のブランドに近い方向性をプレビューで確かめられる」ことが価値です。公式は想定ユーザーとしてデザイナーや起業家（founder）を挙げ、ランディングページ・ポートフォリオ・プロダクト・アプリ・クリエイティブスタジオなど幅広いレイアウトをカバーしています。
ライブラリの中身
100以上のスクロール連動デザインが用意され、カテゴリ別に探せます。
| 区分 | 内容 |
|---|---|
| カテゴリ例 | 3D Website / Agency / Landing Page / Portfolio / Ecommerce / Hero / Interactive / Wellness / Technology / Travel / SaaS / AI / Fintech / Experimental |
| そのほかの素材 | UIコンポーネント、背景（Backgrounds）、エフェクト（Effects）、プロンプト（Prompts） |
| 読み物・連携 | ガイド記事の「Journal」、MCP セクション |
使い方（ワークフロー）
「プレビューで選ぶ → プロンプト＋ソースを受け取る → AIツールで組む」が基本の流れです。
- 探す：テンプレート、ビルド用プロンプト、アニメーション効果、動く背景などを一覧から選ぶ。「Free to build」フィルターで無料で作れるものに絞り込みも可能。
- ライブプレビュー：実際にページ全体をスクロールして確認。スマホ幅・デスクトップ幅の両方でチェックできる。
- 受け取り方を確認：そのビルドが「ポータブルなHTML」か「フルプロジェクトの受け渡し」かを確認する。
- ソース＋プロンプトを使う：ポータブル版なら、元のHTML・CSS・アニメーションコード・ホスト済みアセットのパス、そして“builder-ready prompt（AIビルダーにそのまま渡せるプロンプト）”が手に入る。
- AIビルダーに貼る：公式が名前を挙げているのは Lovable・Bolt・Claude・Codex など。プロンプトを貼って生成する。
- 自分仕様に置換：文言・色・フォント・画像を段階的に差し替える。
- 公開前テスト：表示速度、キーボード操作、
prefers-reduced-motion（動きを減らす設定）での挙動を確認してから公開。
主な特徴
- ライブのスクロールプレビュー：静止画でなく、実際に動かして選べる。
- 「Free to build」フィルター：無料で作れるビルドだけを抽出できる。
- ポータブルビルド：プロンプト＋ソース一式で、AIツールに持ち込みやすい。
- フルプロジェクト受け渡し：一部のビルドはプロジェクト一式での提供。
- 1対1相談：方向性決めやモーションのレビューを個別相談できるメニューもある。
料金
プラン構成は次のとおりです（サイト上では Yearly が「月あたり $13.27・年払い」と表示されていました）。最新の金額は公式でご確認ください。
| プラン | 内容 |
|---|---|
| Free | 一部のビルドとリソースが無料 |
| Monthly | UTC週あたり10個のプレミアムサイトのコピーが可能 |
| Yearly | プレミアムサイトのコピーが無制限（サイト表示: 月あたり $13.27・年払い） |
| Lifetime | プレミアムサイトのコピーが無制限（買い切り） |
決済は Stripe、アカウントは Supabase で管理（両方で同じメールアドレスを使う）。既存の購読者は従来の条件が維持されるとされています。
使うときの注意
- AIは指示を“解釈し直す”ことがある：生成結果は公開前に必ず Scrollhaus のプレビューと見比べる、と公式も案内しています。
- プレビュー用メディアは自前ストレージへ：プレビューは Scrollhaus がホストしている素材を使うため、本番公開前に自分のストレージへ移すことが推奨されています。
- WordPressテーマではない：コードを取り込んで調整する前提のソースです。
当サイトでの位置づけ
当サイトでも「AI動画をフレーム分解してスクロール表示する手法」や、Bolt.new・MotionSites のような「プレビュー／プロンプト → AIで生成」系ツールを紹介してきました。Scrollhaus は「動きを先に確かめてから、プロンプトとソースでAI制作につなぐ」という流れを、スクロール演出に特化して整えたライブラリと言えます。凝ったモーションのサイトを、方向性を外さずに素早く立ち上げたいときの選択肢になりそうです。
主な情報源・リンク
本記事は Scrollhaus から提供された情報および公式サイトをもとに作成しました。仕様・料金は公開時点のもので変わる可能性があります。各サービスは提供元の規約に従ってご利用ください。収集・要約はAI、公開判断は人。