Webデザインにおける絶対に外せない4つのレイアウト原則とは?

Webデザインにおける絶対に外せない4つのレイアウト原則 WebDesign

photoshopやIllustratorなどを用いてデザインを行う際に、パッと見の印象が良く、なんとなく綺麗な配置にしてしまうことはないでしょうか?

この記事では、Webデザインにおける絶対に外せない4つのレイアウト原則について解説していきます!

スポンサーリンク

レイアウトの4原則

デザインを感覚や見栄えが良いなどの理由だけで作成してしまうと、全体を見通したときに細かいズレや違和感を生じてしまいます。

そこでWebデザインのレイアウトをする際の一つの目安となる「4つの原則を順に説明していきます。

近接の原則

近接とは関連する項目をまとめてグループ化させることを言います。

人は位置的に近いものを「関係やなんらかの繋がりのあるグループ」と認識します。
いくつかの要素同士が近接している時、それらは視覚的に一つのグループとなり、視覚的にまとまっているものは、知覚的にも一つのグループとして見られるようになります。
近接
左側の例では見出し、本文、補足の文章が全て均等に配置されています。
一見綺麗に見えるかもしれませんが、これではどの文章の見出しなのかが分かりづらく、補足の文章も見出しに対しての補足なのか、本文に対する補足なのかが分かりません。
右側の例では近接の原則に従い、それぞれの見出し・本文・補足をグループ的にまとめています。
このように位置関係を明確にするだけで、視覚的にも認識しやすいレイアウトを作ることができるようになります!

整列の原則

整列とはページ上のものを意図的に配置することを言います。

整列の目的は要素の「統一化」にあります。

要素になんらかのルールを適用し、統一化させることで、美しく、見やすいレイアウトになります!

下記の名刺デザインで簡単に説明して見ます。

整列1

整列2

左の例では必要な情報は配置されていますが、要素がバラバラに羅列されているため、視線が定まらず、どの情報がどこにあるのか毎回探してしまうようなレイアウトになっています。

右の例では要素を左揃えにすることで、とても見やすいレイアウトになっています。要素をしっかりと揃えることによって、見えない基準線があるかの様にも見えます。

反復の原則

反復とはデザイン上の何らかの特徴を、デザイン全体を通して「繰り返す」ことを言います。

近接の原則の例で使った見出しや本文などもデザイン全体を通して使用されているため、反復の原則に則っていると言えます。

反復の原則1

反復の原則2

Webサイトを見ている時に全てのページで共通のヘッダーやナビゲーションが使われていたり、同じ色の線やアイコンが使われていることがあります。

これも反復の原則に沿って作られたデザインと言えます。

要素を反復させることは、サイト全体のデザインの統一感を出すだけではなく、ユーザーに対するサイトへの慣れも促進させる効果もあります。

このように全体で共通の要素を繰り返し使用することによって、サイトの使い方を学習する時間を短縮させ、ユーザーに早くサイトに慣れ親しんでもらうことができます。

対比の原則(コントラスト)

対比の原則はレイアウトにおいて重要な法則の一つです。

整列の原則では要素に何らかのルールを用いることによって、全体を「統一化」させていましたが、対比の原則は全体の一部を揃えないことで要素に意味を持たせ、情報の「組織化」をすることを言います。

このように整列の原則とは逆の概念ですが、整列の原則を無視することではありません。

対比のことをデザイナーがよく使う言葉としてイメージしやすくするために、ここではコントラストと呼ぶようにします。

コントラストとは「対比・対象」のことを言います。
簡単に言ってしまうと対比の原則は、このコントラストをはっきりさせるということになります。
対比の原則
上記のようなサイトはコントラストが強いサイトと言えるでしょう。
黒い背景に白文字を使うことで、強いコントラストを表現できています。
見出しを本文のサイズよりも極端に大きくすることでコントラストを表現することもありますが、特に色の明暗によるコントラストの付け方はとてもよく使われています。
全ての要素にコントラスト付けてしまうと、全体が乱雑なレイアウトになり、全体のバランスが崩れ、どの要素を目立たせたいのかが分からなくなるので注意しましょう!
対比の原則を用いるときは、目立たせたい要素をはっきりとさせることが大事です。

まとめ

今回ご紹介した4つの基本原則(近接・整列・反復・対比)を用いることができれば、誰でもバランスのとれたデザインを作ることができます!

今後のWebデザインの参考にしてみてください。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
WebDesign
スポンサーリンク
シェアする
CreaveGraffitiをフォローする
Creavegraffiti | Webマーケティング情報

コメント

タイトルとURLをコピーしました