見た目のデザインは、色・フォント・装飾・レイアウトといった見栄えに関わるところです。また見た目以外のところは、表示のパフォーマンス、ユーザビリティ、アクセシビリティ、構造設計などがそれにあたります。
Webデザインというと、”Webサイトの見た目をデザインする”ということではあるのですが、それには、外見だけでなく、その構造や内面的なところも考える必要があるのです。
Webデザインについて、概要はこちらの記事を参考にしてください。
今回はそのレイアウトについてお話しします。
レイアウトの４つの基本原則は？
レイアウトとは、「情報を見やすく配置すること」をさします。
この基本原則を理解していないと、うまくデザインが出来ません。
デザインがうまくできない人はこれが理解できていないこともあるでしょう。
それぞれ説明していきます。
近接
近接は「関連する情報を近くに配置してグループ化する」ことです。
[jin_icon_arrowtop color=”#e9546b” size=”20px”]例えばこのような画像を用意します。
これだとわかりづらいですよね。
[jin_icon_arrowbottom color=”#e9546b” size=”20px”]これを「近接」を意識するとこのようになります。
同じグループの要素は近くに配置することで、わかりやすくなりました。
グループとグループの間に余白を取ることで、視覚的にグループ化されていることが示せます。
バナーやヘッダーなど小さいスペースでも、「瞬時に、多くの情報を正しく伝える」ことが必要になるからです。
サイト設計の段階で、掲載する情報をリスト化すると思いますが、その際に関連する情報を整理し、グループ化しておくと良いです。
ただ注意する点は、情報を細かく分けすぎないことです。
細かくしすぎても逆に混乱を生みます。
整列
整列とは、揃えて並べることを指します。
よく聞く整列には
- 右揃え
- 左揃え
- 中央揃え
- 下揃え
- 上揃え
があります。
グループ化したものを、バラバラで並べるより整列させて綺麗に並べるほうが見やすくなります。
文章は、左から右に読むので、文章の折り返しや読み始めの位置が不揃いになるため、左揃えが好ましいです。
またタイトルや見出しに当たる部分は、中央揃えが効果的な場合もあります。
横の要素や、上の要素と、中央揃えに整列されているのが分かります。
反復
反復は色や形、大きさ、図形などを「繰り返す」ことです。
そうすることで、デザインの統一感や一体感を持たせることが出来ます。
[jin_icon_arrowbottom color=”#e9546b” size=”20px”]例えばこれはどうでしょう。
レモンのフォントとスイカのイラストの系統が異なります。
これだとわかりづらいですよね。
- 同じフォント（書体や文字サイズなど）
- 同じ系統のイラストや図形
- ナビゲーションやメニューの位置
などを統一することで、違うページに移動しても同じサイト内であると認識させることができます。
逆に、これが出来ていないとユーザーが認識しているルールが崩れてしまい混乱を招きます。
まとめ
この４つの基本原則を理解していないと、うまくデザインが出来ません。
デザインがうまくできない人はこれが理解できていないこともあるでしょう。
ぜひこれを意識してデザインしてみてください。
