Fable5で高品質LPを作る４ステップ
「見積もり35,000ドル」のサイトが、12ドルで生まれた話
先に、正直な数字から。
海外のあるクリエイターは、複雑なアニメーション付きのサイトを1セッションで作り上げた。制作費はおよそ12ドル。同じものをスタジオに頼めば見積もりは35,000ドルだった、と本人は書いている。
別の人は、自分のポートフォリオサイトをこう紹介していた。「代理店なら5,000ドル取る出来のサイトを、僕は2時間で作った」。コードの経験は要らなかった、とも。
こういう話は、少し前なら「盛ってるな」で片づけていい類のものだった。でも2026年6月にClaudeの新しいモデル「Fable 5」が出てから、状況が変わった。デザインの垢抜けまで、一つの道具で届くようになってきた。
この記事は、その「型」を丸ごと渡すためのものだ。難しいコードの話はしない。会社員をしながら、夜と週末に副業で何かを作りたい人が、今夜そのまま真似できる手順まで落とす。
そして最後に、僕が実際にこの手順で作った2枚のLPを見せる。動画も含めて、嘘のない範囲で。
先に一つだけ言っておく。これは魔法ではない。ここを勘違いすると、時間もお金も溶かす。その線引きも正直に書く。
今回、Claude Designのおすすめ機能Design Systemの作り方をまとめたデザインシステムキットを作成しました。
もちろん、LPの制作にも使えます。
この記事の最後で受け取れるようにしています。
何が変わったのか（そして、変わっていないこと）
これまで、きちんとしたLPを1枚作るには、だいたいこれだけ必要だった。デザイナーとモーションの担当と開発者、三人体制。チーム間の引き継ぎで数週間。だから制作会社に何十万円と払うのが「普通」だった。
ここで見落とされがちなのは、その値段の正体だ。高かったのは「スキルの希少性」というより「工程の複雑さ」だった。バラバラの道具と人をつなぐ手間そのものにお金がかかっていた。
Fable 5がやったのは、その複雑さを一人のオペレーターの手元に束ねたことだ。参照画像を渡して、狙いを言葉で伝えると、スクロール演出や配色まで含めて一枚に仕上げてくる。海外の検証では、素材の画像や動画の生成まで込みで、1回の作り直しがだいたい1〜2ドル。3Dのスクロール演出付きサイトを、たった一つの指示文と20分ほどで組み上げた例もある。
数字だけ並べると煽りに聞こえるので、変わっていないことも書く。
一つ。出力はそのままだと「AIっぽい」。使い回しのフォント、なんとなく散らかった配色、意味もなく置かれた数字、行末に一語だけ取り残される崩れ。海外のレビュアーはこの雑さを「slop（スロップ）」と呼んで、150枚以上のサイトを見てきた経験から「文字の詰め込みすぎ」が最大の失敗要因だと指摘していた。一発で完璧は出ない。むしろ2〜3回の磨きが前提だ。
二つ。プロンプトを誰かからそのままコピーしても、たいてい伸びない。独自性は自分で足すしかない。
三つ。お金の話。Fable 5は今のところ提供形態が頻繁に動いている。リリース直後は無料、その後はProやMaxなどのプランに含まれるが上限つき、さらに従量課金へ、という具合に日単位で条件が変わっている時期がある。「誰でもずっとタダで使い放題」ではない。使う前に、その時点の料金だけは自分で確認してほしい。
この三つを飲み込んだ上でなら、型は本当に効く。順番に見ていく。
高品質LPを作る「型」──4ステップ
海外のYouTube6本と、保存数の多かった解説記事を分解すると、勝ちパターンはほぼ一つに収束していた。
デザインを先に固める → 参照を集める → 一発で骨格を出す → 磨く。
この順番が命だ。特に「デザインを先に固める」を飛ばすと、あとは何回直してもAIっぽさから抜けられない。
環境と、思考量の「ダイヤル」
道具はClaude Code。黒い画面が苦手なら、デスクトップアプリ版で十分だ。そこでモデルにFable 5を選ぶ。
覚えておくと効くのが、思考量の設定（effort）の使い分けだ。low / medium / high / max の4段階がある。海外の実践者が繰り返し言っていたのは「最初の一手だけmaxで開いて、あとはmediumに落とす」。最初に文脈を全部渡して骨格を作らせる所にいちばん頭を使わせて、以降の細かい直しは軽い設定で回す。これでトークンの浪費を抑えつつ質を保てる。デザインシステムを組む工程はhighがちょうどいい、という声もあった。
ステップ1：デザインを「先に」固める
いきなり「かっこいいLPを作って」と言わない。先に、デザインの土台を作らせる。
ここで効くのが2つの拡張だ。一つはAnthropic製の「Frontend Design」というスキル。使い回しの定番フォントや、いかにもAI的なデフォルトの見た目を避けて、もっと大胆な方向へ寄せてくれる。もう一つは「UI/UX Pro Max」というプラグイン。数十のスタイルや配色、フォントの組み合わせを持っていて、呼び出すと選択肢の中から提案してくれる。
先にこの土台を宣言しておくと、以降に作るものが全部その芯に沿う。ここが「AIっぽさ」から抜ける分岐点になる。
ステップ2：参照を集める（言葉より、実物）
自分の頭の中のイメージを言葉で説明しようとしない。見せる。
コツは、1枚のサイトを丸ごと真似ようとしないこと。海外の実践者は、良いサイトからセクション単位で「ここのヒーローだけ」「この一覧のレイアウトだけ」と切り取って集めていた。合うものが無ければPinterestなどから別途拾う。集めた画像はプロジェクトの中に参照フォルダを作って放り込んでおく。
真似るのは全体ではなく、部分。良いところだけを借りる。
ステップ3：一発で骨格を出す（マスタープロンプト）
ここで、集めた参照と狙いを渡して、通しで一枚を立ち上げさせる。
この時の一番のコツは、プロンプトの最後に「作る前に、スタイル・フォント・セクション構成・アニメの強さ・文章のトーンについて質問して」と足すこと。するとAIがいきなり作り始めず、4〜6個の質問を返してくる。その答えがサイト全体の土台になる。ここで具体的に答えるほど、あとの往復が減る。
答え終わると、数分の設計と十数分の構築で、最初の一枚が出てくる。この初回の出来が、もう十分に「それっぽい」。
ステップ4：磨く（ここを飛ばす人が損をする）
初回の出力を、まず自分の目でスクロールして、気になった所を全部メモする。
大事なのは、直しを一つずつ投げないこと。「こことこことここ、まとめて直して」と一度に渡す。往復が減るし、AIも全体の整合を取りやすい。
仕上げに、品質チェックをAI自身にやらせる。「このサイトを次の観点で率直に評価して。フォントは使い回しになっていないか。配色は絞れているか。文字の大きさは視線を導けているか。アニメは滑らかで意図があるか。モバイル向けにちゃんと設計されているか。文章はAIっぽい埋め草になっていないか」。返ってきた評価を読んで、納得したものだけ直す。自分のサイトのことは自分がいちばん分かっている。
これで「完璧ではないけれど、確かに良い」一枚になる。あとは毎日ひとつ良くしていけばいい。
もう一歩、うまく回すコツ
慣れてきたら、二つ足すといい。
一つは「終わるまで続けて」と完走を促す指示。AIには途中で「できました」と早めに切り上げてしまう癖がある。全ページが揃って、全部のリンクが動くまで止まるな、と一言添えるだけで取りこぼしが減る。
もう一つは、声で指示すること。海外の実践者の中には、キーで打つより音声で狙いを話した方が結果が良かった、と言う人がいた。頭の中のイメージは、整った文章よりも、しゃべり言葉のほうが漏れなく伝わることがある。うまく言葉にできずに手が止まる人ほど、試す価値がある。
どちらも派手なテクニックではない。でも、うまくいかない時ほど効く。
僕が、この手順で実際に作ってみた
手順だけ書いても信用できないと思うので、実際に作った。Claude Codeで、上の型のとおりに。2枚見せる。
率直な但し書きから。僕が使ったのはClaude Code（実行モデルはFable 5ではなくOpus）で、素材の3D動画ツールは使わず、自己完結のHTMLで作った。だからFable 5固有の数字や3D素材の話は、あくまで海外の検証からの引用として区別している。ただ「型」そのものは同じものを踏んでいる。
一枚目は、あえてミニマルに振った個人ブランドのLP。「昼は会社員、夜は作り手」というコンセプトの、副業クリエイター向けの一枚だ。暗い画面の中で、カーソルがデスクランプの光になって、沈んだ見出しの「作り手」だけを温かく照らす。派手さより、静けさの中の一手で印象を残す作りにした。
ほぼ一発出しなのでヒーローページがちょっとみづらかったりするが、これが一瞬でできてしまう。もちろん、もっと要素を足してみてもいい。
二枚目は、逆に要素をたっぷり積んだ珈琲焙煎所のLP。ヒーローの注ぎ写真から、産地のマーキー、数字、焙煎の物語、工程、豆のグリッド、抽出の手引き、定期便、お客様の声、ギャラリーまで、実際のブランドサイトに近い密度で組んだ。ここで使った写真はすべて画像生成で作ったもので、コーヒーの温かい世界観に揃えてある。
これも3Dエフェクトの使い方にちょっと笑ってしまうが、一発だしの割にはそこそこできていると思う。
この「静かな一枚」と「にぎやかな一枚」を並べると、同じ手順から振れ幅の違う仕上がりが出せるのが分かる。テンプレに寄せないというのは、こういうことだ。
「3Dの入れ方」も、思ったより簡単だった
副業初心者がいちばん尻込みするのが、Appleのサイトみたいなスクロールで動く3Dだ。あれは特別な技術に見える。
海外の解説を掘って分かったのは、拍子抜けするくらいの種明かしだった。バズっている「3D」の多くは、本物の3Dモデリングをしていない。先にAIで短い動画を1本作り、それをスクロールの位置に合わせて再生・逆再生させているだけだ。上にスクロールすれば進み、下げれば戻る。それだけで「立体を回している」ように見える。
もっと手軽なルートもある。プロンプトを共有している海外サイトから、スクロール演出の指示文をそのまま借りてきて、背景の動画とコピーと配色だけ自分のブランドに差し替える。これが最短だ。
効かせるコツは3つ。1つの画面に効果を詰め込まず「1セクション1エフェクト」に絞る。初回が派手すぎたら「もっと控えめに、洗練させて」と必ず押し返す。そしてモバイルは自動で最適化されないので、スマホ表示を自分で確認して「モバイル向けに整えて」と明示的に頼む。
これも実際に試した。二枚目の珈琲LPに、Appleの商品ページ風の見せ場を足した。真っ暗な画面に豆袋をひとつ、スポットライトで浮かべて、スクロールすると製品が大きく迫り、少しずつ角度を変えながら、脇のキャプションが「焙煎したて、という贅沢」「一粒ずつ、手で選別」「焙煎日を明記して、48時間以内に」と切り替わっていく。さらに全画面いっぱいに豆のマクロ写真がゆっくり寄っていく没入の見せ場や、「48h」という数字が立体的に迫り出す場面も重ねた。
派手だが、外部の重たいライブラリは使っていない。スクロールと連動して形が変わるだけで、体験の印象はまるで違う。
今夜、あなたができる最初の一歩
長く書いたけれど、始めるのは驚くほど小さくていい。
まず、デザインの土台になるスキルを一つ入れる。次に、好きなサイトを一つだけ参照に選ぶ。そして、完璧を目指さない。
海外で伸びていた人たちが口を揃えて言っていたのは、結局これだった。毎晩ひとつ、良くする。それだけを続けて、気づけば人に頼まれる側になっていた、と。
7歳の子どもがコード未経験のままアプリを作って収益を出した、という話まで出てきている時代だ。父親が教えたのは「何を作りたいかを説明する方法」だけだった。いちばん強い武器は、コードでもデザインの学位でもなく、「こうしたい」を言葉にする力になりつつある。
それは、昼のあいだに「こうだったらいいのに」を毎日考えている人が、もう持っているものだ。
今夜、最初の一枚を。
そのまま使えるキットを用意しました
とはいえ、ゼロから作るのは面倒だと思います。
なので、この記事の内容をそのまま再現できる「Claude Design デザインシステムキット」を用意しました。記事で触れた「無難に寄る」「やり直しで枠が溶ける」を、先回りで潰すための中身です。
この記事の内容をそのままコピペで再現できる「Claude Design デザインシステムキット」を、LINE で無料配布しています。
▼LINE登録で「Claude Design デザインシステムキット」を受け取る
https://t.co/90omRA4UQ7
オプチャ（LINE のオープンチャット）に参加いただき、その後ノートに記載の公式LINEから
デザインシステム
と送っていただけると、特典を受け取ることができます。
※オープンチャット内ではキーワードの送信はお控えください
まずはテンプレをそのまま Claude Design に入れて、1枚だけ資料を作ってみるのがおすすめです。それだけで、デザインシステムを使う感覚がつかめると思います。
▼LINE登録で「Claude Design デザインシステムキット」を受け取る