はじめに
こんにちは。Itoop（アイティープ）の佐藤です。
最近は、気温もずいぶん下がって涼しい日が多くなり、過ごしやすくなってきましたね。
さて、今回もWebデザインの基礎「レイアウト」について書いていきます！
前回は、「レイアウトとは何か？」を書きましたが、今回はレイアウトの原則について書いていきます。
※前回記事：【HP作成】Webデザインの基礎！【レイアウト編】
レイアウトの原則とは
レイアウトには、4つの原則があります。
前回、レイアウトは「感覚で文字や画像を配置するのではない」ということをお伝えしました。
これから紹介する原則は、規則性のある美しいレイアウトにするための具体的な施策になります。
4つの原則について
1.近接の原則
関連する項目をまとめてグループ化させることです。
以下2つの例をご覧ください。
例①：見出しと本文を均等な感覚で配置した場合
例②：見出し①と見出し②それぞれまとめた場合
例①では、見出し、本文、補足すべてが均等な感覚で配置されています。
一見きれいなレイアウトに見えるものの、見出しと内容の対応がわかりにくくなっています。
一方、例②は、見出し、本文、補足をまとめました。
このように、位置関係を明確にするだけで、視覚的に知覚的にも認識しやすいレイアウトを作ることができるようになります。
2.整列の原則
ページ上のものを意図的に配置し、要素を統一化すること
例③：規則性を持たせずバラバラに配置した場合
例④：名前とアドレスを分けて全て左に配置した場合
例③のように文字が揃っていないだけでも、名前やアドレスなどが見づらい配置となっています。
そのため、全体としても統一感のないレイアウトとなっております。
例④では、要素をまとめてすべて左側に整列させることで統一感を出しました
このように、ルールを適用して統一化することで美しく見やすいレイアウトになります。
3.反復の原則
全体を通して、デザイン上の何らかの特徴を繰り返すことです。
例えば、全てのページに同じヘッダーやナビゲーションが使われているページは、反復の原則に沿って作られたデザインと言えます。
反復の原則を取り入れることによって、ユーザーがサイトの使い方を覚える時間を短縮させ、より早くサイトに慣れ親しんでもらうことに繋がります。
4.対比の原則
全体の一部を揃えずに対比させることで要素に意味を持たせ、ユーザーの目に止まりやすくする原則です。
対比のことをデザイナーの間では「コントラスト」と呼びますが、要素の違いがはっきりしている/いないによって「コントラストが強い/弱い」と表現し、対比の原則はコントラストをはっきりさせる原則になります。
例⑤：本文に対して見出しを大きくした場合
上記例は、例②の見出しのフォントサイズをより大きくしたものになります。
見出しを大きくすることで、まずは見出しに目を止まらせることで本文へと誘導し、文章を読ませることができます。
大事なのは思い切って要素の違いを出すことです。
さらに重要なのは、サイトの中で特に目立たせたい要素を明確にして、その要素にのみ対比の原則を用いることです。
特に、色の明暗によるコントラストの付け方はよく用いられており、文字色と背景色を変更するだけでも大きな違いが生まれます。
おわりに
僕は、この原則を用いて規則性を持たせることで、以前より整理された美しいデザインにすることができるようになりました。
この原則は、Webデザインに限らず、名刺やグラフィックデザイン、ビジネスの資料にも用いることができます。
当記事が、Webデザインに触れ始めた方々の参考になれば幸いです。
また、➂も投稿しました。「よく用いられる2つのレイアウト」についてまとめていますので、こちらもご参照ください。