目的
現在あなたは自分の直感や感覚を頼って、プレゼンテーションスライドや Web デザインを行なっているかもしれません。しかし、人類が「良いデザイン」と感じるには理由があります。再現性持って「良いデザイン」を生み出せるようになるための必要な要素、方法を紹介します。
良いデザインとは?
- 見た瞬間に即座に内容を理解できる・脳に入ってくる
- 時間に対する認知量が多い状態
- 何が重要なのか・重要でないかを瞬時に判別できる
- 次に何を見ればいいか・読めばいいかがわかる
- 一体感・組織感・秩序がある
- 例 1: 普段の生活で見慣れていない色の組み合わせは違和感を生む
- 例 2: 家の物の配置もあるべき所に置かれていることを好む
- 面白さ・新鮮みがある
良いデザインに必要な要素は?
1. 近接
- 互いに関連する項目は、近づけてグループ化しなければならない
- 情報の組織化に役立ち、混乱を減らし、明確な構造を読者に提示可能
2. 整列
- すべてを意図的に配置しなければならない
- すっきりと洗練された見え方を生み出す
3. コントラスト
- ページ上の要素同士が「類似」するのを避ける必要がある
- 要素が「同一」でないなら、はっきり異らせる必要がある
- 読者を読む気にさせる働きをする
- 情報を明確に伝える役割があります
4. 反復
- デザインの視覚的要素を作品全体を通して繰り返すこと
- 組織化を促進し、一体性を強化する
重要なのはこれらの要素が互いに関連していると言うことです。
1. 近接
目的
理解しようとした時間に対する実際の認知量・理解量を上げるためには、情報量を少なく見せる必要があります。そのために似た意味を持つ要素をグループ化・組織することで認知コストを下げます。
体現法
- 意識的にやることに意味がある
- 相手目線に立ち、どう言う目線の流れになるか?見始めるかを考えることが大切
- 1 ページあたり視覚的ユニット(まとまり)が 3 ~ 5 個を超えている場合は、近接できないかを検討する
2. 整列
目的
製列の基本的な目的は、ページの一体化と組織化です。居間の床に散らばったおもちゃを、玩具箱に片付けるのと同じです。
体現法
- 強い線を設定し、その線を中心に物を意識的に置くことが重要
- 中央揃えは使わない
- 中央揃えは、退屈・フォーマルという印象を与え、逆に左揃え・右揃えは強い印象・スタイリッシュな印象を与える
- 中央揃えを使う場合は、トップに活字を目立つように置いたり、カジュアルな画像をある程度自由使うことが可能
- 意識的に要素を配置することが重要
3. 反復
目的
反復は離れたページでも統一を助け、視覚的な組織構造と一体化を強化します。また、一貫性を作ることで特別なものを特別なものとして識別することができるため、視覚的な面白さを加えることができます。(※ ただし、コントラストを上手く使わないと、強迫感や緊張感を与え、焦点が混乱します)
体現法
- フォント・文字の大きさ、色、位置など視覚的なものであれば何でも反復させる価値がある
- 一貫したデザイン・グラフィックをより大胆にドラマティックにする
- 大胆にした一貫性は、ちょっとしたことで崩れないため他の要素を加えたり、変化させても OK
- つまり、遊び要素を加えられる(アイコン・画像など)
- 例えば、色、大きさ、フォントが同じなら、位置や形を変えても OK
4. コントラスト
目的
ページに面白さと情報の組織化を支援します。ある項目から次への項目への論理の流れが、つまり情報の組み立てが読者に一瞬でわかるようになっているようにすべきです。
体現法
- 大胆(はっきり)に差をつけることがことが重要
- 一番コントラストをつけるには書体が良い
おまけ: カラーを使ったデザイン
補色
カラーホイールで反対の色を補色という。
→ メインカラーのアクセントカラーとして補色を利用すると、刺激的になる
類似色
カラーホイールで隣同士の色は、類似色という。
→ 調和の取れた組み合わせ
トライアド
等しい距離にある色の組み合わせをトライアドという。
→ 心地よい色を演出(例えば、赤・青・黄は子供の人気商品に多い)
スプリット・コンプリメント
補色ではなく、「補色の両隣の色」をスプリット・コンプリメントという。
→ 洗練された鋭さを生む(紫、黄、ピンクなど)
シェードとチント
純粋な色はヒューという。
- ヒューに黒を加えると、シェード
- ヒューに白を加えると、チント
→ 色についた固定概念を壊すことができる(赤・青・黄 → パステルっぽいカラーで大人っぽい雰囲気に)
→ 選択肢は増えるものの、色の組み合わせがうまくいくかどうかを心配する必要はない
同じトーンは使ってはいけない。トーンとはヒューの濃淡のことを指します。(例えば、全体的に暗いと濁った印象を与えてします)
寒色と暖色
→ 暖色はインパクトをつけるには、ごく少量で良い