はじめてのデザイン[2]デザインの４つの基本原則

1.デザインの4つの基本原則を意識する

①デザインの４つの基本原則とは

すべての良いデザインに含まれる４つの原則
・コントラスト
・近接
・反復
・整列
私たちが日常生活の中で触れるデザインには必ず備わっている

この基本原則は意識することですぐに実践できる

②デザインの４つの基本原則を知る

コントラスト
要素に区別を付けること。
ページ/画面上の要素にメリハリがつき、視覚的に面白さを作り出す。

近接
関連する項目を物理的にまとめてグループ化すること。
近づけることで、それらが関連することを視覚的に表現できる。

反復
デザイン上の特徴を作品全体を通して繰り返すこと。
フォント/色/配置などの特徴を、作品全体で繰り返し使うことで、
視覚的な一貫性が生まれる。

整列
ページ上のすべての要素を意識的に整えて配列すること。
要素が互いに関連し、一体性を持つようになる。

2.コントラスト

①コントラストとは

コントラストは、視覚的に面白さを加えたり、要素の構造に区別を
付けるために最も効果的な方法。
複数の要素がお互いに類似し、埋没してしまうことを避けるのに有効。

コントラストを意識することにより、
・ページが平淡で無くなり、面白そうに見える
・情報の構造（順序や重要度合い）が明確になり、読みやすくなる

人は何かを見るとき、無意識にその情報を詳しく見るべきか判断している。
コントラストで情報にメリハリがあるほど、視覚的な認知が容易になるため
見る人の気を惹きやすくなる。

②実現方法

フォントや色といったスタイルを用いて情報や構造にメリハリをつけることにより、コントラストを創り出す。

・色を変える
・形や大きさを変える
・フォントを変える
などの方法がある

少し違うだけでは効果があまり無いため注意する。
誰が見ても感じられるぐらいメリハリを付けることが大切。

③まとめ

・コントラストとは、視覚的に面白さを加えたり、要素の構造に区切りを
　付けるために見た目のメリハリを付けること
・要素の色を変えたり、形や大きさを変えたり、フォントを変えたり
　することで、コントラストを生むことができる
・コントラストを機能させるには、要素ごとの違いをしっかりと
　認識できるくらいメリハリをつける必要がある。

3.近接

①近接とは

関連する項目を物理的にまとめてグループ化すること。
項目を近づけることで、それらが関連することを視覚的に表現できる。

関連しない項目は距離を持つ
関連する項目を近接させるということは、「関連しない項目」や
「関連が薄い項目」同士は距離を置く必要があるということ。
距離を置くことで、意図のある余白を作り出すことができる。
余白がきれいなデザインは、近接がうまく使われている。

②実現方法

関連する情報をグループ化する。
要素との余白を少しタイトにすることで実現できる。
・タイトルと説明文書といった文字情報、その補足となる図
・セットとなって初めて意味合いが成り立つイラスト
グループ化するということは、出来たグループには基本的に２つ以上の
要素があるということ。グループ化して、ページや画面上に単一の要素を
作りすぎないようにする。

グループ同士に距離を持たせる。
関連する情報のグループ化が出来たら、今度はグループとグループとの間に
余白を作って距離を持たせる。
グループ間においても、関連性の強弱を意識して距離を持たせると良い。
関連性のあるグループは近めに、関連性の薄いグループは遠ざけるなど、
バランスをとって行う。

③まとめ

・近接とは、関連する項目を物理的にまとめてグループ化すること
・関連する項目をグループ化して、ページや画面上に個別の要素を
　作りすぎないようにする
・関連する情報のグループ化が出来たら、グループ間に距離を持たせる
・近接を意識することで、余白を上手く作り出すことができる

4.整列

①整列とは

ページ上のすべての要素を意識的に整えて配列すること。
要素が互いに関連し、一体性を持つようになる。
一体性を持つことで、ページ/画面上のあらゆる要素が視覚的に
捉えやすくなり、洗練されて見えるようになる。

②実現方法

整列を意識するにあたって一番大切な事は、整列方法を揃えること。
中央揃え/左揃え/右揃え/均等揃えを、意図を持たずに混在させて
しまうことは避ける。

離れている要素においても、整列要素を揃えて意識的な配置を心掛ける。
離れている要素の整列は、「見えない線」を意識することがポイント。

中央揃えは、明確な意図のある場合に有効
中央揃えは失敗することがほとんどなく、よく使われる整列方法。
フォーマルな印象を持ってもらったり、安心感を持ってもらいたいときに
有効だが、退屈な印象を与えることもある。

力強さを演出する際など、別の整列方法がいいケースもある。

③まとめ

・整列とは、ページ上のすべての要素を意識的に揃えて整列し、一体性を
　持たせること。
・一体性を持つことで、ページ/画面上のあらゆる要素が視覚的に捉えやすく
　洗練されて見えるようになる。
・整列にあたっては、あらゆる要素の整列方法を整えることが大切。
・整列方法は混在しすぎないようにする
・離れている要素でも整列を意識し、ページ/画面全体での整列を心掛ける。
・中央揃えは、明確に意図がある場合に使うことで最大の効果を発揮する。

5.反復

①反復とは

デザイン上の特徴を作品全体を通して繰り返すこと。
フォント/色/配置などの特徴を作品全体で繰り返し使うことで、
視覚的な一貫性が生まれる

特徴的な要素を反復させることで、視覚的な面白さを演出できる。
面白そうに見えることで、見たり、読んでもらえたりする可能性が高まる。

②実現方法

すでにある一貫性を際立たせる
見出しなどの一貫して使われる要素を、特徴的なスタイルにして際立たせ、
サイズや色などのスタイルを整え、反復して使っていく。

反復の為の要素を作って反復して使う
反復の為に要素を作り出し、それを足すのも効果的。

全体のスタイルを反復させる
作品全体に渡り要素の形に依らず決まったスタイルを反復するのも効果的。
文字やアイコン、ボタンを1部揃えたりして、全体でスタイルを
反復することで一貫性を作り出すことが出来る

うるさく感じるほどには反復させない
うるさく感じるほど反復させてしまうと、見るところをかえって
妨げてしまう。

③まとめ

・反復とは、フォント/色/配置などデザイン上の特徴を作品全体を通して
　繰り返すこと
・反復を意識することで、視覚的な一貫性と面白さが生まれる。
・すでにある一貫性を際立たせることから始める。
・反復の為の要素を作ったり、全体のスタイルを反復させる。
・うるさく感じるほど反復させないように注意する。