デザインの４原則を知ろう

前回までのレッスンでWEBページのレイアウトについて学びました。
今回からは、各エリア内に要素を配置していくために必要なデザインの基本ルールを学んでいきます。ルールに基づいた配置を意識することで見た目も美しく、ユーザーにとっても分かりやすく使いやすいデザインが出来るようになりますよ。

デザインの４原則とは

WEBデザインを行ううえで一番大切なのは、「ユーザーが目的を容易に達成出来る」デザインであることです。つまり、ユーザーにとって使い勝手がよいデザインという事ですね。抽象的に思えるかもしれませんが、実はしっかりとした理論が存在しています。

「ノンデザイナーズ・デザインブック」（ロビン・ウィリアムズ著／吉川典秀訳／毎日コミュニケーションズ）という書籍で、デザインの４原則という事が説明されています。

• 近接
• 整列
• 反復
• コントラスト

この４つの原則はwebデザインにおいてとても重要な部分です。
これらを１つ１つ詳しく見ていきましょう。

近接

近接という原則はコンテンツの配置に関するものです。
人間は、情報同士の距離が近いと「関連性がある」と認識します。

この原則をもとに、サイトのレイアウトを分かりやすく、見やすく配置するためにはコツがあります。

1.情報をグルーピングし整理する

webサイトに掲載される情報は、共有の特性を持ったブロックで整理・構造化します。
ユーザーの行動特性に合わせて、情報が伝わりやすいように領域を区分することです。
こうした情報の整理をグルーピングやゾーニングと言います。

下図は予約や商品販売を目的としたLPで良く目にする構成です。

WEBデザインの場合はグルーピング+ユーザーに見せたい情報の“流れ”を意識する必要もあります。情報を整理してまとめ、受け入れられやすい形で提供するわけです。

上図はユーザーがサービスに関心を持ち、共感や信頼を経て購入（予約）というアクションを起こしやすいように、流れに沿って情報が分けられていますね。各種情報の種類がどういったものかを把握し、ユーザーが分かりやすいようそれらをデザインすることが求められます。

例

このページは「サロンの特徴をアピールし、最終的に予約を行ってもらう」事が目的です。
近接の要領で要素は寄せられており、情報もグループ化されています。

しかし、ブロックごとの情報の種類と配置順がバラバラなので読みにくさを感じるのでは無いでしょうか。「サロン特徴を知り、場所や時間を確認の上で予約」という流れに沿っていないのですね。

もっと大きな意味を持つグループに分けて、情報を整理してみましょう。

• サロン特徴（特徴１、２、３）
• 店舗情報
• 予約

これをグループ分けに準じた位置に並び変えてみます。

最初の状態よりも少し分かりやすくなりましたね。

このように、関連性がある情報同士の距離は、近くする事が重要です。関連が密なものはより近く、情報の種類が関連しているブロックをまとめて配置します。

2.余白で近接を際立たせる

分かりやすさを向上させるには、「余白」を上手に使う事も必要となります。
近接という点からも余白はとても重要です。関連性がある情報は近づける、と近接の概要では紹介しました。これは、関連性がないもの同士は離して配置するともいえますね。 つまり、「間隔」をあけるという事です。

また、コンテンツ同士の間に余白が十分にとられていないと、見づらくユーザーは求めている情報を見つけにくくなります。

https://www.apple.com/jp/

上記は「apple」のサイトです。
重要なコンテンツ部分で余白を大きく取ることは、ユーザーの目を引き付けることにもつながります。美しく使い勝手の良いサイトを作るには、余白を使いこなすことが必須です。 様々なサイトを見て、余白の使い方を学ぶと良いでしょう。

例

では、先程のレイアウトも更に分かりやすくなるように余白を設定してみましょう。

「サロン特徴」エリア内でも、最初のコンセプト・問題提起・RP部分を少し離しました。これにより、それぞれのグループが明確化されています。

さらに、店舗情報部分はよりはっきり離して配置することで、サロンの特徴やRPとは別の情報としてユーザーに認識されます。 ちなみに、今回は「電話番号」と「WEB予約」を店舗情報の近くに配置しました。これは店舗情報と予約についての情報が近い関係にあるためです。

3.視線の流れを意識する

人の視線は「F型」や「Z型」と呼ばれる方向に動きます。

この視線の流れから分かるのは「左上に重要な情報(グループ)を配置する」という事です。

ところで、ここまで一目で分かるという言葉を何度か使ってきました。
この「一目」というのは５秒以内であると言われています。ですので、左上から順に５秒以内で認識できる範囲に重要な情報を置きましょう。

今回の美容室の例で言えば「特徴」グループの情報を左上に配置するという事です。他の美容室との比較材料を左上に置くことが、「予約」を決める事に繋がるのではないでしょうか。

「予約」グループも重要なものですが、グローバルナビゲーションにも設置されているという前提のもと一番下に配置しています。

この他にも視線の流れについてのパターンがあります。
以下は、写真の人間の目線の例です。

人の顔は最も注目を集める要素で、その顔（目線）が向いている方向にユーザーの視線も誘導されるという実験結果があります。

上図ではAは人間の目線がテキストの方に向いており、Bは逆ですね。
ですので「A」の画像を使った方が、ユーザーの注目を「SAMPLE！」という文言に集めることができます。

他にも指をさしていれば、指の先を見たりします。このように視線の流れを作る方法はたくさんあります。グルーピングと間隔、そして流れを作ることで、送り手の意図したものをユーザーに届けやすくなります。

近接まとめ

近接は「関連性のある情報」は近くに、「関連性がない情報」は離して配置する事がポイントです。
近接の重要な点を確認しておきましょう。

1.グループの数は多くし過ぎない

情報のグループが多くなり過ぎないよう気を付けましょう。3～5個が適量です。

2.異なるグループ間の距離を均等にしない

異なるグループ間の距離が均等だと区別がつきづらいですね。余白を有効に使い、違いを強調しましょう。

3.適切なグルーピング

情報の内容をよく把握した上で、適切にグルーピングしましょう。

4.視線の流れに沿っているか

ユーザーの視線の流れを意識したレイアウトを心がけましょう。

整列

２つ目の原則は「整列」です。これは情報を揃えて配置する事を指します。揃えて配置する事で、情報同士の繋がりをより強くすることが出来ます。また、見た目も「きれい」に見え、無駄な視線の動きを抑える事ができます。

では、以下例を見てみましょう。
これは、美容室のクーポン画像の例です。
整列前の画像は、3つの情報に適当な距離があり「情報の違い」は表現できています。

しかし、これらに「一体感」はありません。3つのバラバラなものが置いてあるといった印象です。
ここに「整列」の原則を適用すると、情報同士の結び付きを表現できます。

整列後の画像は、情報が揃えて配置されています。線を引くときれいに整列していることが分かります。このような「見えない線」に情報を揃えて配置する事が整列の原則の重要なポイントです。

この「見えない線」を「整列線（アライン線）」といいます。整列線に情報を合わせて配置することで「情報の関連性」を表現できます。

では、今度はページの整列の例を見てみましょう。
以下は「近接」の項目での例に線を引いたものです。

所々、線からずれています。これを揃えてみましょう。

整って見やすくなっています。統一感も出たかと思います。

グリッドシステム

整列の原則を最も有効に使ったものが「グリッドシステム」です。グリッドシステムとは、整列線を縦横に引き、コンテンツを枠にはめ込んでいくというデザイン形式です。

海外Webサイトでよく使われている形式です。コンテンツが複雑なWebサイトもグリッドを組めば、情報が分割され、分かりやすくなります。また、デザイン的にも美しくなります。

これは「I/O 3000」というサイトです。
縦横の整列線によって出来た、四角の枠にコンテンツがはめ込まれています。

https://io3000.com

上サイトはタイル型レイアウト（グリッドレイアウト）ですね。
下記のような２カラムのデザインもグリッドシステムで構成されています。

現在のWebデザインは、グリッドシステムを採用しているものが主流です。
Webサイトは情報が多いので、読みやすくするためにはグリッドシステムが適しているのです。

整列まとめ

整列の目的は一体化とグループ化です。以下の整列のポイントを抑えましょう。

1.「見えない」線

完成デザインをじっと見たときに、しっかりと整列線を認識できるかどうかが重要です。

2.行ぞろえ

同じグループ内の情報は行ぞろえを統一しましょう。 左ぞろえ、真ん中ぞろえ、右ぞろえが同じグループ内で混在していると整列感がなくなります。

3.異なるグループの情報

異なるグループの情報が整列によって結ばれていないか注意しましょう。
整列していると、ユーザーは「関連する情報」として認識してしまいます。

反復

反復とは、同じデザインや、同じ特徴を持ったアイテムや配置を繰り返し行うことです。反復されることで、ユーザーは瞬時にその要素の意味を理解したり、同じグループの情報であると判別することができます。

これは美容室サイト例のサロン特徴部分です。
こういったレイアウト、例えばよく見かける記事一覧などでも「反復」が使われています。

３つとも、左にイメージ、右は見出し→詳細の順に並んでいますね。
このパターンが３回繰り返されているという事です。
このように、繰り返すことにより「一体感」が生まれます。

ページをまたいだ反復

先ほどは、１つのページ内での反復について学びました。このレッスンでは、ページをまたいだ反復について学んでいきましょう。

webサイトは、複数のページを持っています。この各ページでのレイアウトなどがバラバラだと「他のページに移動すると、別のサイトに見える」ということになりかねません。それを避けるために、反復の原則を各ページに適用します。

では、以下イメージを見てみましょう。

グローバルナビゲーション部分が、ページをまたいで「反復」されています。
前レッスンでは違いましたが、STYLE一覧ページとABOUTページのタイトル部分を同じ配置にすることで同じ階層のページという事が分かりやすくなりました。これも「反復」ですね。

このように、ページをまたいだ反復を実践する事でサイト全体で「一体感」を出すことが出来ます。

ルック アンド フィール

ルックアンドフィールとは「使い勝手」の反復のことです。使い勝手が良くない場合、ユーザーは不快感を感じてしまいます。不快に思ったらユーザは、そのサイトから離脱するでしょう。また、再度そのサイトを訪れる可能性も低いでしょう。

そうさせないために「反復」が重要なのです。統一された「ボタン」や「アイコン」、そして「使い勝手」が共通である必要があるという事です。このルックアンドフィールの統一は「反復」の原則に沿っているものです。

例えば、画面上部にグローバルナビが固定されているとします。そして、サイト内を回っているうちに、ユーザーは「グローバルナビ＝画面の一番上」というパターンを自然に理解します。このように使い勝手の「繰り返し」は「統一感」だけではなく、ユーザーの「学習を促進する」効果もあります。

カラーの反復

サイト内で使うカラーも、ルールを決め「反復」します。まず配色を決めるときは、基本となるカラーを３つ用意します。

ベースカラー	背景色などに使用。 一般的には薄めの色が使われる。
メインカラー	印象を決定する色となる。 ロゴやヘッダーなど。
アクセントカラー	目立たせたい部分に使用。 リンクなど。

それぞれのカラーは以下を参考に使用していきましょう。

以下は「GEO Online」です。
左のメニュー部分のアイコンは、それぞれ色が振り分けられています。

では、赤選部分に注目してください。各コンテンツに関連する情報部分は色分けされ、同じ色が使われています。このようにカラーの反復を行う事で、情報量の多いサイトでも素早く目的の情報を探すことが出来ます。

https://geo-online.co.jp/

反復まとめ

「反復」は「一貫性」を持たせる効果があります。
使用するカラーやテイストを統一するだけではなく、ヘッダーナビゲーションを統一する・テキストの表示に法則性を持たせるなどの反復もユーザーを迷わせないために必要です。

コントラスト

コントラストは、要素に差をつけるという事です。サイズや色など見た目の部分で「差」をつけていきます。

たとえば以下イメージのような文章があるとします。

左は、「見出し」と「本文」に差がありません。それに対し、右側ははっきりとした差を付けた場合です。このように「見出し」と「本文」という異なる要素に差をつけることで、それぞれが持つ意味を分かりやすく伝える事が出来ます。
また、文章の場合は読みやすくもなるでしょう。

この「差」を付ける際のポイントは「大胆さ」です。
少々の強弱では「差」が伝わりづらいのです。臆病にならず大胆にコントラストを付けることで、情報がはっきりと分離し、理解しやすくなります。

では、美容室の例で見てみましょう。

右がコントラストをつけた場合です。ページ全体の場合でも、コントラストが付いていると情報が伝わりやすいのが分かります。この例は、「サロン特徴の見出しの文字を大きく太字に」「特徴詳細の文字は小さく細く」してメリハリを付けています。コントラストが大胆に付いていると、遠くから見ても一目で内容が分かるでしょう。

また、「差」のつけ方は文字の太さやサイズだけではありません。
たとえば、以下の予約ボタンをみてみましょう。

ボタンの背景図形のサイズや、文字のサイズや太さは同じです。色で「差」をつけています。白抜き文字の方がコントラストが際立つという事ですね。

情報のレベルをコントラストで示す

Webサイトを閲覧するユーザーの多くは、5秒間でサイトの概要を理解できないと他に行ってしまうというのが定説です。ですので、5秒間でいかに「ユーザーに届けたい情報を伝えるか」が勝敗を分ける鍵になります。その為に「コントラスト」が重要となるのです。

また、コントラストをつける際には情報に優先順位をつけることが必要です。優先順位をつけることで、ユーザーに対して「次に何をしたらいいか」という順番を自然に理解させることが出来るのです。

上記イメージは、コントラストが弱い例です。全てが同じレベルの情報に見えます。これでは、ユーザーはどこから見ていけばいいか分かりません。優先順位をつけ、強弱をつけましょう。以下は、重要度に合わせ強弱をつけた例です。

メリハリがつきましたね。この場合ユーザーは、目立つ文字から読み始めます。そして本文とイメージで内容を把握し、最後にボタンで次の行動へ誘導されます。「予約」という目的に迷わずたどり着くことが出来ますね。

ジャンプ率

これまで文字のサイズや太さで、コントラストをつける方法を取り上げてきました。
この文字の「差」の比率のことを「ジャンプ率」といいます。ですので「ジャンプ率が高い＝差が大きい」という事になります。前項目で挙げたように、情報の優先順位をコントロールするには、「ジャンプ率」という考え方を活用するとよいでしょう。

たとえば、見出しのみ拾い読みする閲覧方法であれば一般的にジャンプ率は高くします。それに対し、じっくりと読まれるであろうコンテンツなら、ジャンプ率を低くします。このようにサイトの内容やコンテンツに合わせた「差」のつけ方をとりましょう。

コントラストまとめ

コントラストを付ける目的は「異なる要素を際立たせ、情報を伝わりやすくする」ことです。
際立たせる情報は優先順位・重要度で選びましょう。

見出し文字は大きく太字に

見出しの文字は中途半端ではなく大胆に際立たせましょう。その方がユーザーの目を引き、拾い読みができます。論文など、じっくり読ませるコンテンツの場合は、小さくても大丈夫です。

異なる要素で分ける

同じ情報の要素にコントラストを付けてはいけません。意味が分離してユーザーを迷わせてしまいます。

色使いで強弱を

白抜きや補色などでコントラストを付ける事が出来ます。クリックさせたいボタンなどは、目に留まる色使いで作成しましょう。

レイアウトの中にもコントラストを

レイアウトでコントラストをつけることで、サイト全体で一体感が出ます。ページを一目見ればすぐに内容が理解できるレイアウトにすることが大切です。