ほとんどの SEM 担当者は、ランディング ページを設計する際に「ユーザーのニーズ」のみを考慮し、「ユーザー自身の購買行動」を決して考慮しません。

言い換えれば、ユーザーの購買決定に影響を与える要因です。これは、ランディングページデザインにおいて最も重要な部分でもあります。

それでは、ウサギを追いかけて、 「ユーザーの購買行動に影響を与える」ランディングページをデザインする方法を見てみましょう。

最初の画面コンテンツ = 美しい女性の顔

最初の画面は、ユーザーが Web サイトを開いたときに最初に目にするものであり、その重要性は明らかです。

一方で、ユーザーはコンテンツを 100% 吸収できますが、他方では、ユーザーが留まるか離れるかは大きく左右されます。

ウェブサイトを美しい女性に例えるなら、ホームページはその女性の驚くほど美しい顔です。

さらに、Rabbit はヒートマップ ツールを使用して多数のランディング ページを分析した結果、訪問者の閲覧時間の 80% が最初の画面で費やされ、残りのページで費やされた時間はわずか 20% であることを発見しました。

したがって、最初の画面のコンテンツ要件は次の 2 点を満たす必要があります。

• ユーザーのコンバージョンを大いに促進できます。

• コンテンツはシンプルで理解しやすく、可能な限りユーザーのニーズに直接対応するものでなければなりません。

新近効果

これは、人々が一連の項目を記憶するときに、中間の項目よりも最後の項目の方がよく覚えているという現象を指します。

簡単に言えば、最も新しく最新の印象が優先されることを意味します。

これは何を意味するのでしょうか？つまり、ランディングページの下部までスクロールすると、ユーザーの注目度が再び高まるということです。そのため、ページ下部のコンテンツデザインにも注意を払う必要があります。

一般的に、SEM 実践者は目標コンバージョン率を向上させるために、最後に目立つコンバージョン ボタンまたは関連リンクを設定することが推奨されます。

Fパターンデザインのウェブページ

NNGroupは、200人以上のユーザーのウェブ閲覧中の視線の動きを追跡するアイトラッキング調査を実施しました。その結果、ユーザーがウェブを素早く閲覧する際の視線の動きは「F」の文字に似ており、そのプロセス全体は以下のように要約できることが分かりました。

ユーザーはまず水平方向に閲覧し、コンテンツブロックの上部を優先します。このとき、視線はFの文字の上の水平線を形成します。

次に、視線は画面の左側に沿って垂直に下方へと移動し、段落内で興味を引くコンテンツを探します。興味のあるコンテンツを見つけると、水平方向に詳細に閲覧を続けます。通常、このコンテンツへの視線の移動範囲は、最初の水平方向の走査範囲よりも狭くなります。この視線の軌跡は、文字「F」の中央にある水平線を形成します。

次に、ユーザーは視線を画面の左側に移動し、下にスクロールし続けます。

全体のプロセスは次の図で説明できます。

上記の情報に基づいて、2 つの結論を導き出すことができます。

•  

• ユーザーはウェブページの左側にある情報に注目します。

• ユーザーは、Web ページを閲覧するときに、より選択的に読む傾向があります。

したがって、SEMの専門家はFパターンに沿ってウェブサイトを設計することが推奨されます。ただし、以下の点にも留意する必要があります。

• 重要な情報はページの左側に配置されます。

• ランディング ページでは、コンテンツが明確に構造化されており、重要な情報はさまざまなフォント サイズと色を使用して強調表示されています(ユーザーがページをスキップするときに気づきやすくなります)。

コンテンツはネイティブである必要があります。

オフライン広告から入札、そして今ではインフィード広告まで、広告の形態は常に変化しており、ユーザーが広告を認識し、それに抵抗する能力も常に向上しています。

たとえば、Web ページのホームページにある大きなバナーは広告のように見えるため、ユーザーは習慣的に無視しますが、広告を好む人は誰もいません。

下の画像は、ウェブページのホットスポット検出チャートです。ユーザーは中央部分に注目する傾向があり、下部はほとんど無視されていることがわかります。

したがって、コンバージョン ポイントを設計する際には、目立つ位置に配置するだけでなく、コンバージョン ポイントのコンテンツの「ネイティブ」性にもより注意を払う必要があります。

たとえば、下の画像では、どちらの画像をクリックしますか? (おそらく、上で述べた誤った観点と正確に一致する 2 番目の変換ポイントを見つけるのに長い時間がかかるでしょう。)

図1

図2

そのため、Web ページを設計する際には、コンバージョン ポイントをネイティブ化することに重点を置き、従来の考え方にとらわれないようにすることが重要です。

アイコンタクトに注意を払ってください。

メインタイトルを見ると少し混乱するかもしれません。

視力とは、写真の中で人の目が向いている特定の内容を指します。多くの場合、視力には明確な方向があります。

私たちは日常生活において、誰かの視線を追いかけ、それに応じて焦点を調整します。ランディングページのデザインにおいて、視線の方向を強調する場合にも、同じ原理が当てはまります。

物事を異なる視線で観察するとき、あなたの目には実は目的があります。人々はあなたの視線の方向を追い、注目するでしょう。

画像内の図形は、モデルまたは要素によって示される方向にユーザーの目を誘導し、特定の情報に注意を集中させます。

例えば

左の図 1:キャラクターの上向きの視線によって、ユーザーはまずキャラクターの上半身に注目し、次にキャラクターの上向きの視線を追って、キャラクターの上部にある 4 つの情報に注目します。

左の画像 2:人物の視線 (前方、上方、右方向) が、ユーザーの目を対応する情報に誘導します。

‍

そのため、デザインにおいては、画像の設定と、画像が指し示す方向におけるコンテンツの設定に注意を払う必要があります。これは一般的に、以下の点に基づいて行うことができます。

• 画像内の人物の顔と視線の方向に沿って、重要な情報と補助的な情報をそれぞれの位置に割り当てます。これにより、ユーザーの視線が指示された方向へさりげなく誘導されます。

• 画像に写っている人物の表情に注目してください。感情はユーザーのコンバージョンに影響を与える重要な要素であり、特に表情は感情に影響を与える重要な要素です。つまり、アイコンタクトでユーザーの視線を誘導し、感情表現豊かなキャラクターを使うことで、ユーザーエクスペリエンスに良い影響を与えましょう。

視覚的なポイントを使用してユーザーの視線を誘導する

ページ上に 1 つのドットが表示されると、ユーザーの注目はすぐに集まります。別のドットが表示されると、ユーザーの注目は分散してしまいます。また、異なるサイズのドットが同時に表示されると、ユーザーはまず大きいドットに注目する傾向があります。（ドットは相対的なものである場合もあります。つまり、ページ全体のすべての要素をドットとして捉えることができるのです。）

たとえば、下の画像では、目はまず右側の明るい赤いイチゴに焦点を合わせます。その理由は次のとおりです。

焦点(すぐに目を引く要素): 画像内のサイズ、色、形状の明確なコントラスト。

ハイライト(ユーザーの主な視覚要素): 画像内の点の形状または詳細で、他の要素と区別されます。

したがって、上記の結論に基づいて、ランディング ページのデザインに関しては次の点に注意することができます。

• デザインのニーズとイベントの目的に応じて、デザイン要素のサイズ、色、その他の側面を調整し、重要なポイントをより目立つようにします。

• メインテキストのフォントと色を調整して、ユーザーの目を引く焦点を作りましょう。あるいは、テキストの階層を調整して、重要な要素を強調し、それほど重要でない要素を目立たなくすることもできます。

視覚的なポイントを使ってユーザーの注意を集中させる

上の画像で、まず目に留まる情報は何でしょうか？「たったの2680元」ですよね？

したがって、同じ領域内の異なる色は常により多くの注目を集め、ユーザーの視覚を即座に捉えると簡単に結論付けることができます。

たとえば、下の画像では、色のコントラストがはっきりしているため、2 つの画像の内容がすぐにわかります。

上記の例から、画面に 2 つの色が表示された場合、ユーザーの目は最初にコントラストが強く面積の大きい目立つ色に焦点を合わせ、次に他の色を探してからすべてを閲覧することがわかります。

通常、大きな形式のテキスト、要素、画像情報に直面すると、人間の目には誘導が必要となり、色は視覚情報の最も直接的な形式の 1 つとなります。

色を適切に使用することで、色のコントラストを最大限に高め、最も重要な情報を強調することができます。色のガイダンスを要素やアクションの方向性と組み合わせることで、色の方向性はさらに効果的になります。

ランディング ページのデザインを色でガイドする場合は、次の点に注意してください。

• 重要な情報を強調するために対照的な補色を使用すると、より効果的に注意を集中させることができます。

• 画像に多くの色がある場合は、各色の面積を使用して、ページ上の情報を重要度に応じてランク付けすることができます。

A/Bテストとクリックヒートマップを組み合わせて効率を向上

上記の点を踏まえてページを変更することで、コンバージョン率が大幅に向上すると思いますか？

ランディングページのデザインはそれだけではありません。ページを継続的に最適化するためには、A/Bテストを学び、そのスキルを磨くことも重要です。

例えば、下の画像では、日本の旅行会社のウェブサイトのヒートマップから、ホームページへのトラフィック分布が非常に集中していることがわかります。多くのクリックがナビゲーションバーに集中し、下部には1つのモジュールしかありません。トラフィックをより効果的に誘導するため、同社はユーザーの関心領域に基づいて、ホームページ上でユーザーが関心を持つコンテンツをより多く表示することを決定しました。

ウェブサイトを分析しなければ、ランディングページを効果的に最適化することはできません。しかし、A/Bテストとクリックヒートマップを組み合わせることで、ページデザインとコンバージョン効率を大幅に向上させることができます。

これらは、ランディングページのデザインに関するRabbitの考えの一部です。実際、ランディングページは入札プロセスにおいて最も重要な要素と言えるでしょう。トラフィックを誘致するだけでなく、そのトラフィックを売上につなげる役割も担っています。そのため、多角的な思考力とページ上のあらゆる要素を注意深く観察する能力が求められます。

「多次元的思考」となると、言うは易く行うは難しです。例えば、ユーザーの視線を誘導するためにアイコンタクトを使うことを考えたことがある人はどれくらいいるでしょうか？

著者: リトルラビット

出典: SEM Alliance (ID: semlianmeng)

この記事は、Bird Brother Notesの著者の許可を得て掲載されています。転載をご希望の場合は、著者にご連絡の上、出典を明記してください。