科学的に考える完成されたランディングページ

英語記事を翻訳し紹介しています。元の記事は読みたい場合は下記のリンクを確認ください。 https://blog.studio.design/posts/perfect-landing-page/

ランディングページとは？

ランディングページとは、訪問者に行動を促すためのオンラインページです。 ニュースレターの登録やパンフレットのダウンロード、製品やサービスの購入など様々です。その目的は、訪問者の関心を生み、相互作用を促し、見込み客を獲得し、最終的には訪問者を顧客またはファンに変えることです。

ランディングページはホームページとは異なります。ホームページは、1つの望ましい行動のみ焦点を当ているため、発見性を促進する製品またはサービスの概要を表わします。ランディングページは多くの場合、ブランドとの最初の接点であり、人々を惹きつけて獲得するユニークなチャンスです。

ご想像のとおり、ランディングページをデザインするには、心理学、マーケティングやUX、ビジュアルデザインなど様々な原則を組み合わせる必要があるため、非常に科学的です。これらの原則を慎重にバランスよく適用することで、理想的で価値のあるランディングページが完成します。この記事では、完成されたランディングページをデザインするために役立つ、知覚と説得力を主軸に構築された方法を紹介します。

知覚

知覚とは、感覚を通じて周囲を認識し理解する能力です。 具体的には、視覚は目に入る光を通じて世界を認識する能力です。視覚を活用し、効果的なランディングページを作成するいくつかの方法があります。

息をするゆとりをつくる

余白は、デザインの情報領域の空または低です。また、タイポグラフィ、段落、ボタン、画像など、個々のデザイン要素の間のスペースでもあります。 余白、呼吸する空間は、目を誘導させ、コンテンツを読み取りやすくし、可読性と視覚的階層を高めて理解度を向上させます。焦点を当てる場合や、例えばボタンの可視性を高めるなど、ボタンの周囲に戦略的に使用する場合に役立ちます。

“余白は、受動的な背景ではなく、能動的な要素として見なされるべきである。” - Jan Tschichold

余白はヘッダーに焦点を当てる手助けをします。Brndmkrs.

戦略的にコンテンツを配置する

研究では、私たちはF字型のパターンに沿って、コンテンツの多いWebページを読み取ると言われています。一方で、コンテンツの少ないページではZ型に従って動きます。通常、Z型はページが短く焦点の合ったランディングページに最適です。 重要な情報やボタンなど、主要な要素をFまたはZの領域に配置することで、コンテンツが見つかりやすくなりコンバージョンを向上させます。

Z型は見つけやすさを手助けします。Abyssale.

視覚的階層を確立する

視覚的階層とは、グラフィック要素の視覚的重みと、コンテンツを分かりやすく伝え導くための配置を表します。ページ要素に異なる視覚的重みを割り当てることにより、人々が情報を認識し、コンテンツと関わる順序に影響を与えることができます。色、フォントサイズまたは太さ、画像やビデオを使用して、階層をより良くします。

情報のグループ化

近接、類似、および共通領域は、情報のグループ化に適用する最も重要なゲシュタルトの原則です。近接の原則では、関係する要素は互いに近く、一方で関係性のない要素は離れて置くべきです。 これにより、視覚的階層と読み取りやすさが向上します。同様に、共通領域の原則では、同じ領域内に配置された視覚要素は関連していると認識され、情報またはアクションのグループ化に役立ちます。類似の原則では、よく似たオブジェクトは関連していると認識されるため、オブジェクトを整理して特定の意味や機能として関連付けることができます。

CTAを目立たせクリック可能にする

ランディングページでは、行動喚起 (Call-To-Action) は常に表示し、ターゲットになるべき最重要な要素です。周囲には余白があり、特徴ある明るい色、またはコントラストの高い色は目立つのに役立ちます。太くきれいなフォントは読みやすくします。 一方で、フィッツの法則によると、サイズを大きくしカーソルまたは指の近くに配置することで、操作がしやすくなります。

“ターゲットに到達するのに必要な時間は、開始点からの距離とターゲットのサイズに基づいています。” - Fitts law

CTAは中央に配置され、多くの空白に囲まれています。 Happy tools.

視覚的に刺激し可読性を向上する

色、アイコン、画像、ビデオ、タイポグラフィー、段落、箇条書きは全て可読性を高め、 ランディングページのパフォーマンスを向上させるために使用される視覚的要素です。 色は、感情を生み出し、情報を分類し、視覚的な言語を作り出すことが可能です。アイコン、画像、ビデオは、複雑な情報をサポートする、またはコンテンツを圧倒しすぎず、より面白いものにします。異なるサイズと太さのきれいなフォントは、階層を助けつつ視認性を改善させます。短い段落と箇条書きは、人々の注意を集中させ、提示された情報を簡単に読め理解しやすくします。

サイズ、太さ同様に、色は視認性そして階層を助けます。 Vault Project.

具体的にし、専門用語を避ける

“私たちがどれだけうまくコミュニケーションをとるかは、物事をどれだけ上手に話すかではなく、どのくらい理解されているかによって決まります。” – Andrew Grove

明確さはおそらく適用する最も重要な原則です。 人々が行動するためには、あなたの提案を理解しなければいけません。あなたのターゲットとなるオーディエンスを知り、彼らが楽に理解できる言葉を使いましょう。専門用語を避け、面白賢くしようとしすぎて仕掛けじみたようにならないよう、できるだけ少ない言葉で、可能な限り早く製品またはサービスのポイントや価値にたどり着くようにします。

コンテンツを短くする

調査によると、可読性をサポートするための平均行長はスペースを含めて約70文字です。さらに効果的な段落は、200文字を超えない5〜6文章の長さです。コンテンツを短く読みやすいセクションに分割することで、ページのパフォーマンスが向上します。

“ページ要素を削除することは、ページ上の要素を追加または修正することと同じくらい効果的にコンバージョンを増やすことができます。”　– Mona Elesseily

フォームもできるだけコンパクトにする必要があるため、同様のことが言えます。あらかじめ入力されたオプションを提供しつつ、最も重要な情報のみを求めます。フォームは短く明確であるほど、記入される可能性が高くなります。

説得力

説得力のあるデザインは、人間の行動に影響を与えることに焦点を当てており、オーディエンスの目標、また問題点、動機を知ることから始まっています。後からではなく、今すぐに行動する動機を高めるような提供をするべきです。 そして、価値提案に関する説得技術を取り入れる必要があります。

魅力的で説得のある見出しを考える

注意深く作成された見出しは訪問者の興味を刺激し、注意を引き立てるチャンスは第一印象の1回だけあります。見出しは短く15文字以内で、そのメッセージが人々の興味をつかむ言葉であることが重要です。 完成された見出しは読みやすく、そのページの目的またはそのページから何を得られるか明確に説明されています。

選択肢を減らすことで注意散漫にしない

エイブラハム・ヒックスの法則では、人は決断するのにかかる時間は利用可能な選択肢の数に比例すると述べています。選択肢を増やすことは決断の時間を伸ばすことに繋がります。選択肢を減らすことは、人々がより早く自信を持って行動することを可能にします。

“ランディングページはウィキペディアではない。必要のないリンクを増やすのはやめることです。”　– Oli Gardner

コンバージョンの高いランディングページは最小限であり、気を散らすものはなく目的は明確に1つです。 したがって、完成されたランディングページには無関係なコンテンツ、不要なリンクやナビゲーションはなく、1つの目立った行動喚起 (Call-To-Action) しかありません。これにより、訪問者はページにとどまりメインのアクションに集中できます。

不要な情報やリンクのない最小限のランディングページは、ユーザーのコンバージョンを高めます。 The Design Shop.

ポジティブな感情の繋がりをつくる

意思決定は私たちが思い描いているほど合理的ではありません。意思決定とは、1番影響を与える感情を持つ無意識のプロセスです。オーディエンスとどのような感情が、あなたのブランドとの感情的な繋がりを作り出すのかを知ることがとても重要です。次に、恐怖、ストレス、イライラ、不快感などの否定的な感情を取り除き、親しみのあるシームレスな体験を提供することです。そして、分かりやすく役に立つメッセージと便利で馴染みやすいデザインを適用することにより、信頼、喜び、繋がり、熱意などポジティブな感情を生み出し、人々との繋がりをつくります。

“人は、人を無視するデザインを無視します。”　– Frank Chimero

価値を伝える

オーディエンスにとって何が価値があるのか判断するには、彼らの悩みの種、達成、「隠された」願いを知る必要があります。次に、どう彼らの問題を解決し、目標達成に繋げ、生活をより良くするのかに重点を置く必要があります。大切なことは、どれだけ自分たちが良いかではなく、その人達の生活をより良くすることだというのを忘れないでください。そのためには、質問を予想し、懸念事項に対策しつつ、端的で短く分かりやすい利点のリストを提示します。

“必要性を認識することは、デザインの主要な条件です。”　– Charles Eames

緊急性を与える

緊急性は、人が積極的に購入しようとしている製品やサービスである場合にのみ働きます。もし、すでに訪問者が真剣に検討しているならば、この演出はスムーズな次の行動への後押しになります。期間を設定する、数に限りがある限定感、または関心度の高さを伝えることで緊急性を与えます。 「今だけ」「1度限り」「最後のチャンス」「まもなく終了」などの時間に関連した言葉も、緊急感を与える場合に役立ちます。

予想以上を与える

特典や驚きを与えましょう。あなたにとっては何か簡単なものだとしても、訪問者にとっては便利なものであったり、価値のあるものかもしれません。相手の期待が低いとき、予想以上の提供をします。 これにより人々を良い気分へ導きます。結果、彼らは恩を返す義務を感じ、あなたの製品またはサービスに対して速やかに良い返事をするでしょう。

社会的証明を提示する

社会的証明とは、他の人の決定や行動に影響を受けるという心理的現象を指します。特に、自分自身ではそのものについて確信がないときに影響します。多くの人が何かをしているのを見ることで、それが正しいことだと思うようになります。 お客様の声、評価とレビュー、ケーススタディ、ソーシャルデータを活用して信頼性を伝え、あなたのブランドの採用を促します。

お客様の声は、製品に対する個人の認識に影響を与えるために必要な社会的証明を与えます。 Giddy App.

信頼を築く

信頼を築く効果的な方法は、権威のある人が与える影響力を利用することです。広く受け入れられ、信頼できる専門家または組織は人々に影響を与える傾向があります。専門家によるレビュー、推薦、賞、セキュリティロゴを使用して、安心感と信頼性を確立します。 信頼を得るもう1つの方法は、統一されたデザインと言語、透明性、そして約束を守ることです。

“約束を守り一貫性を保ちます。他の人から信頼される人に。”　– Roy T. Bennett

まとめ

全ての優れたデザインは共感から始まり、完成されたランディングページも例外ではありません。共感により訪問者の立場になって考え、より深く繋がることができます。これは最も重要なステップであり、ページの可能性を最大限に引き出す手がかりです。

“デザイナーの役割は、相手のニーズを予測し思いやりのある行動をすることである。”　– Charles Eames

共感で始まり、残りは後からついてきます。