9/7まで 最大30%OFF 初心者編|無料コーディング教材|HTML・CSS・jQueryを実践で学ぶ

WordPressでLPを作る方法|固定ページとブロックでの作り方を初心者向けに解説

WordPressの固定ページとブロックでLPを作る方法を紹介するアイキャッチ

WordPressでLPを作りたいと思っても、「固定ページと投稿のどちらで作るの?」「テーマやプラグインを追加しないと作れない?」と迷いますよね。

初めて作るなら、WordPressの固定ページを使い、標準のブロックエディターでファーストビュー、メリット、実績、申込みボタン、よくある質問を順番に配置する方法が分かりやすいです。

この記事では、サンプルLPを実際にローカルWordPressで作りながら、構成の決め方、ブロックの配置、パソコン・スマートフォン表示の整え方、公開前の確認まで初心者向けに解説します。

結論:固定ページと標準ブロックから始めよう

WordPressでLPを1枚作るなら、まずは「固定ページ → 新規固定ページを追加」から作成します。固定ページは時系列の一覧に並べる記事ではなく、独立した案内ページに向いているためです。

特別なページビルダープラグインがなくても、グループ、カラム、見出し、画像、ボタン、詳細ブロックを組み合わせれば、基本的なLPを作れます。

WordPress公式ドキュメントでも、固定ページは時系列に依存しない内容に使用でき、ブロックエディターでさまざまなレイアウトを作れると説明されています。操作の基本はCreate pagesWordPress Block Editorで確認できます。

WordPressで作るLPとは

LPはランディングページの略で、広告や検索結果、SNSなどから訪れた人に、申込み・購入・資料請求といった特定の行動を案内するページです。

広い意味では「最初に着地したページ」全般を指しますが、Web制作では1つの目的へ導く縦長ページという意味で使われることが多くあります。

ページ主な目的よくある導線
LP1つの申込みや購入へ案内する同じ申込みボタンを要所に置く
トップページサイト全体を案内するサービス、会社情報、記事などへ分岐する
ブログ記事疑問を解決し、関連情報を伝える関連記事やサービスページへ案内する

LPではリンクを一切置かないという意味ではありません。プライバシーポリシーや運営者情報など、信頼や法令対応に必要なリンクは残しつつ、主要な行動を増やしすぎないことが大切です。

WordPressでLPを作る4つの方法

LPの作り方は、必要な自由度と運用する人のスキルで選びます。「有料なら必ず成果が出る」「特定のテーマならSEOに有利」とは限りません。

方法向いている人特徴
標準ブロックまず1枚作って試したい人追加費用なしで始めやすく、WordPress標準の操作で更新できる
ブロックパターンレイアウトを短時間で組みたい人複数ブロックの組み合わせを挿入し、文章や色を変更できる
ページビルダードラッグ操作で細かく整えたい人機能は多いが、学習・表示速度・ほかの機能との相性確認が必要
専用テンプレートを自作デザインと動作を細かく管理したい人自由度は高いが、HTML・CSS・PHPや保守の知識が必要

この記事では、テーマやプラグインが変わっても応用しやすい標準ブロックを使います。デザイン済みの組み合わせを使いたい場合は、ブロック追加画面の「パターン」も便利です。

ブロックパターンは、ページへ挿入したあとに自分の文章や画像へ変更できます。公式の使い方はBlock Patternsで確認できます。

LPを作る前に決めること

いきなりブロックを並べると、説明が増えすぎたり、申込みボタンの内容が途中で変わったりします。編集画面を開く前に、次の4点をメモしておきましょう。

  1. 誰に:どのような悩みを持つ人へ届けるか
  2. 何を:商品やサービスで何ができるようになるか
  3. なぜ信頼できるか:実績、事例、運営者情報、利用者の声など
  4. 何をしてほしいか:購入、予約、問い合わせ、資料請求など1つの主要行動

サンプルでは「Web制作を学び始めたい人」に向けて、「無料相談を予約する」ことを主要な行動にします。

LPの基本構成を決める

LPは、読者が知りたい順番に内容を並べます。絶対に同じ構成にする必要はありませんが、初めてなら次の流れから考えると整理しやすくなります。

ファーストビューから申込みボタンとよくある質問までのLP構成図
  • ファーストビュー:誰向けで、何が得られるのかを最初の画面で伝える
  • 悩み・共感:読者が自分向けのページだと判断できる具体的な悩みを示す
  • メリット:機能の羅列ではなく、利用後にどう変わるかを説明する
  • 実績・信頼:事例、数字の根拠、運営者情報、利用者の声を示す
  • 申込み:ボタンの先で何が起きるのかを具体的に書く
  • よくある質問:申込み前の不安や条件を先回りして解消する

価格や返金条件、実績の数字、利用者の声は、確認できる事実だけを掲載してください。仮の数字や感想を本番LPへ残さないことが重要です。

固定ページを作成する

構成が決まったら、WordPress管理画面で「固定ページ → 新規固定ページを追加」を開きます。

  1. 内容を区別できる固定ページタイトルを入力する
  2. URLのスラッグを短い英数字にする
  3. 右側の設定で利用できるテンプレートを確認する
  4. 本文へグループブロックを追加する
  5. 下書き保存し、プレビューで確認しながら作る

テーマに「全幅」「ランディングページ」「ヘッダー・フッターなし」などのテンプレートが用意されている場合は、目的に合うものを選びます。表示名や選択肢はテーマによって異なります。

固定ページのブロックエディターでLPのファーストビューを編集している画面

上の画像は、実際に作成したサンプルLPを固定ページのブロックエディターで開いた状態です。左側に本文、右側に公開状態、スラッグ、テンプレートなどの固定ページ設定が表示されています。

ブロックを追加するたびに公開する必要はありません。「下書き保存」または「保存」を使い、プレビューで表示を確かめてから公開します。

ファーストビューを作る

ファーストビューは、ページを開いて最初に見える範囲です。今回はグループブロックの中に2列のカラムを置き、左へ文章とボタン、右へ画像を配置しました。

  1. グループブロックを追加し、背景色と上下の余白を設定する
  2. グループ内へカラムブロックを追加し、2列を選ぶ
  3. 左列へ対象者、見出し、短い説明、ボタンを置く
  4. 右列へ内容を補う画像を置き、代替テキストを設定する
  5. ボタンへフォームや申込み先のリンクを設定する

実際のパソコン表示は次のようになりました。対象者、得られる結果、行動の順で読めるようにし、主要なボタンは1つに絞っています。

パソコン幅で表示したWeb制作講座LPのファーストビュー

見出しは「最高のサービス」のような抽象表現ではなく、誰が何をできるようになるかを具体的に書きます。ボタンも「詳しくはこちら」ではなく、「無料相談を予約する」のように次の行動が分かる言葉にします。

悩み・メリット・信頼情報を追加する

ファーストビューの下へ、悩み、メリット、実績や利用者の声を順番に追加します。

悩みは読者の言葉で書く

「高機能な教材が必要」のような提供側の言葉ではなく、「何から学べばよいか分からない」「エラーが出ると止まってしまう」のように、読者が実際に感じる困りごとを書きます。

メリットは3つ程度に整理する

メリット欄はカラムブロックで3列にしました。見出しと説明の長さをそろえると、内容を比較しやすくなります。

パソコン幅で3つのメリットを横並びに表示したLP

列を増やしすぎると、1項目の幅が狭くなります。情報が多い場合は、3列を2段にするか、優先度の低い内容を別の見出しへ分けます。

信頼情報には出典や条件を添える

受講者数、満足度、売上などの数字を掲載する場合は、集計期間、対象人数、計算方法を確認できるようにします。利用者の声は本人の許可を取り、実在しない感想を作らないでください。

申込みボタンとよくある質問を作る

説明を読んだ直後に行動できるよう、ページ中ほどと下部へ同じ目的のボタンを置きます。ボタンの文言とリンク先は統一します。

  • ボタンの近くに料金や所要時間など判断材料を書く
  • 入力フォームへ移動するなら「無料相談を予約する」など結果を示す
  • ページ内リンクを使う場合は、ボタンを押して目的の位置へ移動できるか確認する
  • 外部予約サービスへ移動する場合は、公開後のURLでテストする

よくある質問は「詳細」ブロックを使うと、質問を押したときだけ回答を開けます。料金、キャンセル、利用条件、対応環境など、申込み前に確認したい内容を優先します。

問い合わせフォームをWordPress内に作る場合は、入力項目だけでなく通知メール、送信テスト、迷惑送信対策まで設定してください。

スマートフォン表示を整える

LPはパソコンだけでなく、スマートフォンで最初から最後まで確認します。カラムブロックは狭い画面で縦並びになりますが、文字量や余白まで自動で最適になるとは限りません。

スマートフォン幅で縦並びになったLPのファーストビュー

サンプルでは、文章、ボタン、画像の順で縦に並びました。見出しが不自然な位置で改行されていないか、ボタンの文字が1行で読めるか、画像が画面からはみ出していないかを確認します。

  • 本文は小さくしすぎず、行間を詰めすぎない
  • ボタンは指で押しやすい高さと間隔を確保する
  • 背景色と文字色に十分なコントラストを付ける
  • 装飾画像には空の代替テキスト、内容を伝える画像には具体的な代替テキストを設定する
  • 横並びの要素は、スマホで縦並びになった順番も確認する

ヘッダーとフッターをどうするか決める

LPでヘッダーやフッターを非表示にするかは、目的と必要な情報で決めます。申込みへの集中を優先してナビゲーションを減らす場合でも、運営者情報、プライバシーポリシー、問い合わせ先など必要な情報へたどり着ける状態は保ちます。

テーマに専用テンプレートがない場合は、無理にPHPを編集せず、まず通常の固定ページで内容を完成させてください。テンプレートを自作する段階になったら、次の記事で固定ページテンプレートの仕組みを確認できます。

公開前に確認するチェックリスト

編集画面だけでは、実際のリンクやフォーム送信まで確認できません。公開前はプレビュー、公開後は本番URLで次の項目を確認します。

  • ページの目的と申込みボタンの文言が途中で変わっていない
  • 見出しがH1からH2、H3の順で整理され、H1が複数になっていない
  • 料金、期間、実績、注意事項が正しく、古い情報が残っていない
  • すべてのボタンとテキストリンクが正しいURLへ移動する
  • 問い合わせや申込みを実際に送信し、利用者側と管理者側の通知を確認した
  • パソコンとスマートフォンで横にはみ出す要素がない
  • 画像がぼやけず、必要以上に大きなファイルになっていない
  • キーボード操作でボタンやフォームへ移動できる
  • プライバシーポリシーなど必要なページへ移動できる
  • 計測を行う場合は、公開URLでイベントが記録される

公開後も、ボタンが押された回数だけで判断せず、ページへの訪問数、フォーム到達、送信完了、途中離脱を分けて確認すると改善点を見つけやすくなります。

WordPressのLPでよくある失敗

目的の違うボタンを増やしすぎる

購入、問い合わせ、SNS、ブログ記事などを同じ強さで並べると、どれを選べばよいか分かりにくくなります。主要なボタンを1種類決め、補助リンクは見た目の強さを下げます。

見た目から作り始める

先に色やアニメーションを決めると、誰に何を伝えるページなのかが曖昧になりがちです。対象者、悩み、提供価値、根拠、行動の順に文章を整理してから装飾します。

スマホでは文字と余白が大きすぎる

パソコン向けに大きくした見出しや余白が、そのままスマホへ適用される場合があります。テーマのレスポンシブ設定を使い、実機または開発者ツールで狭い幅を確認します。

画像が重く表示に時間がかかる

画面幅を大きく超える画像をそのまま掲載すると、読み込みに時間がかかります。表示に必要な大きさへ縮小し、JPEGやWebPなど内容に合う形式で圧縮します。

編集した瞬間に本番を壊してしまう

公開中のLPを直接大きく変更すると、作業途中の状態が見えることがあります。下書きページやローカル環境で作り、リンクとフォームまで確認してから本番へ反映します。

まとめ

WordPressでLPを作るときは、固定ページと標準ブロックから始めると、追加ツールに依存せず構成と操作を理解できます。

  • 対象者と主要な行動を1つ決める
  • ファーストビュー、悩み、メリット、信頼、申込み、よくある質問の順に整理する
  • グループ、カラム、画像、ボタン、詳細ブロックを組み合わせる
  • パソコンとスマホで文字、余白、並び順を確認する
  • 公開後のURLでリンクとフォームを実際に試す

まずは下書きの固定ページを1枚作り、ファーストビューと申込みボタンだけを配置してみましょう。目的がはっきりすれば、その間に必要な説明も決めやすくなります。