Webデザイン概論

レイアウトの4つの基本原則

Webサイトの
・見た目のデザイン
・見た目以外のもの
を合わせて設計するのがWebデザインです。

見た目のデザインは、色・フォント・装飾・レイアウトといった見栄えに関わるところです。また見た目以外のところは、表示のパフォーマンス、ユーザビリティ、アクセシビリティ、構造設計などがそれにあたります。

Webデザインというと、”Webサイトの見た目をデザインする”ということではあるのですが、それには、外見だけでなく、その構造や内面的なところも考える必要があるのです。

Webデザインについて、概要はこちらの記事を参考にしてください。

Webデザインはなぜ必要か【Webデザインの概要とサイト設計で大事なこと】 Webデザイナーを目指して思っているみなさん。 そもそも「Webデザイナとは何か」と思っている方も多いかもしれません。...

今回はそのレイアウトについてお話しします。

CodeCamp
スポンサーリンク

レイアウトの4つの基本原則は?

レイアウトとは、「情報を見やすく配置すること」をさします。

この基本原則を理解していないと、うまくデザインが出来ません。
デザインがうまくできない人はこれが理解できていないこともあるでしょう。

レイアウトの4つの基本原則は何?
~レイアウトの4つの基本原則~
・近接
・整列
・反復
・コントラスト

それぞれ説明していきます。

近接

近接は「関連する情報を近くに配置してグループ化する」ことです。

[jin_icon_arrowtop color=”#e9546b” size=”20px”]例えばこのような画像を用意します。

これだとわかりづらいですよね。

[jin_icon_arrowbottom color=”#e9546b” size=”20px”]これを「近接」を意識するとこのようになります。

同じグループの要素は近くに配置することで、わかりやすくなりました。

グループとグループの間に余白を取ることで、視覚的にグループ化されていることが示せます。

近接をすることで、視覚的に1つのグループに見え、ユーザーの目線の流れを助ける役割を持ちます。

バナーやヘッダーなど小さいスペースでも、「瞬時に、多くの情報を正しく伝える」ことが必要になるからです。

サイト設計の段階で、掲載する情報をリスト化すると思いますが、その際に関連する情報を整理し、グループ化しておくと良いです。

ただ注意する点は、情報を細かく分けすぎないことです。
細かくしすぎても逆に混乱を生みます。

整列

整列とは、揃えて並べることを指します。

よく聞く整列には

  • 右揃え
  • 左揃え
  • 中央揃え
  • 下揃え
  • 上揃え

があります。

グループ化したものを、バラバラで並べるより整列させて綺麗に並べるほうが見やすくなります。

文章は、左から右に読むので、文章の折り返しや読み始めの位置が不揃いになるため、左揃えが好ましいです。

またタイトルや見出しに当たる部分は、中央揃えが効果的な場合もあります。

わたし
わたし
図形やレイアウトを考える時に、「見えない線」を意識したことありませんか?
この青い線が「見えない線」です。

横の要素や、上の要素と、中央揃えに整列されているのが分かります。

このように整列させることで、グループ化も綺麗に見え、一体化となっているのを明確にできるのです。

反復

反復は色や形、大きさ、図形などを「繰り返す」ことです。

そうすることで、デザインの統一感や一体感を持たせることが出来ます。

[jin_icon_arrowbottom color=”#e9546b” size=”20px”]例えばこれはどうでしょう。

レモンのフォントとスイカのイラストの系統が異なります。
これだとわかりづらいですよね。

  • 同じフォント(書体や文字サイズなど)
  • 同じ系統のイラストや図形
  • ナビゲーションやメニューの位置

などを統一することで、違うページに移動しても同じサイト内であると認識させることができます。

逆に、これが出来ていないとユーザーが認識しているルールが崩れてしまい混乱を招きます。

反復を行うことで、一体感がより強調され、ユーザーが情報を結びつける助けとなり、スムーズに目的の情報にたどり着くことが出来るのです。

まとめ

この4つの基本原則を理解していないと、うまくデザインが出来ません。
デザインがうまくできない人はこれが理解できていないこともあるでしょう。

ぜひこれを意識してデザインしてみてください。

配色について知ろう!配色って、様々な場面において重要になります。 広告を作る サイトを作る ブログの色を変える イラストを描く ...
Webデザインの流れ【初心者向け】今回はWebデザインの流れをお伝えします。 基本的にはWebデザインの流れは以下のようになります。 ①企画 ②サイ...
Webデザインはなぜ必要か【Webデザインの概要とサイト設計で大事なこと】 Webデザイナーを目指して思っているみなさん。 そもそも「Webデザイナとは何か」と思っている方も多いかもしれません。...
スポンサーリンク

ABOUT ME
みき
現在看護師をしながら、フリーランスWebデザイナーとして活動しています。将来、海外移住を目指しています。カナダに滞在歴あります。「看護師」「海外渡航」「Webデザイン」など幅広く発信中。