# ランディングページ 作り方 WordPress｜ビルダー不要の手順 URL: https://noonwp.com/ja/journal/wordpress-landing-page-tsukurikata Type: blog Locale: ja Published: 2026-10-13 Updated: 2026-10-13 --- > ブロックテーマでランディングページを作る手順を、目的設定、テンプレート、フォーム、表示速度、公開前の確認まで順番に解説します。 ランディングページ 作り方 WordPress の基本は、目的を一つに絞り、ヘッダーとフッターを取り除いたテンプレートをブロックテーマで用意することです。そこにヒーロー、実績、提案、フォーム、FAQの各パターンを並べれば、最初の版は半日ほどで形になります。コンバージョンを左右するのは作成ツールの選択より、ページから何を外すかです。 この記事では、目的の設定、テンプレート、セクション、フォーム、表示速度、公開前の確認を、実務と同じ順番で追っていきます。 ## ランディングページは通常のページと何が違うのか？ ランディングページの役割は一つです。広告、メール、検索結果から訪れた人に、登録、予約、資料請求、購入のいずれか一つの行動を求めます。 そのため、メインメニュー、サイドバー、ブログの一覧、二十件のリンクが並ぶフッターは、探索を助ける要素ではなく、離脱の出口になります。 数値の目安としては、Unbounceの[コンバージョンベンチマークレポート](https://unbounce.com/conversion-benchmark-report/)が、業種を横断した中央値を6.6%としています。これは判断のための目安であり、達成すべき約束ではありません。大きく下回る場合は、ボタンの色より、提案の内容、表示速度、フォームに問題がある場合が多いものです。 エディタを開く前に、目的を一文で書いてください。「3月のニュースレターから来た人が、20分の監査コールを予約する」のように書けなければ、まだ作り始める段階ではありません。 ## どのツールで作るべきか？ 選択肢は四つあり、それぞれ向いているプロジェクトが違います。 ブロックテーマとネイティブのブロックエディタは、最も軽い方法です。出力がすっきりしていて、追加のプラグインに依存せず、次のクライアントサイトでも再利用できるパターンを作れます。その代わり、レイアウトの判断は自分で行う必要があります。ビジュアルビルダーとの比較は、[GutenbergとElementorの比較記事](/journal/gutenberg-vs-elementor)で数値を確認できます。 ページビルダーは、視覚的な操作の自由度とテンプレートのライブラリを与えてくれますが、出力は重くなり、頼るプラグインも増えます。Diviは長く使われている例で、多くのページを制作する会社が一つの道具に統一したい場合に向いています。 AIサイトジェネレーターは、プロンプトからページ全体の骨組みを作ります。10WebはWordPressの中でこれを行い、生成された下書きは出発点として十分に使えます。ただし、文章と構成は後から手直しが必要です。どこまで使えるかは[WordPressでのAI活用](/journal/ai-for-wordpress)で扱っています。 ホスティング型のランディングページツールは、WordPressの外で動きます。Webflowはその一例で、視覚的な制御と独自のホスティングを備えています。ページをWordPressのサイトとは別に運用するなら検討する価値があります。テーマ、解析ツール、ドメイン構成をWordPressと共有しなければならない場合は、避けたほうがよいでしょう。 この記事では、ネイティブエディタを使います。最も多くを学べて、費用も最も少ないからです。手順はどのビルダーにも置き換えられます。 ## ページを準備し、余計な要素を取り除くにはどうすればよいか？ 固定ページの新規追加から、ページを作成します。タイトルは提供内容が伝わる平易なものにし、スラッグは短くしてください。/audit は /landing-page-march-v2 より明快です。 次にテンプレートを扱います。ブロックテーマでは、ページごとにテンプレートを割り当てられます。ランディングページには、ヘッダー、フッター、タイトルブロックのないテンプレートが必要です。多くのブロックテーマには「Blank」や「Page without title」といったテンプレートが含まれています。ない場合は、サイトエディタの「テンプレート」で新規作成し、投稿コンテンツのブロック一つだけで組み立ててください。 このテンプレートが、このプロジェクトで最も役立つ成果物になります。「Landing」と名付けて、サイト内のキャンペーンページすべてで再利用してください。 ![ノートに描かれた単一カラムのページレイアウトの鉛筆スケッチ](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-10/64e908-wireframe.webp) theme.json で本文の幅を確認してください。テキストは狭いカラムで読みやすく、幅の広いブロックはヒーローと実績のセクションに限定するのが基本です。テーマに本文幅とワイド幅の両方が定義されている場合は、意図して使い分けてください。文章は狭いカラムに、画像とカラムは広いカラムに置きます。 補足：ここで説明したテンプレートの割り当ては WordPress 6.5 以降で動作します。それ以前のブロックテーマでは、設定の場所が別のメニューにあります。 ## ページには実際どのセクションが必要か？ 多くのテンプレートが示す数より、必要な要素は少なくて済みます。一つの行動を求めるページには、短い流れで十分です。各セクションは、訪問者が抱く一つの疑問に答える役割を持ちます。 次の順に作り、再利用できるパターンとして保存してください。 - 約束、補足の一文、ボタンを含むヒーロー - 冒頭近くの実績。顧客の声、数字、知られた顧客の事例のいずれか - 結果の形で書いた、提案の三つのポイント - フォーム、または二つ目のボタン - よく受ける反論二つに答える短いブロック ヒーローには Cover ブロックか Group ブロックを使い、見出し、段落一つ、ボタンのブロックを置きます。見出しは、初めて見る人が三秒で読める約束にしてください。何であるかと、どんな結果が得られるかを書きます。二度読まないと意味が分からない凝った言い回しは避けます。 ボタンのラベルは、行動そのものにしてください。「監査を予約する」「チェックリストをダウンロードする」のようにします。「送信」のような汎用的なラベルは、見出しが作った文脈を失わせます。 AIの下書きツールを使うなら、最初の版の文章と見出しの候補に使ってかまいません。ただし、すべての行を自分で読んでください。AIは持っていない実績を作り出すことがあります。生成された推薦文や数字を確認せずにページへ載せてはいけません。ランディングページで捏造された推薦文が載ると、信頼を失う最も速い方法になります。 セクションが機能したら、ブロックメニューから「パターンを作成」を選んでください。次のキャンペーンでは、一から作り直す代わりに、自分のパターンを組み合わせて十分程度で組み立てられます。 ## フォームはどう作るべきか？ WordPress のコアにはフォームブロックがないため、ここだけはプラグインが必要です。保守されているフォームプラグインであれば、どれでも構いません。それよりも重要なのは、フォームの形です。 フォローアップに必要な項目だけを求めてください。ニュースレターや資料ダウンロードなら、メールアドレスだけで足ります。予約であれば、名前と質問一つまでにします。項目が増えるたびに完了率は下がり、残りの情報は最初の接触のあとで尋ねればよいのです。 フォームは、判断が下される場所に置いてください。短いページなら提案の直下が適しています。長いページなら、実績のセクションの後にもボタンを置き、同じフォームへリンクさせます。 次に、人が見落としがちな設定を行います。完了画面です。短い確認ページへリダイレクトするか、インラインのメッセージを表示し、次に何が起きて、いつ連絡が来るかを示してください。その画面で解析のイベントを記録すれば、クリックではなく確認の時点でコンバージョンを数えられます。 最後に、スマートフォンから実際のメールアドレスで送信し、メールが届くかを確認してください。フォームが壊れたランディングページは、広告費を使っても何も返さないため、ページがないより悪い状態です。 ## ページはどれくらい速く表示される必要があるか？ サイトの他のページより速くなければなりません。広告から来た訪問者は、まだあなたに対する信頼を持っていません。最初の画面が遅いと、見出しを読まれる前に訪問が終わります。 Googleの[Largest Contentful Paint](https://web.dev/articles/lcp)に関するガイダンスでは、2.5秒以下が良好とされています。ランディングページでは、最大の要素はたいてい、ヒーロー画像か見出しブロックです。まずはそこを確認してください。 ![紙の束の上に置かれた真鍮のストップウォッチ。ページの表示速度を表す比喩](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-10/80ee8a-speed.webp) 優先度の高い順に、確認項目は次のとおりです。 - ヒーロー画像を圧縮し、表示幅に合わせて WebP で配信する。 - ページ最初の画像は遅延読み込みにしない。Cover ブロックを使う場合は、描画後の HTML でも確認する。 - フォントは一つか二つを自前で配信し、使わないウェイトは削除する。可変フォントなら、複数のファイルを一つにまとめられる。 - スクリプトは必要な場所だけで読み込む。すべてのページで読まれるフォームプラグインは、フォームのあるページに限定する。 - 画面の上部にスライダー、自動再生の動画、重いアニメーションを置かない。 改善の前後は、公開URLでモバイル設定のPageSpeed Insightsを使って測ってください。訪問者が見るのと同じように、キャッシュを有効にした状態で測ります。サイト全体の修正を知りたい場合は、[WordPressサイトを高速化する方法](/journal/how-to-speed-up-wordpress-site)が効果の大きい順に整理しています。数値の読み方は、[WordPressパフォーマンスの2026年現場調査](/journal/wordpress-performance-optimization-a-2026-field-audit)で説明しています。 ## スマートフォンと読者の言語で正しく表示されるか？ 広告やメールからの訪問の多くはスマートフォンから来るため、まず狭い画面を設計し、次に広い画面を確認してください。実機でページを開き、ボタンの大きさ、タップ対象の間隔、各入力欄で適切なキーボードが開くかを見ます。 読者に右から左へ読む人がいる場合は、ミラー表示のレイアウトも確認してください。アラビア語やヘブライ語の読者は、ヒーロー、ボタン、フォームが右から流れることを期待します。適切なRTLスタイルシートを持つブロックテーマなら大部分は対応しますが、余白、アイコンの位置、引用の装飾はミラー表示で確かめてください。 ![木の机に置かれた葦ペンとインク壺。右から左へ組むページデザインを連想させる](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-10/b5c348-rtl.webp) RTLの文字を正しく表示できる本物のアラビア文字やヘブライ文字のグリフを持つフォントを選んでください。代替フォントに頼ると、英語では洗練されて見えるページが、アラビア語では乱れます。それは、そのオファーが読者のために書かれていないと伝えてしまいます。 二つの言語を扱う場合は、それぞれ別のランディングページを、独自の文章で作ってください。見出しを一語ずつ訳すのは避けます。ある言語で効く約束が、別の言語では違う形を必要とすることが多いのです。 ## 公開前に何を確認すべきか？ ログアウトした状態のプライベートウィンドウで、公開後のページを次の項目で確認してください。 - ページの目的は一つで、主要なボタンは一つだけ。繰り返すのは多くて二回まで。 - ヘッダー、フッター、サイドバーが消えている。 - タイトル、メタディスクリプション、SNS用の画像が設定され、そのページへ誘導する広告の内容と一致している。 - フォームが送信でき、完了画面が表示され、コンバージョンが計測される。 - モバイルの速度テストに合格し、幅360ピクセルでも読みやすい。 - すべての画像に代替テキストがあり、ボタンの文字のコントラストが読みやすい。 そのうえで、ページをインデックスさせるかを決めてください。有料キャンペーン用のページには noindex を付けて、主要なページと競合しないようにできます。検索で上位を狙うページは、サイトマップに含め、検索向けのタイトルを付けるべきです。 公開後は、一度に一つだけ変えてください。見出しは最も影響が大きいので最初に書き換え、各版に十分な訪問者が集まるまで判断を待ちます。数日の盛り上がりより、二週間の安定したアクセスのほうが多くを教えてくれます。 最初の一歩は、目的を一文にすることです。次に Landing テンプレートと五つのセクションを用意してください。ネイティブエディタで足りなくなるまで、ページビルダーは後回しにします。数値を動かすのは、提案、見出し、表示速度です。まずサイトエディタを開き、テンプレートを Landing と名付けて、ヒーローから作ってください。 ## FAQ ### プラグインなしで WordPress のランディングページを作れますか？ フォーム以外は可能です。ブロックテーマ、空白のページテンプレート、ネイティブのブロックエディタがあればページは組めます。ただし、WordPressのコアにはフォームブロックがないため、見込み客を集めるにはフォームプラグインが必要です。 ### ランディングページとホームページの違いは何ですか？ ホームページは、訪問者がサイトを探索できるよう多くの道筋を用意します。ランディングページは目的と主要な行動が一つだけなので、その行動から人を離すメニュー、フッター、その他のリンクを取り除きます。 ### WordPressでランディングページを作るのにどれくらいかかりますか？ ランディングページのテンプレートがあれば、最初の版は半日ほどで形になります。文章とセクションに数時間、その後にフォーム、速度の確認、スマートフォンでのテストを行います。保存したパターンを使えば、以降のページは一時間未満で作れます。 ### ランディングページのセクションは何個必要ですか？ 通常は五つです。約束と行動ボタンを置くヒーロー、早い段階の実績、三つの短いポイントで示す提案、フォームまたは二つ目のボタン、そして最も多い反論に答える短いブロックです。実際の疑問に答える必要がある場合にのみ増やしてください。 ### Elementor や Divi のようなページビルダーは必要ですか？ いいえ。多くのランディングページはネイティブのブロックエディタで作れます。ビルダーは、大量のテンプレートライブラリや細かな視覚的制御が必要な場合に役立ちますが、マークアップが重くなり、プラグインへの依存も生まれます。 ### ランディングページのコンバージョン率はどれくらいが良いですか？ Unbounceの報告では、業種横断の中央値は約6.6%です。結果は提案や流入元によって大きく異なるため、目安として使い、自分のページを以前の版と比べてください。