綺麗なWebサイト制作に使われる4つのデザイン原則とは

綺麗で整ったWebサイトを見たとき、なぜ綺麗に見えるのか言葉で説明できますか？
もしかしたらそのWebサイトは4つのデザイン原則に基づいて作られているかもしれません。
4つのデザイン原則とは、コントラスト（Contrast）、反復　（Repetition）、近接（Proximity）、整列（Alignment）のことです。
おおよそ綺麗なWebサイトというのはこの原則に沿って作られている場合がほとんどです。

デザインに精通している方はこの言葉を聞いただけで、「何となくあのことか」とイメージされたかもしれません。
この4つのデザイン原則を意識するだけで、見た目が綺麗なデザインを作り上げることだけでなく、読み手に伝えたい印象や意味を明確に伝えることができます。
今回は意識するだけで見違える、4つのデザイン原則についてご紹介します。

コントラスト（Contrast）

コントラストは読者の目をページに引き込むために、フォント、色、サイズ、線の太さ、形、空きなどの要素に強弱をつけることです。
効果としてはページ上の要素同士が「類似」することを避けることができ、目立たせたい要素をはっきりさせます。

言葉だけだと少し分かりづらいので、サンプルを用意しました。

BEFOREのように黒字だけで続いた文章は少し読みづらさがあります。見出しが強調されておらず、平坦に文章が続くため、どこに目をやっていいか分からないからです。
一方AFTERの文章は見出しが強調されているためリズムよく文章を読むことができます。
コントラストは重要な部分を大きくしたり、色をつけたりすることで要素が明確になり、読者をまず読む気にさせることができます。

反復（Repetition）

反復はデザインの視覚的要素を全体を通して繰り返すことです。
色、形、テクスチャ、位置関係、線の太さ、フォント、サイズ、画像のコンセプトなどを反復させることで作品全体に一体感や統一感が生まれます。
弊社で作成したこちらのページも反復のルールを用いて、一貫性・統一性を持たせたデザインとなっています。

反復は読者がページを読み進めることを手助けし、デザインの離れた部分にも統一感をもたらします。
またWebサイトや広告で、作品全体に一体感を持たせるためのスタイルやルールのことをトーン＆マナー（トンマナ）と読んだりもします。

近接（Proximity）

近接は関連する項目をまとめてグループ化することです。
項目同士を近づけることで、無関係な要素ではなく、1個のまとまったグループに見せることができます。
類似の要素をグループ化して1個のユニットにするだけで、ページがより組織化されます。
近接は情報の組織化に役立ち、視覚の混乱を減らし、明確な構造を読者に分かりやすく伝えることができます。

BEFOREは近接を考慮せず作成したため、文章がどの項目のものなのか分かりづらい印象があります。
AFTERは各アイコンに対して見出しを寄せてあり、また各項目同士の余白を空けることで、どのコンテンツなのかが分かりやすくなっています。
近接のポイントは余白を設けること。空白があることによって、枠線で囲わなくてもグループ化されていることが分かります。

整列（Alignment）

整列はページの一体化と組織化を目的とします。
左揃え・右揃え・中央揃えのように、要素を意識的に配置することによって情報が整理され、読者にまとまった印象を与えることできます。
また上で紹介した近接と組み合わせることで、各要素の繋がりや統一感をよりはっきりさせることも可能です。

枠線などで囲っていなくても、デザインとして統一感が自然に見えれば整列を上手く活用できている証拠です。

分かりやすく名刺のデザインを例にしてみます。
BEFOREの名刺は整列を意識せず作成してみました。要素が少ないのにも関わらず最後まで読み終えるまでに目線が行ったり来たりしたはずです。
AFTERの名刺は全体を左揃えに整列してみました。左側に一定の余白があるためすっきりして、読みやすくなっています。
ポイントは余白を使い、まるで見えない直線を引いて整えるかのように、各要素を整列させることです。

デザインの4原則はすべてのデザインで応用が可能

簡単にですがサンプルを踏まえて4つの基本原則を紹介しました。この原則はWebサイトだけでなく、広告、新聞、本、スマホなど私たちの生活の至るところに潜んでいます。
ここまで紹介した4つの基本原則を覚えておくことは、Webデザインの場で役立つだけでなく、会社の書類作成や知り合いに書く手紙にすら応用ができるでしょう。
つまりこのデザインの4原則はデザイナーだけではないすべての人たちに使える原則とも言えるのです。これらの原則を意識することで、普段見ていた広告などが、これまでとは違った見えてくるはずです。

弊社ではこの基本原則を理解し、さらに応用したWebデザインを提供しています。綺麗で整ったWebサイトを作りたいときは、ぜひお気軽にご相談ください。

新規Webサイト制作・リニューアルのサービス内容はこちらから

Written by koyama