【AI副業｜番外編】Claude Code×ブログサイトを作成してみた

日々いろいろなことをClaude Codeで試しているのですが、「Claude Code×noteの自動化をしてみた」の記事もまだ終わっていないのに、今度はClaude Code×ブログサイト作成に手を出してしまいました。

「先にnoteの記事を終わらせればいいのに」

と自分でも思いますが、やりたいことが多いので、つい試したくなります(笑)

そんなわけで今回は、Claude Codeを使ってWordPressのブログサイトを作り直し、実際に完成するまでの流れについて記録していこうと思います。

※この記事は2026年9月時点の作業記録です。
　AIツールは進化が速いので、現在は画面や手順が変わっている部分があります。

今回用意したもの

今回のサイト作成で使ったのは、この5つです。

• サーバー環境（私は Xserver を愛用しています）
• SWELL（WordPress の有料テーマ）
• Claude Code（Proプラン）
• VS Code
• Local

もともと使っていたブログもSWELLの子テーマを使い、自分で少しずつ構築してきました。当時は何をどう触ればいいのか分からない状態だったので、AIチャットに壁打ちしながら形を整えていったサイトです。

そもそもブログを始めようと思ったキッカケは、自分が体験したことを備忘録として残すことでした。そのためサイト自体の見た目にはあまりこだわらず、記事さえ投稿できれば十分だと思っていました。ただ、Claude Codeを使うようになってから、AIで自由にサイトを作れるらしい…ということを知ってしまいました。

そんなの知ってしまったら、居てもたってもいられません(笑)

Localで作業用のサイトを作る

今回は、いきなり現在使っているサイトを触るのではなく、Localを使ってPCの中に作業場を用意しました。Localを使う理由は、失敗しても元に戻せる状態を確保するためです。

手順としては、まずLocal内に新しいサイトを作り、SWELL（子テーマ）を入れ、作業をする場所を用意します。一から新しくサイトを作るだけならこれだけでOKなんですが、私の場合、もともとあるブログの良さも引き継ぎたいと思いました。そこで、Local内にもう一つ作業場を作り、本番サイトからエクスポートしたデータを読み込ませ、その中から記事・画像・フォームなど必要パーツだけを抽出できるようにしました。

見た目を決める

サイトを作り直そうと思って動き始めたものの、最初から完成したデザインのイメージがあったわけではありません。ただ、誰かのサイトをそのまま真似するのは嫌だったので、参考にしたいサイトを3つほどClaude Codeに渡しました。

そこから分析してもらった案を見ながら、「ここは好き」「これは違う」と修正を繰り返していきました。一方的に私が好き勝手言いながら、直感的に形にしていった感じです(笑)

最終的に決めたルールは、使う色は3色（茶色・オレンジ・オフホワイト＝オレンジショコラみたいなイメージ）、角は直角、余白は詰める、動きは1種類、画像を出す場所は絞る、というものです。角丸が多くてふんわりしたデザインもおしゃれでかわいいと思いますが、私はきっちりした見た目のほうが好きなので、そのあたりもかなり細かく調整しました。

画像を用意する

画像は、ロゴ、アイキャッチ3枚、取扱説明書、お問い合わせ用のものを用意しました。画像そのものは、ChatGPTで生成しています。

実際にサイト内に反映してみて、大きすぎたり小さすぎたりした場合は、Claude Codeに都度サイズを調整してもらったり加工してもらったりを繰り返しました。

トップページを作る

トップページは、以下の順番で作成していきました。

ヘッダー → CATEGORY → 新着記事＋サイドバー → ABOUT ME → WORKS → CONCEPT → GAME

以前のサイトは、必要なものを並べただけのかなりシンプルな作りでしたが、今回は全体の流れも意識しながら構築しています。そして完成したのが、今のブログサイトです。ホーム画面には作り直す前の旧サイトも載せているので、見比べるとかなり雰囲気が変わったのが分かると思います。

なかなかの良くできていると思いませんか？
自画自賛しておきます(笑)

記録を残す

せっかく作ったサイトが、運用中にもしかしたらダメになってしまうことがあるかもしれません。また、あとからやっぱり修正したいな…って思うことも出てくるかもしれません。そんなときにいつでも再開できるようにセーブをしておくことが大事だと思っています。

私の場合、2箇所にセーブデータを残してあります。GitHub（非公開）と Obsidian です。

おまけ｜ゲームの育成状況を確認する場所

今回、一番手をかけたのがホーム画面の一番下にあるGAMEの部分です。ここは私が普段やっているゲームの育成状況を確認するための場所です。いちいちゲームを起動しなくても「どこまで育てたっけ？」を確認したいためだけに作りました。

はい、自己満です。

ゲームを知らない人が見たら意味不明だと思いますが、これだけのために別の仕組みまで作っています(笑)

完成版を本番サイトに上書きする

そして最後に完成したものを本番サイトに反映させていきます。

Claude Codeが必要なデータファイルを子テーマzipにしてくれるので、それを「外観 → テーマ」から取り込みます。次にプラグインを追加、「デザインの反映」をすると完成です。

デザインを考えるときとは違って、移行作業はあっという間に終わりました。本来は自分で設定しないといけない複雑な部分を、Claude Codeにお願いしたら全部やってくれます。面倒なことに時間を取られないので、快適に作業が進みます。

やってみた感想とまとめ

Claude Codeを使うようになってから、頭の中で考えていたものを、自分で形にできる範囲がかなり広がりました。

以前なら、自分では作れないものは誰かに依頼するしかありませんでした。しかし、今はコードが読めなくても画面を見ながら「ここが違う」「こうしたい」と伝えて、少しずつ形を作っていけます。

ただ、簡単に作れるようになったからこそ、意識しておきたいこともあります。それは、ネットリテラシーと著作権です。

今はAIに指示を出せば、誰かの作品にかなり近いものを作ることもできてしまいます。また、自分では真似するつもりがなくても、AIがもともと存在するデザインや作品に似たものを出してくる可能性もあります。

そのため、AIが作ったものをそのまま使うのではなく、最後は自分の目で確認することが大事 だと思っています。

便利だからこそ、作れたことだけで終わらせず、そのまま公開して問題がないかまで自分で確認する。その点は、これからも忘れずにいたいと思います。