Claudeとブログを作った1ヶ月半。最初の提案と、「なぜ?」を聞き続けたこと

AI体験談・その他
AIでブログを作成しているイラスト
Claude(クロード)というAIのMaxプランを使って、Next.jsで自分専用のブログサイトを作りました。構想から公開までにかかった時間は、約1ヶ月半です。 「AIを使えば一瞬でサイトが作れる」という話を耳にすることがあります。 実際、Claudeにお願いすればコードはすぐに出てきます。 でも僕は、出てきたコードをそのままコピペするのではなく、「そのコードは何をしていて、なぜそう書くのか」を毎回Claudeに聞いてから手を動かすようにしました。 1ヶ月半という時間の大半は、この「理解してから進む」というプロセスに使っています。 この連載では、その過程を全5回に分けて記録していきます。 AIを使った開発に興味がある方や、これから自分でサイトを作ってみたいと思っている方に、「こういう進め方もあるんだな」と参考にしていただければ嬉しいです。

1. コードの前に提示された「ガイド」

プロジェクトを始めたとき、Claudeはすぐにコードを書き始めるのではなく、まず技術選定のガイドを提示してくれました。どのサービスでサイトを公開するか、記事の管理に何を使うか、年間の運用コストはいくらになるか。
それぞれの選択肢を比較した上で、Claudeが出した推奨構成は「Cloudflare Pages + Next.js + Newt」という組み合わせでした。

ホスティングサービス比較
CMS比較

技術面だけでなく、読者にとっての読みやすさについても具体的な提案がありました。
フォントはNoto Sans JP、文字サイズは17px、行間は1.85。このブログの想定読者が、スマホでも長い記事を疲れずに読める設定です。

正直なところ、数値だけ見ても、それが大きいのか小さいのかはピンときませんでした。
でも実際に画面で確認してみると、標準的なサイトよりも文字がすっと目に入ってくる感覚がありました。
行間にゆとりがあるおかげで、スマホで読んでも文字が詰まって見えない。
提案された数値を「とりあえず試してみる」ことで、その意図が体感として理解できた場面でした。

年間コストについても、ドメイン代の約1,500円を除けば、無料枠の範囲で運用できるという試算をClaudeが出してくれました。
個人ブログとしては十分現実的な金額です。

ただし、この推奨構成は実際にはそのまま使えませんでした。
サービスの仕様変更やサービス終了の告知があり、現在は「Vercel × Sanity」という構成に切り替えて開発しています。
この経緯については第2回で詳しく書いています。

2. 全体の流れを示すロードマップ

技術選定の次に、Claudeは開発全体の流れをフェーズごとに整理してくれました。

ロードマップの図
  • フェーズ0:検討・計画(技術選定と予算の確定)
  • フェーズ1:環境構築(Node.js / npm のセットアップ)
  • フェーズ2:骨格の作成(App Router / Reactコンポーネントの実装)
  • フェーズ3:CMS連携(記事データの取得設定)
  • フェーズ4:デザイン(Tailwind CSS の適用)
  • フェーズ5:公開準備(デプロイと独自ドメイン設定)

括弧の中の用語は、この時点ではほとんど意味がわかりませんでした。
ただ、全体が6つのステップに分かれていて、今どこにいるのかを確認できる地図があるということ自体が大きかったです。

開発中に行き詰まったときや、次に何をすればいいか迷ったとき、このロードマップに立ち返ることで「今は全体の、この段階にいるんだ」と確認できました。
最初にこの全体像を作ってもらっていなければ、途中で何度も方向を見失っていたと思います。

3. 「なぜそう書くのか」を毎回聞くと決めたこと

Claudeとの開発で、僕が一つだけ決めたルールがあります。
「コードを書く前に、そのコードが何をしていて、なぜそう書くのかを説明してほしい」というものです。

Claudeに質問すれば、コードはすぐに出てきます。
それをコピペすれば動く。
でも、意味がわからないまま貼り付けたコードは、何か問題が起きたときに自分では直せません。
だから、コードを受け取る前に、まずその意図を聞く。これを毎回繰り返しました。

ただ、これは思った以上に手間のかかる進め方でした。
チャットが長くなるにつれて、Claudeは説明を省略して完成したコードだけを提示してくることがあります。
そのたびに「コードの前に、まず理由を教えてください」と伝え直す必要がありました。

たとえば、開発の序盤で「npm」という仕組みが出てきたとき、Claudeに日常的な言葉で説明してもらいました。

「料理の材料がすべて揃っている巨大なスーパーマーケットのようなものです。自分で一から材料を作らなくても、誰かが作ってくれた便利な部品を取ってきて、自分のアプリに組み込むことができます」。

こうした説明を一つひとつ聞いてから次に進むので、当然時間はかかります。
でも、この積み重ねがあったからこそ、連載の後半で出てくる設定やエラーの意味を、自分の力で理解できるようになっていきました。

1ヶ月半という時間の大半は、この「理解してから進む」というプロセスに使いました。

例え話で出してくれたイメージ

まとめ

第1回では、Claudeがプロジェクトの最初に提示してくれた技術選定のガイドとロードマップ、そして僕が開発を通じて守り続けた「なぜ?を聞いてから進む」というルールについて書きました。

ここまで読んで、「結局、AIに全部聞いてるだけじゃないの?」と思われた方もいるかもしれません。
確かに、僕が書いたコードのほとんどはClaudeの提案がもとになっています。
でも、「なぜそう書くのか」を毎回聞いて、自分なりに納得してから手を動かしたことで、すべてを説明できるとまでは言えなくても、「あのときこういう理由で聞いたな」という記憶が残っています。
その積み重ねが、次に似た場面に出くわしたときの判断の手がかりになるのだと思います。

次回は、当初の推奨構成がそのまま使えなくなり、「Sanity × Vercel」という構成に切り替えることになった経緯について記録します。