前回、Webサイトのデザインをしながら、レイアウトについての知識が自分の中で散見していたのでまとめてみることにした。
1. デザインの4原則
そもそもデザインには4つの原則がある。これらの原則の上にレイアウトが成り立っている。
1-1. 近接の原則
“「近接」とは関連する項目をグループ化するという意味です。“
段落の中のテキスト同士は近接に配置し、段落同士は離して配置するように、日常の中で文章を書く時にも自然と意識していることだと思う。
1-2. 整列の原則
“近接で要素と要素をグループ化できたら、それを綺麗に整列してあげましょう。“
手書きの手紙を書いていると行頭がばらつくことがあるが、それだと見づらい。同じように、Webサイトでも段落やタイトルのグループなどを整列する。
1-3. 反復の原則
“同じレベル感の見出しは一貫性を持たせて同じ文字サイズ・フォント・色・装飾を使うべきです。”
章立てや箇条書きの同レベルのものがばらついていると見づらいだけでなく、文章の構造や意味の誤解すら招くので、階層構造は適切に表現する。
1-4. コントラストの原則
見せたい部分を強調したり、逆に抑えたりすることで、見る人の注意をコントロールする。
2. 視線の動き
Webサイトは画面に表示されるものなので、作る側は読者の視線の動きも知る必要がある。
2-1. Z型
聞いたことがある人も多いであろう一般的な視線の動きで、左上から右下に向かって動く。仕事で用いる書類や何かの説明書など以前から使われている動き。
2-2. N型
縦書きの書類を見るときの視線の動き。右上から左下に向かって動く。新聞が代表的な例だろう。
2-3. F型
近年普及が進んだスマホなどでよくみられる動き。画面の幅が広くないためコンテンツを下に配置していき、視線の動きをシンプルにしているのがZ型との違いではないかと思う。
3. レイアウトパターン
サイトのレイアウトは大きく四つあると自分は考えている。
3-1. シングルカラム
シングルカラムはコーポレートサイト、キャンペーンサイト、LPなどでみられるカラムが1つのみのパターン。ユーザが受動的にサイトを見るようなパターンの場合はこのパターンのほうが考えさせずに情報を提示できると思う。
3-2. マルチカラム
ポータルサイトや検索サイトでみられるパターン。たとえばメルカリだと一方に検索条件、他方に検索結果というように複数の行にコンテンツが配置されている。ユーザが多くの情報の中から求める情報を探すのに有用だ。
3-3. グリッド
写真やイラストをコンテンツとして扱うサイトに見られる。インスタのユーザ画面がまさしくこのパターン。画像がメインコンテンツの場合はグリッド上に散りばめて配置することで、見るだけで気になる情報を探すことができる。
3-4. フルスクリーン
個人的にはアーティストのサイトや、ゲームの公式サイトなんかでよくみられる。アニメーションなどを用いて画面上での遊びをユーザに与えるものが多い。ユーザの興味を一番に惹きつけたいときに用いると良いだろう。
4. サイトを構成するパーツ
サイトを構成するパーツについてもまとめる。
4-1. ヘッダー
ヘッダーはページ上部にある、ロゴや企業名などが配置される部分。
4-2. ナビゲーション
ページのメニューが配置される部分。ヘッダーのロゴと合わせて、画面の一番上に常に固定される場合もある。
4-3. コンテンツ
サイトの情報の中心部分。インスタであれば写真だったり、ブログであれば記事部分を差す。ここが先に述べたレイアウトパターンを工夫するところ。
4-4. フッター
ページの下部に配置される部分。コピーライトやサイトマップなどが配置される。ここにナビゲーションが配置される場合もある。
5. まとめ
一見Webサイトのレイアウトはいろいろあって複雑にも思えるが、まとめてみるとパターンがいくつか決まっており、その役割も明確だと思った。
とりあえずは上記のパターンを覚えておけば大抵のWebサイトのデザインでは困らないと思う。
次は配色やタイポグラフィも学びたい。
参考サイト
【初心者向け】目的別にわかる！ホームページのレイアウトの基本【現役デザイナーが解説】