【30分で実装】 AIとペアプロしてWordPressの広告用ページをサクッと改修した話〜コーディングゼロ編〜
こんにちは、デジタルマーケターのたいさです。今日も前回と同じようなテーマで、WordPressでのサイト改善ですが、手作業は0にしてみました！
記事のまとめ
前回と似たようなテーマではありますが、使っていく中でより明確になってきたところもあるので、執筆しました。
改めて、AIコーディングツールは、「やってみながら考える」のが大事だなと思います。
- 結論: 頭の中のぼんやりとした施策を形にしていく時にとても良い
- 活用法1: 手戻りが発生しそうな時こそ、使うべき！
- 活用法2: いい感じ！になったタイミングで都度コミットしておくのがベスト！
今回のお題：広告流入用の「資料請求ページ」をいい感じにしたい
【改修前の状況】
- 広告用のシンプルなLP（ランディングページ）テンプレートは既にある。
- 通常の「資料請求ページ」もある。
【やりたいこと】
- 通常の資料請求ページをベースに、広告用のシンプルなヘッダー・フッターを適用した**「広告流入専用の資料請求ページ」**を作りたい。
- 目的は、広告から来たユーザーが他の情報に気を取られず、スムーズにフォーム入力まで進んでもらうこと。
これをClaudeと一緒に作っていきます！と、その前に、masterからブランチ切った状態で始めましょう！
ファーストコンタクト：「とりあえず作って！」
ターミナルでClaudeを起動して、まずは雑なお願いをしてみましょう。
> 資料請求ページでも同様に、ヘッダーフッターをライトにしたテンプレートを作成したい
前回のやりとりがClaude側に記録されてるわけでもないので、自分でも「同様に」ってなんだよ...って思うわけですが、Claudeは察し力が高い。すぐに既存の広告用テンプレートを解析し、ものの数秒で新しいテンプレートファイル single-download-ad.php を作成してくれました。なんかごめんね、好き。
ただ、出来上がったものは前回の広告LPのデザインに引っ張られすぎていて、ベースにしたい資料請求ページのレイアウトとは別物でした。いや、これがいい時もあるからね、好き。
> ベースは、single-download.phpにしてください
WordPressの仕様が分からなければ何だそれかもしれませんが、資料請求で使ってるテンプレート構造を使ってねということです。構造はLPではなく資料請求ページのもので、ヘッダーとフッターだけを広告用のシンプルなものに入れ替える、という理想通りの修正を行ってくれました。ここまでは順調です。ありがとう。一旦コミットします。
デザインの迷走：「なんか、違うんだよな…」
出来上がったページを見てみると、さすがにシンプルすぎるのと、余白が雑。
> ちょっとシンプルすぎるので、ファーストビューにあしらいを追加できますか？
するとClaudeは正直、安直に以前の広告LPで使われていたファーストビューの素材をそのまま入れ込んできました。嫌い。
こうじゃないのよ。さすがに伝え方が曖昧すぎたね、悪かったよ。
> これは求めているものと違います。ファーストビューには、フォームを出したいので、ボリュームは出したくないです。他のものはありませんか？
このフィードバックで、ようやく方向性は一致。Claudeは先ほどの提案はなかったかようにすべて取り払い、シンプルだけれども、うっすらデザインが入ったレイアウトにしてくれました。一方でこれ以上求めると、多分難しいだろうな、ということで、この状態で整えることにしました。
しんどい攻防戦：「この余白、気になる…！」
ヘッダー下の罫線と、その下のコンテンツの間の余白が、どうにも広く感じるので、ここだけは直したらOKとします。
> （スクリーンショットを添付して）罫線と本文の間の余白が広すぎるので調整して。
Claudeはpadding-topを追加するコードを提案してくれましたが、なぜか余白は広がる一方…。何度かやり取りを重ねても解決しません。
埒が明かないので、ブラウザのデベロッパーツールで原因を特定。該当箇所のスクリーンショットを撮って、再度Claudeに送りました。
> （デベロッパーツールのスクショを送り）変わらないですね。これが原因では？
これで直ると思うじゃないですか？直らないんですよ！もう！
> 変わらないようです。もっとチャット見てください
ちゃんと って言いたかったのに、まさかの誤字！でも、これで直りました。チャット見て....え、見てなかったの？えっ....
ここで、コミットしましょう。
改めてファーストビューの調整を
デザインがFIXしたので、最後に機能面。
このページではヘッダーの「資料請求」ボタンは不要でした。そこで、最初はURLにdownloadが含まれていたらボタンを非表示にする、という処理を書いてもらいました。
でも、これだと他のページでこのヘッダーを使い回すときに不便です。もっと柔軟な作りにしたい。
> ヘッダーですが、呼び出し元で、引数を渡すと、ボタンの表示・非表示を切り替えられるようにしたいです。引数無しの時は表示でお願いします。
簡易ページ側でヘッダーを呼び出す際に、引数を渡すことで、切り替えるようにしてもらいました。
最後に、仕様をコメントで注記しておくことにしました。
> それもコメントでphpに書いてもらえますか？claudeで作成したことも分かるようにして
細かい処理だったので、実行結果を省いていましたが、わかりやすかったので、追記されたコメントは共有します。
⏺ Update(template-parts/header-ad.php)
⎿ Updated template-parts/header-ad.php with 11 additions
1
2
3
4 + /**
5 + * 広告流入用ライトヘッダー
6 + *
7 + * 使い方:
8 + * - ボタン表示: get_template_part('template-parts/header-ad');
9 + * - ボタン非表示: get_template_part('template-parts/header-ad', null, array('hide_buttons' => true));
10 + *
11 + * Created with Claude Code (https://claude.ai/code)
12 + * Generated on 2025-09-13
13 + */
14 +
15
16
17
とまぁ、こんな風に対話を重ねたことで、
hide_buttonsという1つの引数で制御できるようにする- 後から誰が見ても使い方が分かるようにコメントを残す
といった改善が加えられ、コードがどんどん洗練されていきました。いやぁ、便利ですわ。
コミットしてプルリク出しちゃいましょう。
AIは最高の「壁打ち相手」
今回の改修にかかった時間も、約30分。
改めての気づきだと、自分でコードを書いたり調べなくて済む分、もっとこうしたらいいんじゃないの？っていうアイデア部分に余力が割けるのも良いなと思いました。
あとやっぱり感じたのは、AIは優秀な壁打ち相手だということです。
- とりあえず形にしてくれるスピード感
- 面倒な定型コードを一瞬で書いてくれる
- 「もっとこうしたい」という壁打ちに付き合ってくれる
- テキトーに指示出して、それをなかったことにしても、一瞬で戻してくれる
何気に大事なのは、最後なのですよね。頭の中の「あるべき姿」は、必ずしも明確ではない。お願いしたことが間違っている可能性もある中でのやりとりが申し訳ないなと思う時も多々ある。
そんな中でも、この相棒がいるだけで、依頼の心理的ハードルと時間が劇的に削減されるのです。
施策をバシバシ回していきたいときにはこの相棒の存在が欠かせないなと感じました。
Web担当者の「あとちょっとこうしたい」を高速で実現してくれるAIコーディング。最初はハードルが高く感じるかもしれませんが、ぜひ皆さんも試してみてはいかがでしょうか？
