バイブWeb制作の第五歩へ（最終回）

1-1で「バイブマーケティング」、2-1で「バイブワイヤーフレーミング」、3-1で「バイブデザイン」、5-1で「バイブコーディング」をやりました。今回はその第五歩、そして最終回——「バイブWordPress化」です。

前回の続き：「自分しか直せないLP」を、「中の人が触れるLP」に変える

前回（5-1）作った preview-final.html を思い出してください。動きが付いて、見た目もEdbaseらしくなった、ちゃんとした1枚のLPでした。でも、これをそのままEdbaseのサイトとして納品すると、1つ問題が起きます。

「コアメッセージの文言をちょっと直したい」
「無料相談ボタンの誘い文句を季節に合わせて変えたい」
「お知らせバーの内容を差し替えたい」

このたびに、HTMLを開いて編集 → アップロードし直しが必要になります。Edbaseの中の人にはできないので、毎回制作した人に連絡が来ます。これがWebサイトを「作って終わり」にしてしまう一番の原因です。

今日やるのは、preview-final.html を「WordPress（ワードプレス）」という仕組みに乗せ替える作業です。これをやると、サイトの主要な文言を、WordPressの管理画面から直接更新できるようになります。

まず「何を作るのか」を見ておきましょう

文字で説明するより、完成形を見たほうが早いです。下が今日のゴール、WordPress管理画面からLPの文言が変えられる状態です。

今は preview-final.html という1枚のファイルでしたが、ゴール後は、「WordPressという仕組みの上で動くLP」になります。Edbaseの中の人が、ブラウザで管理画面にログインして、コアメッセージや誘い文句をちょこちょこ調整できるようになります。

そもそも WordPress って何？

名前は聞いたことがあると思います。WordPress（ワードプレス）は、世界中のWebサイトの4割以上が使っている、サイトを管理・更新する仕組みです。

難しく考えなくて大丈夫。一言で言うとこうです。

静的HTMLサイト と WordPressサイト の違い

同じEdbaseのLPでも、HTMLのまま運用するか、WordPressに乗せるかで、運用の手間が大きく変わります。

WordPressの中身は「2階建て」

WordPressのサイトは、ざっくり2階建てになっています。

1階（WordPress本体）はすでに完成品として配られています。今日あなたが作るのは、2階のテーマ——つまりEdbaseの「見た目の服」の部分だけです。

バイブWordPress化の本質：「PHPは覚えない」

WordPressのテーマ作りでよく出てくる単語があります。

PHP（ピーエイチピー）、テンプレート階層、ループ、WP関数、フック、フィルター……

普通に勉強しようとすると、これらを全部覚えてから作業を始めることになります。でもこの講座では、それを全部おまかせします。

あなたがやること / Claude Codeがやること

準備①：ローカルでWordPressを動かす

WordPress化の作業をするには、自分のパソコンの中で動くWordPressが必要です。「ローカル環境」と呼びます。これがないと、作ったテーマを試せません。

初心者には、Local（旧 Local by Flywheel） という無料アプリが圧倒的におすすめです。インストールするだけで、ボタンひとつでローカルWordPressサイトが立ち上がります。

Localで最初に見る場所：起動・管理画面・公開ページ・テーマフォルダ

WordPress管理画面で見る場所を先に確認しよう

Localの「WP Admin」を押すと、WordPressの管理画面に入ります。最初はメニューが多く見えますが、今回のWordPress化で使う場所は限られています。まずは、外観 → テーマ → カスタマイズ の流れだけ押さえましょう。

まず表示される画面：WordPressログイン

ログイン直後：ダッシュボードから「外観」へ進む

左メニューは「どの機能へ行くか」を選ぶ場所
今回の主役は 外観 です。投稿や固定ページは、後の応用編で使う場所だと考えてください。

テーマ画面は「今どの服を着ているか」を見る場所
Edbase Renewal が有効なら、今のサイトはこのテーマで表示されています。

カスタマイズは「運用者が触る画面」
コードを書かずに、お知らせバーやFVの文言を変えられるようにします。

準備②：5-1で作ったフォルダを「テーマ」として置く

Localで立ち上げたWordPressサイトには、テーマを置く専用フォルダがあります。そこに、5-1までで育ててきた edbase-renewal フォルダを丸ごとコピーします。

VSCodeで開きなおす

コピーしたら、その新しい場所（themes/edbase-renewal/）をVSCodeで開きなおします。これで、Claude Codeが扱う作業フォルダが「テーマフォルダ」になりました。

準備③：WordPress化計画.md を書く

1-1〜5-1で毎回、作業の前に「指示書」を作ってきました。今日も同じ。WordPress化計画.md という小さな指示書を、テーマフォルダの中に作ります。

中身はシンプルです。「preview-final.html のどの部分を、どんなファイルに変えるか」と「管理画面から触れるようにする箇所」のマッピングだけ。下のテンプレをコピーして、WordPress化計画.md として保存してください。

# Edbase WordPressテーマ化 計画

## 入力（5-1の成果）
- preview-final.html（LP1枚、動きつき）

## 作るテーマファイル（マッピング）
- style.css       … テーマ情報（WordPressに「これがテーマ」と教える）
- index.php       … フォールバック用の最低限ファイル
- functions.php   … テーマの基本設定 + 編集できる項目の登録
- header.php      … 全ページ共通のヘッダー
- footer.php      … 全ページ共通のフッター
- parts/cta-bottom.php … 下部CTA
- front-page.php  … トップページ（preview-final.html を変換）

## 管理画面から編集できるようにする箇所
- お知らせバー文言（FV直上）
- FV キャッチコピー（H1）
- FV サブテキスト
- CTAボタン文言（無料相談・資料DL）

## やらないこと（応用編で扱う）
- 複数ページ化（会社情報など）
- お知らせ（投稿）機能・ブログ機能
- カスタムメニュー化（管理画面でナビ編集）

これがあると、Claude Codeに作業を頼んだとき、毎回ゼロから説明する必要がなくなります。「WordPress化計画.md を見て進めて」と言うだけで通じます。

今日の進め方：4ラリーでテーマが育つ

毎回パターンは同じ。Claude Codeとの会話のラリーでテーマを少しずつ育てていきます。

ラリー① テーマとして認識させる

最初のラリーは、Edbaseフォルダを「これはWordPressテーマです」とWordPressに教える作業です。実は、テーマとして認識されるには、フォルダの中に3つのファイルがあるだけでOKです。

3ファイルとも、Claude Codeに頼めば数秒で出来ます。中身を覚える必要はありません。

このラリーで完成すること

💬 Claude Codeとの会話全文を見る ▾

ファイル状態スナップショット（ラリー①完了時点）

テーマフォルダの中身は、こうなっています。新しく増えた3ファイルにフォーカスしてください。

📁 edbase-renewal/
├── 📄 preview-final.html
├── 📄 style.css           ← テーマヘッダーが追加された
├── 📄 main.js
├── 📁 images/
├── 📄 WordPress化計画.md
├── 📄 index.php           ← 🆕 新規作成
└── 📄 functions.php       ← 🆕 新規作成

WordPress管理画面の「外観 → テーマ」を開くと、こんな風に Edbase Renewal がテーマとして並んでいます。

ラリー①の確認画面：WordPressがテーマとして認識している

ここで確認すること
edbase-renewal フォルダを正しい場所へ置けていると、テーマ一覧に Edbase Renewal が出ます。

「有効」が付いているか見る
一覧に出ただけではまだ使われていない場合があります。有効 と表示されているかを見ます。

次の確認へ進む
テーマが有効になったら、ブラウザで公開ページを見ます。ラリー④ではこのボタンから文言編集に進みます。

ラリー② 共通パーツを分割する

次のラリーは、preview-final.html の中にあるヘッダー・フッター・下部CTAを別ファイルに切り出す作業です。

なぜ分割するの？

今は1ページだけですが、将来お知らせや会社情報を増やしたくなったときに、ヘッダー・フッターが全ページにベタ書きされていると、修正のたびに全ファイル開く必要が出てきます。最初から「共通部分は1ファイルにまとめる」癖をつけておく方が、後がラクです。

分割するのはこの3つ

preview-final.html を眺めて、複数ページで同じ見た目になりそうな部分を切り出します。Edbase LPだと、自然にこの3つです。

このラリーで完成すること

💬 Claude Codeとの会話全文を見る ▾

ファイル状態スナップショット（ラリー②完了時点）

📁 edbase-renewal/
├── 📄 preview-final.html
├── 📄 style.css
├── 📄 main.js
├── 📁 images/
├── 📄 WordPress化計画.md
├── 📄 index.php
├── 📄 functions.php
├── 📄 header.php          ← 🆕 新規作成
├── 📄 footer.php          ← 🆕 新規作成
└── 📁 parts/              ← 🆕 新規フォルダ
    └── 📄 cta-bottom.php  ← 🆕 新規作成

ラリー③ LPをWordPressのトップページにする

ここが今日の本丸。preview-final.html を front-page.php というWordPressのトップページ用テンプレートに書き換えます。

preview-final.html と front-page.php の対応

イメージはこんな感じ。HTMLの中身はほぼそのまま。違うのは「ヘッダー・フッター・CTAを別ファイルから呼び出す」「画像パスをWP用に書き換える」の2点だけです。

このラリーで完成すること

表示確認したら、画像が出ないはず

ここで初めて、ブラウザでローカルWordPressサイトのトップを開いてみます。Localの「Open site」ボタンが速いです。

ラリー③直後によく起きる状態：レイアウトは近いが、画像だけ表示されない

たぶん、こんな状態になります。見た目はほぼ合っているけど、画像が全部表示されていない——これ、WordPress化でみんなが1度はハマる定番の落とし穴です。

画像パスを直してもらう（追加ラリー）

気になったことをそのままClaude Codeに伝えるだけ。これがバイブの真骨頂です。

💬 Claude Codeとの会話全文を見る ▾

表示確認：5-1の見た目がそのままWordPressサイトに

画像パス修正後：ローカルWordPress上でLPの見た目が戻る

ファイル状態スナップショット（ラリー③完了時点）

📁 edbase-renewal/
├── 📄 preview-final.html
├── 📄 style.css
├── 📄 main.js
├── 📁 images/
├── 📄 WordPress化計画.md
├── 📄 index.php
├── 📄 functions.php
├── 📄 header.php
├── 📄 footer.php
├── 📁 parts/
│   └── 📄 cta-bottom.php
└── 📄 front-page.php      ← 🆕 新規作成（画像パスもWP対応）

ここまでで、見た目は 5-1の preview-final.html と完全に同じ。でも今のままだと、文言を変えるにはまだPHPファイルを開いて直接書き換える必要があります。最後のラリーで、ここを「管理画面から触れる」形に変えます。

ラリー④ LPの主要文言を、管理画面から編集できるようにする

ここが今日の本当の山場。WordPress化の意味が、ここでようやく出てきます。

「テーマカスタマイザー」を使います

WordPressには、「外観 → カスタマイズ」という機能が最初から入っています。これを使うと、テーマ側で「ここの文言は管理画面から変えられるよ」と宣言した部分が、管理画面でフォームになって表示されます。

編集できるようにする箇所

Edbase LPのうち、「実際に運用で変えたくなりそうな箇所」を選びます。全部を編集可能にする必要はありません。変える可能性が高い4つに絞ります。

このラリーで完成すること

💬 Claude Codeとの会話全文を見る ▾

表示確認：管理画面で文言を変えると、LPに反映される

ラリー④の確認は、コードではなく管理画面とプレビューで見ます。カスタマイザーは、左側で入力し、右側で公開ページの見え方を確認する画面です。ここまで来ると、Edbaseの中の人がHTMLを開かずにLPの主要文言を更新できます。

外観 → カスタマイズ → Edbase LP 設定：左で編集し、右で反映を見る

左側は入力欄
お知らせバー、FVキャッチコピー、FVサブテキスト、CTAボタン文言を編集します。HTMLやPHPは開きません。

右側は確認画面
入力した文言が、実際のLPでは大きすぎないか、改行が変ではないかを見ます。

公開ボタンで確定
プレビューで問題なければ、左上の 公開 を押します。ここで初めてサイトに保存されます。

ファイル状態スナップショット（ラリー④完了時点 / 最終形）

📁 edbase-renewal/
├── 📄 preview-final.html      （元データ、参照用に残してOK）
├── 📄 style.css                ← テーマヘッダー付き
├── 📄 main.js
├── 📁 images/
├── 📄 WordPress化計画.md
├── 📄 index.php
├── 📄 functions.php            ← 🔄 カスタマイザー登録を追加
├── 📄 header.php               ← 🔄 お知らせバーがカスタマイザー値に
├── 📄 footer.php
├── 📁 parts/
│   └── 📄 cta-bottom.php
└── 📄 front-page.php           ← 🔄 FVテキスト・CTAがカスタマイザー値に

完成：5回連載で作ってきたもの、全部つながりました

ここで一度、立ち止まって俯瞰してみてください。5回のレッスンで作ってきたものが、すべて連動してこの完成形になっています。

1-1の 要件定義.md から、2-1、3-1、5-1と1段ずつ積み上げてきたもの。それが、最後の6-1でWordPressサイトという「運用できる形」に集約されました。

応用編：ここから先に進みたくなったら

今日のスコープは「1枚のLPをWordPress化する」までです。実務に出ると、次のような「もう一歩深い」要望が必ず出てきます。

まとめ：今日の学び

WordPress化とは、HTMLサイトを「中の人が更新できる形」に組み替える作業です。

難しいのはPHPやWP関数の知識ではなく、「どこを動的にして、どこは固定でいいか」を決めること——そしてその判断も、Claude Codeとの会話の中で自然に決まっていきます。

最後に：全5回の講座、お疲れさまでした

1-1〜6-1の全5回を通して、あなたは「曖昧な依頼」から「中の人が運用できるWebサイト」までを、AIと一緒に作り切りました。

全部に共通しているのは、「言葉でAIと話しながら作っていく」こと。整った発注書も、専門用語も要りません。感じたことをそのまま話すだけで、AIが叩き台を出し、それを見て直す——その繰り返しでWebサイトができ上がります。

ここまでお付き合いいただき、ありがとうございました。
あなたのこれからの制作が、AIを相棒にした「もっと速く、もっと自由な」ものになりますように。