デザインの4つの基本原則とは

デザインの4つの基本原則

こちらではデザインの4つの基本原則である、

1：近接

2：整列

3：コントラスト

4：反復

についてご紹介しています。

これらの原則は質の良いデザインのランディングページに必ず見られるデザインの基本原則。

この原則に沿っているかどうかでランディングページのデザインの完成度は劇的に変わってきます。

たとえ同じことを書いていたとしても、デザインが変わるだけでランディングページの結果も変わるため、これらは是非押さえておきたいポイントになります。

1:近接

まず初めに「近接」についてです。

「近接」とは、「関連するグループはまとめて1つのグループにする」ということ。

つまり「近接」の原則を使うことにより、どの情報とどの情報が1つのグループなのかが一目で分かるようになり、情報が一瞬で読み手に伝わるようになります。

こちらをご覧ください。

こちらはあるランディングページの文章です。

左よりも右の方が情報を拾いやすいことが見て取れますよね？

左の図はタイトルと文章が離れてしまっているため、この2つが関連するものであるということを一瞬で理解しにくいといえます。

しかし、右の図のように2つを近接させることにより、この2つがグループであるということが一目で分かるようになります。

なんでも近づければ良いということではありません。異なるグループ同士は、逆に距離をとる必要がある場合のものもあります。

こちらをご覧ください。

左が読みにくいのは、関連しない情報まで近接させてしまっているためです。

右の図のように、関連する情報は近接させ、関連しない情報は逆に離すことで、どの情報とどの情報がグループなのかが一目で分かるようになり、情報も拾いやすくなります。

2：整列

「整列」とは、画像やアイコン、テキストなどのランディングページ内にあるものを揃えて綺麗に整列させること。

こちらをご覧下さい。

こちらは「近接」で使用したテキストです。

左端を揃えることで左側に透明な力強いラインが現れることが分かるかと思います。このラインがページ全体に力強さを与えます。

整列されていないランディングページはどこか雑然としていて読みにくく、素人臭い感じすら出てしまいます。

この「見えない透明なライン」を意識して作ることで、ランディングページに洗練された印象を与えることが出来ます◎

3：コントラスト

「コントラスト」とは、お客様の目をランディングページにより強く引き付けるための手段です。

こちらをご覧下さい。

タイトルと本文にはっきりとデザインの違いをつけることで、タイトルがより際立つようになったことが分かるかと思います。

ランディングページにおいてこれはとても大切なことで、コントラストが無いランディングページは印象に残りにくく、内容が頭に入りにくい傾向にあります。

「ランディングページデザイン論」のページでもお話していますが、基本的にお客様は流し読みをされます。

そこで流し読みをしても伝わるようにするためには、この「コントラスト」を付けることが1つの手段です。

今回のケースだと、タイトルと本文に明確なデザインの違いを持たせ、タイトルに目が行きやすくなるようにするということなのです。

タイトルというのは基本的に内容を要約して付けるものですので、タイトルが目に入れば「ここに何が書いてあるのか」という大まかなことを伝えることは出来ます。

4：反復

「反復」とは、デザイン上のある特徴を繰り返すことを指します。

これによりデザインに一貫性を持たせ、ランディングページに統一感を持たせることが出来ます。

こちらをご覧ください。

タイトルのデザインをバラバラにしてしまうと一貫性が無く、この3つの項目の関連性も伝わりにくく、デザイン的にも綺麗に見えません。

対して同じデザインを繰り返すと、統一感が出て、3つの項目の関連性も一目で分かり、デザインとしても洗練されたものに見えるようになります。

中見出し部分での反復

ランディングページでは特に中見出し(項目が切り替わるときに使用する見出し)の部分で反復がよく使われます。

同じデザインを何度も反復することで、「ここから項目が変わる」ということが無意識の内に頭の中にインプットされます。

見出しと見出しの距離は離れており物理的には孤立していますが、何度も反復させることで離れた見出し同士が結び付き、ランディングページ全体に統一感を持たせることが出来るようになります。

ある1つの目的に向かって制作されるランディングページにとって「統一感」は大切なものであり、お客様を自然な流れで最後まで導く役割を果たすのです。