公開日: 更新日:

【完全保存版】デザイナーが考えるランディングページの作り方~概要編~

【完全保存版】デザイナーが考えるランディングページの作り方~概要編~

どうも!ヤマダカイト(@slash_kaito)です。

僕は仕事で単品通販のLPを作ることが多いです。最近は月1ペースで作ってます。

しかし今の会社に入るまでは、ほぼ紙モノと簡単なサイトしか作ったことがありませんでした。

いきなりランディングページを作れと言われても、どうやって作ればいいのかまったくわからない・・・。

しかもディレクターもいなければ、コーダーもいない・・・。

ヤマダ
わからぬ。。。教えてGoogle大先生!

しかし、Google神の力を借りても「AIDA」やら「AIDMA」やらの解説が書いているだけで、「どうやって」「どのように」がまったく具体的にわかりません。

試行錯誤しながらやってきた結果、なんとなく方法がわかってきたので、自分の整理も兼ねて体系立てたLPの作り方を解説していきます。

 

「会社に言われ、LPを作らなければならない」

 

「基本的なデザインスキルはあるが、LPは作ったことない」といった方はもちろん、

 

「売れるLPのラフを書け!と命じられているディレクター」

 

「あまりラフを書いたことないけど、ゼロからLP作りをするデザイナー」

 

そんな方にもお役立ていただけるかと。

第一回目は、ランディングページの概要と制作の流れを見ていきます。

ランディングページとは

ランディングページ・LPと呼ばれ、商品やサービスの説明をするページのこと。

基本的に縦長です。

それはページ遷移をせず、1ページで商品説明から購買までをワンストップでさせるため。

ランディングページ見本
こういうやつです。
ヤマダ
こういうやつです。これはかなり短め。

本来は「最初にアクセスした=着地(landing)したページ」という意味だったのですが、徐々に変化していき、狭義の意味では縦長商品ページになりました。

恐らく、検索や広告から流入してきた人を直接コンバージョンさせるために、こういった仕様に変化したのではないかと思います。

用語解説:CVRとは

Conversion Rate(コンバージョンレート)の略。コンバージョン・転換率とも。

サイトへのアクセスのうち、商品購入や資料請求など一定の目的を達成できた割合のこと。%で出される。

使用例「今回の施策、CVR10%切ったら左遷な」

これが高いほどみんな喜ぶ。そして社長の財布がふくらむ。

商品の概要に始まり、具体的な使い方や利用者の声、様々な権威づけなどによって1ページだけで商品を購入させる。

比較させずに、説得して買ってもらう。だからコンテンツが多くなってしまう。結果、縦に長くなってしまう。

この考え方はLPを作る際に、メチャクチャ大事なので覚えておきましょう。

LP完成までの基本的な流れ

lp_nagare

まず流れからご説明します。

何事も全体像の把握が一番大事ですからね!

STEP1「目的とペルソナの設計」

具体例でいうと、この商品を年間で10万個売る、とかです。

ペルソナはその商品を売る人の属性を設定する方法。

用語解説:ペルソナとは

既存顧客の情報や調査データなどから、架空の顧客像を出したもの。

性別・年齢・住んでいるところなどの基本情報から、好きなもの・考え方・お金の使い方などといった細かい趣味嗜好にいたるまで出される。

ペルソナシート
ペルソナシート
ここから消費行動パターンや購買までの意思決定を読み解き、その人に「刺さる」ようなトンマナにして、情報設計に反映させます。

Illustrator用ファイルですが、ペルソナシート下記からダウンロードできますので、よろしければどうぞ。

ちなみにこちらが、僕が最近書いたペルソナシート。

育毛サプリのペルソナです。人間の内なる欲望が赤裸々に書かれています(笑)

写真はレンポジです。

育毛サプリペルソナシート

STEP2「ラフを書く」

売るための情報設計です。

キレイなだけ、かっこいいだけのデザインでは物は売れません。

その商品が必要な人・企業を選別し、その人にとって有益な商品やサービスだということがわかる情報を届け、欲しい!と思わせる。

それが良いラフです。

起承転結や序破急などで、話の流れも意識できると最高ですね。

「だから・そして・でも・しかし」などの接続詞で、話の筋をわかりやすくしてみましょう

STEP3「制作する」

情報をデザインできたら、実際に制作していきます。

ラフを作るのが頭を使う作業だとしたら、制作は手を動かす作業。

整合性や辻褄が合わないから、あっちいじってこっちいじって・・・みたいな感じだと時間だけかかってしまいます。

そういった部分はラフの段階でしっかり固めておき、制作はできるだけ頭を使わないようにしましょう。

 

僕はIllustratorで作ってしまいますが、人によってはXDだったりPhotoshopだったりするでしょう。

とりあえず、そこで「ガワ=見た目の部分」を作ります。

その後はコーディング作業。

レスポンシブ・jqueryの動作など細かい部分もチェックしたり、デザインを微調整しながらようやく完成です。

STEP4「運用する」

完成しても、まだ終わりではありません。

CVRはもちろん離脱率やLTVなどをチェックしながら、状況によって日々改善していく必要があります。

用語解説:離脱率とは

サイトにアクセスした人が、何の行動も起こさず(リンクを踏んで別のページにいった・申し込みをした、など)ページを閉じてしまった割合。こちらも%ではじき出される。

これが高いほどみんな悲しむ。そして社長の財布がしぼむ。

用語解説:LTVとは

Life Time Value(顧客生涯価値)の略。お客さんが一生のうち、その企業やブランドとした取引額のこと。◯◯円で出される。

例えば単品通販化粧品の場合は、サンプルだけでは利益が出ないのでサンプル→本商品と引きあげて利益を生み出す。

この時にLTVの算出が必須となる。

これが高いほどみんなメッチャ喜ぶ。そして社長の財布が永続的にふくらむ。

「製造が追いつかない!予約販売に変更しよう!」とか「成分が改良されたバージョン2を販売する!」みたいなこともありますので、お客さまに不便をさせないよう修正が必要になってきます。

A・Bテストや新しいコンテンツを作ったり削ったりして、離脱率やCVRをチェックしてみましょう。

本日のまとめ

今回はLPの概要と制作の流れをご説明しました。

僕はこの一連の作業を、約1ヶ月くらいかけてしていきます。

もちろん他にも細かい仕事はたくさんありますが。

制作会社でも事業会社でもラフ書く人、デザインする人、コーディングする人という感じで、分業するところがほとんどだと思いますが、全てを任されているデザイナーさんも中にはいるかもしれません。

そんな人のお役に立てれば幸いです。

 

さて、各項目の詳しい解説はまた後日UPします。

結構詳しく解説する予定です!

ぜひお楽しみに。

ヤマダ
この記事が役に立ったら、シェアorはてブしてくれるとメッチャ喜びます!

この記事が気に入ったら
いいね ! をお願いします

Twitterでもデザインや日々のことをつぶやいています。

webデザインカテゴリの最新記事