こんにちは、佐伯です。
みなさん突然ですが「デザインの四原則」と言われるデザインの基本的な技術をご存知ですか?
ぶっちゃけ、ググればわかることなのですが近接整列コントラスト反復4つのことです。
この四つを押さえておくだけで、ある程度のクオリティのものを作ることができます。
技術といっても、情報や要素や優先度などを整理するフレームワークのようなものだと解釈しておけば、いろんなところで使えるのです。

そしてある日、私は気づいてしまった。

ぼく「(グラフィックデザインでよく使われがちだけど、これって他のことにも応用できるな・・)」
ぼく「(グラフィックのことがわからなくても、身近なところで例えたら他の人もわかるのかな・・)」
ぼく「よっしゃ!!! (これをブログネタにすればええんやな!!!) 」

ということにも気づいてしまったので、皆さんも知っていて身近なもの・・・


そう、どう考えてもあれですね、 日本昔話の「桃太郎」ですね!!!!!

ですので、桃太郎を軸に書いていきます。この記事を含めて全部で4回、随時更新していきすので、興味のある方は更新ごとに読んでくださるとうれしいです!


そもそも「近接」って?

簡単に書いてしまうと複数ある要素何らかの基準グルーピングすることです。

上にも書きましたが、つまりは要素の整理です。



グラフィックデザインで例えると

グラフィックのデザインをしていると、商品などを決められたサイズの枠の中で効率的に訴求する必要があります。そんな時、いかに要素を分解したり同じようなものをどこに配置するかなどパズルを組み立てるように構成しています。

簡単な図形でグルーピングをしてみましょう!
2959956b 4936 4947 bb8e fb124b7fc831

と、こんな感じに整理することができます。

わかりやすいように極端な例にしていますが、現場などでは相手の考える要素はどれに属する要素なのかをいちいち整理する必要があります。



桃太郎で例えると

「むかしむかしあるところに・・・」と最初から書く必要もない物語ですよね。

これを読んでる皆さんがストーリーを知っている前提で、登場する要素をパッと出してみましょう。

D06259b5 837d 44fa a2c4 da06a5116358

大体こんな感じですね。(※諸説あり)

これを、何らかの基準グルーピングしてみましょう。
すると・・

2596a84a 00bf 4562 adba 7be6042dacc8

普通に分けるとこんなことに。

ただ、これは分けただけですが最初の雑多としている状態よりはわかりやすく整理されていますよね。

もう一歩踏み込んでみましょう。

では、何らかの基準を変えてみるとどうでしょうか。

物語の肝はこうですね。
Bd9a44fc 0c07 48be b285 fbc0025dd255

わかりやすいですね。鬼のボッチ感がいたたまれないですね。

とまあ、こんな感じの整理術があるわけです。
デザインや業務などにおいては目的達成課題解決といったものが常に求められてきます。

そんなときに、これを当てはめると・・・・

1d53eb18 c399 4e77 b456 4cad589c7440
こうなりますよね。

要は何が言いたいかというと、目的達成のために必要なものを、どんどん整理していきましょうということです。
デザインでも、「○○と●●は要素としてそばに置いておくと伝わりやすい」なんていう場面も非常に多く、そんな時に近接(グルーピング)を使用しています。


まとめ

今回は近接(グルーピング)について桃太郎に例えて書いてみました。
次回は整列について桃太郎に例えて書けたらと思います。(本当に書けるかは知らん!!)

身近なところでも似たような場面は多いと思いますので、遭遇したら「あ、これってblueエンジニアブログで見たやつだ!」と思ってもらえたら幸いです。

では!

Shere
  • はてなブログ
  • Twitter
  • Facebook
デザインの四原則を桃太郎で解説していく試み【近接編】

Writer

  • Name

    佐伯 明紀

  • Position

    デザインとか

  • Profile

    もともと紙系のデザインなどをやっていましたが、転職を機にWEBデザイン関係の仕事に就くことになりました。自分なりに頑張っていこうと思いますのでよろしくお願いします。作業用BGMとして映画の予告を延々と流すことにハマってます。