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作成ツール・自作の3つを費用と自由度で比べたい方は、ホームページをAIで作る方法3つを比較で整理しています。
「その日のうちに直せる」状態は、なぜ自作でしか手に入らないのか
4時間で公開できたこと以上に大きいのは、公開したあとの変化です。
従来は、ロゴを少し大きくしたい、営業時間の一行を直したい、それだけでも制作会社にメールを送り、見積もりを待ち、数日後にようやく反映される。修正のたびに費用と時間がかかるので、気になる点があっても後回しにして、サイトは少しずつ実態とズレていきます。
いまは、思いついた変更を日本語で伝えれば、数分後には本番に反映されている。「このセクションの順番を入れ替えて」「今日のうちにお知らせを一本足して」の一言で済みます。ホームページが、他人に預けた成果物から、自分の手で毎日いじれる道具に変わりました。前半で触れた「育てていく資産」とは、この状態のことです。
ただし、この状態は「AIでホームページを作る」だけでは届きません。同じAIでも、どう使うかで到達点が変わります。
- 対話型AIに聞くだけなら、コードは返ってきても、それを自分でコピーして貼る作業が残ります。「聞く」と「反映される」の間に、結局あなたの手作業が挟まる。
- 制作会社への外注は品質こそ担保されますが、直したいたびに人へ依頼する構造は変わりません。毎回の費用と待ち時間、そして人依存が残り続けます。
- テンプレート型のノーコードサービスは手軽な反面、用意された枠の中でしか動けません。自分の事業特有の要件や、後から足したい独自の運用に、どこかで合わなくなります。
要件定義書、つまり自分のビジネスの判断基準を読み込んだClaude Codeが、あなたの日本語の指示だけでサイトを直し続ける。この自分専用の作り手が、自分の言葉で動く状態は、自作のAIエージェントでしか成立しません。ここが、この4時間の本当の正体です。
だからこれは、自分の事業とサイトの要件・運用を自分で握っている人ほど効きます。何をどう見せたいかを一番わかっているのは外注先ではなく、経営者・個人事業主・士業といった事業のオーナー本人だからです。その判断を毎回他人に渡さず、自分の手元に戻す。それが、4時間という時間より価値のある到達点だと思います。
「自分のちゃんとしたホームページが欲しい」と思いながら後回しにしてきた方こそ、いまが一番いいタイミングだと思います。AI Crewでは、こうした実装をあなたの事業に合わせて一緒に進めています。興味のある方は、まず無料セミナーでお会いしましょう。
