このアドベントカレンダーの記事を書くにあたり、
デザイナーの私が、エンジニアさんやディレクターさんのちょこっと役に立つような内容とは…と思いましたが、
まぁデザイナーなので、サイトやアプリデザインに限らず、ちょっとした資料作成の際にでも使えるような、デザインのテクニックを書きたいと思います。

デザインの4大原則

デザインの基本中の基本の考え方、ベースとして、4つの原則があります。

デザインの基本の基本なので、用途としては、「パッと目を引くビジュアルを作る事」ではなく、「情報をわかりやすくまとめる事」になります。

この中でも、今回は近接（Proximity）について書きたいと思います。

近接（Proximity）とは

人は、位置が近く並べられたものを「関係があるもの」と認識して無意識のうちにグルーピングをします。

例えば、コンビニで、チョコレートとポテトチップスは別々の＜棚＞にあると思いますが、近い＜列＞で陳列されていると思います。「お菓子」と関係でグルーピングをしているので、初めて行くコンビニで考えなくても、大体の位置が把握できるのだと思います。

情報と情報の配置を整理整頓するだけでも、視覚的にわかりやすく、まとめる事ができます。

まずは、例として以下の図を見てください。チョコレートが大好きです。

要素と要素はすべて5pxづつスペースをあけて統一したつもりですが、ちょこっとづつぶれていたり、ズレている部分もあります。
（目視で配置をすると、ズレることもあるので、今回は意図的にずらしました。）

チョコレートの商品が並んでいることはわかりますが、決して見やすいとは言えないと思います。
5pxづつスペースをとっているので、体裁は整うはずなのですが、それぞれの要素が均等に配置されているので、要素と要素の関係性が、逆にわかりづらくなっています。

では、グルーピングを意識して、整理整頓してみます。

改善した点は、
・画像が円系なので、画像と商品名を近接させるために、テキストをセンター寄せにした。
・各商品とのスペース（余白）を30pxにした。
この2つと整理整頓だけです。

商品ごとのグルーピングにメリハリがついて、わかりやすくなったかと思います。
画像・商品名・説明文は一つのグループなので「関係性がある余白感」（5px）、
各商品と商品は、別のグループなので「関係性がない余白感」（今回は30px）で、設定しました。

このように、情報と情報の配置を整理整頓するだけで、視覚的にわかりやすく、まとめる事ができます。

私が、デザインでいつも意識しているのは、「余白」と「整理整頓」になります。
このあとに続く、四大原則の整列／強弱／反復にもつながりますが、要素が整っていると、なんとなくでもデザインとして完成度がグッとあがります。

「なんか画面がもっさりしてるなぁ…」と感じたら、大体余白で解決できるので、試していただけたらと思います。

・Robin Williams（著）, 米谷テツヤ（監修, 翻訳）, 小原司（監修, 翻訳）, 吉川典秀（翻訳）, ノンデザイナーズ・デザインブック [第4版], マイナビ出版.

タイトルにあるように、エンジニアさんからディレクターさん、企画さんなどのノンデザイナーから、私のような独学デザイナーで「デザインの基礎がわからない…」というような方にもオススメです。