エンジニアブログ

RSS

ランディングページについて考える

tweets master

こんにちは、コーディング工房です。
今回は“ランディングページ(Landing Page)”について述べていきたいと思います。

 

ランディングページはWebサイト同様、企業の顔の一つ。
閲覧者の離脱率を抑え、コンバーション率を高める手法です。
インターネット広告や検索エンジンの検索結果からのウェブページ閲覧者の滞在時間、ページ増大
から収益増大を図るランディングページ。その制作に携わっています。

まず、制作に際し、見る人の立場になって考えてみました。
Webサイトから離脱するのはどんな心情でしょうか。
私の場合は、


「一目見て何を伝えたいのか分からない」
「読んでいて疲れてきた」
「スクロールが長い」

といった理由でした。


なので、心掛けたのは


・一つの商品を訴求する内容にする
 (二つ、三つ挙げると、何を伝えたいのかあいまいになる)
・訪問者は何を期待して訪問するのかを考える
 (例えば、訪問者が「高品質」を期待したとして、何をもって「高品質」とするのか提供者が想定、説明しなければ、商品の良さが伝わらない)
・伝える内容を凝縮させてスクロールの手間を出来る限り少なくする
 (ただし、派手な配色、大きなテキストを多様しては目に障るので、色調、自体を揃える)
・漫画のコマ割りや、三段論法のような、起・承・転・結を持たせたページ構成にする
 (読んで飽きる、ということがないような構成で)
・実績を紹介したり、お客様の声や専門家の見解、数値、などの具体例を挙げ説得力を持たせる
 (第三者の視点を持たせれば、説得力が増し安心感が与えられる)


箇条書きにして挙げてみましたが、具体的に商品の強みを伝える方法なんでしょうか? 
実際のランディングページを見てみました。

『ランディングページ集めました』
http://lp-web.com/black/


様々なLPがありますが、目を惹かせる手法がいくつか見えます。

 

・ページ上部の見出し、内容が大きくレイアウトされている
・黒字に黄色、といったアクセントのある配色
・文字列が斜め、遠近法を用いた見出しなど、均等に揃えられたレイアウトに「おや?」と思わせる配置
・画像やグラフなど実例を挙げている
・立体感のあるボタンやアイコン
・矢印を用いて、サービスの流れを図で解説している

 

さて、これらの手法を実際に用いるとして、ワイヤーフレームを起こしたとしても、オリジナリティのあるLPの制作ができるとは限りません。
ごちゃごちゃしたレイアウトを避け、情報を凝縮して正確に伝えなければなりませんから。

……凝縮された情報を伝える、といえば、電車の中吊り広告や雑誌の表紙が思い浮かびます。

 

よく観察し、センスを養いつつLPレイアウトの糧に制作へ……