見出し画像

個人的に実践しているWebデザインガイドライン③ レイアウト編

TAK / Web Creator.

あくまで個人的に実践しているデザインのガイドラインです。

記事一覧はこちら↓

# レイアウトの基本事項

Webサイトは文書。テキストは左から右に読み進める、署名は右寄せなど、文法にも配慮した配置を心掛ける。

コンテンツの重要度と優先度を考慮してデザインする。情報の位置関係に注意を払う。

重要なコンテンツは目立たせる。ユーザーはWebサイトを読み飛ばして見ることが多い。周囲のコンテンツとの距離やコントラストを変えると引き立てやすい。

関連するコンテンツはグループとして認識できるような配置にする。

一貫性のあるデザインを作成する。一貫性のないデザインは開発を遅らせるだけではなく、ユーザーの混乱も招いてしまう。

セクションの区切り方や境界の見せ方に拘る。内容に応じ、階層をつけたデザインにする。

デザインをする時は常にコーディングのことも考える。攻めたレイアウトを作ることは容易だが、それがちゃんとデバイスやブラウザで表示されるかはどうかは別問題。

# デザイン4大原則を遵守する

デザインには基本中の基本となる「4大原則」と呼ばれる原則がある。この原則を遵守するか否かで情報の伝わり方が全く変わるので必ず意識する。

＜近接＞
関係性の近い各情報の距離を近づけて配置する。ユーザーに情報のグループ化を認識させる。
＜整列＞
情報を闇雲に配置するのではなく、情報を意識的に揃えて配置する。
＜反復＞
繰り返しによるデザインで一貫性・統一性を持たせてサイト内の統一を図る。
＜対比＞
情報ごとにメリハリをつけて違いをハッキリさせる。

有名な「ノンデザイナーズ・デザインブック」はこの4大原則を実例を見せながらとても分かりやすく解説している。

デザインの基本の「き」を知るためにも、デザイナーの方も非デザイナーの方も是非とも読んでいただきたい一冊。

# 余白は重要な要素

Webデザインにおいて余白はトップクラスに重要な要素。

一見するとただの空白ではあるが、デザイン上で重要なことが詰め込まれている。例えば以下。

＜情報のグループ化＞
4大原則でも触れたとおり。
関係する情報を近づけて、関連しない情報を遠ざけることで情報のグルーピング化を図れ、情報が理解させやすくなる。
＜コンテンツの強調＞
重要なコンテンツの周りに余白を設けることで、それを引き立たせることができる。
コンテンツがぎゅうぎゅうなデザインだと、特にアピールさせたいコンテンツが引き立たない。
＜可読性＞
テキストや画像をギチギチに詰め込んだ弁当箱のようなデザインは可読性が低い。
可読性を高めるために余白を設けることは大切。
＜操作性＞
ボタンやリンク周りに余白が無いと操作性が不便になる。特にスマホなどのタッチデバイス。

余白の大切さが分かる文献にTwitterで話題の「けっきょく、よはく。」という書籍がある。

新人デザイナーが作ったNG例とプロが作ったOK例を見比べることで余白の大切さを認識することができるのでこれもおすすめの一冊。デザインの参考書籍としても優れてる。

ただ、余白を詰めた方が逆に分かりやすいってクライアントやユーザーもいる。特に年代の高い方に多い印象。

個人にすごいと思ったのが小泉進次郎のWebサイト。パララックス効果などを取り入れて現代的でありながら、フォントを大きく太めに設定し、上記で述べたようなテキスト間の余白を詰めたデザインで中高年層にも配慮されている。

# ユーザーの目線の誘導に考慮する

横書きのWebデザインは基本的に左上が基準。人間の目線も左上から右下に移動する。

複雑な目線移動を強いるようなデザインはユーザーに混乱や不快感を与える場合がある。

一番アピールしたいコンテンツは上部に配置する。

「Zの法則」と「Fの法則」を意識する。

＜Zの法則＞
ユーザーの視線が、左上→右上→左下→右下とZの形に動くことから「Zの法則」と呼ばれる。
Zの法則は初見ユーザーによく見られる。ざっとページの全体を見る時にこのような目線になることが多い。
トップページはこの「Zの法則」を用いたレイアウトが多い。
＜Fの法則＞
ユーザーの視線が、左上→右上→少し下に移動して左→右→下とFの形に動くことから「Fの法則」と呼ばれる。
Fの法則はリピーターによく見られる。上から順にじっくりと上部を閲覧してから、下部に移動することが多い。
商品ページや記事ページに「Fの法則」を用いたレイアウトが多い。Webの調査によって明らかになったパターンのため、Webサイトの取り込みへの信頼が高い。

# サイズ決定時の因数は8を基準にする

webサイトの余白やブロックの横幅などは8の倍数で設計する。

8の倍数で設計するメリットは下記記事を参照。引用するとこのような感じ。

- 要素のサイズや余白に秩序を持たせやすくなり、デザインの品質が向上する。
- 8の倍数で設計することで端数が発生しにくく、コンテンツのレイアウトや余白の秩序が維持しやすくなる。
- 多くのデバイスの基準となる解像度に8の倍数が用いられており、汎用的なスクリーンサイズの基準に合わせやすい。

スマホサイズの場合は8の倍数で設計すると大きすぎることもあるので、その場合は適度に4の倍数も取り入れている。

InstagramやAirbnbはスマホアプリのサイズの因数に4を用いている。

# 貴金属比

ボックスや配置、写真の構図やフォントサイズなどの比率は、黄金比や白銀比に近づけるほど好印象なデザインになる。

逆に貴金属比から離れるほどデザインに不快感を感じるようになるので注意が必要。着ぐるみに違和感を感じやすいのはこれが原因だとか。

＜黄金比＞
1:1.618…で表され、多くの比率の中で古くから安定して美しいとされる比率。身近な例だと以下のようなところで使われている。
ピラミッド、ミロのヴィーナス、モナ・リザ、名刺のサイズ、クレジットカードのサイズ、タバコの箱、Appleのロゴ、Googleのロゴ、Twitterのロゴなど。
＜白銀比＞
1:1.414…で表され、別名大和比とも呼ばれ古くから日本の建築や芸術などで用いられてきた。そのため日本人にとっては黄金比よりも馴染みやすいそう。
法隆寺、見返り美人図、風呂敷、A版・B版の用紙サイズ、スカイツリー、ドラえもん、キティちゃん、アンパンマンなど。
＜青銅比＞
1:3.303…で表される比率。上記の2つに比べてマイナーだが、webサイトではGINZA SIXなどメインビジュアルの縦横比に利用される例があるので参考にしてみるといいかも。
＜白金比＞
1:1.732...で表される比率。実例はよく分からない。

キービジュアルやメインとサイドのカラムの幅の比率、タブやリンクボタンのサイズも貴金属比にすることで見栄えの美しさはグッと上がる。

METALLIC RATIOなどの貴金属比計算ツールをブックマークしておくと便利。

# スクロールを意識させる

Webサイトはスクロールしてもらうことを考慮する。

縦長のページは下に下にスクロールできることがわかるようにする。ヒーローヘッダーを設置する場合はスクロールできることを示すサインを設置すると良い。

例えば僕がCodePenにアップしたこれとか。

コンテンツの一部を横スクロールで実装する場合は、スクロールできることを知らせる旨のテキストやスクロールバーを設置する。

# 各ページのレイアウト

離脱率に大きく影響するのでファーストページビューのデザインは超重要。初見の印象を大切に。

トップページには情報を詰めすぎず、下層ページは検索性を重視する。

下層ページのデザインはレイアウトを統一する。

前述したように適切に各要素の間隔をとり、可読性を重視したレイアウトを心掛ける。

# リンク周りのレイアウト

## ボタン

大きさ、形、ホバーなどのルールは全体で統一する。

文字の配置位置に注意。

---

## テキストリンク

テキストリンクだと分かるようなデザインにする。

スマホの場合タップするとき不便になりやすいので、テキストリンクの周りには余白を設ける。

---

## 画像リンク

直感的にリンクだと分かるようなデザインを心掛ける。

リンク先の内容とマッチする画像に、リンクだと認識させるようなデザインを。

# バナーのレイアウト

Webサイトのアクセントとなるような目立ったデザインを心掛ける。もちろんやりすぎはNG。

もちろんWebサイトのイメージに調和した配色やレイアウトを。サイズは大き過ぎず・小さ過ぎずのサイト内のバランスを考慮したサイズで実装する。

バナーデザインに迷ったら以下の記事を参考にするといいかもしれない。

# アイコンのレイアウト

大きさや印象、スタイルなどを統一。できる限りSVGで実装できるようなシンプルなアイコンが良い。

商用OKのフリーアイコンを利用するのも手。

# その他のレイアウト

## ナビゲーション

基本的にはヘッダーに配置。メインの補助としてフッターに配置。

「ジャムの法則」からメニューの項目数は5つから9つがベスト。個人的には7つまでに留めたい。

コンテンツの多いコーポレートサイトなど、必要に応じてサイトマップも配置する。

SEO対策も含めてパンくずリストは必ず設置する。ユーザーに自分がどのページを開いているのか認識させ、戻りたいときの経路も同時に知らせることができる。

---

## ロゴ

左上か中央に配置。右側には基本的に置かない。

グローバルヘッダーやフッターなど、Webサイト全体に適度に配置する。

---

## ドロップダウンやタブなど

ドロップダウンメニューやプルダウン、タブやアコーディオンなどは見た目でそのような操作が必要わかるデザインにする。

アクティブの時はアクティブであることがわかるような表現を考慮する。

# 参考記事

# 参考スライド

# 参考書籍

---

次回「画像編」はこちら↓


愛と平和