デザイン４つのルール – フルカワ＆トモシゲの二人三脚ブログ

こんにちは、トモシゲです。(３日目)

私の住む大阪も今日梅雨入りしたそうです。
統計から最も遅い梅雨入りだそうですが、これから雨が続くと思うと憂鬱ですね。
でも雨も必要ですからありがたく降られましょう。

毎回天気の事を書いて文字量を稼いでいた当ブログですが、
3日目にしてネタ不足を感じております。さてどうしよう。

ノンデザイナーズ・デザインブック

ふと、ふたっぱさんの蔵書の中に私の家にもある本を見つけました。

「ノンデザイナーズ・デザインブック」
[Robin Williams 著]

本のタイトル通り、デザイナーじゃない人向けのデザイン本となっております。
海外の本なのですが、なんでも18年も売れ続けているデザインの基本書なのだとか。

本日はこちらの本で学んだ、デザインのたった4つの基本原則を紹介したいと思います。

近接とは関わりのある情報同士を近づけて配置してグループ化する事です。
人間は距離の近いものを同じグループとみなして、関係があると認識します。
この性質を利用して関連のある情報をまとめる事で、分かりやすいデザインになります。

例として居酒屋のメニューを作ってみました。

メニューを同じ間隔で並べました。
これでも注文はできますが、何度も見たくはないですよね。

次に、3つのグループごとに距離を近づけてみました。

どうでしょうか。ずっと見やすくなりました。

この様に関連のあるグループをつくり、他と距離を離す事でまとまりが出て、情報がスムーズに頭に入ってきます。

ただ、いくらまとめればいいと言ってもやりすぎはだめです。
細かくまとめ過ぎてはかえって見にくいものになってしまいます。

下はやりすぎの例です。

2つ目は整列です。
情報の先頭を合わせたり、後ろを合わせたりと何かに合わせる事で情報を整理します。

これも例を示します。

まず、先程のメニューを中央に揃えてみました。

中央揃えはよく使う方法だと思います。
ですがこの本ではあまり中央揃えはおすすめしていません。
もちろん使ってはいけないという事ではありませんが、何も考えずにとりあえず中央に揃える
のはやめようと言う意味です。

中央揃えは左右対象で美しい整列なので意図を持って使うには良いとの事です。

次は、メニューを左に揃えてみました。

中央揃えよりもこちらの方がおいしそうに見えませんか？
文字の大きさを変えて見やすくしましたが、こちらの方が統一感が感じられます。

3つ目は反復です。
デザインの中にある特徴を繰り返して使う事です。
それにより一貫性が表現され統一感がでます。

例に示したメニュー表を見て下さい。

3つのカテゴリーに赤文字を使いました。
これにより赤文字はメニューの種類を表しているんだと見る人はすぐにわかります。

大切な事は赤文字と言う特徴を同じ個所に繰り返して使用している点です。
目立つために赤文字にしているのではなく、同じ特徴を繰り返す事で
情報の組織化を図り、読む人が読み進めるのを助けます。

また統一された流れが出来ているからこそ、次の様にサプライズが目立つのです。

最後はコントラストです。
様々な要素の中で、異なる部分で差を付ける事です。
文字や写真の大きさ、フォントの種類などでも差をつける事ができます。

大切な事は、差をつけるならしっかりやる事です。
ちょっとだけ差をつけるならやらない方がいいのです。

最後の例となりましたが、メニュー表をご覧下さい。

Menuの文字は大きく、白抜き文字にしました。
もちろんこれが一番良いデザインと言う訳ではありませんが、
少なくても見る人の事を考えたデザインだと言えます。

いかがでしたでしょうか。
たった4つのポイントを気を付けるだけで、ぐっと良くなったと思いませんか？
デザインはデザイナーだけができる特殊能力ではありません。
しっかりとルールを守って、見る人の事を考えて丁寧に作れば、
誰にでも伝わるデザインが作れるはずだと思っています。

偉そうな事を言い放って今日はここまでと致します。
また明日よろしくお願いします。