ランディングページ（LP）のデザイン前にデザイナーが理解しておきたいこと

ランディングページにおけるデザインには、「実際にランディングページに訪れたユーザーに、商品・サービスに興味を持ってもらい、コンバージョンというアクションをしてもらう」という役割があります。

通常、デザインにあたっては、構成案（ワイヤーフレーム）が必要になります。

構成案（ワイヤーフレーム）とはランディングページのシナリオに基づいた詳細な設計図です。各コンテンツに必要な画像・テキストなども含めて、ある程度レイアウトも定まっているものです。

この構成案（ワイヤーフレーム）を元にデザインを進めていくわけですが、デザイナーはただ単に構成案をなぞれば良いのではありません。

デザインを実際に行う前に、構成案の狙いやそもそもの商品・サービスの理解、ターゲットの理解などを十分に行っておく必要があります。

それらを理解した上でデザインするのと、そうでないのとでは、最終的なデザインのアウトプット品質に大きな差をもたらします。

今回の記事では、デザイナーがデザインを行う前に理解しておきたいポイントについて整理してみました。

それでは、ひとつひとつ見ていきたいと思います。

デザイナーがデザインを行う前に理解しておきたいポイント

商品・サービス理解

そのランディングページで訴求する商品・サービスがどのようなものであるかをまず理解しましょう。たとえば、商品・サービスを取り巻く要素として、対象ユーザー/特徴/価格/開発コンセプトなどがあげられます。実際にはヒアリングや競合調査を行いながら、理解を深めていきます。

なかでも、他社の商品・サービスに比べてどのような強みや差別化ポイントがあるのか？はしっかり抑えておきたい重要なマーケティング情報です。

そのためには他社の商品・サービスがどのような特徴を持っているかも知っておく必要があります。コンバージョンラボでは、ランディングページの制作・改善を行う際は、検索キーワードの上位にくるような、競合する商品・サービスのランディングページをピックアップし、実際にランディングページ上でどのような訴求を行っているのか？どのようなコンテンツの順番で訴求を行っているのか？等を比較調査します。

そうした調査をもとに、相対的に比較しながら、俯瞰的に強みや差別化ポイントを捉えていきます。

このように競合も含めた特徴を俯瞰的にデザイナーも把握しておくことで、市場でのポジショニングも踏まえた上でのランディングページデザインを行うことができます。

ターゲット理解

ターゲットとは、実際に制作したランディングページに訪れて、申し込みや購入等のアクションを起こしてほしい人たちのことになります。

ターゲットのことを理解するためには、年齢/性別/職業/年収など具体的な項目に基づき、対象をイメージできるレベルで把握していく必要があります。

特に、属性的な情報だけでなく、対象となるターゲットが抱えている、悩み・ニーズ・課題など、こうした定性情報を肌感で理解することが重要になります。肌感で理解するとは、自分なりに言語化できるか？あるいは、実際に悩んでいるシーンをビジュアルとして想像できるか？そういったところが指標の目安になります。

ターゲットが抱えている、悩み・ニーズ・課題を把握することで、ランディングページ上で何を強く伝えてあげれば良いのか？その訴求ポイントが見えてきます。

たとえば、60代の女性が化粧品を探している場合、お肌の悩みが「乾燥」である場合、ランディングページ上では「潤い」をテーマに訴求を行うことになります。ただし、潤いだけでは差別化できない可能性がありますので、その場合、「潤い」というテーマに対してどのように差別化できるのか？を整理します。1）長時間、潤いを保持する持続力が高い。2）肌の潤いを外側だけでなく内側から促進することができる。3）肌ではなく、体の中から改善できる。このように「潤い」というテーマに対しても、アプローチ方法が商品・サービスによって変わってきます。

こうしたアプローチ方法の独自性が高ければ高いほど強い差別化ポイントになり、訴求力の高いランディングページになっていきます。

また、このようにターゲットの悩み・課題と商品の強みや価値が重なり合うほどに、訴求力の強いランディングページになります。その意味で、商品・サービス理解とターゲット理解は両輪で理解することが大切です。

なお、すでに運用中のランディングページがある場合は、実際にどのようなユーザーが訪れてきているかはGoogleアナリティクスで確認することができますし、また、ユーザーが抱えている悩み・ニーズ・課題は実際に検索しているキーワードの傾向から推測することが可能です。

全体スケジュールの確認

プロジェクト自体がどのように進んでいくのか？という点については、デザイナーの担当領域だけではなく、自分の担当外の部分でも全体像を確認しておく必要があると考えます。

なぜなら、プロジェクトは常に流動的で計画通りに進まないことがほとんどのため、現状の進み度合いを常に意識しておかなければ、いつから自分のデザインが開始するのか？を正確に把握できないからです。

そのような心構えでいることで、いざデザインに入る前の準備も前もって行うことができ、開始のタイミングでスムーズにデザインに入っていくこともできます。

また、先に挙げたような商品・サービスやターゲットに対する理解・考察もデザイン前に事前に行っておく時間を早め早めに確保することもできるのです。

コンバージョンポイントの理解

コンバージョンポイントとは、ユーザーが行うアクションのことです。

例えば、一般的なところでは資料請求、問い合わせ、購入、申し込み、予約、デモ依頼などがあります。

コンバージョンポイントは、アクション後のフローや、実際の営業体制などを踏まえながら、現実的に最終的な受注や購入につなげていく上で無理がないものか？を踏まえて設定していくことがポイントです。

つまり、質は低くてもとにかくリードの数を増やしたいのか？数は少なくても質の高いリードを獲得したいのか？そのいずれかによって、その後の対応フローに影響します。

質が低くても数を増やす場合は、より多くの販売・営業機会が生まれますが、販売・営業の工数などもより多くかかってしまうという側面があります。一方、質に拘れば最終的な売り上げにつながる芽も限定的に絞り込まれてしまう可能性もあります。

これらをコンバージョンポイントに置き換えてみますと、質が低くても数を増やす場合は、「資料請求」や「問い合わせ」など、ユーザーがアクションをしやすくハードルを低くするコンバージョンポイントが当てはまります。一方で、数が少なくても質を重視する場合は、「購入」や「予約」など一歩踏み込んだコンバージョンポイントを設定することになります。

ランディングページのシナリオやコンテンツはこのコンバージョンポイントから逆算して設計されてもいますので、デザインをする上でも抑えておきたいところです。

たとえば、「資料請求」であれば、かえって情報を出しすぎずに、伝える情報は絞り、もっと知りたいと思わせるシナリオ展開に止める可能性がありますし、「購入」であれば、金額まで含めて決断する上で必要な、具体的な情報を掲載する必要があります。

なお、具体的な情報をきちんと発信しようとするほどに、説明のためにコンテンツ自体が増えて、ランディングページ全体が長くなる傾向があります。その場合は、スクロール飽きしないようにメリハリのあるデザイン展開がポイントになるでしょう。

たとえば、コンバージョンポイントがデザインに影響する例としてそのようなことが言えると思います。

導線の確認（ランディングページへの流入経路の確認）

導線の確認とは、ユーザーがランディングページに着地するまでにどのような行動を行うか？＝つまり、どのような媒体を使ってランディングページに着地するかという経路をきちんと把握することです。

一般的には、新規のユーザーを獲得する場合は、検索広告やディスプレイ広告経由で、ランディングページに着地させるケースが多いです。検索広告の場合は、検索窓にユーザーがなんらかの興味のあるキーワードを入力してその検索結果として、ランディングページが表示されて、クリックして着地する。このような流れになるので、予め想定される検索キーワードは、デザイナーもマーケティング情報として関係者から共有してもらい、抑えておきたいところです。

また、ディスプレイ広告の場合は、たとえば、FacebookやTwitterやインスタグラムなどのSNS経由で広告を見てからランディングページに訪れるケースがあります。検索広告のように自分で検索せずに、いきなり表示されたバナーを見て、興味本位でクリックしてランディングページを訪れる。そうしたアクションになるかと思います。そのため、検索広告に比べてランディングページ着地後のユーザーの離脱率も自ずと高くなります。

検索広告であれば、具体的なニーズを持って訪れますが、ディスプレイ広告の場合は、ニーズがもっと薄い、興味本位の状態で訪れます。そういった点で言えば、後者のケースのほうがよりインパクトのあるデザインにする必要があるかもしれません。

一例ですが、流入導線の違いによってそのような違いを持たせる必要が出てきます。

また、別の例でも考えたいと思います。たとえば、法人向けのビジネスを行っている会社で、展示会等に出展した際に、自社のブースに訪問いただいて名刺交換した方をリスト化し、その見込み客向けにメルマガを配信したいという場合に、そのメルマガの文章の中にランディングページのURLをリンクさせてアプローチする。そんなケースもありえます。

その場合、一度接点をもったユーザーに対してのアプローチになるので、上記に挙げた検索広告やディスプレイ広告での新規ユーザーへのアプローチと異なります。

そのため、ランディングページ上では周りくどい前置きなどを伝える必要がなく、端的に商品・サービスの魅力を伝えたほうが効果的な場合もあります。その場合は、ぱっと見た印象で、ごちゃごちゃせずシンプルで、ポイントが明確に伝わるようなデザインが求められるかもしれません。

構成案/ワイヤーフレームの意図の理解

冒頭でも伝えましたとおり、構成案（ワイヤーフレーム）は実際に、デザイナーが見ながら、デザインを書き起こすベースになる資料です。そのため、デザインにおいては欠かせない重要資料です。

構成案（ワイヤーフレーム）とはランディングページのシナリオに基づいた詳細な設計図です。各コンテンツに必要な画像・テキストなども含めて、ある程度レイアウトも定まっているもので、構成案（ワイヤーフレーム）には設計したディレクターやお客様の狙いが詰まっています。

背景にある意図や狙いを理解するためには、デザインに入る前に、構成案（ワイヤーフレーム）そのものをまずはしっかり読み込み、前者に挙げた商品・サービスの特徴、ターゲット情報を事前に理解しておくことはもちろん、疑問に思った点は曖昧にせず、しっかりと理解を深めることが大切です。できれば、資料をもらうだけでなく、構成案（ワイヤーフレーム）を実際に設計した担当者から説明をしてもらったり、疑問点を質問する機会を作りましょう。

それらを知ることで意図を明確に踏まえたデザインを行うことができ、コンバージョン率の向上という大きな目的に寄与することができるようになります。

また、構成案（ワイヤーフレーム）のレイアウトはあくまで一つの表現例であり、100%再現しなければならないものではないため、どうやったらこのコンテンツはもっと情報を伝えやすくなるのかということを考えながら、より最適なレイアウトにしていくこともデザイナーの仕事の一つです。

その商品・サービスの魅力を的確に伝えられる構成案（ワイヤーフレーム）は時にデザインと勘違いされるようなこともあり、このような伝え方があるのか！とお客様に感動してもらうこともあります。

デザインではその感動をさらに超えた二度目の感動を与える。そんなスタンスで構成案（ワイヤーフレーム）を超えるデザインを作っていくことが次の感動につながります。

仕様に対する理解

仕様については、そのランディングページごとにさまざまなレイヤーがあり、さまざまな要素があります。実際のコーディングやバックエンド開発の部分などエンジニアリングと紐づくところです。ユーザーがなんらかのアクションを起こす部分も仕様に関わるところとも言えます。

たとえば、

・レスポンシブデザインなのか？

・スライダーやタブを実装するのか？

・ヘッダーやフッターは固定するのか？

・アンカーリンクを実装するのか？

・問い合わせフォームはつくるのか？

など、このような点が挙げられます。

実際のデザインにおおいに影響する点なのでしっかり把握していく認識の齟齬がないようにしましょう。

アクションを起こすボタン箇所はその他のコンテンツの色や装飾と明確に分ける必要があります。

ユーザーがボタンと認識できるようなルールとしてランディングページ上で統一されているか？などUIデザインの上でも重要になります。

コンバージョンラボでは、ランディングページ制作後の分析・改善時にPtengineという分析ツールを利用します。Ptengineはヒートマップという機能があり、ユーザーのタップの形跡なども確認できます。この機能では、時にボタンと勘違いされてやたらとタップやクリックされているパーツ要素などが確認されることがあります。

デザインしている側からは「これはボタンで、これはボタンではない」と分かっていても、はじめて訪れたユーザーにはぱっと見ただけではその区別ができない場合はおおいにあります。

そうした意味でも仕様をきちんと理解して、ユーザー視点に立った配慮のあるデザインを行いましょう。

コストへの理解

このランディングページを制作するために、どのくらいの費用でお客様から発注を請けているか？

お客様が期待を込めて依頼していただいているランディングページの制作という仕事ですから、そもそもどれくらいの費用でご依頼されているかは営業担当でなくても知っておく必要があります。その価値に見合った仕事をしていくことはもちろん、同時に自分はどのくらいの時間でデザインを完成させなければいけないのか？という見立ても立てる必要があります。

ですから、どのくらいの費用で依頼を受けて、実際に関係者全体を含めてどれくらいの工数で制作を行うのか？ということを知っておきましょう。

まとめ

弊社では、情報デザインという言葉を使いますが、情報デザインとは、ユーザーに対して、訴求内容がわかりやすく直感的に伝わるかを追求するデザインのことです。それを行うためには、デザイナー自身の頭の中の情報が整理されていなければなりません。ですから、手を動かす前のインプット時点からすでにデザインははじまっているのです。

コロナ禍でオンライン販売・営業の重要度が格段に上がりました。そして、そのことによるメリットを多くの人が享受しました。この流れは、例えコロナが収束しても収まることはなく、加速していくことでしょう。

そのため、オンライン販売・営業における一つの手法として欠かせないランディングページやLPOのニーズもますます増えていくことと思います。そうした時に、商品・サービスの魅力を的確に捉えて、情報デザインできるデザイナーの価値はさらに高まっていくことは間違いありません。

今回は、ランディングページのデザイン前にデザイナーが理解しておきたいこと。という切り口から記事をまとめみました。ぜひご参考ください。