ランディングページ(説得モード) は何をしますか?
ページの仕事はただ一つ:適切な訪問者に、たった一つのアクションを起こさせること。すべての要素がその仕事に対して価値を証明しなければなりません。
ヒーロー:最も特徴的なもので始める
ヒーロータイプは習慣からではなく、プロダクトから選びます。
| ヒーロータイプ | 使用する場面 | 構築方法 |
|---|---|---|
| プロダクト主導 | SaaS、CRM、アプリ | 製品が主要な仕事をしている実際の、判読可能なUI画面(ぼやけた画像ではなくHTML)。信頼できるデータを表示 |
| 証明主導 | 地域サービス、職人、代理店 | 実際の作業の力強い写真+言葉での結果+実在する場合の評価・レビュー数 |
| 約束主導 | 新カテゴリ、ブランド主導 | 一つの大きなタイポグラフィによる声明。タイプそのものがビジュアルとなる |
| デモ主導 | ツール、ゲーム、インタラクティブ | それ自体を、フォールドの上でプレイ可能またはインタラクティブな状態で表示 |
| オファー主導 | Eコマース、イベント | 製品写真/価格/日付を中央に前面表示 |
「大きな見出し+グラデーションブロブ+2つのボタン+架空の統計行」というヒーローはデフォルトです。上記のどれも当てはまらない場合にのみ使用してください。
ヒーローチェックリスト:見出しは何であるか、誰のためのものかを示す(10語未満)。サブラインは成果を示す(25語未満)。アクションを明示するプライマリCTAを1つ(「無料見積りを予約」、「14日間の無料トライアルを開始」)。迷っている人のためのオプショナルなセカンダリCTA(「料金を見る」)。ビジュアルはヒーローの40~60%を占める。
セクションメニュー(5~8個を選択し、形状を変える)
- 問題→成果のストリップ(顧客の言葉でのビフォー/アフター)
- 仕組み(本当にステップがある場合のみ。その場合は番号付けでOK)
- 機能紹介:広い画像とテキストの行を交互に、またはタイル内に実際のUIを配置した弁当グリッド。同一のアイコンカード3枚は避ける。
- ソーシャルプルーフ:名前、役割/地域、可能であれば写真付きの実際の testimonial。ロゴは実在の顧客の場合のみ
- 料金プラン:2~3プラン。おすすめはレイアウトで示し、単なるバッジではない。含まれるもののプレーンなリスト。年間トグルが存在する場合はそれも
- 地域ビジネス向けのサービスエリア/営業時間/地図
- 実際の異議(価格、契約、スケジュール、もしもの場合)に答えるFAQ
- プライマリアクションを繰り返す最終CTAバンド
リズムを変える:フルブリードとコンテイン、明るい面と色付きの面、テキスト主体と画像主体を交互に。同じレイアウトのセクションを隣接させない。
コピー
- システムの言葉ではなく、顧客の言葉で。「統合運用可視性」よりも「今日のすべての仕事を確認」。
- 具体的であることは、賢いことよりも優れている。数字は真実の場合のみ。
- 見出しとボタンは文の先頭のみ大文字。UI内で感嘆符は使わない。
- 同じアクションにはどこでも同じ名前を使用。
コンバージョンの詳細
- ヒーローがスクロールして見えなくなった後、プライマリCTAを表示するスティッキーヘッダー。
- 地域ビジネス向けにモバイルで電話番号をタップして発信できるようにする。
- フォーム:ビジネスに必要な最低限のフィールド。フィールドの上にラベル。送信後に何が起こるかを明記。
- CTAの近くに信頼要素:保証、応答時間、ライセンス/保険(真実の場合のみ)。
- ページの重さ:ヒーロー画像は200KB未満(AVIF/WebP)。フォントはプリロード。ファーストペイントをブロックするものは何もなし。
モーションバジェット
1つの印象的な瞬間(ヒーローのエントランス、または製品UIが主要なアクションをアニメーションする)。その他はすべて静止しているか、ユーザーに反応する。motion スキルを参照。