ブログ書いてますか？
インターネットしてますか？
少なくとも今は、このページを見て頂いてる訳ですから、
スマホかPCで「インターネットをして」このページを見ていただいているのかと？思います。
いつもご覧いただきまして、ありがとうございます！😊
ちなみにわたしは、職業柄、「毎日のようにインターネット」をしております。
苦笑…（;^-^Aﾌｷﾌｷ
さて、インターネットが普及した現代において、
「ランディングページ（LP）」は、インターネット上で商品やサービスを提供するうえで欠かせない存在となりつつあります。
ただしランディングページも「ただ作れば良い」というものではありません。
何故ならば、このページからダイレクトに問い合わせや注文が出来る分、
「ページの出来の良し悪し」がコンバージョンの有無に大きく影響するからです。
いくら「良い商品やサービス」でも、
ランディングページでの印象が悪ければ、
コンバージョン（この場合は：「購入率・成約率」という
「結果」に結びつきにくくなってしまいます…。
そんな時、あなたならどうしますか？
そこで、今回はランディングページの「結果に結びつくデザイン」
について触れていきたいと思います。
- ランディングページ（LP）の成約率（コンバージョン）が低い
- 成約率（コンバージョン）を上げたい！
- 自分の「ランディングページ（LP）」の何が悪いのか分からない…
この記事を読んで、
となったら、要改善ですよ！
デザインの基本となる4つの項目
ランディングページのデザインは
通常のWebページのように
「類似コンテンツ」を作ったり、「リンクを貼ったり」する必要が無く、
どこに画像を貼ってもどんな構成にしても構いません。自由です。
なので例えば
イラストや、マンガを載せたりと、自由に作っても良いのです。
ただ、「自由であるが故にセンスが問われる」
のが、ランディングページと言っても良いでしょう。
また、ランディングページで重要なのは
「コンバージョン」という「結果に繋げる」ことです。
いくら自由に作って良いとはいえ、
ページが読みにくかったり、見難かったしたら「商品やサービスの良さ」が十分にユーザーに伝わらず…。
なんで～～～！？
じゃ、せっかく作ったランディングページが意味がありません。
そこで、読みやすいランディングページを作るうえで基本となる
- 「要素の配置」
- 「関連項目の配置と余白」
- 「コントラスト」
- 「繰り返し」
についてご紹介します。
①「要素の配置」
まずは「要素の配置」についてです。
ランディングページは提供する情報量が多くなるため、
そんなページで要素の配置が揃っておらず、
一つのページに左揃えや中央揃え、右揃えが混在していたら
ユーザーはどう感じるでしょうか？
きっと、第一印象で「読みにくい」と感じ、
ページを一見しただけで内容を読む前に
かもしれません。
ようするに、「要素の配置がバラバラ」だと
一体感が無く、
読みにくいページになのです！（断言！）
もちろん絶対に要素の配置を混在させてはいけないという訳ではありません。
しかし、基本的には読み手の「視線の流れ」を考えて
「要素の配置」には注意しましょう。
要素の配置を少し意識するだけでも印象は大きく違ってきます。
配置について「参考例」を紹介しておきますね。
文字の配置について、名刺を例にした「悪い例」と「良い例」です。
左側の「悪い例」の名刺は、文字の配置がめちゃくちゃです。
一方、右側の「良い例」の名刺は、各エリア毎で文頭を揃えているので、きちんと整った印象を与えます。
つまり整列されたデザインということです。
1番大事なポイントは、レイアウトの中に「見えない線」を引くことができるという点です。「良い例」の名刺では「見えない整列の線」を２本引くことができます。
- 要素の配置はそろえよう！
②「関連項目の配置と余白」
次にご紹介するのが「関連項目の配置と余白」です。
商品やサービスの紹介をする場合、そのアピールポイントは大小の差はあれど
「一つだけという事はないはず」です。
それらのアピールポイントについて思いつくままに記載してしまうと、
「どこ」に「何」が？
書いてあるか分からないと、「非常に読みにくいページ」となってしまいます。
そうなるとせっかくのアピールポイントがユーザーに伝わらない可能性があるのです。
このような事態を回避するためには、「関連のある内容は近くにまとめて配置」して
逆に、
別の内容を記載する場合には
を意識しましょう！
なお、全ての余白を揃えてしまうと確かに整理されているように見えますが…
ランディングページにとって重要な「どこ」に「何」が
書いているのかが分かりづらくなります。
「読みさすさ」とは「配置がきっちり整理されていること」ではなく
「読み手に内容が伝わり易くすること」という事を
絶対忘れてはいけません。
実は…その点を意識して作られています（ナイショですよ～♥）
- 「余白」は用途に合わせて考えよう！
③「コントラスト」
そして次に基本となる項目が「コントラスト」をつけることです。
簡単に言うと「メリハリ」のことです。
コントラストの無い単調なページは良くも悪くも「印象に残りづらい」ものです。
大切な個所は文字を大きくしたり書体を変えたり、
目立つ色にするのもコントラストが付いて良いでしょう。
ただし、
中途半端に変化をつけてしまうと、そのコントラストが
「意図的なものなのか？」
「何らかの操作ミスによるものなのか？」
が分からなくなってしまい、
かえって印象が悪くなってしまいかねません。
それを避けるために、
伝えたい部分が目立つようにしましょう。
分かり易いように「良い例」と「悪い例」を紹介しますね。
良い例では
タイトルの文字を大きくすることで、「コントラスト」を作り出しています。
サイズが大きいタイトルは、見る人の目を惹きつけます。
また、タイトルに注目させる事で、伝えたい情報に注目してもらい、次に補足説明を読んで詳細を確認してもらう順番を生み出しています。
逆に「悪い例」を紹介しますと、
ご覧の通り、見た目がはっきりと分かりませんね。
どこに注目して見れば良いかわからない状態なので、最悪「混乱」します。
そして最終的には
こんな感じに、
「文字色」や「フォント」を変える方法や(左の図)
「背景色」と「白抜き文字」にする方法もあります(右の図)
「コントラスト」は「他の要素と違う」という事が伝わる必要があるので、「小さく」やっても効果がありません。やるときは「大胆に」することです。
きれいなデザイン方法内容は「shinji.uyama」さまのnoteを参考にさせて頂きました。
shinhiさま、ありがとうございます。
④「繰り返し」
最後にご紹介する基本項目は「繰り返し」です。
これは写真やロゴなど、デザインにおいて特徴となるものを
ランディングページで繰り返し掲載するという方法です。
こうする事でページに統一感が生まれるだけでなく、
効率的に商品やサービスをユーザーの印象に残すことができます。
また、「検索画面」からランディングページに行きついた際に同じ特徴を掲載しておくことで
と思って離れてしまうユーザーを減らす役割も果たすのです。
「繰り返しお知らせしております。 ○○○…」と言っているのと同じで
途中から見ている人に「何の情報か？」ちゃんと分る様に繰り返し説明してあげる方法です。
もちろん無闇に繰り返しし過ぎてしまうと「ページ全体が読みづらくなってしまう」ので限度はありますが…、
商品やサービスをアピールするために上手に「繰り返し」を活用しましょう。
意外と重要な「黄金比」
そして、忘れてはならないのは「黄金比」です。
「黄金比」という言葉を聞いた事がある方は決して少なくはないでしょう。
しかし、「黄金比とは何か」を知っている方はそう多くはないのではないでしょうか。
黄金比を正確な数字で表すと「1:1.618」となります。
繰り返しの説明となりますが、
この比率は人が最も安定していると感じ、この比率を使用して作られたものを人は美しいと感じるのだそうです。
ただ、1:1.618と数字で言われても良く分からないという方もいると思います。
身近なもので言うと名刺やクレジットカードが縦と横の比率
を思い出してみてください。
参考：即日発行クレジットカード.com
これらの比率は黄金比に近いと言われています。
ちなみに驚くべきことに自然界にも黄金比は存在しているのだとか。
そんな黄金比はもちろんランディングページにも活用できます。
ではどのように活用するのでしょうか？
まずはページ全体を見て、黄金比を意識して各項目を配置してみましょう。
画像を貼る際にも意識するとなお良いと思います。
計算が苦手な方は、先に紹介した黄金比率に近い「名刺の縦と横の比率」を参考にしてください。
ちなみに黄金比を当てはめる事ができるのは何も画像や項目だけではありません。
「余白」にも黄金比を当てはめる事が出来るのです。
もちろん必ず黄金比にしないといけないという事はありませんが…
配置や余白の調整で迷った場合には
「黄金比」という言葉を思い出してください。
少し意識するだけで大きくページの印象を変える事が出来るでしょう。
また、黄金比は直線的なものだけではなく曲線にも当てはめる事が出来ます。
「黄金比」と聞いて見出し画像の「オウムガイ」や
「アンモナイト」のような巻貝に似た螺旋状の図を思い出した方もいるのではないでしょうか？
あとはレオナルド・ダ・ヴィンチ作の「モナリザ」ですね。
モナ・リザ
どちらかというとこちらの方が一般的かもしれません。
このアンモナイトのような螺旋状の図が曲線での黄金比を表しているのです。
一番ユーザーに見て欲しい項目をこの螺旋の中心に置き、その項目から広がるように螺旋の黄金比を利用して他の項目を配置していくと、
安定感のあるランディングページに仕上がります。
「そんな理屈なんだ～」程度でいいですよ～。
まとめ
これまでご紹介したデザインの基本となる
4つの項目と黄金比を覚えておけば、
自由度の高いランディングページを作る際にも構成やデザインで迷うことも少なくなるまずです。
黄金比に関しては、他にも「商品や会社のロゴづくり」にも活用されている程です。
参考：グーグル「logo golden ratio」画像検索（2017/11キャプチャ）
自由度が高いからと言って何も考えずに好き勝手ランディングページを作ってしまうと、
かえってマイナスになってしまう事があります。
そうならない為にも、
作ってみよう！！
と思い出して、あなたのランディングページを作ってみてください。
最後までご覧いただきまして、ありがとうございました！
