情報フロー広告ページ（業界全体で収集する価値のある情報フロー広告ランディングページ）

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

私はこの業界に17年間いて、数え切れないほどのデザインを手掛けてきましたが、以下のランディング ページのデザインを見たときに最初に感じたのは、この貴重な学習事例を大切にしたい、ということでした。

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

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

特に上記のランディングページは、全体的な構造、ページレイアウト、画像の選択、カラーマッチングなど、すべての正しいプラクティスを完璧に回避しています。

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

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

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

一目見るだけで感情が安定する

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

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

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

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

二度見してフックアップ

一目見た後は、二度見です。一見すると、ユーザーの感情に配慮し、まずは落ち着かせるだけでいいように思えます。 2 回目は、ユーザーに見てもらいたいものを、ユーザーが自然と見る場所に明確に配置する必要があります。彼らに影響を与えるために、不必要で役に立たないものを使わないように注意してください。

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

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

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

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

これはキッチンリフォーム会社が作成した広告ランディングページです。ユーザーが広告をクリックした後に最初に目にするのは、以下のようなものです。追記：人道的配慮から、ブランドロゴ、名前、その他の情報は匿名化されています。

私が作成したロゴから判断すると、このランディング ページの全体的な構造には、ヘッダー、ナビゲーション、ヘッダー画像、本文、下部の変換フローティング レイヤーが含まれており、これは実際にポータル Web サイトのデザイン構造です。

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

たとえば、ナビゲーション。

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

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

もう 1 つの例はページ ヘッダーです。

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

なぜ？まずはポータルサイトから始めましょう。

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

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

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

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

「ドリームキッチン」のセクションでは、ポータルページのデザイン慣例に従って（もちろん、デザイナーがテンプレートをコピーしただけという可能性もあります）、3 枚の写真が狭いスペースに配置されています。

正直に言うと、広告をクリックするすべてのユーザーが iPhone Plus や iPad で広告を視聴していると想定しないでください。たとえ画面幅がPlusと同じだ​​としても、これら3つの画像をぎゅうぎゅう詰めにすると、視覚的な快適さと情報の伝達に重大な影響が出ます。このように、「夢のキッチン」という感覚がユーザーに全く伝わっていません。

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

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

たとえば、左余白と右余白が等しくありません。

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

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

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

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

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

みんなで一緒に感じていただけるように、写真を拡大してみます。何かおかしいと感じますか?

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

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

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

別の写真セットを見てみましょう。

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

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

もうひとつの例は、このような広角俯瞰図です。整理・収納後の写真なので、できるだけ「理想」のキッチンの様子を見せ、ユーザーに「体験してみたい」という気持ちにさせる必要があります。でも写真には花火の匂いが充満しています…正直者だと言ってほしいですか？それともマーケティングを理解していないのでしょうか?

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

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

ヘッダー画像を最大サイズまで拡大しましたが、「楽しい時間を無駄にしないでください」という文字を見るには、やはり注意深く見る必要があることがわかりました。携帯電話で直接見ると、これらの文字はぼやけて不明瞭です。

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

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

そしてこれ:

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

デザインはマーケティングの重要な部分であり、マーケティングと同様に、ユーザー中心で、ユーザーの視点から物事を見て、ユーザーが視聴を続ける意欲を高めるという独自のルーチンがあります。今日以降、デザインの仕事を任されたら、慌てて取り掛からないでほしいと思います。コピーの意味を理解し、絵のトーンを感じ、ユーザーの気分を想像してみてください。キーワードだけで画像を検索してデザインしないでください。