A Complete Codex · 2024 Edition

WordPressで、
LP制作を始めるための
完全版教科書。

「WordPressって聞いたことあるけど、LPって何？どこから始めればいい？」── そんな完全初心者が、プロが実際に行っている制作フローの全体像を頭に入れ、生成AIの力を借りながらプロ品質のLPを構築できるようになるための、唯一無二の入門書。

12章構成

04言語の理解

70%時間削減

zero-lp.php

<?php
/**
 * Template Name: 汎用LP
 */
get_header(); ?>

<section class="hero">
  <h1>あなたのコピー</h1>
</section>

zero-lp.css

.hero {
  background: linear-gradient(
    135deg,
    #1B3A6B,
    #2E6BA8
  );
  min-height: 100vh;
}

zero-lp.js

const obs = new IntersectionObserver(...);
// scroll fade-in 🌅

Preface ── はじめに

全体像という名の地図を、
最初に手渡したい。

「全体像が見えていない状態でコードを書き始める」── これこそが、初心者がLP制作で挫折する最大の原因です。この教材では何より先に、あなたの手の中に 「地図」を置きます。今どこを歩いていて、次にどこへ向かうのか。それが分かっているだけで、学びの速度と深さは見違えるほど変わります。

01 · 仕組み

WordPress上でLPが公開される仕組みの全体像

サーバー、本体、テーマ、固定ページ ── 4層の構造を一枚の地図として理解する。

02 · 構造

テーマ・子テーマ・テンプレートの関係性

なぜ親テーマを直接編集してはいけないのか。設計思想からきちんと腹落ちさせる。

03 · 言語

PHP・CSS・JavaScriptの役割

「お皿・盛り付け・演出」という比喩で、それぞれの責任範囲を直感的に把握する。

04 · 生成AI

プロ品質のコードを生成AIで生み出す技法

BEM、セマンティック、レスポンシブ ── 指示文に盛り込むべき「プロの語彙」。

05 · 画像

AI画像をWordPressに美しく設置する方法

DALL-E、Midjourney等で生成した素材を、固定URLとして配置するまでの一連の作法。

06 · 公開

LPが世に放たれるまでの全ステップ

フォルダ作成から公開ボタンを押す瞬間まで。「あと一歩」でつまずかない地図を持つ。

Table of Contents ── 全12章の構成

この一冊を読み終えたとき、
あなたの中に制作の地図がある。

LPの定義

LP（Landing Page／ランディングページ）とは、訪問者に対して「1つの目的」だけを達成させるために設計されたWebページです。総合案内のための器ではなく、ひとつのゴールへと読者をやさしく導く「一本道」。それがLPの本質です。

種類	達成したいゴール
採用LP	求職者に応募させる
商品販売LP	商品を購入させる
セミナー申込LP	セミナーに登録させる
資料請求LP	資料を請求させる
サービス案内LP	問い合わせさせる

通常のホームページと、LPの違い

同じWebページでも、ホームページとLPは設計思想がまったく異なります。ホームページは「いろいろなページへの入口」、LPは「1つのゴールに向けて読者を誘導する一本道」。LPにメニューバーや余計なリンクをほとんど設置しないのは、そのためです。

Homepage

総合案内型 ── 入口の集積

トップ／会社案内／サービス／ブログ／問合せ
訪問者の興味の幅が広く、目的が定まっていない
メニューバーや内部リンクが多数存在する
「探す」「比較する」ための器

Landing Page

一点集中型 ── 一本道の体験

採用応募／購入／申込 ── 目的がただ1つ
訪問者の動線がゴールへと収束する
メニューバーや脱線リンクは原則排除する
「決断させる」ための器

なぜLPをWordPressで作るのか？

LPはHTMLファイル単体でも作れます。それでもWordPressを選ぶ理由は、運用と拡張の合理性にあります。複数LPの一元管理、フォームやSEOプラグインの活用、非エンジニアによる更新、サーバー管理の一本化 ── 制作したあとの「育てる」フェーズを見据えたとき、WordPressの選択は極めて合理的なのです。

WordPressの正体

WordPressは CMS（Content Management System）、日本語で「コンテンツ管理システム」と呼ばれる仕組みです。要するに、プログラミングの深い知識がなくても、WebサイトやLPを作って公開・管理できる土台です。世界中のWebサイトの約半数がWordPressで動いている ── その事実が、この仕組みの強さを物語っています。

An Analogy ── 家づくりに例えて

House Building

家づくり

土地 → 骨組み → 内装・外装 → 家具・装飾。一つひとつの工程が積み重なって、ひとつの住まいができあがる。

WordPress LP

LP制作

サーバー → WordPress本体 → テーマ → コンテンツ。家づくりとそっくりな「4層の構造」がそこにある。

【家づくり】           【WordPress LP制作】

  土地                    サーバー
   ↓                        ↓
  家の骨組み             WordPress本体
   ↓                        ↓
  内装・外装             テーマ（Cocoon等）
   ↓                        ↓
  部屋の家具・装飾       コンテンツ（LP本文）

WordPressとは何か？── サーバー・本体・テーマ・コンテンツの4層構造を示す全体構造理解図 — WordPress の全体構造 ── 4層理解図

サーバー ── 土地を借りる

サーバーとは、Webサイトのデータを保管してインターネットに公開するためのコンピューターです。土地を借りるように、月額料金を払って「場所」を借ります。代表的なレンタルサーバーには、エックスサーバー（国内シェアNo.1）、ConoHa WING（表示速度に定評）、さくらのレンタルサーバー（コスパ重視の老舗）があります。

WordPress本体 ── 家の骨組み

WordPressをインストールすると、管理画面（ダッシュボード）が使えるようになります。固定ページの作成、ブログ投稿、メニュー設定、プラグイン追加、テーマ変更 ── すべての操作がここから始まります。ただし、この時点ではまだ「骨組みだけの家」。デザインを与える次の工程が、テーマです。

テーマはWebサイトのデザインテンプレート

テーマとは、WordPressに見た目を与えるデザインのパッケージです。同じWordPressでも、テーマを変えるだけで雰囲気がまったく異なるサイトに変貌します。WordPress本体が「家の骨組み・構造体」だとすれば、テーマは「壁紙・床材・外壁・内装デザイン」そのもの。テーマを適用するだけで、プロが作ったような見栄えのサイトが即座に完成します。

本教材で使うテーマ：Cocoon

本教材では Cocoon（コクーン） を使用します。完全無料・商用利用可、日本人開発者による日本語サポート、高いカスタマイズ性、LP制作に必要な機能の網羅 ── 国内WordPressユーザーの中で圧倒的人気を誇る、まさに王道の選択肢です。

Reason 01

完全無料・商用利用も可

学習用途から本格的なクライアントワークまで、安心して採用できる。

Reason 02

日本語サポートの充実

日本人開発者によるテーマ。ドキュメント、コミュニティすべて日本語。

Reason 03

圧倒的なカスタマイズ性

LP制作で必要となる機能と拡張性が、最初から揃っている。

親テーマを直接編集してはいけない理由

ここはこの教材で最も重要なポイントのひとつです。Cocoon（親テーマ）はセキュリティ修正・新機能追加・不具合修正のため、定期的にアップデートされます。もし親テーマのファイルを直接編集していた場合、アップデートによってその編集内容がすべて上書き・消去されてしまいます。

NG · 親テーマ直接編集

編集内容がいつか消える運命

Cocoon親テーマを直接書き換える
Cocoonがアップデートされる
編集した内容がまるごと上書きされる
気付いた頃には、すべて消えている

OK · 子テーマを使う

編集が永続的に保護される

Cocoon親テーマはそのままアップデート対応
Cocoon Child（子テーマ）に自分の編集を保存
親テーマがアップデートされても消えない
自作のLPコードは安全に保持される

子テーマの正体 ── 機能を継承する別ファイル

子テーマとは、親テーマの機能を引き継ぎながら、自分のカスタマイズだけを別ファイルで管理する仕組みです。車に例えるなら、親テーマは「メーカーの純正車」、子テーマは「自分専用のカスタムパーツ」。メーカーが車のファームウェアを更新しても、自分で取り付けたカスタムパーツは消えません。これとまったく同じ思想です。

An Analogy ── 車のカスタムパーツに例えて

Parent Theme

親テーマ

メーカーが提供する純正車。メーカーが定期的にアップデート（ファームウェア更新）する。

Child Theme

子テーマ

自分専用のカスタムパーツ。メーカーが車を更新しても、自分のパーツは絶対に消えない。

子テーマの基本構造

Cocoon Child（子テーマ）の基本ファイル構成は次のとおりです。style.css が子テーマであることを宣言し、functions.php がWordPressへの指示書として機能します。LP用のファイルは、lp/ フォルダの中に整理して配置するのが定石です。

cocoon-child-master/
├── style.css          ← 子テーマであることを宣言するファイル
├── functions.php      ← WordPressへの指示書（後述）
└── lp/                ← LPファイルを格納するフォルダ（自分で作成）
    └── zero-lp/       ← 新規LP用テンプレートフォルダ
        ├── zero-lp.php
        ├── zero-lp.css
        └── zero-lp.js

なぜ子テーマが必要なのか？── 親テーマと子テーマの継承関係を示すCocoon理解図 — 親テーマと子テーマの継承関係 ── Cocoon理解図

WordPressの「固定ページ」を使う

WordPressには主に2種類のコンテンツがあります。投稿（post）と固定ページ（page）。LPは必ず後者、固定ページで作ります。LPは「採用LP」や「商品LP」のように独立した目的を持ち、時系列で並ぶブログ記事ではなく、恒久的に存在する独立したページだからです。

種類	用途	該当する例
投稿（post）	時系列で並ぶコンテンツ	ブログ記事、お知らせ、ニュース
固定ページ（page）	独立したページ	会社概要、採用LP、サービスLP

テンプレート＝LPの設計図

LP制作では「テンプレート」という仕組みを使います。テンプレートとは、WordPressの固定ページに適用できる、LP専用のデザインと構成を持ったファイルのことです。採用LPを例にとれば、ヒーローセクション、会社紹介、職種一覧、福利厚生、社員の声、募集要項、応募フォーム ── 必要なセクションは毎回ある程度決まっています。毎回ゼロから作るのは非効率なので、テンプレートファイルを1つ作って複製・再利用するのが定石です。

テンプレートの仕組み ── 技術的な作法

PHPファイルの先頭に以下のコメントを書くことで、WordPressがそのファイルを「テンプレート」として認識します。たったこれだけの宣言で、固定ページの編集画面でテンプレートとして選択できるようになるのです。

<?php
/**
 * Template Name: 汎用LP
 */

採用LP テンプレートの構成例

① ヒーローセクション（キャッチコピー＋背景画像）
② 会社・仕事の紹介
③ 仕事内容・職種一覧
④ 働く環境・福利厚生
⑤ 先輩社員の声
⑥ 募集要項
⑦ 応募フォーム

LP制作の仕組み ── 固定ページとPHPテンプレートの関係を示すテンプレート理解図 — テンプレートとは ── LP設計図の理解図

LP制作で登場する3つの言語の役割を、料理に例えて整理します。PHPは「お皿」、CSSは「盛り付け」、JavaScriptは「演出」。この比喩を頭に入れておくと、どの言語にどの仕事を任せればいいかが直感的に分かるようになります。

PHP

お皿（ページの骨格）

構造を組み立てる役割

ページ全体のHTML構造
WordPressのヘッダー・フッター読込
各セクション（見出し・本文・画像・ボタン）の配置
サーバーサイドで動的にHTMLを生成

CSS

盛り付け（色・形・配置）

見た目を整える役割

文字の色・サイズ・フォント
背景色・背景画像
余白・配置・レイアウト
レスポンシブ対応（PC/SP表示）
ホバー時の色変化アニメーション

演出（動き・反応）

動きを与える役割

スライダー（画像の自動切替）
スクロールアニメーション
アコーディオン（FAQの開閉）
モーダルウィンドウ
フォームのバリデーション

functions.php は、WordPressに対してさまざまな命令を出すための司令塔ファイルです。子テーマのフォルダ直下に置き、「このCSSを読み込んで」「このJSを読み込んで」「このLPのページだけで読み込んで」といった、ピンポイントな指示を出すのが主な役割です。

functions.php
     ↓
WordPressへ命令
     ↓
「このCSS（zero-lp.css）を読み込んで」
「このJS（zero-lp.js）を読み込んで」
「このLPのページだけで読み込んで」（条件付き読み込み）

functions.phpの基本的な書き方

LP用のCSSとJavaScriptを読み込む、基本的な記述例です。ポイントは is_page_template() を使って、「このテンプレートが適用されたページだけ」にCSS・JSを読み込むこと。他ページへの影響を防ぐ、プロの基本作法です。

<?php
function zero_lp_enqueue_assets() {
    // zero-lpテンプレートが適用されているページのみ読み込む
    if ( is_page_template( 'lp/zero-lp/zero-lp.php' ) ) {
        wp_enqueue_style(
            'zero-lp-style',
            get_stylesheet_directory_uri() . '/lp/zero-lp/zero-lp.css',
            array(),
            '1.0.0'
        );
        wp_enqueue_script(
            'zero-lp-script',
            get_stylesheet_directory_uri() . '/lp/zero-lp/zero-lp.js',
            array(),
            '1.0.0',
            true
        );
    }
}
add_action( 'wp_enqueue_scripts', 'zero_lp_enqueue_assets' );

ここからが、本教材の最大の目玉です。LP制作で書くPHP・CSS・JavaScriptのコードは、生成AIで生成できます。コーディングの知識がなくても、適切なプロンプト（指示文）を書けば、プロ品質のコードが手に入ります。

9-1 · zero-lp.phpを生成AIで作る

zero-lp.php はLP全体のHTML骨格ファイル。セクション構成、命名規則、コメント言語まで指定することで、AIから一発でプロ品質のコードを引き出します。

以下の条件でWordPressのLPテンプレートファイル（PHP）を作成してください。

【条件】
・ファイル名：zero-lp.php
・Template Name：汎用LP
・WordPressの get_header() と get_footer() を使用
・以下のセクション構成でHTMLを作成してください

【セクション構成】
1. ヒーローセクション（背景画像、大見出し h1、サブコピー p、CTAボタン）
2. 特徴セクション（h2、3カラムのカード型レイアウト）
3. 実績・数字セクション（h2、3つの実績数値）
4. お客様の声セクション（h2、3件のカードレイアウト）
5. よくある質問（h2、アコーディオン形式 5件）
6. CTAセクション（h2、キャッチコピー、申込ボタン）
7. フッター（著作権表記）

【その他の要件】
・各セクションにはセマンティックなHTMLタグ（section, article, header等）を使用
・クラス名はBEM命名規則（.hero__title, .hero__button 等）で統一
・プレースホルダーテキストは日本語で入れてください
・CSSはインラインでは書かず、外部ファイルを想定した構造にしてください
・JavaScriptはインラインでは書かないでください
・コードの各セクションにコメントを日本語で入れてください

プロが押さえる4つの語彙

「BEM命名規則」を指定すると、CSSと整合性の取れたクラス名が生成される
「セマンティックHTMLタグを使用」と指定すると、SEO的に適切な構造になる
「コメントを日本語で入れる」と指定すると、後から読み返したときに分かりやすい
生成されたコードは必ず目視確認し、セクション構成が意図通りかチェックする

9-2 · zero-lp.cssを生成AIで作る

カラーパレット、フォント、ブレークポイント ── 視覚言語をすべて言葉で渡せば、AIは統一感のあるデザインCSSを返してくれます。

以下の条件でWordPress LP用のCSSファイルを作成してください。

【前提条件】
・ファイル名：zero-lp.css
・対応するPHPテンプレートのクラス名はBEM規則（例：.hero__title, .features__card）
・PCとスマートフォン両対応（レスポンシブ対応必須）
・スマートフォンのブレークポイントは768px以下

【デザイン仕様】
・カラーパレット：
  メインカラー #1A56DB（青）
  アクセントカラー #F05252（赤）
  テキストカラー #111827（ほぼ黒）
  背景色 #F9FAFB（薄いグレー）
  白 #FFFFFF

・フォント：
  見出し：'Noto Sans JP', sans-serif、太字（700）
  本文：'Noto Sans JP', sans-serif、標準（400）

・各セクションの要件：
  ヒーローセクション：画面高さ100vh、背景画像あり（オーバーレイ半透明）、中央揃え
  特徴セクション：3カラム（PC）→ 1カラム（SP）
  お客様の声セクション：カード型、角丸、ドロップシャドウ
  FAQ：アコーディオン形式
  CTAセクション：メインカラーの背景、白文字

【その他の要件】
・アニメーション：スクロールで要素がフェードインするためのクラス（.fade-in, .fade-in.visible）を定義
・CSSカスタムプロパティ（変数）を使ってカラーを管理
・コメントをセクションごとに日本語で入れてください
・リセットCSSは含めず、スタイルはLPのクラスに限定してください（他ページへの影響防止）

プロが押さえる4つの語彙

カラーコードを具体的に指定すると、統一感のあるデザインが生成される
「CSSカスタムプロパティで管理」と指定すると、後からカラーを一括変更しやすくなる
「他ページへの影響防止」と明記すると、クラスが適切にスコープされる
ブレークポイントを明示することで、レスポンシブ対応が正確になる

9-3 · zero-lp.jsを生成AIで作る

機能を番号で列挙し、必要な技術（IntersectionObserver等）を明示することで、堅牢で性能の良いJavaScriptが手に入ります。

以下の条件でWordPress LP用のJavaScriptファイルを作成してください。

【前提条件】
・ファイル名：zero-lp.js
・厳格モード（'use strict'）で記述
・DOMContentLoadedイベントで処理を開始

【実装する機能】
1. スクロールフェードインアニメーション
   ・.fade-in クラスを持つ要素がビューポートに入ったとき .visible クラスを追加
   ・IntersectionObserverを使用

2. FAQアコーディオン
   ・.faq__question をクリックすると .faq__answer の開閉をトグル
   ・最初は全て閉じた状態
   ・開いている項目は .is-open クラスが付与される

3. スムーススクロール
   ・href="#〇〇" の形式のアンカーリンクをクリック時にスムーズスクロール
   ・ヘッダーの高さ分（80px）をオフセット

4. CTAボタンのクリックアニメーション
   ・.cta__button にクリック時 .is-clicked クラスを追加し、0.3秒後に削除

【その他の要件】
・コードにセクションごとに日本語コメントを入れてください
・エラーが起きてもページが壊れないようtry-catchで囲んでください
・Vanilla JSで統一してください

プロが押さえる4つの語彙

機能を番号で列挙すると、漏れなく実装される
「try-catchで囲む」と指定すると、堅牢なコードになる
「Vanilla JSで統一」と指定すると、jQuery依存を最小限にできる
IntersectionObserver を指定すると、パフォーマンスの良いスクロール検知が実装される

9-4 · functions.phpの追記コードを生成AIで作る

新しいLPテンプレートを追加するたび、functions.phpへの追記が必要です。これも生成AIに任せられます。重要なのは「既存のfunctions.phpの内容を壊さないよう追記専用コードとして出力」と明示すること。

WordPressのfunctions.phpに追記するコードを作成してください。

【前提条件】
・Cocoonの子テーマ（cocoon-child）のfunctions.phpに追記する
・子テーマのディレクトリ取得には get_stylesheet_directory_uri() を使用

【追記したい機能】
zero-lp というLPテンプレートのCSS・JavaScriptを読み込む処理を追加したい。

【ファイルの場所】
・テンプレートPHP：lp/zero-lp/zero-lp.php（子テーマフォルダ直下からの相対パス）
・CSS：lp/zero-lp/zero-lp.css
・JavaScript：lp/zero-lp/zero-lp.js

【要件】
・zero-lp.php テンプレートが適用されたページでのみ読み込むこと（is_page_template を使用）
・CSSのバージョン番号は '1.0.0' にすること
・JavaScriptはフッターで読み込むこと
・関数名は zero_lp_enqueue_assets() にすること
・既存のfunctions.phpの内容を壊さないよう、追記専用のコードとして出力すること
・コードには日本語コメントを入れてください

LPには複数の画像が必要です。ヒーロー、アイコン、人物写真、現場写真、装飾背景 ── これらすべてを生成AIで作ることができます。素材サイトを探し回り、ライセンスを気にする時代は、終わりつつあります。

画像の種類	使用箇所	例
ヒーロー画像	LPの最上部の背景	工場・オフィス・現場の写真
アイコン画像	特徴・メリットのカード	家・時計・お金のアイコン
人物写真	お客様の声・スタッフ紹介	笑顔のスタッフ写真
会社・現場写真	実績・安心感の訴求	施工現場・事務所
装飾・背景	セクションの背景	グラデーション・テクスチャ

画像生成AIの主要ツール

ツール	特徴	料金
DALL-E 3（ChatGPT）	ChatGPT Plus内で使える。日本語プロンプトOK	月額$20
Midjourney	高品質・高リアリティ。英語プロンプト推奨	月額$10〜
Adobe Firefly	著作権フリーの素材で学習。商用利用安心	Adobe CCに含む
Stable Diffusion	無料・ローカル動作可能。高いカスタマイズ性	無料（自己環境）
Canva AI	デザインツール内で画像生成。初心者向け	無料プランあり

ヒーロー画像のプロンプト例（建設業採用LP）

建設現場で働くプロフェッショナルな日本人男性作業員のチームの写真。
ヘルメットと安全ベストを着用し、前向きで活気のある表情。
画面横長（16:9の比率）、広角撮影のイメージ。
自然光が入る明るい青空の屋外環境。
写真の上にテキストをオーバーレイするため、画面左半分はやや暗く落ち着いたトーンで。
プロフェッショナル感・信頼感・躍動感のある構図。
写真リアリスティックスタイル。

ヒーロー画像のプロンプト例（IT企業採用LP）

モダンなオフィスで笑顔で働く若い日本人エンジニアチームの写真。
ノートパソコン・モニターが並ぶ明るく開放的なオフィス環境。
横長（16:9）、自然光が入るクリーンなオフィス空間。
テキストオーバーレイのため、画面左側は落ち着いたトーンを確保。
前向きで協力的な雰囲気。プロフェッショナルな写真リアリスティックスタイル。

特徴カード用アイコン3点セット

シンプルなフラットデザインのアイコン3点セットを作成してください。

アイコン1：住宅（家）のアイコン
アイコン2：時計（スピード・納期）のアイコン
アイコン3：盾（安心・保証）のアイコン

スタイル：フラットデザイン、線の太さ均一、塗りつぶし色は青（#1A56DB）
背景：透明（PNG用途のため白い背景のみの場合は白）
サイズ感：正方形フォーマット、余白あり
モダン・シンプル・クリーンなデザイン

生成した画像をWordPressに設置する4ステップ

画像をダウンロードする

生成AIから出力された画像をパソコンに保存します。後の管理を考えて、ファイル名は分かりやすく付け直しましょう（例：hero-image.jpg、feature-icon-01.png）。

WordPressのメディアにアップロード

ダッシュボード → 左メニュー「メディア」→「新規追加」→ ファイルをドラッグ＆ドロップ。アップロード完了後、「ファイルのURL」をコピーします。これが次のステップで使う鍵です。

PHPファイル内にURLを埋め込む

コピーしたURLを zero-lp.php の該当箇所に貼り付けます。背景画像は style="background-image: url(...)"、img要素は src 属性に設定します。

CSSで背景画像を整える

background-size: cover、background-position: center、半透明オーバーレイなどでヒーローを仕上げます。これでテキストの可読性が一気に上がります。

<!-- ヒーローセクション -->
<section class="hero" style="background-image: url('https://example.com/wp-content/uploads/2024/01/hero-image.jpg');">
    <div class="hero__inner">
        <h1 class="hero__title">あなたのキャッチコピー</h1>
        <p class="hero__sub">サブコピーテキスト</p>
        <a href="#contact" class="hero__button">今すぐ応募する</a>
    </div>
</section>

/* ヒーローセクション */
.hero {
    background-size: cover;      /* 画像を画面いっぱいに広げる */
    background-position: center; /* 画像の中央を表示 */
    background-repeat: no-repeat;/* 繰り返しを防ぐ */
    position: relative;
}

/* 画像の上に半透明の暗いオーバーレイを重ねてテキストを読みやすくする */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

get_post_meta を使った動的画像取得

URLをハードコーディングする代わりに、WordPressの標準関数を使って画像を動的に取得することもできます。管理画面から非エンジニアのクライアントが画像を差し替えられるようにしたい場合に有効です。

<?php
// 標準 post_meta で管理画面から画像URLを設定できる例
$hero_image_url = get_post_meta( get_the_ID(), 'hero_image_url', true );
$hero_image_url = $hero_image_url ?: get_stylesheet_directory_uri() . '/wordpress-lp-complete-codex/images/default-hero.jpg';
?>

<section class="hero" style="background-image: url('<?php echo esc_url( $hero_image_url ); ?>');">

ここまで学んできた全要素を、「準備 → LP制作 → 画像設置 → 公開」の4フェーズに整理します。この順番で進めれば、迷うことはありません。

【準備】
  サーバー契約
       ↓
  WordPress インストール
       ↓
  Cocoon（親テーマ）インストール
       ↓
  Cocoon Child（子テーマ）インストール・有効化

【LP制作】
  子テーマフォルダに lp/zero-lp/ フォルダを作成
       ↓
  生成AIで zero-lp.php を生成・設置
       ↓
  生成AIで zero-lp.css を生成・設置
       ↓
  生成AIで zero-lp.js を生成・設置
       ↓
  生成AIで functions.php の追記コードを生成
       ↓
  functions.php に追記コードを貼り付け

【画像設置】
  生成AIで必要な画像を生成・ダウンロード
       ↓
  WordPress メディアへアップロード
       ↓
  画像URLをコピー
       ↓
  zero-lp.php の該当箇所に URL を埋め込む

【公開】
  WordPress 管理画面 → 固定ページ → 新規追加
       ↓
  ページタイトルを入力（例：「採用LP」）
       ↓
  右サイドバー「テンプレート」→「汎用LP（zero-lp）」を選択
       ↓
  「公開」ボタンをクリック
       ↓
  公開URLを確認して動作チェック

WordPressでLPを公開する流れ ── 準備から公開までの実務フローを示す図 — 準備から公開まで ── LP実務フロー図

公開後のチェックリスト

7つの確認項目

PC表示で全セクションが正しく表示されているか
スマートフォン表示（デベロッパーツール）でレイアウトが崩れていないか
CTAボタンのリンク先が正しいか
お問い合わせフォームが機能するか
画像が正しく表示されているか（404エラーになっていないか）
JavaScriptのアコーディオン・スクロールアニメーションが動作するか
ページの読み込み速度は問題ないか（Google PageSpeed Insightsで確認）

Chapter Twelve · Business Perspective

ビジネスとしてのLP制作。
生成AIが、時間革命を起こす。

従来15〜28時間かかっていたLP制作が、生成AI活用で4〜8時間に。
その差分こそが、現代のLP制作プロが手にした「新しい余白」です。

5万〜15万円

シンプルな1ページLP
（3〜5セクション）

15万〜30万円

標準的な採用・商品LP
（7〜10セクション）

30万〜60万円

高品質・多機能LP
（アニメーション豊富）

2万〜5万/月

LP制作＋運用保守
（月額契約）

Time Revolution ── 制作時間の劇的変化

約 60〜70% の時間削減

従来のLP制作時間

PHP（骨格）の作成3〜5h
CSS（デザイン）の作成8〜15h
JavaScript（動き）の作成3〜6h
functions.php の修正1〜2h
合計15〜28h

生成AI活用後

プロンプト作成・コード生成1〜2h
コードの確認・微調整2〜4h
画像生成・設置1〜2h
　　
合計4〜8h

Manifesto ── 本質的な定義

LP制作とは、WordPressという仕組みの上に、
PHP・CSS・JavaScriptを組み合わせ、
生成AIの力を活用しながら、
1ページ完結型の成果創出ページを
効率よく構築するビジネスである。

A Complete Codex · 2024

WordPress LP制作の全体像 ── サーバーからテンプレート・生成AIまでの最終統合理解図 — WordPress LP制作の全体像 ── 最終統合理解図

Final Words ── 本教材で得たもの

LP制作の全体像 → テーマ・子テーマの仕組み → PHP/CSS/JSの役割 → 生成AIによるコード生成 → 画像生成とWordPressへの設置 → LP公開の全フロー。この流れが頭に入れば、「今自分はどこの作業をしているのか」が常に把握でき、制作スピードと品質が飛躍的に向上します。

コードをゼロから書ける必要はありません。全体構造を理解し、生成AIを正しく使いこなす力こそが、現代のLP制作プロに求められるスキルなのです。

お問い合わせ

無料レポートNo. TP0000

WordPressで、 LP制作を始めるための 完全版教科書。

全体像という名の地図を、 最初に手渡したい。

WordPress上でLPが公開される仕組みの全体像

テーマ・子テーマ・テンプレートの関係性

PHP・CSS・JavaScriptの役割

プロ品質のコードを生成AIで生み出す技法

AI画像をWordPressに美しく設置する方法

LPが世に放たれるまでの全ステップ

この一冊を読み終えたとき、あなたの中に制作の地図がある。

LPの定義

通常のホームページと、LPの違い

なぜLPをWordPressで作るのか？

WordPressの正体

サーバー ── 土地を借りる

WordPress本体 ── 家の骨組み

テーマはWebサイトのデザインテンプレート

本教材で使うテーマ：Cocoon

完全無料・商用利用も可

日本語サポートの充実

圧倒的なカスタマイズ性

親テーマを直接編集してはいけない理由

子テーマの正体 ── 機能を継承する別ファイル

子テーマの基本構造

WordPressの「固定ページ」を使う

テンプレート＝LPの設計図

テンプレートの仕組み ── 技術的な作法

構造を組み立てる役割

見た目を整える役割

動きを与える役割

functions.phpの基本的な書き方

9-1 · zero-lp.phpを生成AIで作る

9-2 · zero-lp.cssを生成AIで作る

9-3 · zero-lp.jsを生成AIで作る

9-4 · functions.phpの追記コードを生成AIで作る

画像生成AIの主要ツール

ヒーロー画像のプロンプト例（建設業 採用LP）

ヒーロー画像のプロンプト例（IT企業 採用LP）

特徴カード用アイコン3点セット

生成した画像をWordPressに設置する4ステップ

画像をダウンロードする

WordPressのメディアにアップロード

PHPファイル内にURLを埋め込む

CSSで背景画像を整える

get_post_meta を使った動的画像取得

公開後のチェックリスト

ビジネスとしてのLP制作。 生成AIが、時間革命を起こす。

約 60〜70% の時間削減

従来のLP制作時間

生成AI活用後

WordPressで、
LP制作を始めるための
完全版教科書。

全体像という名の地図を、
最初に手渡したい。

この一冊を読み終えたとき、
あなたの中に制作の地図がある。

ヒーロー画像のプロンプト例（建設業採用LP）

ヒーロー画像のプロンプト例（IT企業採用LP）

ビジネスとしてのLP制作。
生成AIが、時間革命を起こす。