こちらではデザインの基本となる4つの原則である、
1：近接
2：整列
3：コントラスト
4：反復
について記載しています。
これらの原則は良いデザインのランディングページに必ず見られるデザインの基本原則であり、この原則に沿っているかどうかでランディングページのデザインの完成度は大きく違ってきます。
同じことを書いていてもデザインが変わればランディングページの結果も変わってきますので、これらは是非押さえておきたいポイントです。
1:近接
まず初めに「近接」についてお話をしていきます。
「近接」とは、「関連するグループはまとめて1つのグループにする」ということです。この「近接」の原則を使うことで、どの情報とどの情報が1つのグループなのかが一目で分かるようになり、情報が一瞬で伝わるようになります。
こちらをご覧ください。
こちらはあるランディングページの文章ですが、左よりも右の方が情報を拾いやすいことが分かると思います。
左の図はタイトルと文章が離れてしまっているため、この2つが関連するものであるということを一瞬で理解することが出来ません。
右の図のように、2つを近接させることでこの2つがグループであるということが一目で分かるようになります。
ただし、なんでも近づければ良いということではありません。異なるグループ同士は、逆に距離をとる必要があります。
こちらをご覧ください。
左が読みにくいのは、関連しない情報まで近接させてしまっているからです。右の図のように、関連する情報は近接させ、関連しない情報は逆に離すようにすると、どの情報とどの情報がグループなのかが一目で分かるようになり、情報が拾いやすくなります。
情報が取得しにくいランディングページは読み手にとってストレスとなり離脱の原因になります。「近接」はランディングページにとって重要な原則の1つです。
2：整列
「整列」とは、画像やアイコン、テキストなどのランディングページ内にあるものを揃えて綺麗に整列させることです。
こちらをご覧下さい。
「近接」で使用したテキストですが、左端を揃えることで左側に透明な力強いラインが現れることが分かるかと思います。このラインがページ全体に力強さを与えます。
整列されていないランディングページはどこか雑然としていて読みにくく、素人臭い感じが出てしまいます。
この「見えない透明なライン」を意識して作ることで、ランディングページに洗練された印象を与えることが出来ます。
3：コントラスト
「コントラスト」とは、お客様の目をランディングページにより強く引き付けるための手段です。
こちらをご覧下さい。
タイトルと本文にはっきりとデザインの違いをつけることで、タイトルがより際立つようになったことが分かるかと思います。
ランディングページにおいてこれはとても大切なことで、コントラストが無いランディングページは印象に残りにくく、内容が頭に入りにくい傾向にあります。
「ランディングページデザイン論」のページでもお話していますが、基本的にお客様は流し読みをされます。
そこで流し読みをしても伝わるようにするためには、この「コントラスト」を付けることが1つの手段となります。
今回のケースだと、タイトルと本文に明確なデザインの違いを持たせ、タイトルに目が行きやすくなるようにするということです。
タイトルというのは基本的に内容を要約して付けるものですので、タイトルが目に入れば「ここに何が書いてあるのか」という大まかなことを伝えることは出来ます。
4：反復
「反復」とは、デザイン上のある特徴を繰り返すことを指します。
これによりデザインに一貫性を持たせ、ランディングページに統一感を持たせることが出来ます。
こちらをご覧ください。
タイトルのデザインをバラバラにしてしまうと一貫性が無く、この3つの項目の関連性も伝わりにくく、デザイン的にも綺麗に見えません。
対して同じデザインを繰り返すと、統一感が出て、3つの項目の関連性も一目で分かり、デザインとしても洗練されたものに見えるようになります。
中見出し部分での反復
ランディングページでは特に中見出し(項目が切り替わるときに使用する見出し)の部分で反復がよく使われます。
同じデザインを何度も反復することで、「ここから項目が変わる」ということが無意識の内に頭の中にインプットされます。
見出しと見出しの距離は離れており物理的には孤立していますが、何度も反復させることで離れた見出し同士が結び付き、ランディングページ全体に統一感を持たせることが出来るようになります。
ある1つの目的に向かって制作されるランディングページにとって「統一感」は大切なものであり、お客様を自然な流れで最後まで導く役割を果たします。
