search
LoginSignup
2

More than 1 year has passed since last update.

posted at

updated at

デザインの四大原則<近接について>

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

デザインの4大原則

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

  1. 近接(Proximity)
  2. 整列(Alignment)
  3. 強弱(Contrast)
  4. 反復(Repetition)

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

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

近接(Proximity)とは

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

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

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

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

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

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

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

SampleImage02.png

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

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

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

やっぱり情報の「整理整頓」と「余白」が大事

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

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

参考文献

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2