ここで学んで欲しいのは「デザインの基本原則４」です。紙やWebなどの媒体を問わず、伝えたい情報をわかりやすく伝えるために必要なデザインの原則です。
デザインの一番の目的は「しっかりと伝わること」です。デザインの4つの基本原則を理解することで、相手に伝わる分かりやすいデザインを作ることができるようになります。
1.デザインの4つの基本原則とは
この原則は「ノンデザイナーズ・デザインブック」という書籍で紹介されており、全てのデザイナーが使っている全てのいいデザインに含まれる原則です。知っているだけで誰でもすぐに実践できますので、資料の作成や画像の作成、プレゼン資料にも活用できます。
デザインのルールを制するものは、デザインを制す
と言われるように、実はデザインというのはルールが重要なのです。
一緒に深めていきましょう♬
4つの基本原則 : 1.コントラスト
まずはコントラストです。
色や大きさによって、コントラストを出すことにより視覚的に面白さを加えたり、情報を区別するのに最も効果的な方法です。
コントラストを意識することにより、次のようなことを実現できるようになります。
- ページに動きが出て、面白そうに見える
- 情報の構造（順序や重要度合い）が明確になり、コンテンツが読みやすくなる
人は何かを見るときに、無意識にその情報の重要度を判断します。コントラストがあり、情報にメリハリがあるものほど、視覚的な認知が容易になるので、見る人の気を惹きやすくなります。
また、情報には重要度がそれぞれ付けられ、より重要な情報は目立つようにデザインしなければ大切なことを伝えることができません。
2.コントラストを活用する方法
フォントや色といったスタイルを用いて情報や構造にメリハリをつけることにより、コントラストを創り出します。
- 色を変える
- 形や大きさを変える
- フォントを変える
などが方法としてあります。
ただし、少し違うだけでは効果がありませんので注意しましょう。誰が見てもわかるくらいきちんとはっきりとメリハリを付けることが大切です。
3.コントラストを意識した例
ここで1つ、例をお見せしましょう。
本の表紙を例にしてみました。
左がコントラストを意識する前のものになります。右がコントラストを意識したものになります。
上記を見て、この2つの違いを5つ挙げてみてください。
その違いこそが、コントラストの実践的なテクニックです。
2つの異なるポイント
- はじめてのデザインの文字サイズ（タイトルの強調）
- タイトルとサブタイトルの文字の太さ（タイトルの強調）
- タイトル・サブタイトル部分の背景色（タイトル・サブタイトルの強調）
- 著者と所属の文字サイズ（著者の強調）
- 所属の文字の色（著者の強調）
4. コントラストのまとめ
- コントラストとは、視覚的に面白さを加えたり、要素の構造に区別を付けるために見た目のメリハリを付けることです。
- 要素の色を変えたり、形や大きさを変えたり、フォントを変えたりすることでコントラストを生むことができます。
- コントラストを機能させるには要素ごとの違いをしっかりと認識できるくらいメリハリを付ける必要があります。
コントラストの背景にある考え方は、ページ上の要素同士が単に「類似」するのを避けるということです。もし要素（書体、色、サイズ、線の太さ、形、空きなど）が「同一」でないなら、はっきり違わせるということです。コントラストは、ページ上で最も需要な、視覚を引きつける要因になることがよくあります。つまり、読者をまず読む気にさせる役割をします。ー「ノンデザイナーズ ブックより」
まずはこちらの画像をご覧ください。
上記のデザインでは、それぞれの文字の色が同じで、フォントサイズ大きく変化が無いため、いちばん大事な「セールを開催している」という情報がかすんでしまっています。
「SALE」というテキストのサイズを大きくし、目立つように文字色も変更しました。ぱっと見ただけでセール開催中であることが分かりますね。
このように、デザインでは強弱を適切につけることによって、大事な情報をしっかりと伝えることができ、分かりやすいデザインを作ることができます。
4つの基本原則 : 2. 反復
次のポイントは「反復」です。反復とは、デザイン上の特徴を作品全体を通して繰り返すことです。フォント、色、配置などの特徴を、作品全体で繰り返し使うことで、視覚的な一貫性が生まれます。
このようにそれぞれの要素の表示内容やデザインを揃えることによって、全体に統一感が生まれます。反復をしっかりとデザインの中に取り入れることによって、リズムが生まれ、心地よく分かりやすいデザインに仕上げることができます。
2.反復を活用する方法
フォントや色といったスタイルを用いて情報や構造にメリハリをつけることにより、コントラストを創り出します。
- 箇条書きのものはリストの中黒（・）に、色や形を統一する
- 繰り返しがあるものは形や大きさを同じにする
- 全体のスタイルを反復させる
などが方法としてあります。
ただし、反復しすぎると面白味がなくなってしまうので、コントラストや余白などのバランスをみながら作ることが重要です。
3.反復を意識した例
今回の例では、Webサイト内のいくつかのセクションをイメージしてみました。
以下の例には複数箇所に渡って反復が使われています。どこが反復されているかを見つけてみてください。
※すべてのデザインには4つの基本原則が含まれているので、この例の中には今回までに説明したものも含まれています。
反復が用いられている箇所
- 見出しタイトルのスタイル
- お店の情報の部分
2店舗が展開されているということで、2つの店舗の情報の表示を揃えています。店舗情報のスタイルを揃えることで、見る人にとって「どちらのお店に行こうか？」という判断がしやすくなります。
4.反復のまとめ
- 反復とは、フォント、色、配置などのデザイン上の特徴を作品全体を通して繰り返すことです。
- 反復を意識することで、視覚的な一貫性と、面白さが生まれます。
- 反復にあたっては、すでにある一貫性を際立たせることから始めましょう。
- ただし、反復させすぎると退屈なものになるのでコントラストや余白のバランスを気にしましょう
色、形、質感、位置関係、線の太さ、書体、サイズ、画像などの視覚的要素を、作品全体を通して繰り返すことです。これは、組織化を促進し、一体性を強化します。ー「ノンデザイナーズ ブックより」
4つの基本原則 : 3.整列
次は整列です。整列とは、ページ上のすべての要素を意識的に整えて配列することです。そうすることで要素が互いに関連し、一体性を持つようになります。
デザインの中の要素を整列させることによって、見た目が整い、「洗練されて、すっきりとしたデザイン」を作ることができます。普段の生活ではワードやPowerPointなどでも整列の機能があるので、デザイン制作や資料作成の時に活用するようにしましょう。
2. 整列を活用する方法
整列は「見えない定規で整える」ような感覚です。
左右の整列は、「左揃え」「中央揃え」「右揃え」に分けられ、
上下の整列は「上揃え」「中央揃え」「下揃え」に分けられます。
注意することがあるとすれば、
「揃えは１つにとどめる」ということです。
中央揃えと、右揃え、左揃えなどを同じページで混在させることは避けましょう。
ちなみにビジネスシーンでは右寄せを使うことが多いですが、
招待状やお祝いのカードでは真ん中寄せを使うことが多いです。
3.整列を意識した例
今回はお店のメニューを例にしてみました。
左が整列を意識する前のものになります。右が整列を意識したものになります。
※すべてのデザインには4つの基本原則が含まれているので、この例の中には今回までに説明したものも含まれています。
見比べてみて、いかがでしょうか？整列を意識したものとそうでないものとは、それぞれの名称や価格の読みづらさが大きく変わっているかと思います。
解説
整列を意識していない左のものも、一見するとスタイルが整理されているように見えるかもしれません。
￥確かにメニューのリストは中央揃えになっています。しかし、実際に読んでみると、一行ごとに開始位置が異なるため視線移動が複雑になります。価格の部分を見ても、品目とセットで中央揃えになっているので、どれが高くてどれが安いのかを瞬時に識別することが難しくなっています。
対して、整列を意識した右のものは、品目が右揃えで整列されています。価格は左揃えになっていて、どれが高くてどれが安いのかを一目で識別しやすくなっています。また、「Drink」や「Food」といった見出しとリストの間にインデントがあるため、ドリンクとフードの区分けも見やすくなっています。
4.まとめ
- 整列とは、ページ上のすべての要素を意識的に整えて配列し、一体性を持たせることです。
- 一体性を持つことで、ページ/画面上のあらゆる要素が視覚的に捉えやすくなり、洗練されて見えるようになります。
- 整列にあたっては、あらゆる要素の整列方法を整えることが大切です。整列方法を混在しすぎないようにしましょう。
- 離れている要素においても整列を意識し、ページ/画面全体での整列を心掛けましょう。
- 中央揃えは、明確に意図を持った場合に使います(招待状や名刺など)
ページ上では、全てを意図的に配置しなければなりません。あらゆる要素が、他の要素との視覚的な関連をもつ必要があります。それによって、明快、洗練、新鮮、という印象が生まれます。ー「ノンデザイナーズ ブックより」
4つの基本原則 : 4. 近接
最後は近接というものです。近接とは、関連する項目を物理的にまとめてグループ化することです。関連する項目を近づけることで、それらが関連することを視覚的に表現することができます。簡単にいうと「関連するものはグループにしておこうね」ということです。
4つの基本原則 : 4. 近接
1.近接とは
関連する項目を近づけること
近接とは、関連する項目を物理的にまとめてグループ化することです。関連する項目を近づけることで、それらが関連することを視覚的に表現することができます。
関連しない項目は距離を持つ
関連する項目を近接させるということは、「関連しない項目」や「関連が薄い項目」同士は距離を置く必要があるということです。
距離を置くことで、意図のある余白をつくり出すことができます。余白が綺麗なデザインは、近接が上手く使われているということでもあります。
2.実現方法
近接を実現するためには、次のことを意識すると良いでしょう。
関連する情報のグループ化
まずは関連する情報をグループにしていきます。グループ化は、要素との余白を少しタイトにすることで実現できます。
以下のようなものをグループにしていくと良いでしょう。
- タイトルと説明文章といった文字情報、その補足となる図
- セットとなって初めて意味合いが成り立つイラスト
グループ化するということは、出来たグループには基本的に2つ以上の要素があるということです。グループ化して、ページや画面上に単一の要素をつくり過ぎないようにしましょう。
グループ同士に距離を持たせる
関連する情報のグループ化が出来たら、今度はグループとグループとの間に余白をつくって距離を持たせましょう。
グループ間においても、関連性の強弱を意識して距離を持たせると良いでしょう。関連性の比較的あるグループは少し近めに、関連性の薄いグループは少し遠ざけるなどして、バランスを取っていきましょう。
3.近接を意識した例
今回は名刺を例にしてみました。
上が近接を意識する前のものになります。下が近接を意識したものになります。
見比べて、両者の違いを挙げてみましょう。
※すべてのデザインには4つの基本原則が含まれているので、この例の中には前の回で説明したコントラストも含まれています。
2つの異なるポイント
- 全体的なフォント・要素の大きさ（コントラスト）
- メールアドレスと会社名の間の余白（グループ間の距離）
- ロゴと文字との間の余白（グループ間の距離）
解説
この例では、関連する要素が3つにグループ化されています。
複数の要素を含む3つのグループは明確に距離を保ち、グループであることを視覚的に示しています。
また、余白に着目してみると、以下のように近接がコントロールされていることが分かります。
3つのグループの間には明確に余白が取られています。グループの中にある各要素間の余白とは大きさが異なることが分かります。
4.まとめ
- 近接とは、関連する項目を物理的にまとめてグループ化することです。
- 関連する項目をグループ化して、情報が迷子にならないようにしましょう。
- 関連する情報のグループ化が出来たら、今度はグループ間に距離を持たせましょう。
- 近接を意識することで、余白を上手に作り出すことができるようになります♬
互いに関連する項目は、近づけてグループ化しなければなりません。いくつかの項目が互いに近接しているとき、それはバラバラな要素としてではなく、一つの視覚的ユニッットとして認識されます。近接は、情報の組織化に役立ち、混乱を減らし、読者に明快な構造を提供します。ー「ノンデザイナーズ ブックより」
まとめ
「ノンデザイナーズ・デザインブック」に出てくるルールは、大きくわけて3つありました。他の配色と文字についてもしっかり説明していきます。
・基本原則の4つ（コントラスト・反復・整列・近接）
・配色について（色について）
・文字について
これらを覚えてルールさえ守れば、人前に出せないようなデザインになることはなさそうです。
「自分はデザインセンスが無い」と思っている方もいるかもしれませんが、そういう人こそデザインの4大原則を理解するだけでもデザインスキルが大きく向上します。
また、PowerPointで資料を作成する時に、図や写真、表を使って資料を作成することが多いと思いますが、そういう時にもデザインの4大原則を活用することで、統一感があり、分かりやすい資料を作成することができます。
まずは、ルールを叩き込んで、日々実践してみることが重要です♬