はじめに：既存テーマに限界を感じた話
ヒトブログを始めたとき、最初は無料テーマ(Cocoon)を使っていました。
見た目はそれなりにきれいだし、設定画面でポチポチすれば色やレイアウトも変えられる。
でもしばらく使っていると、「ここをもうちょっとこうしたいのに……」が積もってきたんです。
カテゴリページの表示形式を変えたい。カード型レイアウトを微調整したい。
でも無料テーマのカスタマイズ範囲には限界があって、CSSをいじっても根本的な構造は変えられない。
「自作テーマを作ればいいんだ」という答えはわかっていました。でも僕はプログラミング未経験。PHPなんて1行も書いたことない。テーマの自作は「プロか、少なくとも経験者がやるもの」だと思い込んでいました。
でも、Claude Codeを使ったらできてしまったんです。
この記事でわかること
- WordPressテーマの自作って何をするのか
- 使ったツールと必要な前提知識
- デザイン指示〜完成までの制作フロー（5ステップ）
- つまづいたポイント3つと対処法
- 完成テーマのビフォーアフター
ClaudeCodeが何か知らない方はこちらの記事からどうぞ！
結論：プログラミング未経験でも、AIがあればテーマは作れる
先に結論です。
| 項目 | 内容 |
|---|---|
| 制作期間 | 約20日（作業時間20~30時間ほど） |
| 費用 | Claude Code（Pro月額約3,400円）のみ |
| 前提知識 | HTMLの基本がわかる程度（PHPは未経験） |
| 使ったツール | GPT image 2.0 + Claude Code + Local by Flywheel |
| 結果 | 完全オリジナルのWordPressテーマが完成 |
「AIに全部お任せで完璧なものが一発で出る」わけではなくて、何度も修正を繰り返す根気は必要です。正直に言うと、今の形になるまでにリポジトリを3回作り直しています。でも、以前は「プロに頼むしかない」と思っていたことが自分の手でできるようになった。この感覚はかなり大きいです。
ちなみにテーマはまだ完成形ではなくて、今も改善を続けています。「完璧になってから公開」じゃなくて「使いながら育てる」スタイルです。
以下、実際の制作手順を紹介していきます。
そもそもWordPressテーマの自作って何をするの？
いきなり作り始める前に、テーマの仕組みをざっくり理解しておきましょう。全部わかる必要はありません。
「こういうファイルがあるんだな」くらいで大丈夫です。
WordPressテーマは、いくつかのファイルの集まりです。
| ファイル | 役割 |
|---|---|
style.css | テーマの見た目（色、フォント、余白など）を決める。テーマ名もここに書く |
index.php | 記事一覧やトップページの構造を決めるテンプレート |
functions.php | テーマの機能を追加する設定ファイル（メニュー有効化、スクリプト読み込み等） |
header.php | 全ページ共通のヘッダー部分 |
footer.php | 全ページ共通のフッター部分 |
single.php | 個別記事ページのテンプレート |
……と聞くと難しそうですが、大事なのは「全部理解しなくていい」ということ。AIに任せる部分と、自分で決める部分を分ければいいんです。自分が決めるのは「どんな見た目にしたいか」「どんな機能が欲しいか」。コードを書くのはAIの仕事。
使ったツールと環境
| ツール | 用途 |
|---|---|
| GPT image 2.0（ChatGPT） | デザインカンプの生成 |
| Claude Code（デスクトップアプリ版） | コード生成の全工程 |
| Local by Flywheel | ローカルでWordPressを動かす |
| GitHub | バージョン管理 |
Claude Codeの始め方は、Claude Codeの始め方【学生向け】で詳しく紹介しています。
必要な前提知識
正直に言うと、ほぼゼロでした。HTMLの基本構造（headとbodyがある、divでブロックを作る程度）は知っていましたが、PHPもJavaScriptも書いたことはありません。それでもなんとかなりました。
実際の制作フロー
ここからが本題。時系列で紹介していきます。
STEP 1：GPT image 2.0でデザインカンプを作る
まず最初にやったのは、コードを書くことでもテキストで指示を出すことでもなく、デザインの「完成イメージ画像」をAIに生成してもらうことでした。
使ったのはChatGPTのGPT image 2.0。「こういう雰囲気のブログトップページを作りたい」とイメージを伝えて、デザインカンプ（完成予想図）の画像を生成してもらいました。
テキストだけで伝えるより、画像があったほうが圧倒的に完成イメージがブレません。「百聞は一見にしかず」は、AIへの指示でもそのまま当てはまります。
ただし、画像生成AIも万能ではありません。思い通りのデザインにならないこともあって、何度かプロンプトを調整しながら「これだ！」と思える画像ができるまで繰り返しました。
※最初に生成したブロモン入りのWordPressテーマデザイン
STEP 2：デザイン画像をClaude Codeに丸投げする
できあがったデザインカンプの画像を、そのままClaude Codeに投げました。プロンプトはこれだけ：
添付した画像のようなWordPressテンプレートを作成してたったこの一行です。
Claude Codeがデザイン画像を読み取って、style.css、index.php、header.php、footer.php、single.php、functions.php……必要なファイルを一式生成してくれました。この時点でローカル環境のWordPressにテーマフォルダを置いて有効化すると、もう基本的なブログの形は見えていました。
ただし、ここで問題発生。AIが画像を「忠実に」再現しすぎたんです。
デザインカンプにはダミーとしてTwitterやInstagramのアイコンが入っていたんですが、Claude Codeはそれも含めてそのまま再現。結果、なぜか見知らぬSNSアイコンが並んだテーマができあがりました。画像生成AIが入れたダミー要素を、コード生成AIがそのまま実装してしまったわけです。
この「AIが忠実すぎる」問題は、デザイン画像をもとにコーディングするときの”あるある”だと思います。不要な部分は「これは除外して」と明示するのが大事です。
STEP 3：ブロモンのマスコット画像を組み込む
ヒトブログといえばブロモン。サイドバーやフッターにマスコット画像を表示させたかったので、その要望もClaude Codeに伝えました。
サイドバーにマスコットキャラクターの画像を表示してほしいたった一言だけでClaudeCodeが画像を挿入するファイルまで作成して自分は画像を挿入するだけで完成しました。
STEP 4：カテゴリページ・記事ページのカスタマイズ
基本形ができたあとは、細かいカスタマイズ。
| カスタマイズ内容 | AIへの指示 |
|---|---|
| カテゴリごとにアイコンと色を変える | 「つまづいた話・作ってみた・学んでみたの3カテゴリに異なるアイコンと色を設定して！」 |
| 目次の自動生成 | 「H2・H3見出しから自動で目次を生成するようにして！」 |
| ヘッダーのナビゲーションにドロップダウンを追加 | ヘッダーのナビゲーションにドロップダウンを追加したい！ |
ここでも僕がやったのは「こういう機能が欲しい」と伝えるだけ。具体的なコードはClaude Codeが書いてくれました。
STEP 5：レスポンシブ対応とバグ修正
スマホで表示したときのレイアウト崩れを修正するフェーズ。ここが一番時間がかかりました。
「スマホで見たらサイドバーが記事の上に被ってる」「メニューが画面からはみ出す」といった問題をスクリーンショットと一緒にClaude Codeに伝えて、修正してもらう。直ったと思ったら別の箇所が崩れる……の繰り返し。
でもこのデバッグのサイクルは、AIなしでやったら何倍もかかっていたと思います。
つまづいたポイント3つ
スムーズにいったように見えるかもしれませんが、しっかりつまづきました。
① 最初のテーマはAI感満載だった
正直に告白します。最初に作ったカスタムテーマは、ブロモンもいない、AI感満載のテンプレート感丸出しのデザインでした。
よくある「AIで作りました」感のあるサイト、見たことありますよね。整ってはいるけど個性がない、どこかで見たような見た目。最初はまさにそれでした。
「これじゃない」と思ってリポジトリを作り直し。デザインを変えてまた作り直し。結局、GitHubのリポジトリを3回作り直して、ようやく今のブロモンがいるオリジナルテーマにたどり着きました。
ここで学んだのは、AIに丸投げするだけでは「自分のブログ」にはならないということ。「ブロモンを入れたい」「この色にしたい」「この配置がいい」と自分の意志を入れていくことで、初めてAIの出力が「自分のもの」になっていきました。
② テーマをアップロードしたらWordPressが死んだ
これが一番焦りました。
ローカル環境で作ったテーマファイルを本番のサーバーにアップロードしたところ、WordPressが完全に真っ白に。管理画面（/wp-admin/）にもアクセスできない。ログインすらできない状態です。
頭が真っ白になりましたが、なんとか解決方法を見つけました。
対処法： ロリポップのFTPサーバーに直接アクセスして、テーマファイルの問題箇所を修正。具体的には、wp-content/themes/ フォルダの中にある自作テーマのファイルをFTP経由で編集して、エラーの原因を取り除きました。管理画面に入れないときは、FTPが最後の命綱です。
これはローカル環境では起きなかった問題なので、本番にアップする前にバックアップを取ること、そしてFTPアクセスの方法を事前に確認しておくことを強くおすすめします。
③ CSSの優先順位で意図通りにならない問題
自分で書いたCSSが、テーマのCSSやWordPress本体のCSSに上書きされてしまうことがよくありました。CSSには「詳細度（specificity）」というルールがあって、どのスタイルが優先されるかが決まっています。
対処法： 「このスタイルが効かない」とAIに相談すれば、詳細度を上げた書き方を提案してくれます。ただし「なぜ効かないのか」を自分でも理解しておくと、同じ問題で何度もハマらなくなります。
完成したテーマのビフォーアフター
実際にテーマを切り替えた前後で、ブログの見た目は大きく変わりました。
| 観点 | Before（無料テーマ） | After（自作テーマ） |
|---|---|---|
| デザイン | 汎用的。どこかで見た感じ | ブロモンがいて、色分けもオリジナル |
| 自由度 | カスタマイズ範囲に限界 | 何でも変えられる |
| 表示速度 | 使わない機能も読み込んで重い | 必要最低限で軽い |
| 「自分のブログ」感 | 薄い | 強い |
デザインの自由度が上がっただけでなく、
不要な機能を削ぎ落としたことでページの表示速度も改善しました。
無料テーマは便利な反面、使わない機能も読み込んでいるので、軽量なテーマにすると速度面でもメリットがあります。
ただし繰り返しになりますが、このテーマはまだ「完成」ではありません。
記事を書きながら「ここの余白もうちょっと広げたいな」「この表示もう少し改善できそう」と手を入れ続けています。完璧を待たずにまず公開して、使いながら育てる。これがバイブコーディングの良いところだと思っています。
まとめ：まずはローカル環境で試してみよう
| ステップ | やること | 所要時間 |
|---|---|---|
| ① | Local by Flywheelでローカル環境を作る | 15分 |
| ② | GPT image 2.0でデザインカンプを生成 | 10分〜 |
| ③ | Claude Codeにデザイン画像を投げてテンプレート生成 | 30分 |
| ④ | カスタマイズ・機能追加 | 数時間〜 |
| ⑤ | レスポンシブ対応・バグ修正 | 数時間〜 |
| ⑥ | 本番にアップロード（バックアップ忘れずに！） | 15分 |
プログラミング未経験でも、AIがあればWordPressテーマは作れます。ただし、最初から完璧なものはできません。僕もリポジトリを3回作り直しています。完璧を目指さず、まずはローカル環境で「トップページだけ」作ってみるところから始めてみてください。
次に挑戦してみたいのは、WordPressプラグインの自作。テーマ開発でAIとのやりとりの流れがわかったので、プラグインもいけるんじゃないかと思っています。できたらまた記事にします。
・関連記事
今回使ったツールのセットアップから基本操作まで解説した記事はこちら！
テーマ開発以外の活用法も知りたい人へ
AIへの指示の出し方を改善するコツはこちらの記事で！
コメントを残す