May 5, 2026

AIで営業用HPを作る最短ルート。6回作り直して気づいた3ツール連携

行政書士事務所への提案HPサンプルを、AIだけで作ろうとした。結果、6回作り直した。

最終的に見えた最適解は「ChatGPT＋Claude Code＋Claude Design」の3ツール連携。それぞれの得意分野に役割を分けると、半日で営業メール添付レベルのサンプルが作れる。

逆に役割を間違えると、何度作り直しても完成しない。

なんで AI だけで作りたかったか

放置HPの改修営業を始めるにあたって、提案メールに「こんな感じになります」のサンプルを添付したかった。でも私はエンジニアではない。HTML と CSS は読めるけどゼロから書くのはきつい。

外注すると数万円〜十数万円。営業メール送って反応見る段階で、そこまでお金をかけたくない。だから AI にやらせる。これしか選択肢がなかった。

最初は ChatGPT に「行政書士事務所のHPデザインを作って」と依頼。 1枚絵が出てきた。きれいだが「クリックもスクロールもできないただの画像」。

ここで私は「リベシティのノウハウ図書館」で先輩が書いていた手順を思い出した。 ChatGPT は素材一覧画像を作る役、Claude Code が個別 PNG に切り出す役、Claude Design が HTML 化する役。役割を分けるのが正解らしい。

ChatGPT に「46素材を正方形グリッドで」と依頼すると、1枚に46個並んだ画像が出てきた。

これを Claude Code に渡して「個別 PNG に分割して。番号タグは消しておいて」と指示。 Python のスクリプトを Claude Code が書いて、46枚の独立した PNG が生成された。

ここで一段プロっぽくなった。

切り出した46素材と、完成イメージ画像を Claude Design に渡した。プロンプトを送ると数秒で返ってきた。エラー文字列が。

[unknown] missing EndStreamResponse

何度リトライしても通らない。素材が46枚と多すぎて処理がタイムアウトしている可能性が高い。

Claude Design は GitHub 連携にも対応していた。 gh CLI で Privateリポジトリを作って素材一式を push、Claude Design からそのリポジトリを読ませた。

通った。

教訓：Claude Design に大量ファイルを直接 UL するとコケる。GitHub 経由にすると安定する。非エンジニアでも gh repo create --private の1行で Privateリポジトリは作れる。

HTML は出来た。でもブラウザで開くと、ヒーロー写真がぼんやりしている。

原因はすぐ分かった。 ChatGPT に「29素材を1枚の正方形画像にまとめて」と依頼していたので、出力は 1254×1254 ピクセル。29個に分けると、ヒーロー写真は 445×295 ピクセルしかない。

これを HTML のヒーロー幅（600〜900ピクセル）で表示すると、引き伸ばされて画質が落ちる。当然の結果。

解決策は2つに分けた。

Unsplash の検索は Claude in Chrome に任せた。キーワードを渡すと、ブラウザを開いて候補のURLを抽出してくれる。小さなサムネを /tmp/ に保存して並べ、私が見比べて選定。選んだ写真を curl で一気に高解像度ダウンロード。

これで解像度問題は解消、写真の質感も一段上がった。

ここまでで HTML は出来上がった。レビューしていて、ふと違和感を感じた。

代表挨拶セクションが、料金セクションより前にある。運送業の経営者が見たい順番は、たぶん逆。

「料金がいくらか」「他の人は頼んでいるのか」が先。「代表が誠実そうな人か」は、興味を持ってから読む。

セクションを入れ替えた。「実利→共感→詳細→行動」の順。

これで6回目で、ようやく営業メール添付レベルになった。

AI でHPを作るのは「1ツールで全部やる」より「役割を分けて連携させる」が圧倒的に速い。 6回の作り直しは無駄ではなく、各ツールの得意・不得意を見抜く授業料だった。

放置HPの改修営業を始める非エンジニアに、もし1人でも参考になれば嬉しい。半日あれば、提案メール添付レベルのサンプルは作れる。