ランディングページ 作り方｜WordPressで成果を出す設計の手順

「ランディングページ 作り方」を調べているなら、最初に一つだけ決めてください。訪問者に取ってほしい行動は何か、という問いです。ヒーローの構成もボタンの色も、そこから順に決まります。紙にセクションを粗く描き、見出しを先に書き、その行動に関係しない要素は削ります。この記事では、その手順をWordPressのサイトエディターで実行する方法と、途中で出会う制約を説明します。

なぜランディングページには、トップページとは別の設計書が必要なのですか？

トップページは、多くの訪問者が多くの目的で訪れる場所です。ランディングページは、広告やメールマガジン、検索結果から来た一人の訪問者に、一つの目的を果たしてもらうためのページです。この違いが、制作の全体を変えます。

ナビゲーションは縮小するか、消えます。関連リンクもフッターのサイトマップも不要です。ブロックテーマでは、共有テンプレートの中にメニューを隠すのではなく、専用のテンプレートを作るのが基本です。サイトエディターで空のテンプレートを作り、ヘッダーのテンプレートパーツを外して、ロゴと行動を促すボタンだけを残します。

ヒーローの前に、何を紙に描いて、何を書けばよいですか？

紙を用意してください。高さの違う長方形を縦に五つか六つ並べ、それぞれにヒーロー、課題、解決策、証拠、提供内容の詳細、最後の行動喚起と名前を付けます。HubSpotからUnbounceまで、多くの解説記事がおおむね同じ順序を勧めています。慎重な読者が判断する流れに沿っているからです。

グレースケールで描いてください。色は弱い階層を隠してしまいますが、灰色だけで描くと弱さがすぐ見えます。全部が灰色のときに、どの長方形が一番大事か分からなければ、訪問者にも分かりません。

次に言葉を書きます。見出し、補足の一文、ボタンのラベルです。実際のコピーを使って設計してください。ダミーテキストで組んだレイアウトは、本物の見出しが三行に伸びた瞬間に崩れます。日本語は比較的短く収まりますが、アラビア語やヘブライ語では同じ文が長くなることが多く、この確認は省けません。

スクロールさせるヒーローと、その直下の証拠は、どう作りますか？

ヒーローには四つの役割があります。成果を示すこと、誰のためのものかを伝えること、一つの行動を提示すること、そして主張を信じられるものにする何かを見せることです。機能の名前より成果の名前を見出しにすると、読み進める人が増えます。「クライアントサイトを半日で公開する」は、「柔軟なページビルダー」よりも中身が伝わります。

Gutenbergでは、カバーブロックの中にグループブロックを入れてヒーローを作ります。グループの幅は640から720ピクセル程度に制限し、背景とは別に本文の幅を管理します。見出し、段落、ボタンブロックを一つずつ置いてください。ボタンは一つだけにします。ボタンが二つあると、読者は二つの判断を迫られます。

支えになる画像は正直なものにしてください。製品の実際の画面は、装飾的な写真より効きます。抽象的な画像しかないなら、重みを軽くして、見出しにページを支えさせます。ヒーローにカルーセルを置くのは避けてください。ほとんどの訪問者が見ないスライドに、メッセージが埋もれます。

証拠は、ヒーローが生む疑問に答えるものです。「本当に信じてよいのか」という疑問です。ヒーローの直下に置いてください。ページの最下部に置くと、最後まで読む人にしか届きません。

具体的な証拠ほど効きます。実績のある顧客名と測定された結果は、五つの一般的な星評価より強い根拠になります。実名と役職が入った一つの推薦文は、匿名の引用が並ぶスライダーより信頼されます。

数字を出すなら、出典と測定時期を明記するか、削ってください。よく読まれている解説記事の中には、どの分析ツールでも出せないような転換率を載せているものがあります。自分のサイトで測った前後の比較は、借り物の統計より価値があります。

スマートフォンでは、どのレイアウトルールが最も重要ですか？

広告やSNSからの流入の多くはスマートフォンで来ます。まずその表示を設計し、そのあとで横に広げてください。一列のレイアウトにし、一行の文字数を短くし、親指で届く位置に行動喚起を置きます。

守るべきルールは三つで、ほとんどの問題を防げます。タップできる領域は、CSSピクセルで少なくとも24×24以上にしてください。これはWCAG 2.2のレベルAAの最低基準で、メインボタンはもっと大きくするのが望ましいです。拡大しなくても本文が読めるようにしてください。そして証拠のセクションのあとで行動喚起を繰り返し、読者がページの上まで戻らなくてよいようにします。

ブロックテーマでは、各ブロックに個別の余白を指定するより、theme.jsonで定義された間隔のスケールを使う方が安定します。WordPressのtheme.jsonリファレンスにプリセットが説明されています。プリセットを使えば、上書きのスタイルシートを増やさずに、モバイルとデスクトップのリズムを揃えられます。

表示速度は、デザインにどう関係しますか？

すべてに関係します。見た目が優れていても読み込みが遅いページは、見出しが表示される前に訪問者を失います。Googleのガイダンスでは、LCP（Largest Contentful Paint）が2.5秒以下であれば良好とされています。ランディングページでは、最大の要素はたいてい、ヒーロー画像かヘッドラインです。測定方法はweb.devのLCPの解説で確認できます。

ここから具体的な作業が決まります。ヒーロー画像は圧縮してWebPで配信してください。ヒーロー画像は遅延読み込みにしないでください。最初に描画してほしい要素だからです。Webフォントはひとつのファミリーに絞り、可能なら可変フォントを自前で配信して、適切なフォールバックを用意します。ファーストビューからスライダー、自動再生の動画、サードパーティのチャットウィジェットを外します。

WordPressのランディングページが、ホスト型のビルダーに負けることがあるのはこの点です。多目的テーマで作ったページは、使われていないCSSを数百キロバイト送ることがあります。専用テンプレートを持つ軽量なブロックテーマなら送る量ははるかに少なく、その差がLCPにそのまま表れます。

コントラスト、アクセシビリティ、RTLは、どう扱いますか？

アクセシビリティは最後に監査するものではなく、設計の制約です。WCAG 2.2のコントラストの基準では、通常の文字と背景の間で4.5対1以上を求めています。テストの方法はW3Cによるコントラストの最低基準の解説で確認できます。白いカードの上の薄い灰色のキャプションは不合格ですし、白い文字を載せたパステルカラーのボタンも多くが不合格です。

まずボタンを確認してください。ページの存在理由となる要素であり、ブランドカラーで選ばれがちなため、コントラストが最も弱くなりやすい要素でもあります。

アラビア語やヘブライ語、あるいは多言語の読者に向けるなら、ミラーリングはページを反転させるだけでは済みません。ボタンの矢印など方向を示すアイコンは反転させてください。余白は左右ではなく論理プロパティ（inline-start と inline-end）で指定します。フォントは見出しのサイズでテストが必要です。ラテン文字向けの表示用フォントにはアラビア語の字形がないことが多く、フォールバックで見た目の重さが変わります。

RTLの表示は、実際の端末と本物の文章で確認してください。ダミーテキストでは問題のないミラーレイアウトも、本物のアラビア語の見出しでは折り返し方が変わり、崩れることがあります。

WordPressのランディングページには、どのツールが適していますか？

選択肢は三つあります。サイトエディターでパターンを使って組む方法は、最も軽量で制御しやすい反面、手間がかかります。Diviのようなビジュアルビルダーは、レイアウト作業を速めますが、ページの重さを多少犠牲にします。AIサイトビルダーで最初の下書きを作り、重要な部分を手で作り直す方法もあります。

一つのプロンプトで変換率の高いページが完成すると約束するツールには、慎重になってください。生成された構造は、セクションの順番や仮のコピーの出発点としては妥当です。しかし最終デザインとして使えることはまれで、マークアップの整理が必要になり、クライアントが保守できない場合もあります。

ページをWordPressの外に置くなら、FramerやWebflowのようなホスト型ビルダーも正当な選択です。六週間だけ動いて終わるキャンペーンであれば、十分に合理的です。デモの見栄えではなく、ページがどれだけ生き続けるか、誰が編集するかで選んでください。

公開後はどうテストして改善し、今週は何をすべきですか？

公開は測定の始まりです。一つのコンバージョンイベントを設定し、分析ツールと接続してください。フォームの送信が実際に記録されるかどうかを、トラフィックを送る前に確認します。自分の結果を測れないページは、改善もできません。

一度に変えるのは一つだけにしてください。最も効果が大きいのは見出しなので、まず見出し、次にボタンのラベル、そして証拠の並び順の順に試します。テストは、有望に見えた初日で止めず、十分な数の成果が集まるまで続けてください。小さな読者層では数週間かかることもありますが、それで構いません。早合点した勝者より、忍耐の方が正しい結論に導きます。

忘れやすいことが二つあります。広告専用のページなら、検索エンジンにインデックスさせるかどうかを決めてください。薄い複製のページは、メインページと競合することがあります。フォームで個人データを集める場合は、公開の前に、地域で必要な同意の文言を入れてください。苦情が来てからでは遅いです。

最後に今週のアクションです。サイトエディターで空のテンプレートを開き、本物のコピーとボタン一つだけでヒーローを作ります。それをスマートフォンで確認し、LCPを測ります。そこから作ったパターンを保存しておけば、次のクライアントのページは空のキャンバスではなく、検証済みのセクションから始められます。