このアドベントカレンダーの記事を書くにあたり、
デザイナーの私が、エンジニアさんやディレクターさんのちょこっと役に立つような内容とは…と思いましたが、
まぁデザイナーなので、サイトやアプリデザインに限らず、ちょっとした資料作成の際にでも使えるような、デザインのテクニックを書きたいと思います。
デザインの4大原則
デザインの基本中の基本の考え方、ベースとして、4つの原則があります。
- 近接（Proximity）
- 整列（Alignment）
- 強弱（Contrast）
- 反復（Repetition）
デザインの基本の基本なので、用途としては、「パッと目を引くビジュアルを作る事」ではなく、「情報をわかりやすくまとめる事」になります。
この中でも、今回は近接（Proximity）について書きたいと思います。
近接（Proximity）とは
人は、位置が近く並べられたものを「関係があるもの」と認識して無意識のうちにグルーピングをします。
例えば、コンビニで、チョコレートとポテトチップスは別々の＜棚＞にあると思いますが、近い＜列＞で陳列されていると思います。「お菓子」と関係でグルーピングをしているので、初めて行くコンビニで考えなくても、大体の位置が把握できるのだと思います。
情報と情報の配置を整理整頓するだけでも、視覚的にわかりやすく、まとめる事ができます。
まずは、例として以下の図を見てください。チョコレートが大好きです。
要素と要素はすべて5pxづつスペースをあけて統一したつもりですが、ちょこっとづつぶれていたり、ズレている部分もあります。
（目視で配置をすると、ズレることもあるので、今回は意図的にずらしました。）
チョコレートの商品が並んでいることはわかりますが、決して見やすいとは言えないと思います。
5pxづつスペースをとっているので、体裁は整うはずなのですが、それぞれの要素が均等に配置されているので、要素と要素の関係性が、逆にわかりづらくなっています。
では、グルーピングを意識して、整理整頓してみます。
改善した点は、
・画像が円系なので、画像と商品名を近接させるために、テキストをセンター寄せにした。
・各商品とのスペース（余白）を30pxにした。
この2つと整理整頓だけです。
商品ごとのグルーピングにメリハリがついて、わかりやすくなったかと思います。
画像・商品名・説明文は一つのグループなので「関係性がある余白感」（5px）、
各商品と商品は、別のグループなので「関係性がない余白感」（今回は30px）で、設定しました。
このように、情報と情報の配置を整理整頓するだけで、視覚的にわかりやすく、まとめる事ができます。
やっぱり情報の「整理整頓」と「余白」が大事
私が、デザインでいつも意識しているのは、「余白」と「整理整頓」になります。
このあとに続く、四大原則の整列／強弱／反復にもつながりますが、要素が整っていると、なんとなくでもデザインとして完成度がグッとあがります。
「なんか画面がもっさりしてるなぁ…」と感じたら、大体余白で解決できるので、試していただけたらと思います。
参考文献
・Robin Williams（著）, 米谷 テツヤ（監修, 翻訳）, 小原 司（監修, 翻訳）, 吉川 典秀（翻訳）, ノンデザイナーズ・デザインブック [第4版], マイナビ出版.
タイトルにあるように、エンジニアさんからディレクターさん、企画さんなどのノンデザイナーから、私のような独学デザイナーで「デザインの基礎がわからない…」というような方にもオススメです。