業界の専門家全員が収集する価値のある情報フロー広告ランディングページ

ほとんどのランディング ページの役割はコンバージョンを促進することであり、コンバージョンの前提条件はまず顧客を維持することであることは誰もが知っています。つまり、ユーザーが広告をクリックしてランディングページに入った瞬間から、興味を持つまで、ページを閉じるという考えを持ってはいけないということです。

しかし、現実には、レイアウトや画像が不快なため、ほとんどのユーザーは 2 語も読む前にページを離れてしまうため、コンバージョンを期待することはできません...

特に以下のランディングページ。 17 年の経験を持つ広告業界のベテランとして、このデザインを見たときに最初に感じたのは、これを大切にしたいということでした。1 ページですべてのデザインのタブーを完璧にカバーできるのは珍しいことです。全体的な構造、ページレイアウト、画像の選択、カラーマッチングなど、すべての正しい慣行を完全に回避します。

デザインロジックと美のロジック

ランディング ページが人々に与える第一印象は、大人が何かを突然見たときに通常感じる全体的な感覚として理解できます。

女の子に対する私たちの第一印象は、清潔で、おしゃれで、可愛くて、性格が良いということであり、私たちはその女の子が美人であることを常に覚えているでしょう。実際、よく見なければ、彼女は普通に見えるかもしれません。

ランディング ページのデザインでも同様で、一目見たときの美しさが重要です。乱雑なレイアウト、つまらない画像、読み込み時間の長さなどの問題は、ユーザーに悪い第一印象を与えてしまいます。したがって、ユーザーに留まってもらい、セールスコピーを読んでもらいたい場合は、次の 3 つのノードのデザインに特に注意を払う必要があります。

一目見ただけで感情が呼び起こされる

優れたランディング ページは、一目見て次の 2 つの条件を満たしている必要があります。

1. 乱雑になってはいけない。一見すると、雑然とした内容は読むプレッシャーを増大させ、プレッシャーを感じると人は自然と逃げ出そうとします。

2. ユーザーの目に入る画像は、ほぼ一目見ただけで、ユーザーの同一視の感覚を呼び起こし、ユーザーが興味を持つようにする必要があります。

上記2点、つまり見ていて飽きが来ず、楽しさを感じさせる商品が実現されて初めて、ユーザーは一時的に留まるのです。

二度見してフックアップ

一目見た後は、二度見です。

一見すると、ユーザーの感情に配慮し、まずは落ち着かせる必要があります。次に、ユーザーに見てほしいものを、ユーザーが自然に見る場所に明確に配置する必要があります。ユーザーに影響を与えるために、不必要で役に立たないものを使用しないことを忘れないでください。

第三の目は財布を固定する

次のステップは簡単です。相手とつながった後は、相手が行動を起こすよう促すために、便利でわかりやすく、操作しやすいガイダンス方法をタイムリーに提供すればいいだけです。

もちろん、それが便利で、分かりやすく、操作しやすいかどうかは、あなたがプロモーションするユーザーのタイプによって異なります。例えば、若いユーザーと年配のユーザーでは考慮すべき点が異なります。また、相談をガイドするのか、フォームの記入をガイドするのか、目的によっても異なります。ユーザーがこの時点でアクションに関するさらなるガイダンスを見つけられなければ、もう一度注意深く読む忍耐力がなくなり、これまでの努力がすべて無駄になってしまう可能性があります。

デザインの観点とユーザーの観点

ランディングページ設計の要件を簡単に紹介した後、業界全体で収集する価値のある、この記事の冒頭の情報フロー広告ページに戻り、それを例に、どのようなタブーが侵害され、どのように調整されているかについてお話しします。

ブランドロゴを入れた方が良いでしょうか？

キッチンリフォーム会社が制作した広告ランディングページです。広告をクリックしたユーザーが最初に目にするのは、以下の画面です。人道的配慮から、ブランドロゴや名称などの情報は匿名化しています。

このランディング ページの全体的な構造には、ヘッダー、ナビゲーション、ヘッダー画像、本文、下部の変換フローティング レイヤーが含まれます。これは、実際にはポータル Web サイトのデザイン構造です。

実際、ポータル Web サイトの構造を利用して情報フロー広告のランディング ページを作成するのは、非常に好ましくないアプローチです。
情報フロー広告のランディングページ設計のポイントは、極めて短い時間でユーザーの悩みをつかみ、強く訴えて心を動かすことです。大量のコンテンツを蓄積すると、ユーザーは簡単に忍耐力を失います。

たとえば、ナビゲーション。
ポータルサイトは、企業や商品について、全体から詳細まで詳しく解説しているため、情報の流れが大きく、構造が複雑で、ジャンプを何度も繰り返す必要があります。検索したユーザーがジャンプしたい場所にたどり着くためには、ユーザーを誘導する「ナビゲーション」が必要です。

情報フロー広告の前提は、ユーザーの能動的な検索に基づいていません。ユーザーは広告を見たいとは思っていません。このような心理的背景の下でナビゲーションを設定することは、明らかにユーザーの忍耐力を過大評価し、「ユーザーは私たちについてもっと知りたいと思うだろう！」と考えています。実際には、ユーザーがもっと知りたいと思うのは、製品に対する強い関心と強いニーズがある場合のみです。それ以前は、これらのナビゲーション設定は、ユーザーに複雑で乱雑な感じを与える以外に役に立ちません。

もう 1 つの例はページ ヘッダーです。
このページのヘッダーは画面の 1/6 を占めています。残念ながら、情報フロー広告のランディング ページの場合、この 1/6 のロゴ表示は意味がありません。

なぜ？まずはポータルサイトから始めましょう。
一般的に、ポータル Web サイトにはヘッダーにロゴがあります。ロゴは、存在していれば、それほど大きくする必要はありません。ユーザーは、ホームページを行き来するときに、いずれにしてもロゴを目にすることになります。ただし、ランディング ページでロゴを使用する目的は、ブランドを公開し、自分のブランドのものを見ていることをユーザーに知らせることです。そのため、ロゴをメイン画像の位置に配置して、目を引き、見やすくする方がよいでしょう。

詰め込むほど、効果は悪くなります。

組版には、画像のサイズ、位置、配置、行間、余白、テキストの間隔などが含まれます。理論的な観点から見ると、タイポグラフィはデザイナーのロジックのようなもので、成熟したシステム理論です。言い換えれば、ユーザーエクスペリエンスを最適化するには従うべきルールがあります。ただし、この場合のランディングページは、正しいタイポグラフィのルールをすべて完全に回避しています。

たとえば、ヘッダー画像（前の画像の構造の説明を参照）は大きな領域を占めていますが、何も表現していません。

「ドリームキッチン」のセクションでは、ポータルページのデザイン慣例に従って（もちろん、デザイナーがテンプレートをコピーしただけという可能性もあります）、3 枚の写真が狭いスペースに配置されています。
正直に言うと、広告をクリックするすべてのユーザーが iPhone Plus や iPad で広告を見ているとは思わないでください。画面の幅が Plus と同じだとしても、これら 3 つの画像をぎゅっと詰め込むと、視覚的な快適さと情報の伝達に重大な影響が出ます。この場合のように、「夢のキッチン」という感覚はユーザーにまったく伝わりません。

そしてフォント。ページ全体で 5 種類ものフォントが使用されており (斜体などの異体字は含みません)、見出し、タイトル、本文、キャプションなどの区別も非常に雑然としています。デザイナーはまったく計画性がなく、おそらく「このフォントを使ったばかりだし、そろそろ変えてみよう」と考えたのでしょう。このような不規則なデザインは、ユーザーにわかりにくいメッセージを伝え、意味のあるコンテンツを見る能力に影響を与え、スクロールダウンする意欲を失わせてしまいます。

それだけでなく、デザイナーは、行間や余白が必要な場所をすべて要素で埋めてしまいました。情報入力セクションでは、2つのテキストボックスとアプリケーションボタンの間隔が一貫していません...ああ、恥ずかしい...これらは、視覚的な混雑感を増大させ、ユーザーの読み取りしきい値を高め、ユーザーの忍耐力を失わせ、直帰率を高めます。

たとえば、左余白と右余白が等しくない

たとえば、「変換後」という 3 つの単語が青緑色の背景をほぼ埋め尽くしています。

たとえば、このフォームでは、3 つの要素間の間隔は等しくありません。

絵は感情を伝えるために使われる

ランディングページ上の画像は、感情を呼び起こしたり、感情を強めたり、行動を促進したりする役割を果たすことが多いため、画像の選択の質は非常に重要です。この場合の写真の多くは奇妙です...

たとえば、以下のようなものです。ユーザーの悩みを指摘するために、デザイナーは、汚くて散らかったキッチンの写真のコレクションの後に、主婦が大声で叫んでいる写真を配置し、写真に「あなたはまだキッチンの散らかりを我慢していますか？」というテキストを添えました。 ? ?
みんなで一緒に感じることができるように、写真を拡大してみます。何かおかしいと感じますか？

主婦は悲しそうな顔をしながらも、あなたにこう言います。「まだ我慢しているの？」 - このような会話は現実的でしょうか？

しかし、これを変更したらどうなるでしょうか?

主婦の方がずっと誠実だと感じますか？

別の写真セットを見てみましょう。
キッチン改装の「成功事例」を説明するために、ランディング ページには次のような一連の写真が掲載されています。

デザインの観点から見ると、写真の内容、形式、構成、角度はすべて感情を伝えます。しかし、この写真はユーザーにどのような印象を与えるのでしょうか? 「これ、すごくいい！」と思うでしょうか、それとも「あ、これがリフォームしたもの？私のものほど良くないな…」と思うでしょうか。

もう 1 つの例は、次のような広角俯瞰ビューです。

整理・収納後の写真なので、できるだけ「完璧な」キッチンの姿を映し出し、ユーザーに体験してみたいという気持ちにさせるべきなのですが、写真には花火の匂いが充満しています…正直に言ってほしいですか？それともマーケティングを理解していないのでしょうか？

重要なのは、ユーザーの視界を妨げないことです

引き続きヘッダー画像を使って、今回はそのカラーマッチングの問題についてお話します（このヘッダー画像にはいくつの間違いがあるでしょうか？ 興味があれば戻ってクリックしてください…）

ヘッダー画像を最大サイズまで拡大しましたが、「Don't waste the good times」という文字を見るには、やはり注意深く見る必要があることがわかりました。携帯電話で直接見ると、これらの文字はぼやけて不明瞭です。

おそらくデザイナーはこう言うでしょう。「はっきりと見る必要はありません。単なる装飾ですから。」

しかし、デザイン要素がはっきりと見えない場合は、新年までそのままにしておくべきでしょうか?要素が見た目が美しく、かつ効果的な情報を伝達できるものであることは期待していませんが、少なくともユーザーの視覚を妨げず、真に効果的な情報をユーザーが見る能力に影響を与えないようにする必要があります。

そしてこれ:

同じ緑の背景では、白い文字ははっきりと見えますが、オレンジ色の文字はぼやけています。なぜ？画像の背景色とテキスト色の明るさが近すぎるため、同様の明るさにより背景色とテキストの境界がはっきりせず、テキストをはっきりと認識できなくなります。

情報フロー広告のプロセスにおいて、デザインの価値は著しく過小評価されていると言わざるを得ません。デザインは、実はマーケティングの重要な部分です。マーケティングと同様に、デザインにも独自のルーチンがあり、ユーザー中心で、ユーザーの視点から物事を見て、ユーザーが視聴し続ける意欲を高めることが求められます。今日以降、デザインの仕事を任されたら、焦らずに取り掛かってほしいと思います。コピーの意味を理解し、写真のトーンを感じ、ユーザーの気持ちを想像してみてください。キーワードだけで写真を検索してデザインしないでください。