ランディングページ(LP)

デザインの「基本原則」を守るだけでランディングページのCV【成約率】は飛躍的にあがるのか!?

ブログ書いてますか?

インターネットしてますか?

少なくとも今は、このページを見て頂いてる訳ですから、
スマホかPCで「インターネットをして」このページを見ていただいているのかと?思います。

 

ヒデ
ヒデ
こんにちは! アフィリエイトブログをデザインする「デザアフィ」のヒデ(dezaafi) です。

いつもご覧いただきまして、ありがとうございます!😊

ちなみにわたしは、職業柄、「毎日のようにインターネット」をしております。

 

ヒデ
ヒデ
たまにはOFFの日が必要かと思いますが…

 

苦笑…(;^-^Aフキフキ
さて、インターネットが普及した現代において、

「ランディングページ(LP)」は、インターネット上で商品やサービスを提供するうえで欠かせない存在となりつつあります。

 

ただしランディングページも「ただ作れば良い」というものではありません。

 

何故ならば、このページからダイレクトに問い合わせや注文が出来る分、

「ページの出来の良し悪し」がコンバージョンの有無に大きく影響するからです。

 

コンバージョン(conversion:CV)とは、
直訳すると、「変換」「転換」「転化」といった意味になります。 マーケティングの分野では、Webサイトにおける最終的な成果のことを指します。

 

いくら「良い商品やサービス」でも、

ランディングページでの印象が悪ければ、

コンバージョン(この場合は:「購入率・成約率」という

 

「結果」に結びつきにくくなってしまいます…。

 

そんな時、あなたならどうしますか?

 

そこで、今回はランディングページの「結果に結びつくデザイン」

について触れていきたいと思います。

こんな方に参考になります。
  • ランディングページ(LP)の成約率(コンバージョン)が低い
  • 成約率(コンバージョン)を上げたい!
  • 自分の「ランディングページ(LP)」の何が悪いのか分からない…

 

この記事を読んで、

ヒデ
ヒデ
ギクッ!

 

となったら、要改善ですよ!

デザインの基本となる4つの項目

ランディングページのデザインは

ヒデ
ヒデ
一言でいうと「自由」です。

 

通常のWebページのように

「類似コンテンツ」を作ったり、「リンクを貼ったり」する必要が無く、

どこに画像を貼ってもどんな構成にしても構いません。自由です。

なので例えば

ヒデ
ヒデ
画面いっぱいに画像や動画を貼り付けて作っても、

イラストや、マンガを載せたりと、自由に作っても良いのです。

 

ただ、「自由であるが故にセンスが問われる」

のが、ランディングページと言っても良いでしょう。

 

また、ランディングページで重要なのは

 

「コンバージョン」という「結果に繋げる」ことです。

 

いくら自由に作って良いとはいえ、

ページが読みにくかったり、見難かったしたら「商品やサービスの良さ」が十分にユーザーに伝わらず…。

 

ヒデ
ヒデ
がんばってランディングページ作ったのに全然反応ない~~~

なんで~~~!?

 

じゃ、せっかく作ったランディングページが意味がありません。

 

そこで、読みやすいランディングページを作るうえで基本となる

 

についてご紹介します。

①「要素の配置」

まずは「要素の配置」についてです。

 

ランディングページは提供する情報量が多くなるため、

ヒデ
ヒデ
どうしても文章が多いページとなってしまいます…。

 

そんなページで要素の配置が揃っておらず、

一つのページに左揃えや中央揃え、右揃えが混在していたら

 

ユーザーはどう感じるでしょうか?

 

きっと、第一印象で「読みにくい」と感じ、

 

ページを一見しただけで内容を読む前に

 

ヒデ
ヒデ
ページを離れてしまう

かもしれません。

 

ようするに、「要素の配置がバラバラ」だと

 

一体感が無く、

読みにくいページになのです!(断言!)

 

もちろん絶対に要素の配置を混在させてはいけないという訳ではありません。

 

しかし、基本的には読み手の「視線の流れ」を考えて

「要素の配置」には注意しましょう。

 

要素の配置を少し意識するだけでも印象は大きく違ってきます。

 

配置について「参考例」を紹介しておきますね。

文字の配置について、名刺を例にした「悪い例」と「良い例」です。

左側の「悪い例」の名刺は、文字の配置がめちゃくちゃです。

一方、右側の「良い例」の名刺は、各エリア毎で文頭を揃えているので、きちんと整った印象を与えます。

つまり整列されたデザインということです。

1番大事なポイントは、レイアウトの中に「見えない線」を引くことができるという点です。「良い例」の名刺では「見えない整列の線」を2本引くことができます。

  • 要素の配置はそろえよう!

②「関連項目の配置と余白」

次にご紹介するのが「関連項目の配置と余白」です。

 

商品やサービスの紹介をする場合、そのアピールポイントは大小の差はあれど

 

「一つだけという事はないはず」です。

 

それらのアピールポイントについて思いつくままに記載してしまうと、

 

「どこ」に「何」が?

 

書いてあるか分からないと、「非常に読みにくいページ」となってしまいます。

 

そうなるとせっかくのアピールポイントがユーザーに伝わらない可能性があるのです。

 

このような事態を回避するためには、「関連のある内容は近くにまとめて配置」して

 

ヒデ
ヒデ
それぞれの余白を意図的に狭くすること

 

逆に、
別の内容を記載する場合には

 

ヒデ
ヒデ
前の内容との余白を多めにとること

 

 

を意識しましょう!

 

なお、全ての余白を揃えてしまうと確かに整理されているように見えますが…

 

ランディングページにとって重要な「どこ」に「何」が

 

書いているのかが分かりづらくなります。

 

「読みさすさ」とは「配置がきっちり整理されていること」ではなく

「読み手に内容が伝わり易くすること」という事を

 

絶対忘れてはいけません。

 

ヒデ
ヒデ
私のページの「余白」がバラバラなのは、

実は…その点を意識して作られています(ナイショですよ~

 

  • 「余白」は用途に合わせて考えよう!

③「コントラスト」

そして次に基本となる項目が「コントラスト」をつけることです。

 

ヒデ
ヒデ
「コントラスト」とは?
簡単に言うと「メリハリ」のことです。

 

コントラストの無い単調なページは良くも悪くも「印象に残りづらい」ものです。

 

ヒデ
ヒデ
メリハリがない単調な感じですから…。

 

大切な個所は文字を大きくしたり書体を変えたり

目立つ色にするのもコントラストが付いて良いでしょう。

 

ただし、
中途半端に変化をつけてしまうと、そのコントラストが

 

「意図的なものなのか?」

「何らかの操作ミスによるものなのか?」

 

が分からなくなってしまい、

かえって印象が悪くなってしまいかねません。

 

それを避けるために、

 

ヒデ
ヒデ
コントラストを付けるときは思いっきり変化をつけて!

 

伝えたい部分が目立つようにしましょう。

 

分かり易いように「良い例」と「悪い例」を紹介しますね。

良い例では

タイトルの文字を大きくすることで、「コントラスト」を作り出しています。

サイズが大きいタイトルは、見る人の目を惹きつけます。

また、タイトルに注目させる事で、伝えたい情報に注目してもらい、次に補足説明を読んで詳細を確認してもらう順番を生み出しています。

逆に「悪い例」を紹介しますと、

ご覧の通り、見た目がはっきりと分かりませんね。
どこに注目して見れば良いかわからない状態なので、最悪「混乱」します。

そして最終的には

こんな感じに、

「文字色」や「フォント」を変える方法や(左の図)
「背景色」と「白抜き文字」にする方法もあります(右の図)

「コントラスト」は「他の要素と違う」という事が伝わる必要があるので、「小さく」やっても効果がありません。やるときは「大胆に」することです。

きれいなデザイン方法内容は「shinji.uyama」さまのnoteを参考にさせて頂きました。
shinhiさま、ありがとうございます。

shinji.uyama

 

④「繰り返し」

最後にご紹介する基本項目は「繰り返し」です。

これは写真やロゴなど、デザインにおいて特徴となるものを

 

ランディングページで繰り返し掲載するという方法です。

 

こうする事でページに統一感が生まれるだけでなく、

効率的に商品やサービスをユーザーの印象に残すことができます。

 

また、「検索画面」からランディングページに行きついた際に同じ特徴を掲載しておくことで

 

ヒデ
ヒデ
ぺ、ページを間違えたかもしれない!?

 

と思って離れてしまうユーザーを減らす役割も果たすのです。

 

ヒデ
ヒデ
よく、テレビの緊急ニュースで

「繰り返しお知らせしております。 ○○○…」と言っているのと同じで

途中から見ている人に「何の情報か?」ちゃんと分る様に繰り返し説明してあげる方法です。

 

もちろん無闇に繰り返しし過ぎてしまうと「ページ全体が読みづらくなってしまう」ので限度はありますが…、

 

商品やサービスをアピールするために上手に「繰り返し」を活用しましょう。

 

意外と重要な「黄金比」

そして、忘れてはならないのは「黄金比」です。

 

「黄金比」という言葉を聞いた事がある方は決して少なくはないでしょう。

黄金比とは、人間にとって最も安定し、美しい比率とされ、美術的要素の一つとされる。

 

しかし、「黄金比とは何か」を知っている方はそう多くはないのではないでしょうか。

 

黄金比を正確な数字で表すと「1:1.618」となります。

 

繰り返しの説明となりますが、

この比率は人が最も安定していると感じ、この比率を使用して作られたものを人は美しいと感じるのだそうです。

ただ、1:1.618と数字で言われても良く分からないという方もいると思います。

 

身近なもので言うと名刺やクレジットカードが縦と横の比率

を思い出してみてください。

参考:即日発行クレジットカード.com

 

これらの比率は黄金比に近いと言われています。

ちなみに驚くべきことに自然界にも黄金比は存在しているのだとか。

そんな黄金比はもちろんランディングページにも活用できます。

 

ではどのように活用するのでしょうか?

 

まずはページ全体を見て、黄金比を意識して各項目を配置してみましょう。

画像を貼る際にも意識するとなお良いと思います。

 

計算が苦手な方は、先に紹介した黄金比率に近い「名刺の縦と横の比率」を参考にしてください。

ちなみに黄金比を当てはめる事ができるのは何も画像や項目だけではありません。

 

「余白」にも黄金比を当てはめる事が出来るのです。

 

もちろん必ず黄金比にしないといけないという事はありませんが…

配置や余白の調整で迷った場合には

 

「黄金比」という言葉を思い出してください。

 

少し意識するだけで大きくページの印象を変える事が出来るでしょう。

 

また、黄金比は直線的なものだけではなく曲線にも当てはめる事が出来ます。

 

「黄金比」と聞いて見出し画像の「オウムガイ」や

「アンモナイト」のような巻貝に似た螺旋状の図を思い出した方もいるのではないでしょうか?

あとはレオナルド・ダ・ヴィンチ作の「モナリザ」ですね。

モナ・リザ

 

どちらかというとこちらの方が一般的かもしれません。

 

このアンモナイトのような螺旋状の図が曲線での黄金比を表しているのです。

一番ユーザーに見て欲しい項目をこの螺旋の中心に置き、その項目から広がるように螺旋の黄金比を利用して他の項目を配置していくと、

安定感のあるランディングページに仕上がります。

 

ヒデ
ヒデ
まぁ、この「黄金比」の内容は、ちょっと難しかったので、

「そんな理屈なんだ~」程度でいいですよ~。

まとめ

これまでご紹介したデザインの基本となる

4つの項目と黄金比を覚えておけば、

 

自由度の高いランディングページを作る際にも構成やデザインで迷うことも少なくなるまずです。

 

黄金比に関しては、他にも「商品や会社のロゴづくり」にも活用されている程です。

参考:グーグル「logo golden ratio」画像検索(2017/11キャプチャ)

 

自由度が高いからと言って何も考えずに好き勝手ランディングページを作ってしまうと、

かえってマイナスになってしまう事があります。

 

そうならない為にも、

 

ヒデ
ヒデ
今回学んだデザインの基本の「4つの項目」を守って、

作ってみよう!!

 

と思い出して、あなたのランディングページを作ってみてください。

 

 

最後までご覧いただきまして、ありがとうございました!

 

ヒデ
ヒデ
記事の更新情報はツイッターで行っています。
良かったらフォローお願いします! >ヒデ(dezaafi)
ブログで稼ぐ 元WEBデザイナー
ヒデ
【アラフィフでも稼げる!】

Webデザインを武器にブログ収益化に成功したアラフィフパパです。

就職氷河期に職がなくブラック企業で病んで退職…その後は派遣で職を転々とし、失敗ばかりで家族に心配かける日々、

現在、アフィリエイトや複数の収入源を作る種蒔きしながら、ネットで稼いで人生逆転させる化計画実行中!

散々挫折した私だからできるアフィリエイト初心者向けアドバイスをブログで公開しています。

少人数の個別でブログコンサルもやっています。

最新情報Twitterで配信中!

\ Follow me /

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です