「AIコーディングツールでブログを作れる」と聞いても、実際にどこまでできるのかイメージしにくいと思います。この記事では、まさにあなたが今読んでいるこのブログ「AI Tools Lab」を、AIコーディングツールのClaude Codeを使って構築した全工程を記録します。

私はフリーランスでWeb制作や自動化ツールの開発をしています。普段からClaude Codeをメインのコーディングツールとして使っていますが、このブログは「AIコーディングだけでどこまでできるか」を試す実験でもありました。結論から言うと、ブログの構築自体はClaude Codeだけで完走できました。 ただし「全自動で楽々」とは程遠く、指示の出し方と人間の判断が品質を大きく左右します。

なぜHugoを選んだか

ブログならWordPressが定番ですが、私はHugo（静的サイトジェネレーター）を選びました。理由は3つです。

  1. 表示速度が速い：HTMLを事前に生成するため、サーバーでの処理が不要。ページの読み込みが体感で明らかに速い
  2. サーバー代がかからない：GitHub Pagesでホスティングすれば無料。ドメイン代だけで運用できる
  3. Claude Codeとの相性が良い：Hugoの設定ファイルやテンプレートはテキストベースなので、AIコーディングツールで直接編集できる

WordPressだと管理画面のGUI操作が多く、AIコーディングツールの得意領域から外れます。Hugoなら設定もテンプレートもMarkdownもすべてテキストファイルなので、Claude Codeの作業範囲内に収まります。

実際の構築手順

Step 1：プロジェクトの初期化

Claude Codeに「Hugoで日本語ブログを作りたい。テーマはAnanke、日本語設定で、基本的なディレクトリ構造を作ってほしい」と指示しました。

ここはスムーズでした。hugo new site のコマンド実行、テーマのインストール、hugo.toml の基本設定まで一気に進みました。Claude Codeは環境構築系のタスクが得意で、公式ドキュメントに沿った王道の設定を正確に出してくれます。

Step 2：テンプレートのカスタマイズ

デフォルトテーマのままでは味気ないので、レイアウトをカスタマイズしました。ここから少し手間がかかり始めます。

  • トップページに記事一覧とカテゴリナビゲーションを配置
  • 記事テンプレートに関連記事セクションを追加
  • head-additions.html にJSON-LD構造化データ、GA4トラッキングコード、AdSenseスクリプトを追加
  • OGP画像とメタディスクリプションの設定

Claude Codeに「トップページにカテゴリ別のナビゲーションを付けて」と指示すると、Hugoのテンプレート構文（Go Template）を使ったコードを生成してくれました。ただし、一発で完璧なコードが出ることはほぼありません。 レイアウトが崩れる、変数名が間違っている、といった修正を3〜4回やり取りして仕上げる感覚です。

Step 3：SEO周りの設定

ここは重要だったので慎重に進めました。

  • robots.txt の作成（全ページクロール許可、サイトマップ参照）
  • サイトマップの自動生成（Hugoのデフォルト機能）
  • JSON-LD（記事スキーマ）の追加
  • カノニカルURLの設定
  • 301リダイレクトの仕組み（Hugoの aliases 機能を利用）

Claude Codeに「HugoでJSON-LDの記事スキーマをhead内に出力するpartialを作って」と頼むと、headline、datePublished、author、publisher を含む構造化データのテンプレートを生成してくれました。Google Search Consoleのリッチリザルトテストで検証したところ、一発で合格しました。これはClaude Codeの得意領域だと感じた場面です。

Step 4：GitHub Pagesへのデプロイ

GitHub Actionsを使って、mainブランチにpushするたびにHugoビルド→GitHub Pagesにデプロイする仕組みを構築しました。

Claude Codeに「Hugo用のGitHub Actionsワークフローを作って。mainにpushしたらビルドしてGitHub Pagesにデプロイしたい」と伝えると、.github/workflows/hugo.yml を生成してくれました。カスタムドメイン（ai-navi-tools.net）の設定も含めて、ほぼ指示どおりに動きました。

ここでハマったポイント：最初のデプロイでCSSが読み込まれず、素のHTMLだけが表示されました。原因は hugo.toml の baseURL がローカルホストのままだったこと。こういう「動くけど見た目がおかしい」系のバグは、Claude Codeに相談すると原因を特定してくれることが多いです。「デプロイしたらCSSが効いてない。hugo.tomlと公開URLを見て原因を教えて」と聞いたら、即座に baseURL の不一致を指摘してくれました。

Claude Codeが得意だったこと

振り返ると、以下の作業はClaude Codeに任せて正解でした。

  • 設定ファイルの生成と修正：hugo.toml、GitHub Actionsのワークフロー、robots.txt など
  • テンプレートコードの生成：Go Template構文のpartial作成、JSON-LDの構造化データ
  • エラーの原因特定：ビルドエラーやレイアウト崩れの診断
  • 一括操作：複数ファイルのフロントマター修正、内部リンクの一括更新、記事の削除と301リダイレクトの設定

特に一括操作は圧倒的です。「この5本の記事を削除して、URLをトップページにリダイレクトして、他の記事からのリンクも修正して」という依頼を一度に処理できるのは、人間がエディタで手作業するより何倍も速く、ミスも少ないです。

Claude Codeが苦手だったこと

一方で、以下は人間の判断が不可欠でした。

  • 記事の内容そのもの：AIに書かせた記事がAdSenseで落ちた話は、この記事の別セクションで詳しく書いています。構成の叩き台には使えますが、独自の体験や判断は人間が書く必要があります
  • デザインの細かい調整：「もう少し余白を」「この色は違う」といった感覚的な判断は何度もやり取りが必要
  • 運営方針の決定：どの記事を残してどれを削るか、どのキーワードを狙うか、といった戦略はAIに任せられません

かかった時間の目安

工程所要時間
Hugo初期化〜テーマ導入約30分
テンプレートカスタマイズ約3時間
SEO設定（JSON-LD、GA4等）約1時間
GitHub Pagesデプロイ設定約1時間
カスタムドメイン設定約30分
合計約6時間

WordPressなら管理画面の操作だけで済む部分もあるので、「Claude Codeのほうが速い」とは一概に言えません。ただし、一度構築してしまえば、記事の追加・修正・削除はすべてMarkdownファイルの操作だけで完結するので、運用フェーズの効率は高いです。

AIコーディングツールでブログを作るべき人・作らないほうがいい人

向いている人：

  • ターミナル操作に抵抗がない人
  • サーバー代を節約したい人（GitHub Pages＝無料）
  • テンプレートやSEO設定を細かくコントロールしたい人
  • 「AIコーディングで何かを作る」体験自体に興味がある人

向いていない人：

  • GUIで直感的に操作したい人 → WordPressのほうが合います
  • プラグインで機能を追加したい人 → Hugoはプラグイン文化が薄い
  • 記事を書くことだけに集中したい人 → noteやはてなブログのほうが手軽

まとめ

Claude Codeを使ったブログ構築は、**「全自動で楽々」ではなく、「指示と判断を繰り返しながらAIと一緒に作る」**という体験でした。設定ファイルの生成、エラーの診断、一括操作といった得意分野では圧倒的に速い。一方で、コンテンツの質やデザインの感覚は人間が責任を持つ必要があります。

このブログ自体が「AIコーディングツールでどこまでできるか」の生きた事例です。完璧ではないけれど、ゼロからサイトを立ち上げて運用できている。そのリアルな過程を、今後もこのブログで記録していきます。

AIコーディングツール全般の比較はAIコーディングツール徹底比較で、ブログの始め方全体の流れはAIを活用したブログの始め方で詳しく解説しています。

関連記事