デザインの原理・原則を知ろう！

webサイトのデザインと聞くと、「見た目がおしゃれ」「かっこいい」「かわいい」等、見た目(外見)の部分を想像してしまうかもしれません。しかし、良いサイトを作るために本当に必要なのはそこではありません。

• デザインの４原則
• 近接
• 近接まとめ
• 整列
• 整列まとめ
• 反復
• 反復まとめ
• コントラスト
• コントラストまとめ

デザインの４原則

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

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

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

近接

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

たとえば以下のイメージは、美容室サイトの店舗案内ページ例です。このページは「サロンの特徴をアピールし、最終的に予約を行ってもらう」事を目的としています。

「サロン特徴を知り、場所や時間を確認の上で予約」という流れを想定していますが如何でしょうか？情報がごちゃごちゃしていて、とても分かりづらいですね。

情報のグルーピング

前セクションのイメージは、とても読みにくくて分かりづらいものでした。これは、情報の配置がバラバラである事が原因です。では、「近接」の原則を使って情報の整理をしてみましょう。

各情報を以下のようにグループ分けしました。

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

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

情報の一つ一つをグループ分けに準じた位置に移動しています。このように、関連性がある情報同士の距離は、近くする事が重要です。

配置の工夫

では、更に分かりやすくなるように配置に工夫をしてみましょう。先ほど、関連性がある情報は近づけるといいました。これは、関連性がないもの同士は離して配置するともいえますね。つまり、「間隔」をあけるという事です。

これは、グループごとに間隔をあけ配置した例です。店舗情報と特徴を離して配置することで、それぞれ別の情報としてユーザーに認識されます。また、予約についての情報である「電話番号」と「WEB予約」は近くに配置しています。

視線の流れ

レイアウトのレッスンなどで、視線の流れについて学びましたね。「F型」や「Z型」です。

この視線の流れから分かるのは「左上に重要な情報(グループ)を配置する」という事です。また、ここまで一目で分かるという言葉を何度か使ってきました。

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

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

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

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

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

ですので「A」の画像を使った方が、ユーザーの注目を「テキスト」という文言に集めることができます。

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

近接まとめ

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

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

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

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

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

適切なグルーピング

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

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

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

整列

２つ目の原則は「整列」です。これは情報を揃えて配置する事を指します。揃えて配置する事で、情報同士の繋がりをより強くすることが出来ます。また、見た目も「きれい」に見え、無駄な視線の動きを抑える事ができます。では、以下例を見てみましょう。
これは、美容室のクーポン画像の例です。整列前の画像は、3つの情報に適当な距離があり「情報の違い」は表現できています。

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

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

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

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

所々、線からずれていますね。コンテンツの配置もバラバラです。そして「サロン特徴」の部分のみ中央揃えになっています。では、これを揃えてみましょう。

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

グリッドシステム

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

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

https://io3000.com

これは「I/O 3000」というサイトです。縦横の整列線によって出来た、四角の枠にコンテンツがはめ込まれていますね。現在のWebデザインは、グリッドシステムを採用しているものが主流です。Webサイトは情報が多いので、読みやすくするためにはグリッドシステムが適しているのです。

整列まとめ

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

「見えない」線

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

行ぞろえ

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

異なるグループの情報

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

反復

反復とは、同じデザインや、同じグループの情報を繰り返すことです。ユーザーが一目で同じグループの情報であると認識できます。

これは美容室サイト例のサロン特徴部分です。ここでも「反復」が使われています。３つとも、上から「番号→画像→特徴タイトル→詳細」の順に並んでいます。このパターンが３回繰り返されているという事です。このように、繰り返すことにより「一体感」が生まれます。

ページをまたいだ反復

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

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

グローバルナビゲーションとローカルナビゲーションの部分が、ページをまたいで「反復」されていますね。また、基本的に左揃えになっています。このように、ページをまたいだ反復を実践する事でサイト全体で「一体感」を出すことが出来ます。

ルック アンド フィール

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

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

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

カラーの反復

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

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

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

以下は「GEO Online」です。左のメニュー部分のアイコンは、それぞれ色が振り分けられています。では、赤丸部分に注目してください。「GEO MART」というコンテンツに関連する情報部分では、すべて同じ色が使われています。このようにカラーの反復を行う事で、情報量の多いサイトでも素早く目的の情報を探すことが出来ます。

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

反復まとめ

「反復」は「一貫性」を持たせる効果があります。以下項目に注意すれば、ある程度の一貫性を保持できます。

へッダー

ヘッダーはロゴの位置、ナビゲーションの項目を共通にしましょう。

見出し

見出しは各ページで、見た目を共通にしましょう。

文字

文字サイズや引用、行間などの設定を共通にしましょう。

アイコン

アイコンはユーザーに意味を学習させる事が出来ます。例えば吹き出しで「会話」を表現するならば、全てのページの「会話」の部分で吹き出しを繰り返すという事です。

レイアウト

レイアウトのパターンはサイト内で多くても3種以内で収めるようにしましょう。また、レイアウトパターンは階層ごとで統一しましょう。

ルック アンド フィール

使い勝手も共通となるようにしましょう。

カラー / テイスト

色や画像、イラストなども統一感を揃えましょう。

コントラスト

コントラストは、要素に差をつけるという事です。サイズや色など見た目の部分で「差」をつけていきます。たとえば以下イメージのような文章があるとします。

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

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

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

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

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

情報のレベルをコントラストでコントロールする

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

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

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

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

ジャンプ率

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

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

コントラストまとめ

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

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

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

異なる要素で分ける

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

色使いで強弱を

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

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

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