プロモーションコストが高く、コンバージョン率が低いですか?最適化技術の6年間の経験を無料で手に入れよう〜

数日前、誰かが陰で私に尋ねました。 「編集者さん、あなたはとても才能があるのに、クリックはあっても会話がないという問題をどうやって解決するのですか？」

この若者は素晴らしいビジョンを持っているのに、思慮深い編集者がどうして問題解決を手伝わないでいられるでしょうか?そのため、私自身が調査した結果、 「申し訳ありませんが、このランディング ページを変更する力はありません」としか言えません。

ランディング ページの全体的なレイアウトは非常に充実しており、ユーザーに視覚的な負担をかけやすくなります。メイン カラーが製品の色と一致しておらず、製品が適切に表示されていません。一部のフォントが小さいため、閲覧が困難です。コピーライティングは、問題点を突くのに十分ではありません...

ランディング ページはトラフィックを運ぶ役割を担っているため、会話のないクリックの 80% はランディング ページの不備によるものであると言っても過言ではありません。また、モバイル インターネットの時代であるため、モバイル ランディング ページの重要性は 80% を占めています (一部の従来の業界を除く)。

すると、おそらくこのとき誰かがこう言うでしょう。 「編集者さん、ランディング ページに問題があるのはわかっていますが、ここにはプロのアーティストがいませんし、デザインもわかりません。」

そこで今日は、この有能な編集者がいくつかのコツを皆さんにお伝えします。この記事では、携帯電話を例に、携帯電話の属性とユーザーの習慣という2つの側面からランディングページのデザイン手法を分析します。ぜひノートにメモを取ってください。

携帯電話の特性について話すとき、誰もが最初に抱く反応は間違いなく「軽い、薄い、小さい」です。ランディング ページのデザインでは、小ささが重要なポイントであり、その重要性は 100% です。

一般的に、携帯電話のサイズは6インチから3.5インチで、片手で持つことができます。

したがって、設計時にはデバイスのサイズに注意して画像のサイズを決定し、仕様の違いによる不完全な画像の表示を回避する必要があります。

設計最適化計画:

• 携帯電話のサイズにフィット

現在、ほとんどの携帯電話のフルスクリーンサイズは720×1280ピクセルで、構成比は9:12です。

推奨されるデザイン寸法は、幅 720 ピクセル、高さ 1000 ピクセルです。

外観も携帯電話の属性の一種です。携帯電話とパソコンの最大の違いは、一方が横向きで表示され、もう一方が縦向きで表示されることです。

そのため、デザインをする際には、ランディングページのデザインの形や構成の考え方に注意を払う必要があります。

設計最適化計画:

• 上段と下段

PC側の影響で、デザインをする際に横向きで構成を表示しがちなデザイナーも多いのではないでしょうか。

• たとえば、図 1: 画像が小さく、フォントも小さいため、読みにくいです。
• 例えば、図2: 上下に読むことは、ユーザーの閲覧習慣に合致している

図1

図2

携帯電話は小さくて長い形状をしており、日常生活で情報を閲覧する際は上から下へ読む傾向があります。したがって、列を垂直列と水平列に分割し、左列と右列を避けるようにしてください。

目の前に白い紙がある場合、私たちの目は紙全体に集中します。紙の上に小さな点がある場合、私たちの目は紙全体に集中します。

携帯電話自体が小型であるということは、ユーザーの注意が十分に集中することを意味します。

したがって、設計する際には、ユーザーがページ上のコンテンツを可能な限り覚えられるようにする必要があります。

設計最適化計画:

• 1つの画面、1つのテーマ

画面は携帯電話の最小の情報単位であり、つまりユーザーが見ることができる情報の最大量です。

1 つの画面、1 つのテーマにより、コンテンツが一目でわかり、ユーザーはざっと目を通すだけで内容を覚えることができます。また、情報間の相互干渉も軽減されます。

• 例えば、図1：セールスポイントは多いが、読後の印象が深くない
• たとえば、図 2: 画面全体でセールス ポイントを強調表示することで、インパクトが増し、読んだ後に深い印象が残ります。

図1

図2

• 適切な空白

ランディング ページのコンテンツ情報に適切な空白スペースを残すために、文の区切りや行間などを使用します。

一方で、コンテンツ情報をより階層化することができ、他方では、ユーザーが情報を受け取る際の難易度を大幅に軽減し、情報伝達の効率を向上させることができます。

• 例えば、図1: テキストと画像が密集して配置されており、十分なスペースがありません。
• 例えば、図2：単語間に空白があり、順序は整然としており、単語は多いが乱雑ではない

図1

図2

• 上部と下部のブランクを切り取ります

縦長の長方形の画面に面したとき、全体のバランスをとるために、デザイン本体を中央に配置すると、中央の形状にユーザーの注目が集まります。これはほぼ自然に調和したタイポグラフィデザイン手法です。

しかし、これでは当社の製品プレゼンテーションの利点が活かされません。

• たとえば、下の写真では、ユーザーの注意は視覚的にある程度集中していますが、商品の表示には役立っていません。

そのため、商品を表示する際は、上下に余白を残さず、全画面で表示しましょう。

「ドライ」はほとんどの人にとってキーワードと言えるでしょう。膨大な情報の誘惑、慌ただしい時間のプレッシャー、そして時代の急速な発展により、ユーザーが何かを注意深く見る忍耐力を持つことはほとんどありません。

さらに、現在の読書環境は比較的断片化されており、飛ばし読みや選択読みが現代人の特徴となっています。

設計最適化計画:

• コントラストを使う

ユーザーは選択的に読むため、コントラストをうまく利用してテキストに階層感を与え、ユーザーに見せたい内容を理解できるようにする必要があります。

• たとえば、下の写真。グレーと黄色を使用してコントラストを作成し、コンテンツをより目立たせます。

一般的な比較は次の形式で表されます。

サイズのコントラスト、色のコントラスト、仮想と現実のコントラスト、前後のコントラスト

スキッピングによって生じる現象の一つに、滑走速度が速いことが挙げられます。また、大画面の携帯電話（指を上下にスライドするだけ）のサポートにより、この現象が発生する可能性がさらに高まります。

そのため、ランディングページの内容は「一目で分かりやすい」ものでなければなりません。

デザイン：

• 一目でわかり、数秒で理解できる

コンテンツ情報は簡素化し、公式、技術、業界特有の言語は避ける必要があります。

• 背景画像の文字を隠さないでください

多くの場合、広告主は、ユーザーの商品認知度を高めるために、背景画像とテキストを使用して商品を表示します。

たとえば、下の写真のような商品情報を閲覧したいですか?

上記の例は反例となり得ます。通常、この設計方法を使用する場合は、次の 2 つの点を満たす必要があります。

まず、目への刺激を減らすために色を複雑にする必要がないため、客観的にユーザーの忍耐力が長くなり、つまり画面上の情報を読む時間が長くなります。

次に、背景画像を文字で覆わないでください。そうしないと、テキストと画像によって伝えられる情報が影響を受け、伝達効果が弱まります。

• 例えば、下の画像では、全体的に色が多く、濃い赤の背景に赤い文字が使われているため、文字が非常に認識しにくくなっています。

クリックはあるのに会話がないとよく言われますが、実は重要なポイントはランディングページにあります。

では、ランディングページとは何でしょうか?簡単に言えば、一方ではマーケティング理論がユーザーをだまして注文させるために使われ、他方ではデザインがユーザーエクスペリエンスを向上させるために使われます。そして経験が前提条件となります。

ユーザーがランディング ページを完全に閲覧できる場合にのみ、ユーザーはマーケティングに騙される可能性があります。

読者の皆さん、あなたのランディング ページは適切なページでしょうか?

この記事の著者は@兔子です。編集・出版は(Qinggua Media)です。転載の際は著者情報と出典を明記してください。

製品プロモーションサービス：APPプロモーションサービス、広告プラットフォーム、Longyou Games