【実例付き】ランディングページ制作の「現場」でデザイナーが無視できない5つのポイント

ランディングページは、直接的に購買に結びつける時代を脱し、ユーザー体験や読後感を意識したページも増え、その目的は多様化しています。そのため、数年前では効果的だったランディングページも、目的によってはあまり効果に結びつかない場合もあります。

今回は、デザインの切り口から、ランディングページ制作の「現場」で無視できない5つのポイントを、実例を交えてご紹介いたします。効果的なランディングページを作成するためのポイントを、今一度確認してみましょう。

ランディングページ制作の「現場」で無視できない5つのポイント

1. 1つの具体的で明確な目標を持つ

ランディングページで目標を達成するかどうかは、ランディングページの作成前に決まっていると言っても過言ではありません。そのページが何のために存在するページなのか、誰が見ても分かるページにする必要があります。

目標として設定する指標はさまざまなです。ランディングページといえば物販で*「商品を購入してもらう」ことがゴールというイメージが強いですが、最近ではもう少しカジュアルな目標*を定めるのも珍しくありません。

・動画を見てもらう
・ゲームを楽しんでもらう
・ソーシャルメディアでシェアしてもらう
・記事を読んで商品を認知してもらう

http://event.atre.co.jp/sakura2018/

例えば、アトレさくらプロジェクト2018では、「さくらジェニック」をテーマにしたアトレ店内のフォトスポット紹介や、人気インスタグラマーによるフォトジェニックなお花見テクニック、レシピ紹介などを通じて、「アトレ」のブランドイメージ向上を目標に置いています。

https://www.ana.co.jp/ja/jp/domestic/departure/inflight/wifi-promotions/

また、ANA国内線「ANA Wi-Fi Service」のランディングページでは、2018年4月1日から始まっているANA国内線Wi-Fiサービスが無料になることを告知している内容になっています。最終的な導線として空席紹介や予約ができるようになっていますが、ANAでの旅がもっと便利になることをアピールしています。

このように、昨今のランディングページでは、必ずしも個人情報を取得したり売り上げに繋げたりといった目標だけでなく、よりカジュアルな目標を設定している場合もあります。ランディングページを作成する際は、具体的にどのような目的で作成するのか、しっかりと明文化しておくとよいでしょう。

2. ペルソナに合わせた写真を使う

ペルソナとは、商品・サービスを利用するターゲット層から抽出した人物モデルのことです。

参考：
今さら聞けない！「ペルソナとは」基礎知識とその重要性について

ランディングページにも、当然ながらペルソナ設定が必要です。しかし、まれにランディングページの「ペルソナ」と「使用する写真」にミスマッチが起こってしまうことがあります。

食品系LPなどを除いて原則として、想定するペルソナをランディングページのアイキャッチとして冒頭に登場させるのがよいでしょう。なぜなら、先頭に登場する人物を見て自分と近い人物や関係する人物であれば、ユーザーはよりランディングページに親近感を持ち、興味を持ち始めるからです。

https://pechat.jp/

ぬいぐるみをしゃべるおもちゃにするおしゃべりボタンPechat（ペチャット）のホームページのヒーローイメージは、「子どもと人形」の写真が登場します。子どもを持つお父さん・お母さんをターゲットにしていることが一目瞭然です。

コカ・コーラ社より発売するザ･タンサンのラインディングページでは、炭酸水の中でも男性の力強いイメージを借りています。もちろん、炭酸水は男女ともに飲むものではありますが、黒字に太い書体や若い男性をアイキャッチに取り入れており、若年男性層に訴求力があります。

この2例のように、無意識的にせよ、冒頭でモデルとした人物が、そのページのメインターゲットとして認識されがちです。人物画像で無料素材などを使いすぎると、ターゲット層と乖離した人物としてイメージされてしまうこともあるので、注意が必要でしょう。

3. ヒーローイメージにインパクトを持たせる

*「第一印象が最重要」*という、有名な心理学の法則「メラビアンの法則」は、ランディングページでも健在です。最初の数秒で心を掴むためには、インパクトのある高画質で魅力的な画像を用意するのは絶対に必要です。

https://www.ministop.co.jp/syohin/sweets/parfait/rennyuichigo-parfait2018/

ミニストップで発売する練乳いちごパフェのランディングページは、いちごに囲まれたカップのなかに美味しそうに飾られている練乳いちごパフェに、思わず視線が集まります。いちごの光沢やきっと柔らかいクリームが来訪者の目に止まるだけでも、「ミニストップの練乳いちごパフェ」の存在が刷り込まれてしまうでしょう。

http://www.mouse-jp.co.jp/campaign/nogizaka46/

また、乃木坂46のメンバーを起用して広告を展開しているマウスコンピューターのランディングページでは、耳が動く乃木坂メンバーをページトップに配置しています。

いずれのホームページも、アバブザフォールド(スクロールする前の「下の折り目」より上の部分)で高画質でインパクトのある画像を採用しています。ヒーローイメージがページの半分くらいしか占めてないランディングページよりも、大胆にアバブザフォールドを使い切ったほうが印象にも残りやすいため、ページ構成を考えるときには注意をしましょう。

4. ブランドイメージの軸を決める

ランディングページの全体的な統一感を保つために、可能な限りカラーパレットやフォントなどを統一しておきましょう。

Z クロッカンシュー ザクザクのページでは、年齢や性別を感じさせないカジュアルなパステルカラーの水色をベースにピンクやエメラルドグリーンも取り入れています。サンセリフ書体を取り入れ、シンプルながらもわくわく感のある演出が出来上がっています。

https://www.haagen-dazs.co.jp/3berry_rare_cheese/

一方、同じスイーツカテゴリでも、色やフォントを変えるだけでイメージがガラッと変わります。ハーゲンダッツより発売する3種ベリーのレアチーズのページでは、ピンクの色に、細字のペン字体を斜めに配置し、女性的な甘酸っぱいイメージに仕上がっています。

おなじ商品を紹介するにしても、フォント選びや配色選びで、イメージはガラリと変わってしまうものです。適切な組み合わせを選ぶためには、事前にしっかりとペルソナやターゲットを決めておくことが重要となります。

5. 視線の動線が命取り

ランディングページで最も重要なことは、下までスクロールしてもらうことです。

しっかりと最後まで読んでもらうために、視線を意識したデザインを心がけてみるとよいでしょう。そのためには、レイアウトを崩して「あそび」をつけることも時には必要でしょう。

http://www.fujimoto-deburring.co.jp/

静岡県浜松市でバリ取り(金属やプラスチックなどを加工する時にできるギザギザを取る作業)を行っている藤本工業株式会社のページでは、あえて斜め45度のラインを意識した直線的な構成になっています。そのため、視線が自然と右上から左下に流れる構成になり、思わず下までスクロールしたくなります。

また、ダイビングライセンスを楽しく取得できるピーシーズのページでも斜線を巧妙に取り入れており、視線が流れるような工夫がされています。

ランディングページは縦長のページになりやすいですが、その際に必ずしも水平の画像を重ね合わせる必要はありません。もちろん、斜めの線を取り入れるとデザイン上の難易度は上がりますが、コンバージョン率アップのために取り入れるのも一つの手段と言えるでしょう。