1. ∼ 作成のセオリーとコツ ∼
LPデザインの話

2. 自己紹介

3. 松 本 典 子
web デザイナー
以前、総合通販会社のweb 部門に
約４年ほど所属してました。
現在は web制作会社所属。
ブログやってます → http://zuvuyalink.net/nrjlog/

4. 本日お話すること

5. LP って何？
LP の基本的な構成
LP デザインの注意点
７秒ルール
３秒で心を掴む ファーストビューの作り方
ボタンについて
最後に

6. LP（ランディングページ）って何？

7. Web サイトの訪問者が、外部からそのサイトに
やってくる際、最初に開くことになるページ。
特に、他サイトに広告を出稿する際、
リンク先として指定する自サイト内のページのこと。
「コラーゲンゼリー」で検索

8. LPの基本的な構成

9. ① キャッチフレーズ（ベネフィット）
② 実 証（ベネフィットを実証する情報）
③ 信 頼（第三者の意見やデータ）
④ 安 心（ユーザの声）
キャッチフレーズ
テキストテキストテキスト
テキストテキストテキスト
ボタン
実証する情報
0
10
20
30
40
50
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
第三者の意見やデータ
申し込みフォーム
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
お客様の声
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
コンバージョン

10. ①キャッチフレーズ（ベネフィット）
・キャッチコピーはシンプルにわかりやすく
・わかりやすい言葉で、ベネフィットを伝える
・できるだけ具体的にイメージできる写真を使う
ベネフィットは「利益になること」

11. ②実証（ベネフィットを実証する情報）
数値的など、具体的でわかりやすい情報を
掲載。（商品の良さなどを説明）
主観的な視点。

12. ③信頼（第三者の意見やデータ）
第三者であるその分野の専門家などの意見。
実績などでもユーザの信頼を得ることができる
情報であればＯＫ。
情報に説得力が出る。

13. ④安心（ユーザの声）
実際に使っているユーザの声を掲載することで、
情報により真実味を持たせる。
狙うターゲット層の「ユーザの声」を入れる。
説得力が UP！

14. ①∼④の構成で、
コンバージョンにつなげます

15. LP デザインの注意点

16. 特に伝えなければいけない点に
必ず目が行くようになっているか？
信頼性や安心感を与えるものに
なっているか？
ランディングページのデザインが、

17. 基本に忠実で
シンプルなデザインを
心がけよう。

18. 7 秒ルール

19. ユーザがアクセスしたページについて、
しっかりと見るかどうかの判断を
７秒で決めてしまう、と言われる。
最近では「3 秒ルール」とも言われるほど
短くなってきている。

20. 一生懸命ページを作っても
最後まで見てもらえないかも…
つまり、

21. ファーストビューは
超大事！！

22. ファーストビューの作り方
３秒で心を掴む

23. ① キャッチコピー
② キービジュアル
③ デザイン
第一印象を大切にするための
３つのポイント

24. ① キャッチコピー

25. キーワードと LP の
キャッチコピーは統一しよう
『ユーザは検索キーワードを意識する』
メインのキーワードをキャッチフレーズに用いれば、
ユーザに安心感を与えられるので
即時離脱を防ぐことができる。

27. ② キービジュアル

28. メインイメージ部分は、
ひと目でイメージが伝わる
写真を選ぶ。
『ターゲットは誰なのか？』

30. ③ デザイン

31. エンブレムや実績（△万個売れた！）は
目立つ場所に載せる
「購入する」ボタンを置く

32. エンブレム系が入っている例

33. 購入ボタンが入っている例

34. ボタンについて

35. LPページのボタンは誰が見ても
「あ！これボタン！」とわかり、
しかも「押した！」と分かる事が重要。
ボタンはボタンらしく

36. 形は角丸、色は緑。
LP ページのボタンは
そして目立たせること。

38. いかに流し見するユーザの目を留めて、
ボタンを押すというアクションを
起こさせるか？
ボタンの役割

39. なぜ角丸ボタン？

40. 鋭角の長方形は同じ大きさの楕円より
認知するのに努力を必要とする。
人間の目は円形のものをより速く
捉えることができる。
角丸は目に、そして脳に優しい
ビジュアル認知の権威：Jürg Nänni 教授

41. 「触るな」「立ち去れ」「引っ掻く」
鋭角はどんなイメージ？
鋭いオブジェクトから連想される
ネガティブなイメージへ展開する傾向
回避反応

42. 角丸の長方形は
ユーザーに安心・快適を
感じさせる。
角丸はアクションボタンに
ぴったり！！

43. なぜ緑色？

44. 色の持つ意味
赤 … 注意、危険、緊張、刺激的な
青 … 冷静さ、熟考、安定性
緑… 信頼性、平和、安全

45. アクションボタンを押すには
ある程度のテンションが必要。
アクションボタンには
緑色がオススメ！！

46. 最後に

47. LP(ランディングページ）は
色々な手法や考え方があります。
私がお話することはごく一部のことなので、
「こんな意見もあるらしい」って感じで。

48. ランディングページ(LP) は
作ってからがスタート。
実際は運用が始まってから
最適化して育てていくもの。

49. ご清聴
ありがとうございました