どうもカッツプロダクション代表のカッツです。最近AIネタをよく見てるせいか、AIネタにシフトした情報商材屋の広告が大量に流れてきてイラついてます(笑)。
「AIで全部自動化！」「ホームページが一瞬で作れる！」みたいな煽り広告、見たことありますよね？ この人たち大昔から変わらんね〜と思いつつ、、、実は気づきも多いんが（笑）
最近の手口は巧妙化してて、最初は「無料セミナー」で釣って、後々高額商品に誘導するパターンが定番のようです。
そんなことで、今回はイライラをネタにすることにしました(笑)。情報商材屋が売ってそうな「ホームページを爆速で制作できるClaude Codeツール」を実際に作ってみましょうか編です。裏側を全部見せます。
目次
ヴァイブコーディングでサイト生成、簡単です（しかし！）
結論から言うと、ホームページを爆速生成するツール、簡単に作れます。
ただし条件があります。頭の中で「どんなふうに作るか」のイメージができていること。そう、、、
ん？！いつも触れてる「AIは使う人に左右される」ってフレーズがでちゃう
ま〜簡単です、スキルがある人にとってみれば(笑)。というわけで、実際の工程を見ていきましょう。
AIは0から安定したデザイン生成がまだ苦手、だからテンプレート作戦が正解
まず前提として、AIはデザインなどの抽象的なものが苦手(AIさんと戦ってる記事はこちら)です。AIに毎回ゼロからデザインを頑張って生成させると、クオリティが安定しないんですよね。
ということで、膨大なテンプレを用意する作戦でいきます。
たとえば自社で今まで制作してきたWebサイトをテンプレ化するとかなら簡単ですよね。しかもこっちの方がトークン消費が少なくて仕上がりも綺麗という一石二鳥です。
Claude Codeでサイト自動生成するフォルダ構成の考え方
自分が考えた最低限の土台のフォルダ構成がこちらです。
site-gene/ ← ベースフォルダ ├── tmpl/ │ ├── tmplA/index.html ← テンプレA（工業系） │ ├── tmplB/index.html ← テンプレB（飲食系） │ └── tmplC/index.html ← テンプレC（IT系） └── assets/ ← 素材倉庫（ロゴや会社の写真素材を放り込む）
業種別にテンプレを分けておいて、生成時にAIが適切なものを選ぶ仕組みです。assetsフォルダには生成する際に利用するロゴや写真素材を放り込んでおきます。
テンプレ化はしなくてもHTMLをそのまま放りこんでもOKです。だって面倒じゃないですか（笑）
やってみて全然うまく行きました。
※2026/4月頃の情報です。今だと、Fable 5にすると更にすごいことになります。
テンプレートにメタ情報を付ける「おまじないプロンプト」
テンプレートに意味付けこれはやった方が良いと思いました！Claudeさんが分析しやすくなるので！
え〜面倒って思っても、、、このおまじないプロンプトを投げるだけです。
テンプレのメタ情報生成プロンプト
各テンプレートを読み取ってAIが生成する際にテンプレのセレクトがしやすいようにメタ情報をまとめて*.(md|json)等の形式にしてください
これでAIがテンプレを選びやすくなるメタ情報ファイルが自動生成されます。地味ですがこういう下ごしらえが効くんですよ〜！！
CLAUDE.mdの書き方 イニシャル生成プロンプト公開
そしてツールの心臓部、CLAUDE.md（Claude Codeの動作を定義するファイル）を作ります。自分が考えたイニシャル生成プロンプトはこちら。
CLAUDE.mdイニシャル生成プロンプト
# テンプレートを利用してwebサイトを生成するツール プロンプトを入力されたらそれに沿ってサイトを生成する ## 入力されるプロンプト例 ### パターンA 会社概要 設立などメタ情報をいれてくる サイトテーマカラーはXXXX ### パターンB URLだけいれてくる(この場合はcurlやヘッドレスブラウザでパスが必要) ## 生成手順 - プロンプトパース - `tmpl`から適切なテンプレを選択 - うまく忠実にテンプレに流し込めてるか確認するためにスクショを撮ることを推奨します - アセット類はassets/に格納 これ足りない部分を補完してCLAUDE.mdに落とし込めますか？
こんな感じですね（AIの達人に「違う！！」って怒られるかも）(笑)。
ポイントは最後の一文で、足りない部分の補完をAI自身にやらせるところです。自分で完璧なCLAUDE.mdを書こうとしなくていいんです。
あれれ？！ここでまた「AIは使う人に左右される」ってのが思い出しちゃうんですよね
md？ curl？ CLAUDE.md？ そんなのも分からないで「AIで稼ぐ」とか言ってると、情報商材屋にだまされますよ！！ まずはググって出直してこい（笑）
自分の環境で出力されたCLAUDE.mdのサンプル
# CLAUDE.md — pera-web-generator
## What This Project Does
`tmpl/` 配下の3種類のカスタムHTMLテンプレートをベースに、コンテンツ・カラーを書き換えて
スタンドアロンHTMLウェブサイトを生成するツール。APIキー不要。
Claude Code のサブスクリプションだけで動く。
## 絶対に守るルール
- **`tmpl/` 配下のファイルは一切変更しない**（読み取り専用）
- **テンプレートの HTML 構造・CSS は変更しない** — タグの構造、クラス名、`<style>` ブロックはすべてそのまま
- **変更するのはコンテンツだけ** — テキスト、画像URL、ナビゲーションリンク、`<title>`、meta description、`:root` CSS変数
- フォントは必ず Google Fonts（Noto Sans JP）を使う
## Directory Layout
tmpl/ 3種類のカスタムHTMLテンプレート（変更禁止）
beauty-salon/
index.html 美容室テンプレート（blue-grey × green、サイドバーレイアウト）
description.md CSS変数テーブル・画像ファイルテーブル（AIヒント用）
assets/img/ ローカル画像
industry/
index.html 工業・B2B向けテンプレート（ダークネイビー）※汎用フォールバック
description.md
assets/img/
real-estate/
index.html 不動産・住宅向けテンプレート（red アクセント、白ベース）
description.md
assets/img/
tmpl-parts/ 下層ページ用の再利用可能パーツ
tpb.css
row-1col.html
row-2col-img-left.html
row-2col-img-right.html
widget-contact-form.html
widget-simple-table.html
generated/ 生成されたサイトの出力先（.gitignore対象）
<site-name>/
index.html
assets/img/
## Available Templates (3)
| テンプレート | 適した業種 | ベースカラー | フォールバック |
|-------------|----------------------|-----------------------------------|---------------------|
| beauty-salon | 美容室・サロン・ウェルネス | blue-grey #6889A4 × green #74A72D | — |
| real-estate | 不動産・住宅・建設 | red #D72A2D、白ベース | — |
| industry | 製造業・物流・BtoB・その他 | ダークネイビー #00305B | 該当業種なし時のデフォルト |
業種に合うテンプレートがない場合は `industry` を使う。
## 会話ベースのワークフロー（推奨）
### ステップ1: テンプレートを選ぶ
`tmpl/*/description.md` を読み込み、ヒヤリング内容と照合して最適な1つを選ぶ。
### ステップ2: テンプレートをコピーする
cp -r tmpl/<テンプレート名> generated/<サイト名>
### ステップ3: 必要なページを決定する
| ヒヤリング内容 | 生成するページ |
|--------------------------------------|----------------|
| 必ず生成 | index.html |
| 「お問い合わせ」「フォーム」に言及 | contact.html |
| 「会社概要」「スタッフ」に言及 | about.html |
| 「サービス」「メニュー」「料金」に言及 | service.html |
| 「実績」「ポートフォリオ」に言及 | works.html |
| 「ブログ」「お知らせ」に言及 | news.html |
### ステップ4: コンテンツを書き換える（最重要）
変更してよいもの:
- <title> タグの中身
- <meta name="description"> の content 属性
- ナビゲーションのリンクテキストと href
- 見出し・段落テキスト
- :root CSS変数の値（ブランドカラー変更）
- 画像の src 属性
絶対に変更しないもの:
- <style> ブロックの中身（:root 以外の CSS）
- HTML タグの種類・構造・ネスト
- class 属性の値
### ステップ5: 完了報告
- 選んだテンプレートとその理由
- 生成したページ一覧
- open generated/<サイト名>/index.html
これモデルと推論量(工数)でかなり出力変わるので注意してください、自分は確かSonnet 4.6だったかな？？
あとアウトプットされたCLAUDE.mdはしっかり目視してチェックはした方が良いかなと思います。つくづくAIツールの中身って自然言語プログラムだよなって思います。ちなgitでの管理をおすすめします。
あれれ？！ここでまた「AIは使う人に左右される」ってのが思い出しちゃうんですよね
実際にサイト生成のサンプル
プロンプトを入れてみて、出力を必ず自分の目で確認してください。
学習塾のWEBサイト生成 テキストはそれっぽく書き換えて 画像もそれっぽいのネットから拾ってきてダミーで入れてもらえるかしら
いい感じにサイトが出力生成されますが、絶対に目視でのチェックは必要かなと思います。
応用編してパワポ自動生成や自走アフィサイトも作れる（でも、、、）
ちなみにこの仕組み、応用すればパワポ生成もできます。テンプレの部分をスライドに置き換えるだけです。
さらに応用すれば、自動でネットのトレンドを検索してページを生成してアップロード、つまり自走でアフィリエイトやアドセンスで稼げる（とされる）サイトも作れます。これが今、情報商材屋が主に売ってると思われるものです。
仕組みのヒントだけ書いておくと、こんな流れです。
- curlかPuppeteer（ヘッドレスブラウザ）で週1回ニュースサイトを巡回
- CRONで自動実行
- トレンドのキーワードを抜き出して情報を収集
- 記事を生成、テンプレートに流し込んでサイトにアップ
はい、作れちゃうんですよ。でも、、、
ちなSEO的な話をすると、2023年頃ならこれでも通用したかもしれませんが、今はGoogle先生のコアアップデートが鬼のように厳しいので100%無理です。一瞬でペナルティを喰らって検索結果から消し飛び、人っ子一人来ない砂漠の上の砂城を作るようなものです(多分怪しいスパムBOTだけが遊びにきて大暴れしていきますが)。
建て付けを頭でイメージできますか？！ここでまた「AIは使う人に左右される」ってのが出ちゃうんですねTT
AIって、ゴミを入れたらゴミが出てくるんです。仕組みが全自動でも、入れるネタが薄ければ薄いコンテンツがただ量産されるだけ、、、よいネタの出どころは実際の現場経験、失敗と試行錯誤、独自の視点。こればかりは人間にしか持てないもので、AIはそれを整形・量産する道具でしかないんですよね。
AI情報商材に騙されないためのチェックポイント(まとめ！)
- 「AIでホームページ爆速生成」のツール自体は簡単に作れる(スキルがあれば)
- 応用すれば自走アフィサイトも作れるが、ネタが薄ければゴミの量産になるだけ
- 「仕組みだけで稼げる」は幻想。AIは使う人に左右される、これに尽きます
高額な情報商材を買う前に、この記事の内容を自分で試してみてください。それで詰まるようなら、買っても使いこなせないですし、スッと作れるなら、そもそも買う必要がないです(笑)。
と、、、お困りのあなた、そこのあなた、私がしっかり教えます。だまされたと思ってまずは無料0円で、、、
ちなみにこの記事を書いてる最中も、某大手スクールから『Claude Codeで完全マスターで業務を内製化！2日間で完全マスター』という、、、なんとも絶妙なメールが届きました（笑）。多分展示会の名刺交換で流れてきたのかな？
「Claude Codeで動画編集」ってそもそも用途違くね？！非効率じゃね？！って話ですし、「見積・請求・メール対応を自律的に動くエージェント」も、確かにMCP連携で自然言語での請求書作成やタイマー処理とかは組めますけど、AIって何故か項目や法人名とかをたまに間違えるんですよ！だから完全自律なんて無理で、絶対に人間の目視チェックが必要なんです。AIでアプリ開発、自分だけで使う用途ならギリ許せるかな（笑）。ただ後でメンテしようとするとスキルがないからそもそも何がなんだかわからなくなるやつ。
というわけで、他人事ではなかったです。
