【30分で完了】デジタルマーケターがClaude CodeでWordPressの機能改善を爆速化した話

こんにちは、デジタルマーケターのたいさです。今日はサイト改善について。

こんな経験はありませんか？「ボタンの色だけ変えたい」「問い合わせフォームのこの項目を少し調整したい」。
そんなWordPressの"ちょっとした改修"のために、エンジニアに依頼するのは気が引ける。でも、自分でやるには時間も知識もない…。Web担当者なら、一度はこんなジレンマを抱えたことがあるのではないでしょうか。

今日は、そんな悩みを抱えていた私が、AIコーディングツール Claude Code を活用し、これまで半日かかっていたような作業を、たった30分で自力でやり遂げた実践録をお届けします。

記事のまとめ

• 結論: AIコーディングツールを使えば、WordPressの軽微な改修は驚くほど速く、自分で完結できる。
• 注意点: ただし、AIが生成したコードの鵜呑みは危険。「なぜこのコードなのか？」を判断する基礎知識がないと、サイトの不具合を招く可能性がある。
• 活用法: AIを「全知全能の神」ではなく「優秀な壁打ち相手（アシスタント）」と捉え、最終判断を人間が下すことで、マーケティング施策のスピードは劇的に向上する。

この記事を読めば、AIを活用したWordPress改修の具体的な手順から、非エンジニアが安全にコードを扱うための注意点まで、まるっと理解できます。

課題：なぜ「自分で」「速く」改修したかったのか

今回解決したかったのは、 「既存のWebページを、広告用のランディングページ（LP）に転用するテンプレート作成」 です。

マーケティング施策、特に広告運用のPDCAを回すには、LPの仮説検証が欠かせません。しかし、都度LPを新規作成していては、時間もコストもかかりすぎます。

そこで、以下の要件を満たすテンプレートを、用意することにしました。

1. 既存ページをベースに、広告からの流入に最適化するため、グローバルナビゲーションやフッターのリンクを最小にしたい。
2. ページの内容は部分的に変更できるようにしたい。
3. 広告からの直接流入に限定し、サイト内回遊や検索エンジンのクローラー巡回は避けたい（noindex設定等）。

もしこれを外部の制作会社に依頼すれば、仕様調整やテストを含めて少なくとも6時間程度の工数が見積もられます。加えて私自身のディレクション工数が1時間はかかります。

このリードタイムを極限まで短縮し、「自分の工数半減 ＆ 外注コスト0円」を実現することが、今回の裏ミッションでもありました。

解決策：Claude Codeに相談しよう

ここからは、実際に私がClaude Codeと対話しながら改修を進めた手順をお知らせします。

STEP1: 事前準備

まず、社内のシゴできAIエンジニアに聞いたところ、「Claudeはターミナルで叩くもんだよ」とのこと。

というわけで、ローカル環境のファイルを認識させるために、Claude Codeをインストールすることにしました。
具体的な方法や価格はこの記事を参考にしてください。

https://dev.classmethod.jp/articles/get-started-claude-code-1/

STEP2: ターミナルでプロジェクトを開く

無事にインストールできましたか？
では、早速Claudeを動かしていきましょう！（※ 以下はサンプルの値で実際とは一部異なります）

# WordPressのテーマディレクトリへ移動
$ cd /path/to/your/wordpress/wp-content/themes/your-theme/

# Claudeを起動
$ claude

 ✻ Welcome to Claude Code!

   /help for help, /status for your current setup

   cwd: /Users/arai.chie/Documents/labo/classmethod-2023/public/wp-content/themes/cmn

 Tips for getting started:

  Run /init to create a CLAUDE.md file with instructions for Claude
  Use Claude to help with file analysis, editing, bash commands and git
  Be as specific as you would with another engineer for the best results
  ✔ Run /terminal-setup to set up terminal integration

STEP3: Claudeと対話していく

さて、プロンプト（指示）を投げていきましょう！以下は概ね実際に投げてたものです。（恥ずかしい）

プロンプト1

single-service.php をコピーして、広告流入用のテンプレートを作成したいで
  す。グロナビとフッターメニューを別途設けて、外部リンクを極力減らしたいです。

プロンプトを投げると、検討中...のような表示になり、SearchとRead、Writeが繰り返されます。既存のソースを変えたり新規作成のタイミングで、お伺いを立ててくれます。今回の依頼は既存のソースに影響を与えないものなので、特に意識せずに「YES」を押していました。

プロンプト1の結果

⏺ 広告流入用のテンプレートを作成しました。以下の作業を完了しています：

  1. single-service-ad.php - 元のテンプレートをコピーして広告流入用に作成
  2. template-parts/header-ad.php - 広告流入用ヘッダーの呼び出し部分
  3. template-parts/footer-ad.php - フッターメニューを簡素化し、外部リンクを削除

  主な変更点：
  - グロナビ: ドロップダウンメニューを削除し、シンプルなリンクのみに
  - フッター: SNSリンクや採用ページなどの外部リンクを削除
  - モバイルメニュー: 不要なメニュー項目を削除して項目数を削減
  - その他: AI倫理ポリシーやEnglishページなどの外部導線を削除

  これにより広告流入時のユーザーが他サイトに離脱する可能性を最小限に抑え、問
  い合わせやコンバージョンに集中できる構成になっています。

おおおお！結果は...、想像以上でした。
私の想定していた構成で作ってくれました。（正直、対応者のレベルによっては、phpを分けてくれない可能性もあるのです。）

ここからは、検証環境にアップしつつやっていきましょう。

出来上がったものは、ある程度シンプルではあったものの、中途半端でした。
具体的なサンプルを渡してみましょう。

プロンプト2

ヘッダーとフッターは、このページを参考にしてください。
https://xxx

プロンプト2の結果

参考ページを基に広告流入用のテンプレートを作成し直しました：

  修正したファイル

  1. template-parts/header-ad.php - シンプルなヘッダー（ロゴ + 資料請求 + お問い合わせ）
  2. template-parts/footer-ad.php - 最小限のフッター（著作権 + 認証マーク）

  主な特徴

  ヘッダー:
  - クラスメソッドロゴ（ホームリンク）
  - 資料請求ボタン
  - お問い合わせボタン

  フッター:
  - 著作権表示「© Classmethod, Inc.」
  - 認証マーク（プライバシーマーク、SOC2、ISO認証）

  外部リンクの削除:
  - ナビゲーションメニューなし
  - SNSリンクなし
  - 採用サイトへのリンクなし
  - その他の外部サイトへの導線を最小化

  これにより、広告流入ユーザーが離脱せずコンバージョンに集中できる構成になっ
  ています。

だいぶスッキリしました！
が、内容の割にphpにボリュームがあるので、削除することにしました。

プロンプト3

> header-ad.php に不要な処理が残ってそうなので見直してください

プロンプト3の結果

 不要な処理を削除してシンプルにしました：

  修正内容

  削除した不要な処理：
  - 複雑な問い合わせURL判定ロジック（25行）
  - カスタムフィールドの取得処理
  - iframe内判定処理
  - 条件分岐による動的URL生成

  シンプル化した結果：
  - 資料請求: /download/ への固定リンク
  - お問い合わせ: /inquiry/ への固定リンク

  これで広告流入用ヘッダーがよりシンプルで保守しやすくなりました。

もうあと一歩というところです。
Claudeには、画像を渡すこともできるので、画面を元にサクサク指示していきましょう！
（このやりとりはとても楽に感じました）

プロンプト4

> この部分いらないです。[Image #1]

プロンプト4の結果

該当のセクションを削除しました。
これで広告流入用テンプレートがよりシンプルになり、ユーザーが他のサービスに離脱することなく、メインのコンバージョン（資料請求・お問い合わせ）に集中できるようになりました。

STEP4: Claudeと対話し尽くす

微調整のところで結局やり取りがかさみ、その後5-6回ぐらいやり取りを繰り返して完成しました。
基本的には、Claude任せにしたかったのですが、どうしても表現できなかったところは、私でCSSクラスを追加したところもあります。それでも2-3箇所で済みました。

結果と考察

修正したコードをテスト環境で適用し、問題なく動作することを確認。本番環境にも無事に反映できました。この間、かかった時間はわずか30分。誰かに頼んだとしても結局、検修作業で30分以上はかかるので、圧倒的なスピードを感じられました。

今回の経験を通じて、デジタルマーケターがAIコーディングツールを使う上で、以下の2点が非常に重要だと痛感しました。

1. AIは「壁打ち相手」であり、「最終決定者」ではない

AIは素晴らしいコードを提案してくれますが、それはあくまで提案です。サイト全体の構造や他のプラグインとの兼ね合いといった文脈までは完璧に理解していません。最終的なGo/No-Goの判断は、必ず人間が行う必要があります。

2. 基礎知識が「判断の質」を左右する

今回、私がAIの提案の懸念点に気づけたのは、WordPressそもそもの仕様やプログラミング言語の基礎知識があったからこそだなと思いました。もし知識がゼロだったら、提案されたコードを信じてそのまま適用し、サイトの表示崩れなどを引き起こしていたかもしれません。そして、元に戻すことも厳しいでしょう。そして、AIは1度ハマったら解消できないことが多いです。（実際の開発もそうだけれども踏襲しなくていいのよ）

だからこそ、非エンジニアの方やWordPressの仕様を知らない方がAIを使う際には特に注意が必要です

AIを使えば誰でも魔法のようにコーディングできるわけではありません。少なくとも、「どのファイルを触るべきか」「エラーが出た時にどうやって元に戻すか（バックアップの重要性）」といった最低限の知識は必須です。AIは、あなたの知識をブーストしてくれる強力なアシスタントだと捉えるのが、最も賢い付き合い方だと感じました。

最低限、下記の内容は必須でしょう。

• ① バックアップの取り方: 何かあった時にすぐ元に戻せるように、作業前には必ずファイルとデータベースのバックアップを取る習慣。GitHubの使い方の把握と理念の理解。
• ② WordPressの基本構造: functions.phpやテンプレートファイル（header.phpなど）が、それぞれどんな役割を持っているかの概要理解。
• ③ エラーの対処法: 画面が真っ白になった時、どのファイルが原因か特定し、元に戻す方法。

まとめ

今回は、Claude Codeを活用してWordPressの機能改善を30分で実現した事例と、その過程で得た「元エンジニアがAIを使う上での気づき」をご紹介しました。

• 知識がある上で、AIを使えば、軽微なWordPress改修は驚くほど速くできる
• AIと2-3度応答しても実現できない時は、自分で対応した方が圧倒的に早い場合も...

AIを使いこなすことで、マーケターは実装の速度を上げ、より多く仮説検証を回せるようになります。これはまさに、かつて注目されたグロースハッカー的な働き方そのものです。

※ グロースハッカーとは、2010年代に注目された、マーケティング・データ分析・エンジニアリングのスキルを掛け合わせた専門職です。データに基づいた高速な実験（A/Bテスト等）を繰り返し、製品やサービスのユーザー数や収益を急成長させることをミッションとします。