スクロールした瞬間、ホームページが映画になる

ページをスクロールすると、映像のカメラがすーっと前に進んでいく。玄関から客室へ、食卓へ、サウナへ。そして映像の場面ひとつひとつが、そのままサイトの各ページへの入口になる、そんなトップページです。

Appleの製品ページで有名な「スクロールに合わせて映像が進む」演出があります。あれをふつうの会社やお店のサイトで作れるようにしたのが、この制作スキルです。

買うものは「スキル」一式。作り方の手順書・部品のコード・チェック用の道具をまとめたセットで、買い切り980円です。完成したサイトが商品ではありません。個別サポートもありません。AIツール（Claude等）の外部サービス代（月3,000円くらい〜）が別にかかります。

対象は、Claude CodeまたはCodexというAIツールです。スマホだけで完結したい方には向きません。この1つの条件に引っかかった方は、ここで閉じて大丈夫です。

まだ読んでいる方へ。ホームページ制作で「スクロールに合わせて映像が進む」サイトを提案できる人は、まだほとんどいません。その実物を、先にお見せします。

まず、完成品から見てください

美容室・ぶどう農園・ラーメン店・民宿。4つの業種のデモサイトを、1本ずつ実録動画（各1〜2分・無音）でお見せします。実際に画面をスクロールしながら録画したものです。映像が進む感覚は、動画を見るのがいちばん早いです。

美容室「Flower」

扉を開けると、花がひらくヘアサロン。お店の空気、ヘアスタイル、技術、予約へ、世界観そのままに章が進みます。

ぶどう農園「甘美ぶどう」

土の話から始まり、5つの品種、実の選び方、つくる人へ、旬の情報と直売所まで一本でつながります。

ラーメン店「中華そば灯」

「六時間、沸かさない。」から始まる一杯の物語。寸胴、麺づくり、一杯、店主へ、お品書きまで一本道です。

民宿「リヴァイア八丈」

海と火山の島にある、6室だけの小さな宿。玄関から客室、食卓、サウナ、島の時間へ、スクロールで4つの章を進みます。

4つとも、実在しないお店・宿の名前で作った自主制作のデモです。ここから、このデモサイトの中の1サイトの画面と数字を紹介します。

実画面: スクロールで進む4章のフィルムがトップページになる（自主制作デモ・リヴァイア八丈）

トップページの実際の画面です。架空の宿ですが、画面は本物。WordPressに組み込んで、表示チェックまで通した状態です。

スクロールした分だけ、カメラが前に進みます。下の画像は、1本の映像から抜き出した3つの場面。スクロールの位置に合わせて、この間を行ったり来たりできます。

実フィルム: スクロール0%・50%・100%に対応する3フレーム。240フレームの一続きのカメラ移動

章を進めると、映像は客室から食卓へ、火山岩のサウナへ。章ごとに紹介文とボタンが現れて、そのまま下のページへの入口になります。

実画面: カメラはカットなしで客室から食卓、サウナへ進む

スマホでも、同じ映像がスマホ用のチェックを通った状態で動きます。

実画面: スマホ幅でも同じフィルムが検品済みで動く

作ったときの記録から、実際の数字をそのまま書きます。

映像: 4章 × 10秒。フルHD（1920×1080）・1秒24コマで、1章あたり240コマ
映像の生成代: Google Flowのクレジット75クレジット（作り直し1本を含む。月額サブスクユーザーなら毎月1,000クレジットが付与されるので、その1割以下。今なら8月31日まで、Google Flowの50クレジットが毎日無料でアカウントに付与されるキャンペーン中です）
表示チェック: 全9ページをパソコン幅とスマホ幅で確認して、はみ出し0件・読みにくい配色0件
下調べ: 参考サイトを821件ざっと見て、30件にしぼり、3件をじっくり分析

仕上がりの判定も、自分で「良くできた」と言って終わりにはしません。参考にした本物のサイト3件とこのデモを名前を隠して並べ、制作に関わっていない別のAIに順位をつけさせました。パソコン幅・スマホ幅の両方で1位になるまで直してから、完成としています（売上などの成果を約束するものではありません）。

この数字だけで判断できる方は、このままBrainの購入ボタンへどうぞ。迷う方のために、この下に必要なものと「含まれないもの」を全部書いています。

このサイト、僕はデザインも映像も文章も作っていません

このスキルを使用してサイトを作ったとき、人間がやったことと、AIがやったことを分けるとこうなります。

業種ヒアリングの質問 … AI
参考サイト821件の調査としぼり込み … AI
ページ構成の設計書づくり … AI
章の画像と映像を作って、チェックする … AI
WordPressのテーマ（サイトの着せ替え一式）を作る … AI
パソコン・スマホでの表示チェックと報告 … AI
要所で「これでOK」を出すことだけ … 人間（デモサイト1件では、サイト設計・映像設計・クレジット消費のOKが3回と、デザイン選びが9回）

人間の仕事は、節目ごとに「これで進めて」と言うことです。手を動かす作業はAIに、決める仕事はあなたに残します。

ただし「全部おまかせで数分後に完成」ではありません。OKを出しながら、区切りごとに作り込んでいく道具です。ここは正直に書いておきます。

中身は、4つのまとまり・19の手順

図解: 四幕・十九工程の制作フロー。3つの承認が揃うまで生成に入らない

手順は「準備 → 映像 → 組み立て → 仕上げ」の4つのまとまり、全部で19ステップです。大事なのは順番で、サイト設計・映像設計・消費クレジットの3つにあなたがOKを出すまで、お金のかかる映像生成には進みません。

「勢いで生成して、あとで後悔する」が起きない順番に、最初から組んであります。

進み具合は、専用の進捗ボードが実際のファイルとサイトを測って表示します。いま誰の番か——あなたのOK待ちなのか、AIの作業中なのか——がひと目で分かります。

デザインは、説明ではなく「試着」で決める

フォント、ロゴ、スクロールの目印——デザインの候補は、口で説明したり1枚の絵を見せたりして決めません。候補を全部実際に作って、同じページ・同じ場面のスクリーンショットを横に並べてから選んでもらいます。服の試着と同じです。

実画面: 試着室9・スクロールヒント5案の実比較盤

上の画像は、デモサイトで実際にAIが生成した比較表です（スクロールの目印5案）。こうした「試着」をフォント・ロゴ・ヘッダーなど9回くり返して決めていきます。選ばなかった案もファイルとして残るので、あとで気が変わっても戻せます。

本物のサイト3件と並べて、勝つまで完成にしない

実画面: 出荷関門の匿名ボード。実在サイト3件と制作サイトを独立AIが順位付け

完成の前に、作ったサイトと、調査対象に選ばれた本物のサイト3件のスクリーンショットを名前を隠して並べます。そして、制作に関わっていない別のAIエージェントに順位をつけさせます。制作にたずさわったAIエージェントは、自分の作品をひいき目で見てしまうからです。

このスキルで制作されたサイトは、パソコン幅・スマホ幅の両方の画面で他社のサイトと比較され、1位になるまでAIエージェントに直されます。この「勝つまで出さない」判定のやり方ごと、スキルに入っています。

WordPressの管理画面で運営できる

作って終わりのページではなく、専門知識のない人でも日々の更新ができることを前提に組み立てます。完成物はWordPress + 専用テーマ + 小さな部品プラグイン。特別なシステムや月額ツールには頼りません。

図解: 納品後の分担。お知らせ・文章写真・問い合わせは管理画面で、フィルムと世界観は制作者の領分

お知らせは、ブログ記事と同じやり方で書けます。管理画面から投稿すれば、一覧にも個別ページにも自動で反映。営業時間の変更や季節の告知に、エンジニアは要りません
各ページの文章と写真は、WordPressの編集画面で差し替えられます。本文がページの「型」の中に埋め込まれておらず、編集画面側に保存される作りだからです
問い合わせは管理画面に届いて、メール通知も飛びます。
トップの映像は独立した部品になっています。お知らせを更新しても映像には触れない——触れないから、壊れません
管理画面は、使わないメニューを片付けて渡します。コメント機能を閉じ、迷いそうなメニューを非表示にする手順まで含みます

日々の更新はAIなしで可能ですが、映像の作り直しやデザインの大きな改修は、制作者がAIエージェントと共に仕事をする設計にしてあります。

失敗した経験が、数字つきのルールになって入っています

このスキルの中身は、きれいごとの手順書ではありません。実際の制作でつまずいた失敗が、同じ失敗をくり返さないためのルールとして書き込まれています。たとえば——

章の切り替わりの1ピクセルで、前の章と次の章の文字が重なった。見つけて、直して、全部の境界を画像で確認するところまでやり、境界チェックを手順に加えました。
AI動画生成サービスへの自動文字入力がずれて、指示文の最初の1文字しか伝わっていなかった。クレジット消費で制作した映像1本が無駄に。以来「全文をキー入力で入れて、送信前にAIエージェントが中身を確認する」が手順になっています。
静止画では何もなかった壁に、動画にした途端、読めない文字が勝手に描かれた。AIの映像は「画面っぽい面」に文字を描きたがります。これを防ぐ指示の書き方が、文法として入っています。
つなぎ目のコマは、AIエージェントが目で確認してから次を作る。途中に不良コマが混ざると、そのあとの章の動画生成——クレジット消費——が連鎖して無駄になります。順番そのものがルールです。

ルールには日付と実測の数字がついていて、古くなったルールは「失効」と記録されます。references/rules.json がその台帳です。

そもそも「スキル」とは？

Claude CodeやCodexというAIに読ませる、専門知識と手順書をまとめたテキストファイルの束です。アプリでも拡張機能でもなく、勝手に動く怪しいツールでもありません。

新しく人を雇ったら、まず仕事のマニュアルを渡しますよね。あれのAI版だと思ってください。フォルダを決まった場所に置いて /cinematic-site と入力すると（Codexでは $cinematic-site）、AIがこのマニュアルに沿って動き出します。

macOS / Windows / Linux で使える想定です
導入はフォルダを1つコピーするだけ。やめるときはフォルダを消すだけ
中身は図解画像1枚をのぞいて全部テキスト。買ったあと、全文を自分の目で確認できます

中身のカタログ

隠しても仕方ないので、そのまま出します。販売するzipの中身です。

SKILL.md — 4まとまり・19手順の制作フロー本文（37KB）
README.md — 必要なもの、導入手順、費用、注意点（日本語）
LICENSE — 利用条件（購入者向けライセンス + 土台部分のMIT License）
references/ 全47ファイル — 各段階のくわしい手順書（act1〜act4）と、画像・映像の指示文の書き方（prompts.md）
references/ — 生成→チェック→変換の実務手順（pipeline.md）と、AIツール別の操作手順（runtime-claude-code / runtime-codex）
references/ — スクロールと映像を同期させる部品（scrub-engine.js）と、WordPress一式（埋め込み部品・問い合わせフォーム・SNSカード・セキュリティ設定）
references/ — 表示チェックを自動でやる道具（qa-scrub.js / qa-scrub-gl.js / qa-focus.js）
references/ — 進捗ボードと管理の道具（dashboard.py / dashboard-invariants.py / blind-board.py / knockout.py / clip-cuts.py / rules.json）
scripts/validate_skill.py — 導入がうまくいったか調べるチェッカー
tests/ — 進捗ボードのテスト
agents/openai.yaml — Codex用の設定ファイル

なお、販売するv1.2は、今後の制作で見つかった改善を足して、新しいバージョンに継続的に更新されます。

必要なものと費用（ここは隠しません）

買ってから「聞いてない」となるのがいちばん良くないので、先に全部書きます。

図解: 必要な環境と費用。Claude Code/Codex、ChatGPTサブスク、Google AI Pro、無料ツール一式

Claude Code または Codex — スキルを動かすAIツール。どちらか一方でOK。利用料は別途かかります
ChatGPTの有料プラン — 章の画像づくりに使います。画像はCodex CLIの機能で作るため、Claude Code派の方もChatGPTの契約とCodexの初期設定が必要です
Google AI Pro（Google Flow） — 映像づくりに使います。月額サブスクユーザーなら毎月無料で1000クレジット貰えます。1サイトの映像生成で75クレジット（作り直し1本込み）かかりました。今なら8月31日まで、Google Flowの50クレジットが毎日無料でアカウントに付与されるキャンペーン中ですので、それを利用することも可能です
Local（無料） — 自分のパソコンの中でWordPressを動かして、組み立てと確認をする作業環境
Chrome + Node.js（新しめの安定版）、ffmpeg / ffprobe、Python 3 + Pillow（全部無料） — チェックと変換に使う道具

いまの契約別の目安はこうです。

Claude Codeを契約している方: ChatGPT有料プランとGoogle AI Proを足す → 月6,000円前後〜 + スキル980円
ChatGPT（Codex）を契約している方: Google AI Proを足す → 月3,000円前後〜 + スキル980円
どちらも契約していない方: まずふだんの仕事でClaude CodeかCodexを使ってみてから、購入を考えるのがおすすめです

料金・AIモデル・透かし（映像に入るロゴ）の仕様は変わることがあります。映像に透かしが入る場合があり、その扱い方も手順に入っています。だからこのスキルの手順は「生成ボタンを押す前に、その日の公式画面で値段を確認する」前提で書いてあります。

費用に納得できた方だけ、先へどうぞ。ここから先は、入っているもの・いないものの最終確認です。

含まれるもの / 含まれないもの

図解: 買うもの（制作フロー・エンジン・検品・ルール台帳・商用OKライセンス）と買わないもの（完成サイト・AI契約・代行・個別サポート）

含まれるもの

AIツール用のスキル：4まとまり、19手順の制作フロー（SKILL.md + references一式）
WordPressのお手本実装
表示チェックの道具、進捗ボード、名前を隠して順位をつける「ブラインド判定」のやり方
数字つきの失敗ルール台帳
本スキルで制作したサイトの商用利用・改変してよい権利

含まれないもの

完成サイト・完成テーマ・デモのファイルや素材
Claude Code / ChatGPT / Google AI Pro の契約と費用（Localなど無料ツールの導入作業もご自身で）
画像・映像づくりの代行、WordPress引っ越しの代行
個別サポート（DM・メール・環境調査・案件相談）

向いていない人（当てはまるなら、買わないでください）

スマートフォンだけで完結したい方
一度の指示で数分後に完成ページがほしい方
WordPress、動画ファイルに一切触りたくない方
AIサービスの月額費用・クレジット代を払いたくない方
「AIは作り直しが前提」という性質が苦手な方（映像は1〜2割の作り直しを見込む道具です）
質問しながら進めたい方

逆に——Claude CodeやCodexをふだんから使っている制作者には、武器が1つ増えます。「スクロールに合わせて映像が進む」サイトを出せる人は、まだほとんどいません。

ライセンス — 980円で、どこまで使えるか

できること

作ったサイトの商用利用・納品
業種や好みに合わせた改造・拡張
作った映像・画像の納品（AIで作った素材の権利は、各AIサービスのルールに従います）

できないこと（利用条件で禁止されていること）

スキル本体（SKILL.md・references）をそのまま配り直す・売り直す・ネットに公開すること
「自分が作ったスキル」として売ること

ファイル一式をそのまま配り直す・売り直すことは利用条件として禁止です。980円の買い切りでこの商品を続けるための線引きです。全文は同梱のLICENSEで読めます。

ライセンス認証も、台数制限も、納品物に埋め込まれる目印もありません。認証サーバーへの通信もないので、お客さんのサーバーに「素性の知れない通信」を持ち込みません。パソコンの買い替え・複数台での利用・案件数の追加に、追加費用は一切かかりません。

サポートについて — 個別対応の代わりに、仕組みで解決します

個別の質問対応はありません。その代わり:

READMEに、環境チェックから初回起動までの手順があります。起動前には scripts/validate_skill.py が、ファイルの欠けや環境のズレを自動で調べます
困ったら、エラー文をそのままClaude Code / Codexに貼ってください。スキル本体とルール台帳をAI自身が読んで、原因と直し方を探します。スキル全体が「AIに読ませる」前提で書かれているからです
ファイルの欠けなど明らかな不具合は、この販売ページで告知して直します

外部サービスの仕様変更・値上げ・アカウント制限までは保証できません。将来のアップデートを無償で約束するものでもありません。

よくある質問

Claude CodeとCodex、どちらでも使えますか？

はい。両方の手順書（runtime-claude-code.md / runtime-codex.md）が入っています。映像サービスのブラウザ操作は、Claude CodeならClaude in Chrome、CodexならChrome連携を使います。つながらない環境用に、指示書を見ながら手動で操作する方法も入っています。

プログラミング初心者でも使えますか？

条件つきで、はい。Claude CodeかCodexを使ったことがあって、ファイル操作に抵抗がなければ進められます。コードを書く作業はAIがやります。ただし「AIツールに初めて触る」方向けの入門教材ではありません。

完成サイトやデモのファイルは届きますか？

届きません。デモは買う前に品質を確かめてもらうための自主制作で、このページの動画と画面がその成果物です。あなたが買うのは、同じものを自分の案件で作るためのスキル一式です。

動いているデモを実際に触れますか？

公開デモサイトは用意していません。4業種とも架空ブランドの自主制作デモで、本番公開はしていないためです。代わりに、実際に操作した4本の実録動画をこのページに載せています。

動画は全自動で作れますか？

いいえ。映像サービス（Google Flow）にはAPIという自動化の入口がないため、ログイン済みブラウザの自動操作（または手動操作）で1本ずつ作ります。1本ごとに、値段の確認 → 生成 → ダウンロード → コマの検査、という順番です。全自動より遅いかわりに、失敗でクレジットが溶けていく事故を防ぎます。

1サイトにかかるクレジットと時間の目安は？

デモサイトの例では、パソコン用4章の映像で75クレジット（作り直し1本込み）でした。章の数や作り直しの回数で変わります。制作時間は、スムーズに進めば実働6時間ほどが目安です。OKポイントで区切って、数日に分けて進めることもできます。数十分で完成する種類の道具ではありません。

WindowsやLinuxでも使えますか？

スキル本文はmacOS / Windows / Linuxを想定しています。チェック用の道具はChromeの場所がOSごとに違うため、macOS以外では設定の調整が必要になることがあります。そのときは、エラー文をそのままAIに貼ってください。スキルを読んだAIが直す場所を見つけます。

AIで作った画像や映像を、お客さんの案件に納品して大丈夫ですか？

スキルは商用案件での利用が自由です。AIで作った画像・映像そのものの権利は、作るのに使った各AIサービス（ChatGPTの画像生成・Google Flow）のルールに従います。ルールや透かしの仕様は変わるので、スキルには「作る前にその日の公式表示を確認する」手順が入っています。契約がからむ案件では、内容に応じてご自身でも確認してください。

納品後、お客さん自身でサイトを更新できますか？

日々の更新はできます。お知らせはブログ記事と同じやり方で追加でき、各ページの文章・写真はWordPressの編集画面で差し替えられます。問い合わせも管理画面で確認できます。トップの映像は独立した部品なので、記事の更新で壊れることはありません。映像の作り直しやデザインの大改修は、制作者側の仕事です。

いまあるWordPressテーマや本番サーバーに組み込めますか？

Local（パソコン内のWordPress環境）で動くお手本一式と、埋め込み用の部品のひな形が入っています。いまお使いのテーマ・プラグイン・サーバーとの相性調整はご自身の作業です。本番反映そのものの代行・保証はしません。

内容が古くなりませんか？

外部サービスの画面や料金は変わります。だからこのスキルは、外部の仕様を決めつけず「その日の公式画面で確認してから進む」作りになっています。日付つきの外部情報は台帳（rules.json）で管理され、チェックコマンドが期限切れを見つけます。

購入後に質問できますか？

個別の質問対応はありません。README・手順書・ルール台帳と、それを読めるAI自身が、あなたの一次サポートです。

返金はできますか？

Brainのルール上、デジタル商品は原則キャンセル・返金ができません。だからこのページは、実物の動画・画面・数字・入っていないもの・かかる費用を、買う前に全部開示しています。

価格について

映像で始まる会社サイトを制作会社に頼むと、サイト制作費とは別に映像制作費がかかります。演出込みのトップページ映像は、それだけで数十万円の見積もりになる世界です。

cinematic-siteは980円です。別にかかるのは、あなたのAIサービス契約と、1サイトあたり実測75クレジットほどの映像生成代——月1,000クレジットの範囲内です。

なぜこの価格かというと、これは制作の代行ではなく、あなたのパソコンに設置する「作る仕組み」そのものだからです。一度スキルを設置すれば、同じ手順が何度でも実行できます。1サイトでも制作を完了すれば、この金額は無駄になりません。

購入前の最終チェック

Claude CodeまたはCodexを使える
ChatGPT有料プランとGoogle AI Proなどの外部費用を払える
完成サイトではなく、スキル（作り方の手順・部品コード・チェック道具）を買うと理解した
個別サポートなし・返金不可を理解した
利用条件（商用利用・納品は自由/スキル本体の配り直し・売り直しは禁止）と、AIで作った素材の権利のルールを確認した

含まれるもの: AIツール用のスキル（制作の手順・部品コード・チェック道具）。含まれないもの: 完成サイト・AI契約・代行・個別サポート。別にかかる費用: 月3,000円前後〜 + 映像クレジット。

購入後の最初の一歩は決まっています。①購入直後の画面（Brainの購入済みページ）からzipを受け取って解凍 → ②READMEの環境チェック → ③スキルフォルダを置く → ④/cinematic-site と入力（Codexでは $cinematic-site）。最初に起動すると、業種ヒアリングから始まります。有料の映像生成の前には、かならず無料の環境確認が挟まります。だから、いきなりクレジットが減ることはありません。

5つ全部にチェックがついた方へ。この下のBrain購入ボタンからどうぞ。それでは、クランクインしましょう。