Claude Codeでホームページを作った結果
やったこと
今回のチャレンジの手順はこうです。
- ChatGPTにワイヤーフレームを相談（「aiportのコミュニティサイトを作りたい」と情報を入力）
- 出てきたデザイン案をスクショ
- スクショをClaude Codeに入力して「これと同じものを作って！」と依頼
- Claude CodeがHTMLファイルを生成 → 昭和のホームページが完成
文字がズレたり重なったりする部分を修正して、なんとか「見える」状態にはなりました。でも、率直に言って今の時代に公開できるクオリティじゃなかった。
「できた」と「公開できるレベル」は別次元
ここが今回の一番大事な気づきです。
| 達成できたこと | まだ遠いこと |
|---|---|
| HTMLファイルの生成 | 愛せるデザインのホームページ |
| 文字が重ならない状態 | 自信を持って公開できるクオリティ |
| 仕組みとしてのページ | ユーザーに喜ばれるUX |
アプリ「できた」、仕組み「できた」、ホームページ「できた」——これ、誰でも言えるんですよ。でも「自信持って公開できるか？」「お客さんに喜んでもらえるか？」は全然別の話。
「AIに任せれば自動化できる」は本当。「思った通りのものができる」は全然別です。
仲間のヒントで次の一手を発見
その夜、横山なおさん（累計100億超マーケター）の勉強会で正直に現状をシェアしました。ダサいホームページの写真も見せながら笑
そこでなおさんから教えてもらったのが「OpenAIのCodexを使ったらいい感じにLPできたよ」というアドバイス。
今の作戦：いいとこ取り
- 最初のデザインベース → OpenAI Codexで作る
- その後の更新・管理 → Claude Codeで回す
最初だけOpenAIの力を借りて、運用はClaude Codeに任せる。まだ試してる途中ですが、これが現実的な答えかなと思ってます。
AI活用でホームページを作るなら知っておくべきこと
今回の経験から学んだポイントをまとめます。
- ChatGPTなどでワイヤーフレームを先に作る（ビジョンを言語化→画像化）
- そのビジョンをClaude Codeに渡す（設計図があると精度が上がる）
- 「できた」はスタート地点（公開できるクオリティまでのブラッシュアップが本番）
- 困ったら仲間に見せる（第三者の目で一気に解決策が見つかることがある）
- ツールを使い分ける（Codex→Claude Code連携などいいとこ取りで考える）
成長の裏側をリアルに発信し続ける理由
恥ずかしい失敗談もシェアするのは、「自分だけうまくいかないのかな」と思ってる人に「同じだよ！！！」って伝えたいから。
aiportのひよこクラブ（Claude Codeセットアップ済みの方限定）では、こういうリアルな挑戦の裏側をまるっと公開してます。スムーズじゃない部分も含めて、一緒に成長していきましょう！！！
音声でも聴けます（Stand.fm）
▶ Claude Codeでホームページ作りに心折れた話｜Stand.fm
約17分の音声配信です。通勤や作業中にどうぞ！
P.S. Stand.fm→note/WordPress自動変換スキルが完成！Claude Code実践会の運営メンバーに展開したら「使えたよ！」と報告が来てめちゃくちゃ嬉しかったです。このスキル、有料参加メンバーへのプレゼント企画も検討中。お楽しみに！！！
