Claude Fable 5でホームページを4時間で公開｜要件定義2時間＋開発2時間の実録
種明かしから始めます。いまあなたが読んでいるこのホームページは、要件定義に2時間、Claude Codeとの対話による開発に2時間、合計4時間で作られ、その日のうちに公開されました。使ったモデルは、ちょうどこの日に登場したばかりのClaude Fable 5。「前からやろうと思っていたHP制作を、新モデルの腕試しでやってみた」というのが正直なところです。
制作会社に依頼すれば数十万円から100万円超、納期は1〜2ヶ月。それが相場だった世界で何が起きているのか。この記事では、みやっち🧑💻が実際に辿った進め方と時間配分をそのまま公開します。
4時間の内訳は「2時間＋2時間」
最初にお伝えしたいのは、4時間の中身です。半分の2時間は、コードに一切触れない「要件定義」に使いました。
- 要件定義: 2時間 — どんなサイトにするかを文章にまとめる
- 開発: 2時間 — Claude Codeと対話しながら形にする
「AIがすごいから速い」という話に見えて、実は前半の2時間が勝負を分けます。順番に説明します。
要件定義は「カルピスの原液」。ここだけはAIに任せない
みやっち🧑💻は要件定義をカルピスの原液だと考えています。原液さえ濃ければ、あとはAIがいくらでも薄めて広げてくれる。逆に原液が薄いと、どれだけAIが優秀でも薄いサイトしかできません。
だから要件定義は、AIに書かせませんでした。やったことはシンプルです。
- 参考になりそうなホームページをいくつも開いて、自分の目で見る
- 「この構成はいい」「この見せ方は違う」と感じたことを、音声入力でそのまま吹き込む
- ターゲットは誰か、何を一番伝えたいか、どんなセクションを並べるかを言葉にする
キーボードできれいな文書を作る必要はありません。みやっち🧑💻の要件定義書も、音声入力の走り書きがベースです。それでも「誰に・何を・どの順番で見せるか」が言語化されていれば、Claude Codeはそれを正確に形にしてくれます。
これは第1回の記事でお話しした「業務の言語化」と同じ構造です。AIの時代に人間に残る仕事は、まさにこの部分だと思います。
開発2時間は、ほぼ「対話」だけ
要件定義書をClaude Codeに渡したら、あとは対話です。「ヒーローセクションはもっと信頼感のある色に」「受講生の実績はカードを横に流して」。出てきたものに目を通して、直してほしいところを日本語で伝える。この繰り返しだけで、サイトは目の前でどんどん形になっていきます。
画像も自分では用意していません。みやっち🧑💻は画像生成を「スキル」としてClaude Codeに組み込んであるので、「こんな感じの画像を作っておいて」と頼むだけで、生成からコードへの反映まで勝手に終わります。
そして開発開始から2時間後、本番URLにデプロイ。公開のお知らせ記事すら、Gitに残った作業履歴をClaude Codeに読ませてnoteとして書かせました。
技術選びで迷っている人へ: 「ホームページ＋ブログ」ならAstroで十分
少しだけ技術の話をします。専門用語が苦手な方は、ここは読み飛ばして構いません。
このサイトはAstroという軽量なサイトジェネレーターで作っています。ReactやNext.jsといった本格的なフレームワークは、「ホームページ＋ブログ」程度の規模にはトゥーマッチ(過剰)だからです。料理に例えるなら、家庭の夕食に業務用厨房はいらない、という判断です。
ひとつだけ注意点があります。AstroにはWordPressのような記事投稿用の管理画面が付属しません。新しい記事は、Markdownというテキストファイルに書いて追加します。それをGitHub(コードの置き場所)にプッシュすると、Vercelというホスティングサービスが自動でデプロイし、公開してくれます。みやっち🧑💻のようにClaude Codeに「この記事を追加して」と頼める人には最高の環境ですが、Claude CodeもGitHubも触れない人がサイト運用に関わるなら、microCMSのような管理画面つきのサービスを足してあげるのが現実的です。ここは「誰が運用するか」で決めてください。
最初から完璧を目指さない
正直に言うと、公開した時点での完成度は高くありませんでした。それでも、その日のうちに公開しました。
理由は、一度形ができれば、あとは直していくだけだからです。従来のホームページ制作では、修正のたびに制作会社への依頼とコストが発生するので、公開前に完璧を目指す力学が働きます。Claude Codeなら「ここを直して」の一言で数分後には反映されている。完璧になるのを待つより、公開してから毎日少しずつ良くしていくほうが、明らかに合理的です。
実際このサイトも、公開後に受講生の実績セクションを追加し、表示速度を改善し、ブログの運用体制を整え、と毎日のように手が入っています。ホームページが「一度作ったら終わりの成果物」から「育てていく資産」に変わった感覚です。
まとめ: 4時間の正体
振り返ると、4時間でホームページができた理由は3つです。
- 要件定義に人間の時間を集中投下した(原液を濃くした)
- 開発はClaude Codeとの対話に徹した(コードは1行も書いていません)
- 完璧を待たずに公開し、育てる前提に切り替えた
特別なITスキルは使っていません。使ったのは、自分のビジネスを言葉にする力と、Claude Codeを仕事の基盤にする環境だけです。
「自分のちゃんとしたホームページが欲しい」と思いながら後回しにしてきた方こそ、いまが一番いいタイミングだと思います。AI Crewでは、こうした実装をあなたの事業に合わせて一緒に進めています。興味のある方は、まず無料セミナーでお会いしましょう。
