こんにちは、なりタイ園長といいます。

ThreadsやXメインで活動してて、主宰するAIコミュニティの運営、企業やSNS発信者のAI顧問、コンサルなどをメインにしています。

【この記事は、オープンチャット参加者は割引き価格で購入できます】

無料のLINEオープンチャット「園長の地上研究室🧪」では、AIでサイトや仕事を作るための最新情報や使い方を、日々シェアしています。

このオープンチャットから期間限定で割引き価格（5,980円）で買えます👇️

▼ 園長の地上研究室🧪（LINEオープンチャット・無料）

このBrainでできるようになること

1枚の画像で言うとこうです👇️

「おまかせでサイトを作って」と話しかければ、サイトが建つ時代になりました。

でも、「建つ」と「売れるレベルで仕上がる」のあいだには、まだ距離があります。理由は2つ。

雰囲気を言葉にできない
「上品で、清潔感があって…」までは頭にあるのに、プロンプトに書けない。出てくるものが毎回違う
動きをつけられない
「ふわっと」「ぬるっと」がAIに伝わらない。静止画みたいなサイトで止まる

このセット（プロの型でサイト作りセット）は、この2つを「道具」で解決します。

作ったのは、AI導入の伴走支援とLP・サイト制作を仕事にしているyuuさんと、現役エンジニアのちせさん。

2人が自分の現場で使うために作った道具を、そのまま渡せる形にしました。中身は4つです。

LP雰囲気図鑑（見本89本）：yuuさん　／　作る前に「雰囲気」を目で選ぶ → 制作プロンプトが書き出される
サイト雰囲気図鑑（見本28本）：yuuさん　／　同じ仕組みのホームページ版

モーションパレット（図鑑）（動くデモ46本・動きのサンプル400以上）：ちせさん　／　動きを目で選んで「プロンプトをコピー」
動きの強化室（スキル5本＋モーション図鑑MCP）：ちせさん　／　AIに話しかけるだけで、お手本の分析から動きの実装まで

先に大事なことを書いておきます。このセットは、単体で完結します。

僕の「おまかせサイト工房」を持っていなくても、CodexかClaude Codeがあれば、そのまま使えます（工房をお持ちの方は、後半に「さらに効く理由」を書きました）

もう1つ、2026年9月に前提が変わりました。Claude の新モデル Opus 5.5 が、月20ドルの Claude Pro で使う Claude Code の標準のモデルになり、上位モデルに近い力を追加料金なしで使えるようになったのです。

次の章で、公式の数字と僕の実感を分けて説明します。

Opus 5.5 の登場で、月20ドルでも「いいサイト」がサクッと作れるように

これまで「売れるレベル」のサイトを建てるには、上位のモデルが必要でした。Claude なら Fable（Opus より上位のモデル）です。

ところが月20ドルの Claude Pro では、Fable は今も通常の使用枠に含まれておらず、使うには追加のクレジットを買う必要があります。

Claude では、いいサイトを何本も建てるなら Fable を追加のクレジットで使うのが近道で、月20ドルの枠だけでは手が届きにくかった。

変わったのは、その一段下の Opus が Fable に迫ったことです。

2026年9月22日に出た Opus 5.5 を、公式はこう説明しています。「ほとんどの仕事で Claude Fable 5.1 と同じレベルの性能で、Opus 5 より40%安く動く」

つまり、月20ドルの通常枠のまま、ほとんどの仕事で Fable 5.1 と同じレベルのモデルが、追加料金なしで使えるようになりました。

僕自身、今は制作（勉強会資料、LPの点検、コミュニティ向けの配布物、ゲームの試作）は、大半を Opus 5.5 で回しています。

さらに、Opus 5.5の下に最近、 Sonnet 5.5というモデルが登場したのですが、これもOpusに引けを取らないレベルのサイトが作れます。

トークン消費がOpus以上に少ないので、20ドルプランでもかなり使うことができてありがたいです。

Codex をお使いの方も、このセットの使い方は変わりません。図鑑とパレットはブラウザで選んでコピーするだけなので、Codex でも Claude Code でも、同じプロンプトがそのまま効きます（後の章の4本は Codex で建てました）。

その後に出たCodexの6.1 Sol というモデルもOpus 5.5に匹敵するクオリティなので、Claude CodeでもCodexでも同じクオリティのサイトが作れるようになりました。

だから、このセットの意味も変わります。

土台が安く強くなった分、差がつくのは「雰囲気の方向」と「動き」です。そこを道具で埋めるのが、このセットです。

実物41本を、まずはご覧ください

説明より先に、証拠からいきます。

▼ この道具で作った制作デモ41本のギャラリー

ツール紹介／ヘッドホン／ホテル／参加型アニメサイト／スマホ収納ボックス／アニメ作品紹介／ダンス教室／キャンプ場／活動紹介／水族館／キャンドル工房／占い・カウンセリング／記念日レストラン／個展・アートギャラリー／パティスリー／園・教室／ハンドメイド／マルシェ・野外フェス／士業／割烹・和食／ガジェットEC／ヨガスタジオ／ラーメン店／和モダン工芸EC／フォトウェディング／高級不動産／キッチンカー／進学塾／ベビー用品EC／AI導入コンサル／ドリンクスタンド／エンジニア採用／大人の宿／歯科クリニック／フラワーショップ／コーヒーロースタリー／アウトドアギアEC／サウナ・銭湯／パーソナルジム／ピアノ教室。この41本を、業種で見比べられます。

ギャラリーは「どの道具を使ったか」で絞り込めます（図鑑＋強化室／図鑑＋工房／工房＋強化室／3点フルセット）。「工房なし」で作った実物も入れてあります。

「売れるレベル」とは、どのレベルか

ここで言う"売れるレベル"は、ふわっとした形容ではありません。yuuさんがLP・サイト制作の仕事として、実際にクライアントへ納品しているレベルのことです。

yuuさんは、僕のコミュニティ「ウラチカ」のメンバーです。本人の自己紹介を、そのまま載せます。

AI導入の伴走支援と、LP・サイト制作をメインに5ヶ月で売上250万円超。継続案件も受注。
■ AI導入の伴走支援
法人・個人の継続契約で、AIの導入から活用までを伴走。業務効率化の成果が出たクライアントは、自社サービスを県外展開をスタートさせた。
■ LP・サイト制作と、公開後の支援
制作に加え、本来の価値に見合った単価の見直しを提案。結果、クライアントの単価は約2倍に。制作したサイトを公開後、募集枠は即日で完売。
公開後も、計測データをもとにした改善案の提案やクリック率の向上までサポート。
■ AIセミナー
参加者70名超のAIセミナーに登壇。受講者満足度は5点満点中4.8。
クライアントの価値を倍にすることを目標に活動しています。

文具系のクライアントにLPを納品したときには、「このクオリティならLP制作はしっかり料金をいただいて良いと思います」という言葉をいただいたそうです。

そして8月には僕にこんな報告をしてくださりました。

以前はヒアリング→リサーチ→構成→提案を毎回ゼロから長時間かけていましたが、今は短時間で精度の高い初期提案が作れるようになりました。
（中略）作ってきたLP図鑑がかなり役立ちました。

つまりこの図鑑は、机上で考えた分類表ではなく、案件を受けながら、その現場で使うために作られたものです。

動きの担当はちせさん。

本業はフリーランスのエンジニアで、Web制作・EC構築（Shopify）・アプリ開発が仕事。以前はAI研修の会社で教材づくりもしていた人です。

コミュニティの中でも、メンバーの分析ツールのコードレビューと自動テストを仕事として引き受けていて、頼んだ方は「仕事が爆速なうえ、本当に丁寧」とコメントしてました。

受注している人の型と、ガチエンジニアの道具。

この2つを借りられるから、「僕でも、売れるレベルのサイトが作れる」が現実的になります。

なぜ「見て選ぶ」と、間違えないのか

AIにサイトを頼むとき、いちばん難しいのは「雰囲気を言葉にすること」です。「おしゃれに」と伝えると、出てくるものは毎回違う。案件だと、これがそのままやり直しの回数になります。

LP雰囲気図鑑は、ここを「言葉で説明する」から「見て選ぶ」に変えます。

図鑑を開いて、作りたい雰囲気に近い実例を選ぶ（業種で絞れます。「ことばで探す」入口もあります）
「採用方針」が出る — 配色3色（HEX指定）・見出しと本文の書体・想定セクション構成・コピーの方向性・そして「避けること」まで
「AIに渡す制作プロンプトを書き出す」を押して、自分の商品情報を書き足し、CodexやClaude Codeに貼る

ポイントは、方向を決める工程がプロンプトの前に終わっていることです。AIが迷う余地が減るので、出てくるものがブレません。

分からない項目は空欄で構いません。足りない情報は、AIの側から質問してくる作りになっています。

yuuさん自身は、この図鑑をクライアントと一緒に見ながら提案する使い方をしています。

打ち合わせで図鑑から2本選んでもらい、そのブリーフで建てる。

「雰囲気が違う」「構成が違う」というすり合わせを先に終わらせてしまうので、その後の文章や細部のやり取りが早く終わる、という運用です。

▼園長によるLP図鑑の紹介動画

売りページ（LP）なら前者、店舗や会社のホームページなら後者。

合わせて117本の見本から選べます。インストールはありません。ブラウザで開いて、選んで、コピーするだけです。

動きは、現役エンジニアの道具でつけます

「静止画みたいなサイト」と「思わずスクロールしたくなるサイト」の差は、たいてい動きです。ところがアニメーションは、AIへの指示が特に難しい領域です。

動きの強化室は、エンジニアが自分の現場で使うために作った道具を、非エンジニアに渡せる形に整えたものです。頼み方は3通りあります。

① 選ぶ：モーションパレットで動くデモを見て「プロンプトをコピー」→ AIに貼る　／　自分で動きを決めたい
② おまかせ：「このサイトのアニメーションを強化して」と話しかける → AIが業種に合う動きを松竹梅で提案　／　AIに任せたい
③ お手本分析：「このサイトのアニメーションを分析して」＋URL → イージング・duration・staggerまで実測　／　参考にしたいサイトがある

①だけなら、インストールも要りません。パレットはブラウザで開けます。

▼園長によるモーション図鑑の紹介動画

トップに動くデモ46本。GIFではなく、その場で動く実物です
雰囲気8種×強度3段階で絞り込めます（「静謐・和」「テック・未来」×「ひかえめ／標準／大胆」など）
各デモに「プロンプトをコピー」。配色・イージング・タイミングまで数値で入っているので、AIに貼るだけで再現が利きます
奥には動きのサンプル400以上。1つずつ試して、複数選んでまとめてコピーできます

Webのアニメーションがここまでの本数と粒度で、数値つきで整理されたものを、僕は初めて見ました。ギャラリーの41本は、この46本の動きを全部どこかで使っています。

②と③は「動きの強化室」がやります

購入すると、統合プラグイン「動きの強化室」が手に入ります。中身はスキル5本＋モーション図鑑MCPで、1回のセットアップで全部入ります。

お手本サイトの動きを実測・分析：「このサイトのアニメーションを分析して」＋URL
業種らしい演出を松竹梅で提案：「和菓子屋に合う動きを提案して」
漠然としたイメージを設計図にする：「高級感のある方向に整えて」
選択肢から実装指示書を作る：「動きは未定なので指示書を作って」
既存サイトに動きを後載せ：「このサイトのアニメーションを強化して」

スキル名を覚える必要はありません。普段の言葉で頼めば、AIが適切な入口を選びます。

お手本分析で持ち込むのは動きの手法とパラメータだけです。ブランド名・文章・画像・配色・レイアウト・コードは複製しません。「参考にしたいけれど真似はしたくない」の線引きが、仕組みの側で守られています。

公開済みのサイトに使うのが怖い方へ

動きの強化室には「外せば元通り」のルールがあります。公開済みサイトへの適用は、追加した動きを外せば元のサイトに戻る形で実装される決まりです。

これは僕の環境で機械的に確かめました。動きを後付けし、外してから元と比較したところ、差分ゼロ（バイト単位で完全復元）でした。すでに納品したサイトや運用中のサイトに足しても、壊すリスクを仕組みの側で抑えています。

動きのサンプル400以上をAIが道具として直接引ける「モーション図鑑MCPサーバー」も同梱（MCPは、AIが外部の道具を呼び出す仕組みです）で、セットアップ時に自動で設定されます（.mcp.json を手で書く必要はありません）。

セットアップは、購入後にAIへ1行貼るだけ

ご購入後、この記事の最後に表示される1行を、新しいチャットに貼るだけです。Claude Code / Codex / Cursor、どれでも同じです。

あとはAIが全部やります。お使いのAIの種類を判定して、必要ならバージョンの確認と更新までやってくれます（所要2〜3分・1回だけ）。モーション図鑑MCP（AIが外部の道具を呼び出す仕組み）の設定も自動なので、設定ファイルを触る必要はありません。

雰囲気図鑑（LP版・サイト版）とモーションパレットは、インストール自体がありません。ブラウザで開くだけです。

※ Codexで「このフォルダを信頼しますか」という確認が出て止まった場合は「信頼する」を選んでください。詳しい対処は受け取りページのFAQにまとめてあります。

おまかせサイト工房をお持ちの方へ — さらにサイトのクオリティが上がります

このセットは単体で完結しますが、僕の「おまかせサイト工房」をお持ちなら、さらに完成品のサイトのクオリティが上がります。

まず前提として、Claude Code でお使いなら、工房を動かすモデルそのものが一段上がりました。Opus 5.5 の章で書いたとおり、Claude Codeの既定モデルが Opus 5.5 になったので、モデルを固定していなければ、設定を変えなくても工房は Opus 5.5 で動きます。

月20ドルでも工房の土台が上がりました。

そのうえで、このセットは3つの点で効きます。

1. 過去に建てたサイトが、全部「動きを足す対象」になります。
工房で作ったサイトはそのままに、動きの強化室が「外せば元通り」のルールで動きを足します。作り直しは不要です。手元に完成サイトが多い人ほど、効果は大きくなります。

2. 「イメージと違う」が減ります。
工房は雰囲気20種・業種パック・品質6ゲートで「崩れないサイト」を建てる道具です。ただ「頭の中のイメージをピンポイントで伝える」部分は、言葉に頼るしかありませんでした。これからは、図鑑で実例を見て選び、その採用方針を工房に渡すだけ。方向は図鑑で決める、品質は工房のゲートが担保する、という分業になります。

3. 追加の環境投資はゼロです。
工房が動いている環境なら、そのまま動きます。やることは、購入後に表示されるセットアップの1行を貼るだけです。

おまかせサイト工房をお持ちの方は、工房のBrain記事の有料部分に追記した専用URLから購入すると4,980円（期間限定）でお得に買えます。（くわしくは「価格」の章）

まだ工房をお持ちでない方は、先にこのセットだけ手に入れて、土台の工房を後からそろえる順番でも大丈夫です。

▼ おまかせサイト工房（Brainで販売中）

必要な環境と費用

Claude Code + Claude Pro：月$20（約3,000円）　／　プロンプトの実行・サイト生成。既定モデルが Opus 5.5（Claude Code v2.1.280 以上・追加費用なし）
Codex CLI + ChatGPT Plus：月$20（約3,000円）　／　そのまま使えます（GPT-6 Astra で建てた4本は Codex 製）
ブラウザ：無料　／　雰囲気図鑑・モーションパレットの閲覧とコピー
Node.js 18以上（無料のソフト。セットアップ時にAIが確認します）：無料　／　動きの強化室（プラグイン本体・図鑑MCP）
おまかせサイト工房：任意　／　あれば「土台」としてつながります

どちらの組み合わせでも使えます。Claude Pro をお使いの方には、Opus 5.5 の章で書いたとおり特に追い風です。

※画像について

雰囲気図鑑のようなイラストの品質で画像を作るなら、基本はCodexがおすすめです。Claude Code（Opus）だけで作ると、画像がSVGのようなシンプルな絵になることがあります。モーション図鑑は、どちらで作っても問題ありません。

Claude Codeを使っている人も、Claude CodeからCodexを呼び出して画像を作らせることができます。Claude Codeに「codex exec で〇〇の図解画像を作って」と頼むだけでOKです。

それも難しい場合は、falを設定してみてください。設定方法は、購入者専用部分の最後に載せています。

fal経由なら、CodexやChatGPTを追加で契約しなくても画像の質を上げられます。

中に入っているもの

LP雰囲気図鑑（見本89本）＋サイト雰囲気図鑑（見本28本）— 採用方針と制作プロンプトの書き出し
モーションパレット（動くデモ46本・雰囲気8種×強度3段階・動きのサンプル400以上・プロンプト組み立て）
動きの強化室（統合プラグイン）— スキル5本（お手本分析／演出提案／設計図／指示書／後載せ強化）＋モーション図鑑MCPサーバー
上記一式の受け取り専用ページ（1行セットアップ・使い方・FAQ・制作デモ41本のギャラリー）

価格

・初期価格：6,980円（税込・買い切り）

・オープンチャット参加者（オプチャ限定価格）：5,980円 — オープンチャット内で案内している専用リンクから

・おまかせサイト工房購入者：4,980円 — 工房のBrain記事の有料部分にある専用URLから

※65部限定

以降は10部完売するごとに値上げします。

おまかせサイト工房をお持ちの方は、工房の記事の有料部分にある専用URLから購入すると一番お得に買えます。

サイト工房は、10月19日の週に大幅アップデートも控えてます。

このページの購入ボタンより先に、工房の記事をご確認ください。

▼ おまかせサイト工房のBrain

オープンチャット参加者向けの限定価格（5,980円）もあります。専用リンクはオープンチャット内でご案内しています。

▼ 園長の地上研究室🧪（LINEオープンチャット・無料）

オプチャ内では、ガチで使えるAI情報だけを厳選して配信中。

オトクな情報も不定期でお届けしています。

購入者特典（2つ）

ご購入いただいた方に、特典を2つご用意しました。

特典1：レビュー特典「AIで作ったLPを、上手に直す方法」（yuuさん執筆）

Brainでこの記事のレビューを書いていただくと、自動でお受け取りいただけます。yuuさんが書いたnoteで、AIで作ったLPをより良くするための考え方が読めます。

特典2：オープンチャット特典「クライアントに見せる用の見本帳（LP89本・サイト28本）」

Brainに書いたレビューと同じ内容を、オープンチャット「園長の地上研究室🧪」にも投稿して、そのスクリーンショットを園長の公式LINEに送っていただくとお受け取りいただけます。

▼ 園長の公式LINE

オープンチャットへの投稿はコピペで大丈夫です。少し直しても、別の文でもかまいません。

見本帳は、クライアントに見せて選んでもらうための一覧です。選んでもらった見本から、そのまま図鑑の本体に戻って仕上げられます。

実際に案件を進める際に必要になるアイテムなので、1行レビューでも全然かまいませんので、必ずお受け取りください！

【本編の受け取り方】

ご購入後、この記事の続き（購入者専用の部分）に、①AIに貼るセットアップの1行 ②受け取りページのURL（使い方・FAQ・ギャラリー）が表示されます。

図鑑とモーションパレットはブラウザで開くだけです。

最後に

サイトを作るだけで満足してきた方も、このセットさえあれば、「売れるレベル」のクオリティまで持っていけます。

そして2026年9月、Opus 5.5 の登場で、月20ドルの Claude Pro でも「売れるレベル」に手が届くようになりました。

Codex をお使いの方は、今の環境のままで大丈夫です。土台が安く強くなった今が、いちばん始めやすい時期だと思っています。

作った2人は、一人はLP・サイト制作を仕事にしていて現場でこれを使っている人、もう一人は現役のエンジニアです。

僕は真ん中の土台を担当しました。3人とも、自分の現場で使うために作っています。

どれもが永久保存版といえるツールになっているので、最安値で買えるいまのうちにぜひ！