情報フローランディングページをどのようにレイアウトすればよいですか?顧客維持に役立つ3つのヒント~~

情報フロー広告において、ランディングページの役割は、実はスーパーセールスマンのようなものです。

ユーザーがランディングページに入ると、「販売員」が顧客に対して商品の特徴やセールスポイントなどを紹介し始めます。ユーザーは、気になるポイントを見て、惹かれ、さらに説得され、「これが欲しい」と思って注文し、支払いをします。

しかし、ほとんどの場合、広告主はこのセールスマンを過剰にパッケージ化し、常に潜在顧客に伝えたいことをすべて一度に見せようとします。その結果、ページにセールスポイントが山積みになり、ユーザーは圧迫感を感じて離れてしまいます。

デザインの観点から見ると、この問題は実際にはランディング ページのレイアウトを通じて最適化できます。

同じセールスポイントで、高品質のタイポグラフィはコンテンツのプレゼンテーションをよりリズミカルにし、広告をより効果的な方向に展開することを促進することができます。今日は、余白、画像の比率、写真の選択という3つの側面から、ページを適切に配置（パック）する方法についてお話します。

私がこれまで見てきたすべてのランディング ページのデザインにおいて、 「混雑」は共通の問題です。混雑によって引き起こされる最も直接的な問題は、ユーザーの視界に圧迫感を生み出し、ユーザーがランディング ページを離れざるを得なくなることです。

この問題を解決するには、次のことを理解する必要があります。

空白

多くの人は、空白スペース = 空白 = デザインがない、という誤解をしています。これは、空白自体の理解不足によって生じる誤解です。

文字や画像のデザインと同様に、余白自体もデザイン力の反映です。適切な空白によりページがより標準化され、空白の中央に配置された要素は、要素内に配置された要素よりも目を引くようになります。たとえば、このページ:

このページには、ブランド、スローガン、要素、ロゴのみが含まれています。しかし、要点は明らかです。

(追記: 空白は必ずしも「白」ではなく、空白です。)

優れたデザインでは、すべての空白は「目的のある空白」であり、ページの空間構成を制御するという明確な目的があります。

多くの広告ランディング ページのヒート マップを見ると、ほとんどのユーザーの注目は最初の画面に留まり、それ以上読むユーザーはほとんどいないことがわかります。このため、最適化担当者や設計者は、ユーザーは最初の画面にしか注目しないので、最初の画面にもっと多くの広告情報を配置すべきだと誤解してしまいます。

しかし、この制御されていない追加により、ページに含まれるコンテンツが多すぎて、ユーザーに狭さや圧迫感を与え、ユーザーが最初の画面でコンテンツを見る前にページがクラッシュする可能性もあります。

そのため、単純に要素が多すぎることが良いことだと考えることはできません。逆に、適度な余白があれば、ページが広く感じられ、視野が広がります。余白を残すことで、ページの圧迫感を軽減し、伝えたい情報をユーザーが吸収しやすくなります。

例えば、下の写真はシンプルな背景画像とスローガンのみで表現のポイントが非常に明確になっています。

たとえば、次のページ:

空の広い領域は、実は空白の空間です。デザイナーは画面全体を埋め尽くすのではなく、真ん中にメインコンテンツだけを配置しました。それはホワイトボード上のブランド「Huawei Skylink」と「￥9.9」です。2つのホワイトボードは実際には真ん中で切断された線であり、最もユーザーを引き付けるスローガンで埋められています。ユーザーの注目は自然にこの位置にある「海外インターネットアクセスは1日だけ」に留まり、その後自然に「￥9.9」まで読み進められます。

無印良品のアートディレクター、原健氏は著書『White』の中で、「デザインとは違いをコントロールすることです。同じ作業を何度も繰り返すことで、違いを制限し、最も重要な違いだけを残すことが重要だと学びました」と述べています。

空白スペースを使用してページ要素を制限し、ページの主なコンテンツを強調することは、最もシンプルで自然な表現方法です。

つまり、余白は、ページ上の要素や雑然とした色を減らすことで、ユーザーが商品そのものにすぐに集中できるようにする効果的なルールなのです。

この方法は、電子商取引のモバイルページで広く使用されています。実際、この方法は、要素を習慣的に積み重ねて囲むのではなく、情報フロー広告のランディング ページで重要なポイントを強調するためにも使用できます。

たとえば、次の図:

左側には製品のみ、右側には簡単な紹介文があります。この空白スペースにより、ユーザーは一目で製品に気付くことができます。

次の図を見てみましょう。

これは鍋の材料が左右いっぱいに詰め込まれ、調味料が詰め込まれた絵です。真ん中にはたくさんの文字があり、すでに非常に混雑しており、空白のスペースには2つの縁起の良い雲の材料が詰め込まれています。ほとんど空白のないページです。このページに入った人は、このページのテーマが何であるかをすぐには理解できません。

前の図と比較すると、一方には重要なポイントが強調表示されていますが、もう一方には重要なポイントがまったくありません。空白スペースを残すことの利点がはっきりとわかります。

空白は要素間の境界を強化したり弱めたりすることができます。

たとえば、通常のコンテンツの行間隔は 1.5 倍ですが、段落とタイトル間の行間隔は 2 倍、2.5 倍、またはそれ以上に広くする必要があります。空白を使用してパーティションと接続を作成すると、ページのロジックとグループ化が明確になります。

たとえば、フォーム項目、ボタン、段落など、関連しているものの区別が必要な要素の間に空白スペースを残すと、視覚的に認識しやすくなり、ユーザーにすっきりとした印象を与えることができます。

ランディング ページのデザインにはリズム感が必要であり、これは私が常に強調していることです。

余白はページに重要性を与え、異なる視覚的雰囲気を作り出すことができます。さまざまな方法で余白を使用してレイアウトを変更することで、必要なさまざまな効果を生み出すことができます。

以下のように表示されます。

左右の余白、段落間の空白、上部の空白、下部の空白などを利用して、さまざまな視覚効果を作成します。

空白スペースについて話した後、ランディング ページのデザインに関するもう 1 つの誤解について触れなければなりません。これは業界で受け入れられているルールでもあるようですが、ランディング ページの最初の画面は画像でなければならないということです。

実は、ほとんどのランディング ページが「画像」から始まるのには理由があります。結局のところ、画像はテキストよりもユーザーの注目を集めやすく、画像を上部に配置し、コンテンツを下部に配置すると、ページ全体のデザインがよりバランスが取れ、初心者が制御が弱いために頭が軽くなってしまうという問題を回避できます。また、情報フロー ランディング ページのデザイン習慣にも合っています。

ただし、このメリットは良好な画像があることに基づいています。

適切な画像がない場合、無理やり組み合わせると、ユーザーの注意がテキストから逸れてしまうだけなので、労力に見合う価値はありません。

それで何をすればいいのでしょうか?適切な素材がない場合、最初の画面に写真を配置するべきかどうか?

まずコンセプトについてお話ししましょう。

プレートレート

ページに対する画像の比率を画像比率と呼びます。

一般的に言えば、画像レートを下げる（画像コンテンツを減らす）と、すっきりとした高級感が生まれます。

画像レートを上げる（画像コンテンツを増やす）と、画像がより魅力的になります。

情報フローを届けるページなので、ほとんどの場合、ユーザーを惹きつけることを期待するため、画像対画像の比率を高くする必要があります。そのため、冒頭で述べたように、ランディングページの多くは画像から始まるという慣習が生まれます。また、良い画像がない場合でもデザイナーが画像を作成する習慣も形成されます。

実際、この強引なアプローチでは、画像素材はコピーをうまくサポートできません。むしろ、ユーザーの限られた注意を奪い、ユーザーに注目してもらいたいコピーと競合することになります。これは明らかに、有益というより有害です。

では、適切な写真がない場合はどうすればいいのでしょうか?この場合、カラーブロック、要素、フォント、特殊効果の変更を使用して、高画像レートの効果を偽装することができます。

たとえば、デスクトップ、手、映画のチケット、本の紙、クーポン、メモなどのシミュレートされた現実の効果を使用して、インターフェイスをより親しみやすくし、空虚感を軽減することができます。

下の図のように、真ん中の内容だけだと、平凡な自己紹介になってしまいます。

しかし、実際のデスクトップを使用してテーブルをホストすると、デザイン全体が薄く見えなくなります。

下記のランディング ページの最初の画面のデザインを見てみましょう。

フローリング広告のランディングページの最初の画面に移動します。一般的に、フローリングディーラーはフローリングの装飾レンダリングを広告素材として使用することがよくありますが、これは明らかにフローリングディーラーが行いたいプロモーション活動の「つかむ」状況と一致していません。彼らはこのとき何をすべきでしょうか？

デザイナーは、フローリングの広告テーマに合う本物の木の特殊効果とフォントの変更を活用し、コピーを「絵」に変え、マテリアルライブラリで非常に一般的なマテリアルである手を使用して「つかむ」効果を生み出しました。実際の要素をつなぎ合わせて作成されたこの実際のシーンは、 「適切なマテリアル画像」がないという問題を十分に補うことができます。

実際、先ほどの木製フロアのページでは、フォントの変更によってもたらされた疑似的な高画像率効果がすでに確認されています。同様に、幾何学的形状やカラーブロックの変更を使用してこの効果を実現することもできます。

たとえば、次の図:

このページの画像比率は高くありませんが、色、影、丸い角の適切な組み合わせにより、画像全体がまったく単調に見えません。絵があるのと同じ効果、つまりユーザーの視覚を刺激します。

別の実際のケースを見てみましょう。

OPPO のホームページは、化学的変化や色彩の変化を活用し、線や枠、背景色などを補足することで、画像素材を一切使用せずにページを充実させ、鮮やかに見せています。

先ほども述べたように、最初の画面に画像を配置する必要はありません。カラーブロックやフォントの変更などを使用して、高い画像率を偽装することができます。

そこで質問なのですが、クライアントが素材を提供した場合、素材の写真をそのまま使用するのでしょうか?それとも疑似的に高比率効果を作り出すためでしょうか?

最初の画面の画像をフィルタリングするための 2 つの原則は次のとおりです。

1. 写真を見るとスローガンの感情が強まりますか?

2. 写真を見るとスローガンから注目が奪われるでしょうか?

具体的なロジックについては、下の図を参照してください。一般的に言えば、最初の画面の画像のデザインアイデアは、次のルールに従って実装できます。

ランディング ページの主要部分には、画像とテキストのレイアウトも含まれます。多くの場合、関連する画像とテキストを並べて配置します。通常、人々が心配するのは、画像をテキストの左側に配置する必要があるかどうかです。それとも右側ですか?

答えは視覚的な重心、つまり左＞右に基づいています。つまり、左右のタイポグラフィに関しては、重要なコンテンツを左側に配置する必要があります。詳細は以下の通りです。

著者： Weiwei 、 Qinggua Mediaより出版許可。

出典： 情報フロー広告の精密配信