ランディングページのコンバージョンとUX
サインイン、サインアップ、メールアドレスの入力、何かのリクエストなど、1つのアクションを実行させることを目的としたページのためのルールです。マーケティング、コンバージョン、UXに関する多数の電子書籍（UserTesting、UXPin、SmartBug、Usabillaなど、2014〜2016年頃）から抽出されました。引用されている数字は古いものですが、その背後にある行動原理は現在も変わりません。
各ルールは、指示、簡単な理由、そして例で構成されています。レビューを行う際は、最後のチェックリストから始めてください。
1. 価値提案とファーストビュー
-
5秒テストを実施する。 理由：訪問者は数秒でページが自分に合っているかどうかを判断します。その間に何をしているのか言えなければ、戻るボタンを押します。 例：誰かにページを5秒間見せ、隠してから「これは何で、誰のためのものですか？」と尋ねます。答えられなければ、他の何よりも先に見出しを書き直します。
-
訪問者の結果についての見出しを書く。自分自身についてではない。 理由：「私たちは」と話すページは、読者に翻訳作業を強います。「あなたは」と具体的な結果がそれを代わりに行います。 例：「マーケティングメールを厳選しています」は「400社のブランドがどのようにメールを書いているか、ソート・検索可能でご覧いただけます。」になります。
-
見出しの後ろに、行動を促す具体的な理由を2〜3つ添える。 理由：見出しは動機を与え、理由は迷っている人をコンバージョンに導きます。 例：見出しの下に3行の短い文：「毎週新しいブランド」、「メール本文全体を表示（サムネイルではありません）」、「閲覧は無料」。
-
本物を見せる。ストックフォトではない。 理由：一般的な画像は埋め草のように見え、ページの信頼性を低下させます。製品のスクリーンショットは、それが実在することを証明します。 例：笑顔のチーム写真を、アーカイブされた実際のメールのグリッドに置き換えます。
-
最初の画面でオファーを示し、その後はスクロールさせてもよい。 理由：ヒーローセクションは価値提案と主要なアクションを伝える必要がありますが、すべての機能をファーストビューに詰め込むと乱雑になります。階層が明確であれば、人々はスクロールします。 例：ヒーローには見出し、サブライン、1つのボタン、製品プレビューを配置します。機能、証明、FAQはその下に配置します。
-
小さな画面からデザインする。 理由：スマートフォンのレイアウトは、コンテンツに優先順位を付けることを強制します。モバイルで生き残るものが重要であり、デスクトップ版はそこからきれいに発展します。 例：375pxのバージョンを見出し、ボタン、証明の1行だけでワイヤーフレーム化し、その後、余白が多くなりすぎるまで幅を広げ、次の項目を追加します。
-
ヒーローを高速に保つ。 理由：約1秒を超える遅延は、人にコントロールを失った感覚を与え、ページが遅いと訪問者と検索ランキングの両方を失います。 例：圧縮されたプレビュー画像1つ、自動再生動画なし、スライダーなし。
[出典：Inbound Marketing's Most Wanted 33 Website Design Crimes; Lead Generation Techniques for High Conversions and Great UX; The Elements of Successful UX Design; Timeless UX Design Trends: Responsive and Adaptive; Responsive Web Design Best Practices]
2. コールトゥアクション (CTA)
-
ランディングページには1つの目標と1つの主要なCTAを設定する。 理由：追加のアクションはすべて、あなたが望むアクションと競合します。動画を見て、6つの testimonial を読んでからフォームに記入するように求めるページは、その過程で訪問者を失います。 例：「アーカイブを開く」ボタンを上部と下部に繰り返し配置し、他にはボタンとしてスタイル設定されたものは何もありません。
-
ボタンには、次に何が起こるかをラベル表示する。 理由：「送信」や「ここをクリック」はメカニズムを説明するものであり、報酬を説明するものではありません。動詞と対象物を合わせることで、ページの目標が明確になります。 例：「送信」は「このブランドをリクエスト」に、「サインイン」は「アーカイブを開く」になります。
-
訪問者がコミットする前に得られるものを伝える。 理由：人々は「メールアドレスと引き換えに何を得るのか？」と尋ねます。コピーで、可能であれば結果の画像で答えます。 例：ゲート付きボタンの横に「無料。Googleでサインイン。10秒で完了。」という行と、その背後にあるアーカイブのプレビューを配置します。
-
CTAは、派手さではなくコントラストで目立たせる。 理由：落ち着いたページに彩度の高いボタンは目の引きます。ブランドと衝突する派手な色は、サイト全体を安っぽく見せます。 例：周囲のUIは彩度を抑え、主要なボタンだけにブランドの最も強い色を与えます。
-
ボタンのように見えるのはボタンだけにする。 理由：何もしないボックス化されたテキストや偽のボタンはクリックを無駄にし、人々にページの残りの部分を信頼しないように教えます。 例：「400+ブランド」の周りに枠線付きのピル型スタイルを配置しないでください。ラベルまたはプレーンテキストとしてスタイル設定します。
-
タップターゲットを大きく、十分に間隔を空ける。 理由：指はカーソルほど正確ではありません。ターゲットが小さかったり密集していたりすると、誤タップやダブルタップが発生します。 例：メインボタンは少なくとも44x44ポイント、最も近いリンクからはっきりとスペースを空けます。
-
重要なものをホバーの背後に隠さない。 理由：タッチスクリーンにはホバーがありません。マウスオーバーでのみ表示される情報は、スマートフォンユーザーには見えません。 例：「得られるもの」のメモはツールチップではなく、ボタンの下に表示します。
-
準備ができていない人のために、よりソフトなパスを提供する。 理由：ほとんどの訪問者は初回訪問時に主要なアクションを実行する準備ができていません。二次的な、低コミットメントのオプションは、彼らが手ぶらで去るのを防ぎますが、視覚的には二次的に保つ必要があります。 例：メインボタンの下に「または、新しいブランドが入ったらメールを受け取る」というテキストリンク。
[出典：33 Website Design Crimes; The Elements of Successful UX Design; Designing Better UX with UI Patterns; Responsive Web Design Best Practices; Timeless UX Design Trends: Responsive and Adaptive]
3. リード獲得とサインアップフォーム
-
今すぐ使用するものだけを尋ねる。 理由：フィールドが増えるごとに完了率が低下します。あるテストでは、フォームを11項目から4項目に減らしたところ、リードの質を低下させることなく、サインアップが100%以上増加しました。 例：「次のブランドをリクエスト」フォームには、ブランド名とメールアドレスのみが必要です。名前、会社名、電話番号は不要です。
-
混乱を招くフィールドを削除する。 理由：1つのあいまいなフィールドがフォーム全体を台無しにする可能性があります。有名なケースでは、人々が誤解していた1つの任意の「会社」フィールドを削除したことで、数百万の収益が増加しました。 例：ブランドリクエストに「ウェブサイト」を追加すると、人々はあなたのサイトを意味するのかブランドのサイトを意味するのかわからない可能性があります。削除するか、正確にラベル付けします。
-
一度にすべてを収集するのではなく、後で少しずつ収集する。 理由：訪問のたびに少しずつ尋ねる（プログレッシブプロファイリング）ことで、1つの長いフォームに人々がでたらめを記入するよりも、より多くの完了とよりクリーンなデータが得られます。 例：最初のリクエストはメールアドレスのみを尋ねます。後日のメールで「どの業界にいますか？」と尋ねます。
-
任意の妥当な形式での入力を許可する。 理由：「Nike」を期待していたために「Nike.com」を拒否することは、あなたのパーサーのためにユーザーを罰することになります。サーバー側でクリーンアップします。 例：スペースをトリミングし、「www.」と「.com」を削除し、大文字小文字を区別せずにマッチングします。
-
フォームを、それがアンロックする価値の隣に配置する。 理由：有用なコンテンツのすぐ後に配置されたフォームは、人々が無視することを学んだ一般的なサイドバーボックスよりもはるかに高いコンバージョン率を達成します。 例：「ブランドが見つかりませんか？リクエストする」を、フッターではなくアーカイブプレビューのすぐ下に配置します。
-
サインインとサインアップを視覚的に明確に区別する。 理由：2つのフォームが積み重なっていると、多くの新規訪問者が間違った方に入力を始めます。 例：両方のケースを処理する1つの「Googleで続ける」ボタン、または明確に分離された2つのパネル。
-
パスワード表示切り替えと、目に見える「パスワードをお忘れですか？」リンクを提供する。 理由：モバイルでパスワードを誤入力すると、リセットメールが送信され、フローから外れてしまいます。 例：パスワードフィールド内の目のアイコン。そのすぐ下にリセットリンク。
-
ページ上で、平易な言葉で成功を確認する。 理由：人々はフォームが機能したことと、次に何が起こるかを知る必要があります。 例：「承知しました。Glossierがアーカイブに追加されたらメールをお送りします。」
-
メールアドレスをどう使うかを1行の短い文で説明する。 理由：プライバシーへの懸念は、人々が最後のフィールドで止まる一般的な理由です。平易な言葉は、法的なテキストへのリンクよりも効果的です。 例：「ブランドが追加されたときに1通のメール。ニュースレターはリクエストがない限り送信しません。」
[出典：3 Common UX Mistakes Killing Good Design; 33 Website Design Crimes; The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX; Designing a Checkout Flow That Converts (フォームルールのみ)]
4. 社会的証明と信頼
-
実際の数字がある場合はそれを使う。 理由：人々は形容詞よりも具体的な数字を信頼します。 例：「312ブランドからの2,140通のメール」は「膨大なライブラリ」に勝ります。
-
すべての testimonial を実在の人物に帰属させる。 理由：名前、役職、写真があれば、引用は親しみやすくなります。匿名の引用は捏造されたように読まれます。 例：「ウェルカムシリーズで何時間も節約できました。」DTCブランドのライフサイクルマーケター、Priya S.、顔写真付き。
-
認識可能なロゴを静かに表示する。 理由：関連性による信頼性は機能しますが、カラフルなロゴはCTAと競合します。 例：ヒーローのすぐ下に、グレースケールのブランドロゴ1行。
-
疑問が生じる場所に証明を配置する。 理由：ページの途中、それが裏付ける主張の隣にある testimonial は、最後の testimonial の壁よりも効果的です。 例：「メール本文全体を表示（サムネイルではありません）」の後に、フルサイズ表示を使用した誰かの引用。
-
社会的証明が役立つと決めてかからず、テストする。 理由：購読者数は、特にその数が少ない場合に、コンバージョンを低下させることがあります。 例：「800人のマーケターに参加」がある場合とない場合でヒーローをA/Bテストします。
-
洗練さと誠実さで信頼を得る。 理由：視覚的な品質は、人々が信頼性を判断するために最初に使用するものです。タイプミス、壊れたボタン、乱れた配置はすべて「信頼できない」と読み取られます。 例：すべての文字列を校正し、公開前にすべてのリンクをクリックしてテストします。
-
ダークパターンを決して使わない。 理由：隠れたオプトインや見つけにくいキャンセルリンクなどのトリックは、一度は成功しても、ユーザーを永遠に失います。 例：チェックが外された、明確にラベル付けされた「週刊ダイジェストも送信する」チェックボックス。細かい文字の中に埋め込まれた、あらかじめチェックされたものは決して使わない。
-
コストと条件について正直に伝える。 理由：人々は価格を早い段階で見ることを好み、条件付きであることが判明する「無料」の主張は信頼を破壊します。 例：閲覧は無料だがダウンロードは有料の場合、サインイン後ではなく、ランディングページでその旨を明記します。
[出典：The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX]
5. ページフローと構造
-
ページをデザインする前にパスをマッピングする。 理由：「次に何をするのか」が計画されていないと、ページは行き止まりになります。 例：書き出します。ページに着地、見出しを読む、プレビューを見る、「アーカイブを開く」をクリック、サインイン、アーカイブ内に着地。
-
単一目標のランディングページからメインナビゲーションを削除する。 理由：すべてのナビゲーションリンクは、オファーからの出口です。 例：ヘッダーにはロゴと1つのCTAのみ。「ブログ/概要/料金」メニューはなし。
-
実際のページの前にスプラッシュページを決して置かない。 理由：それはステップを追加し、訪問者に何も伝えません。 例：「サイトに入る」ゲートはなし。ランディングページが正面玄関です。
-
すべてのページが次のステップで終わるようにする。 理由：単に終了するページは、訪問者を探し回らせます。数秒以内に行き先が見つからなければ、彼らは去ります。 例：FAQはヒーローと同じCTAで終わります。
-
スキャンする人のために書く。 理由：ほとんどの人は見出し、小見出し、最初の文だけを読みます。 例：短い段落、明確なサブ見出し、機能の箇条書き。
-
コンテンツをグループ化し、間隔を空けて認知負荷を軽減する。 理由：ホワイトスペースは理解力を向上させ、関連項目をチャンク化することで、何も削除せずに人々がより多くの情報を吸収できるようにします。 例：機能を9つのばらばらの行ではなく、3つのカードにグループ化します。
-
自分のパターンがより良いという証拠がない限り、慣れ親しんだパターンを使用する。 理由：認識可能なパターンは、人々が考えずに行動できるようにします。それらを破ると学習を強制し、エラーを引き起こします。 例：サインインを隠れたジェスチャーではなく、右上に配置します。パターンのルールに「ただし」や「例外」が必要な場合、それは再考の時です。
-
リンクのラベルは、そのリンク先に基づいて付ける。 理由：明確なラベルは「情報の匂い」を与えます。かわいらしいラベルはそれを隠します。 例：「良いもの」ではなく、「ブランドを閲覧」。
-
基本的なアクセシビリティを満たす。 理由：それは、強い日差しの中や動作の遅いスマートフォンを使用している人を含む、すべての人にとって優れたUXです。 例：テキストのコントラスト比は少なくとも4.5:1、本文テキストは少なくとも16px、行間は約1.5、フォームフィールドには実際のラベル。
-
空の状態と待機状態を意図的にデザインする。 理由：サインイン後の空白の画面は壊れているように見えます。明確な空の状態またはローディング状態は、人々に何を期待すべきかを伝え、コントロールしている感覚を維持させます。 例：「2,140通のメールを読み込み中...」とスケルトングリッド。白いページではありません。
[出典：33 Website Design Crimes; 3 Common UX Mistakes Killing Good Design; Designing Better UX with UI Patterns; The Elements of Successful UX Design; Responsive Web Design Best Practices; Idiot Buttons: The Placebo in UX Design]
6. 避けるべきデザインの悪習
ページを最も頻繁に台無しにする間違いのクイックリストです。各行は代わりに何をすべきかを示します。
- スライダーとカルーセル。 最初のスライド以降をクリックする人はほとんどいません。また、ページを遅くします。代わりに1つの強力な画像を表示します。
- 自動再生の動画や音声。 人々を驚かせ、離脱させます。再生ボタンを使用し、選択させます。
- 安っぽいストック写真。 データを求めるページでは疑わしく見えます。実際の製品ショットを使用します。
- ランディングページに競合する複数のCTA。 1つを選びます。
- デフォルトの「送信」ボタン。 アクションに合わせて名前を変更します。
- オファーの価値に見合わない長さのフォーム。 最小限に削減します。
- 乱雑さ。 すべてのブロックはその場所に値する必要があります。痛みを感じるまで削除します。
- テキストの壁。 見出し、短い段落、箇条書きに分割します。
- 低コントラストまたは極小のテキスト。 白地に薄いグレーは読みやすさを損ないます。
- ページコンテンツと無関係なCTA。 ページに一致しないグローバルなサイドバーのオファーはコンバージョン率が低くなります。オファーをページに一致させます。
- 自分自身について話すこと。 「私たち」を「あなた」と訪問者の結果に置き換えます。
- モバイルを無視すること。