O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

LPデザインに関して〜作成のセオリーとコツ〜

109.542 visualizações

Publicada em

「webっちゃvol.1」で使用したスライドです。(一部修正あり)

Publicada em: Design
  • Seja o primeiro a comentar

LPデザインに関して〜作成のセオリーとコツ〜

  1. 1. ∼ 作成のセオリーとコツ ∼LPデザインの話
  2. 2. 自己紹介
  3. 3. 松 本 典 子web デザイナー以前、総合通販会社のweb 部門に約4年ほど所属してました。現在は web制作会社所属。ブログやってます → http://zuvuyalink.net/nrjlog/
  4. 4. 本日お話すること
  5. 5. LP って何?LP の基本的な構成LP デザインの注意点7秒ルール3秒で心を掴む ファーストビューの作り方ボタンについて最後に
  6. 6. LP(ランディングページ)って何?
  7. 7. Web サイトの訪問者が、外部からそのサイトにやってくる際、最初に開くことになるページ。特に、他サイトに広告を出稿する際、リンク先として指定する自サイト内のページのこと。「コラーゲンゼリー」で検索
  8. 8. LPの基本的な構成
  9. 9. ① キャッチフレーズ(ベネフィット)② 実 証(ベネフィットを実証する情報)③ 信 頼(第三者の意見やデータ)④ 安 心(ユーザの声)キャッチフレーズテキストテキストテキストテキストテキストテキストボタン実証する情報01020304050テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト第三者の意見やデータ申し込みフォームテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストお客様の声テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストコンバージョン
  10. 10. ①キャッチフレーズ(ベネフィット)・キャッチコピーはシンプルにわかりやすく・わかりやすい言葉で、ベネフィットを伝える・できるだけ具体的にイメージできる写真を使うベネフィットは「利益になること」
  11. 11. ②実証(ベネフィットを実証する情報)数値的など、具体的でわかりやすい情報を掲載。(商品の良さなどを説明)主観的な視点。
  12. 12. ③信頼(第三者の意見やデータ)第三者であるその分野の専門家などの意見。実績などでもユーザの信頼を得ることができる情報であればOK。情報に説得力が出る。
  13. 13. ④安心(ユーザの声)実際に使っているユーザの声を掲載することで、情報により真実味を持たせる。狙うターゲット層の「ユーザの声」を入れる。説得力が UP!
  14. 14. ①∼④の構成で、コンバージョンにつなげます
  15. 15. LP デザインの注意点
  16. 16. 特に伝えなければいけない点に必ず目が行くようになっているか?信頼性や安心感を与えるものになっているか?ランディングページのデザインが、
  17. 17. 基本に忠実でシンプルなデザインを心がけよう。
  18. 18. 7 秒ルール
  19. 19. ユーザがアクセスしたページについて、しっかりと見るかどうかの判断を7秒で決めてしまう、と言われる。最近では「3 秒ルール」とも言われるほど短くなってきている。
  20. 20. 一生懸命ページを作っても最後まで見てもらえないかも…つまり、
  21. 21. ファーストビューは超大事!!
  22. 22. ファーストビューの作り方3秒で心を掴む
  23. 23. ① キャッチコピー② キービジュアル③ デザイン第一印象を大切にするための3つのポイント
  24. 24. ① キャッチコピー
  25. 25. キーワードと LP のキャッチコピーは統一しよう『ユーザは検索キーワードを意識する』メインのキーワードをキャッチフレーズに用いれば、ユーザに安心感を与えられるので即時離脱を防ぐことができる。
  26. 26. ② キービジュアル
  27. 27. メインイメージ部分は、ひと目でイメージが伝わる写真を選ぶ。『ターゲットは誰なのか?』
  28. 28. ③ デザイン
  29. 29. エンブレムや実績(△万個売れた!)は目立つ場所に載せる「購入する」ボタンを置く
  30. 30. エンブレム系が入っている例
  31. 31. 購入ボタンが入っている例
  32. 32. ボタンについて
  33. 33. LPページのボタンは誰が見ても「あ!これボタン!」とわかり、しかも「押した!」と分かる事が重要。ボタンはボタンらしく
  34. 34. 形は角丸、色は緑。LP ページのボタンはそして目立たせること。
  35. 35. いかに流し見するユーザの目を留めて、ボタンを押すというアクションを起こさせるか?ボタンの役割
  36. 36. なぜ角丸ボタン?
  37. 37. 鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。角丸は目に、そして脳に優しいビジュアル認知の権威:Jürg Nänni 教授
  38. 38. 「触るな」「立ち去れ」「引っ掻く」鋭角はどんなイメージ?鋭いオブジェクトから連想されるネガティブなイメージへ展開する傾向回避反応
  39. 39. 角丸の長方形はユーザーに安心・快適を感じさせる。角丸はアクションボタンにぴったり!!
  40. 40. なぜ緑色?
  41. 41. 色の持つ意味赤 … 注意、危険、緊張、刺激的な青 … 冷静さ、熟考、安定性緑… 信頼性、平和、安全
  42. 42. アクションボタンを押すにはある程度のテンションが必要。アクションボタンには緑色がオススメ!!
  43. 43. 最後に
  44. 44. LP(ランディングページ)は色々な手法や考え方があります。私がお話することはごく一部のことなので、「こんな意見もあるらしい」って感じで。
  45. 45. ランディングページ(LP) は作ってからがスタート。実際は運用が始まってから最適化して育てていくもの。
  46. 46. ご清聴ありがとうございました

×