2016年1月17日

成果の出るデザインから学ぶ

webデザイナーなら知っておくべきLP(ランディングページ)のデザインまとめサイト5選

webデザイナーなら知っておくべきLP(ランディングページ)のデザインまとめサイト5選

WEBデザイナーがランディングページを作成する際、ただ見た目がきれいなデザインをすればいいわけではありません。
ランディングページの目的は成果の獲得です。ランディングページのデザインは獲得率に大きく影響しますので、WEBデザイナーも成果の出るランディングページの作り方を知っておく必要があります。
 
WEBデザイナーが知っておくべきランディングページの基本と、成果の出るランディングページの基本的な作り方を解説したいと思います。
後半にランディングページのギャラリーサイトを5つ紹介していますので、デザインの参考に活用していただければと思います。
 
 


【ランディングページの基本】

ランディングページとは?

ランディングページ(Landing Page)、略してLPと呼びます。
「ランディング(Landing)」は「着地」という意味で、直訳すると「着地ページ」という意味になります。
 
ランディングページは着地するページ、つまり、ユーザーが検索結果や広告、外部サイトなどのリンクをクリックして最初に訪れるページを指します。
最初に訪れるページを指すため、ランディングページ=トップページとは限りません。
 
本来の定義はこのとおりなのですが、日本では主に、リスティング広告の誘導先として制作した商品やサービスを販売するためのWEBページを指してランディングページと呼ぶことが多いです。
 
WEBサイトで実体のあるものを販売する場合、実物を手にとって確かめられないのが弱点と言えます。
ランディングページはその弱点を補うために、ひとつのページにたくさん情報を掲載します。
そのため、多くのランディングページは縦長の1枚構成になっています。
 
 

LPO(ランディングページ最適化)とは?

LPO=「Landing Page Optimization(ランディングページ最適化)」は、サイトからの離脱率を抑え、コンバージョン率を高めるために、ページのデザインや情報の掲載の仕方などを工夫する施策を指します。
 
ユーザーがサイトを訪れてから、自分に有益な情報が掲載されているかどうかを判断するまでの時間は3〜5秒であるといわれています。
コンバージョン率を高めるためにはまず短い時間でユーザーを惹きつける必要があります。
そして、そこからさらに商品購入や資料請求、会員登録といった成果を得るために、情報の構成やボタンの大きさや色、設置場所などの各所に工夫をこらすのです。
 
 


【成果が出るランディングページの基本的な作り方】

1. ファーストビューでユーザーの興味を引く

せっかくユーザーがページを開いても、このページでは自分が求めている情報を得られなさそうと思われてしまっては、下へ読み進めることなくすぐに離脱されてしまいます。
ファーストビューで興味を持ってもらえなければ、成果を得るどころか、下へ読み進めてもらうことすらできません。
 
ダイエットサプリならダイエット効果が伝わる写真を使うなど、パッと見て効果が得られそうと感じてもらうことが大事です。
キャッチコピーは「新開発の◯◯成分配合」と書くより、「もう食事制限しなくていいんです!」といったようなメリットや効果がイメージできそうな内容の方が興味を持ってもらえます。
 
 

2. ページ上部にキーワードを配置

ユーザーは自分が検索したキーワードがページ上部で見つからない場合、見るのを止めて離脱する可能性が高くなります。
 
たとえば、「ダイエット サプリ」で検索したユーザーはダイエット効果を求めているので、ページ上部に「ダイエット」の文字が見当たらないと離脱してしまいます。
下へスクロールした先に検索キーワードを配置していても、スクロールせず離脱されてはコンバージョンにつながりません。
 
ランディングページをデザインするにはユーザーが検索するキーワード、クライアントが狙いたいキーワードを知っておかなければなりません。
できればキーワードごとにランディングページを作成した方が精度が高まります。
 
 

3. ボタンはわかりやすいデザインにする

ユーザーは商品を購入したいと思っても、購入ボタンやサンプル申込みボタンがすぐ見つけられないと途中で探すのを諦めてしまいます。
他のパーツに埋もれてしまうようなわかりにくいデザインだと、せっかく購入意欲が高まったユーザーを逃してしまいます。
申込みボタンであるとわかりやすい色、大きさでデザインし、見つけられやすいように配置をしてください。
 
ボタンの文言もコンバージョンに大きく影響します。
IDEA*IDEAさんの記事で、海外のショッピングサイトがボタンの文言を「新規登録」から「次へ」に変えただけで年間300億円売上がアップした事例が紹介されていました。
詳細は記事をご覧いただくとして、要約すると「新規登録」に対する不安感を改善するため、「次へ」に変更することで劇的にコンバージョン率が向上したそうです。
コンバージョン率を高めるためには、ユーザーが安心してクリックできるようなボタンのデザイン、文言を考える必要があります。
 
出典:300億のボタン
http://www.ideaxidea.com/archives/2009/01/3million_button.html
 
 

4. ボタンは複数箇所に配置する

購入ボタンや申込みボタンがページ上部のみ、またはページ下部のみだと、ユーザーがボタンを探さなければなりません。
特に縦長のランディングページはボタンを探しに上に戻ったり、一番下までスクロールしたりするのが面倒なので、ボタンを複数箇所に配置しましょう。
 
ユーザーが申込みたいと思ったときにクリックできる位置にボタンを配置するのがポイントです。
ユーザーが商品に興味を持ち、購入したいと思ったときにボタンをクリックできるように、商品の最大のメリットを解説した後や、初回値引きについて解説した後など、ユーザーの購入意欲が高まるであろう場所にはボタンを設置しておいた方が良いでしょう。
 
 


【ランディングページギャラリーサイト】

ランディングページ集めました。


サイト:http://lp-web.com/
 
2009年から運営されているランディングページのギャラリーサイトです。
PC・家電、SEO・SEM、スクール・資格、不動産・住まい、健康食品、求人・転職、美容・化粧品などなど、さまざまなジャンルのギャラリーサイトを収集しています。
ランディングページを作る人も作らない人も要ブックマークです。
 
 

勝手にリスティング広告まとめ


サイト:http://ppc-matome.com/lp/
 
かっこいいランディングページを集めて掲載しているギャラリーサイト。
IT、不動産、引越し、塾・教育、転職、保険、美容、銀行・金融関連の各ジャンルのランディングページを閲覧できます。
サムネイルとクリックすると拡大画像で全体が表示されるので、さくさくとランディングページを見ていけます。
 
 

ランディングページデザインリンク集

サイト:http://www.landingpage-link.jp/
 
主に美容や健康食品のランディングページを集めているサイトです。
ジャンルが限られますが、美容と健康食品のランディングページを作成するときに参考になります。

 
 
Land-book - best landing pages gallery

サイト:http://land-book.com/
 
海外のランディングページギャラリーサイトです。
デザイン性が高い製品・サービスのランディングページを集めています。
どれもデザインが美しく、ランディングページだけでなく、WEBデザイン全般の参考になります。
 
 

One Page Landing Page Websites


サイト:https://onepagelove.com/gallery/landing-page
 
こちらも美しいデザインのランディングページが多数収録されている、海外のギャラリーサイトです。
ランディングページによって使っているフォントが全然違うので、フォントの使い方の参考にもなります。


クリエイターの求人・案件探しは、
レバテッククリエイターへ

レバテッククリエイターでは、フリーランスや派遣で働くクリエイターを対象とした求人・案件の提案サービスを行っています。Web業界やゲーム業界を中心に年間1000件以上(※)の取り扱いがあり、様々なスキルを活かせる案件の提案が可能です。
※2016年度実績 自社調べ
求人・案件探しの相談をする

また、「今よりも年収をアップさせたい」「トレンドに敏感な現場でWebデザインスキルを磨きたい」などの理由からフリーランスへの転向を検討している方には、無料の個別相談会も実施していますのでお気軽にご相談ください。業界に精通したプロのコーディネーターが、一人ひとりの希望や状況に合わせて丁寧にサポートします。

「個別相談会」に申し込む

役に立った/参考になったと思ったら、シェアをお願いします。

この記事に関連する案件

Webデザイナーの案件を見る

人気のスキルの求人・案件情報

レバテッククリエイター
おすすめコンテンツ

レバテッククリエイターはWeb・ゲーム業界に特化したデザイナー・クリエイター向けの求人・案件提案サービスです。