WEBデザイナーになりたての頃、先輩に「デザインはセンスじゃなくて情報整理する技術なんだよ」と教えてもらったことを今でも覚えています。
10年ほどデザインに携わっていますが、いまだに基礎が大事だなと身に染みる日々。「なんだかプロっぽくないなぁ」「うまくまとまらないなぁ」と思う時もたくさんあります。
あらためてデザインの名著『ノンデザイナーズ・デザインブック』から基礎をおさらいをしてみようと思います。
近接 -くっつける-
関連するものをグループ化する
近接とは関連するものどうしを近づけてグループ化して見せることで関連性をより強くすることです。
下の例では近接を使う前と後を表現してみました。近づけてみせることで、どれのことを伝えているかわかりやすくなったと思います。
下記のメニュー表でも近接を使う前と後を表現してみました。グループがはっきりするのでパッと見てわかりますね。グループ化することで余白が生まれてより見やすくなります。
デザイナーの大好物、余白については「けっきょく、よはく。」という書籍が参考になります。NG例でとりあげるデザインが、けっこうやってしまいがちな例で自分のデザインを省みることができます。
後半で紹介するコントラストの使い方の参考にもなりますよ。
気をつけること
なんでも空いているスペースに置かない
とくに情報量が多い場合、空いているスペースにとにかく置いてしまうことがあるかもしれませんが、そうするとせっかくグループ化してできた空白がなくなって視線が散漫になってしまいます。
要素を減らせないか？グループ化できないか？も一考してみるといいです。
整列 -ととのえる-
デザインに一体感をつくる
整列とは、要素の配置を揃えることでデザインに一体感をつくることです。
デザインソフトではガイドがつけられると思いますが、例えば左揃えなら要素を左のガイド上に揃える、ということになります。
下の例では揃えがばらばらで散漫な印象になっているものを整えてみました。
『ノンデザイナーズ・デザインブック』では、この揃えたときのことを「透明な線」ができると言っています。透明な線をつくっていくことでデザインの散漫さが消え、計算されたデザインとして一体感がでてきます。
↓「・・・」を文章だと思ってください。透明な線、見えますか？
気をつけること
２種類以上の文字揃えを使わない
2種類とは、たとえば右揃えと中央揃えを両方使うといったことで、揃えは１種類にした方がいいということのようです。
意図的に使う場合は、上の名刺の例のように透明の線を意識してデザインします。
反復 -くりかえす-
デザインに一貫性（ルール）をもたせる
先ほどの整列では一体感（全体が一つのまとまりに見える）でしたが、反復の場合は一貫性（デザインの中に一定のルールがある）になります。
フォントやジャンプ率を揃える、罫線のデザインなどを揃える、余白のサイズを合わせる、など似ている見た目を揃えることで反復されます。
下の例ではピザのサイズ、太文字と価格の揃え・フォント・ジャンプ率、ピザどうしの余白を揃えてみました。
反復による一貫性が生まれることで、一箇所要素をずらしたり目立たせたりするだけでデザインに「遊び」をつくることができます。
上の左側の例ではルールのない中で遊びのあるデザインにしようとしていますが、ルールがないと「デザインされたもの」と感じなくなってしまいます（かなり高い技術がないとプロっぽく見えづらい）。
気をつけること
やりすぎに注意
反復を繰り返しすぎると単調になったり、逆にしつこくなったりします。
上記を回避するには、次に紹介するコントラストを意識します。
コントラスト -めりはりをつける-
おもしろみと組織化をつくりだす
コントラストはデザインに強弱をつけることです。強弱はフォント・線の大きさや太さだったり、色の濃さだったりします。
コントラストによってデザインにおもしろみがでてアイキャッチになります。
反復の例でも、ピザをひとつ目立たせただけで目を引いたと思います。
また、強弱をつくることによってある項目から次の項目へという情報の論理的な流れ（組織化）をすることができます。
大きい文字がタイトルで、その下に続くやや小さい文字がサブタイトル…みたいに、誰がみてもわかる“意味”をつけられるっことですね。
下に組織化の例を入れてみました。
気をつけること
似ているものどうしでコントラストをつくらない
太い線とさらに太い線など、似ているものどうしでコントラストをつけると同質のものと見せたいのか、そうでないのかわかりづらくなってしまいます。
コントラストの弱いもので構成するデザインもありますが、コントラストをつけたい場合は「はっきりと」分けることを意識しましょう。
まとめ
「ノンデザイナーズ・デザインブック」から配置の基礎をまとめてみました。ちゃんとまとまっているだろうか・・。
この書籍、前半の参考デザインは海外のもの（しかもちょっとレトロな感じ）です。海外のレトロデザインでも、基本は普遍なので参考になると思いますが、後半に日本バージョンのいまどきっぽい参考デザインが入っていてよりわかりやすくなっていますよ。
今回は配置についてまとめましたが、デザインに個性を持たせるためには色やフォントなどをどう意識したらいいかということをまとめている「なるほどデザイン」という書籍もおすすめです。
この記事をまとめて私も再度勉強になりました。例に使用した写真と可愛いイラストはACさんから使わせていただきました。ありがとうございます！
