え?それがプロの技術?素人の私でもできるじゃん!と思ってるあなたへ贈る、簡単そうで難しい「近接」の話

え?それがプロの技術?素人の私でもできるじゃん!と思ってるあなたへ贈る、簡単そうで難しい「近接」の話
  • X
  • Facebook
  • note
  • hatena
  • Pocket
2023/02/13 08:00

 『レイアウト・デザインの教科書』(SBクリエイティブ)の共著者であるベーコンさんが、ちょっとしたデザイン術やツールの使い方を解説します。今回は、デザイン4原則の「近接」がテーマです。

 こんにちは。ベーコンです。今までデザインの4原則から「強弱」「整列」のコツをお伝えしてきました。

 今回はデザインの4原則から「近接」について解説していきます。

近接も反復も後回しで良い理由

 今回取り上げる「近接」も、残りひとつの原則「反復」もデザインの4原則としてはすごく重要です。しかし、なぜこのふたつを後回しにして強弱と整列について先に取り上げたのかと言うと、近接も反復も多くの人が最初からできてしまうからです。近接を例にあげると、こんな感じです。

 どうですか?バラバラなものをグループに分ける。無意識にいつも行っていると思います。でも、無意識にできるからこそ、気づかないこともあるんです。今回は、デザインのプロが行っている近接のコツをお伝えします。

プロが行っている近接の基本とコツ

 近接は図で表すとすぐ理解できるかと思います。それぞれ関連しているものを、近づけてまとめるのです。名刺の例がわかりやすいので見てみましょう。

 名前の下にURLがあるのは違和感がありますよね、URLは、住所や電話番号と同じエリアにまとめると情報がわかりやすいです。

 ……と、ここまでは大体みなさん無意識でできていることが多いんです。ここからは、プロが意識している近接の具体的なポイントをお伝えしますね。

近接を使ったデザイン素材の組み立てかた

 例として「犬と猫どっちを飼うべきか?」という謎の団体のチラシを作るとします。デザインを作るときは、まずこんな素材を用意する、または用意してもらいますよね。

 文字のフォントを決め、画像を加工しデザインに入っていくと思うのですが、そのときに活躍するのが近接です。

[実例]チラシを作るときの近接の使いかた

 ロゴと会社住所などは同じ会社の情報のため、まとめて下に配置します。

レイアウト開始!ロゴと住所は下に置くことも多いので、最初に配置しました。ここからです。
レイアウト開始!ロゴと住所は下に置くことも多いので、最初に配置しました。ここからです。

 次に、タイトル「犬と猫どっちを買うべきか」を配置します。

仮で良いので配置しちゃうのがポイントです。
ひとまず仮で良いので、配置しちゃうことがポイントです。

 犬のイラストと犬の説明文章をグループにまとめ(=近くに配置)、それと同じように、猫のイラストと猫の説明文章もグループにまとめます。

 そして、「犬とは」のグループと「猫とは」のグループに余白を空けます。余白をつくることで、別のグループだということを表現できます。

 悪い例として、近接を上手く使うことができておらず、犬と猫をごちゃごちゃにしてしまったデザインも作ってみました。

ただでさえ犬か猫かわからないイラストなので、この説明が犬なのか猫なのか、わからなくなってしまいます。
ただでさえ犬か猫かわからないイラストなので、この説明が犬なのか猫なのか、わからなくなってしまいます。

完成のデザイン

 これを整列や強弱、その他デザインのテクニックを使って整えたデザインがこちらです。

 次は、近接を上手く使うことができなかった例も紹介します。

近接がうまく使えなかった例から考える、履き違えた自由

 別にデザインって自由ですから、犬のイラストに猫の説明を置いても良いんです。ただ、それだと意味が伝わらなくなりますよね。履き違えた自由です。

犬のイラストに猫の説明がテキストで書いてあります
犬のイラストの下に、猫の説明が書いてあります。

 当たり前ですが、関連するものの近くに関連するものを置く。それが近接です。言葉にすると簡単ですし、事例を見ても一瞬でわかりますよね。

 ただ近接をデザインで使うのが難しい場合があります。次は、その理由を解説していきます。

なぜ近接は難しいのか なぜあなたのデザインは上手くいかないのか

 近接って図で見ると理解しやすいのですが、デザインに活かすための応用が難しいんです。そこでさまざまな角度から近接が難しい理由を考えてみたところ、近接を理解するためのヒントが見えてきました。

近接のパターンはたくさんある

 デザインのパターンなんていくつもあります。近接を使えばデザインが必ず良くなるわけではありません。近接は手段のひとつです。

整えれば、近接をあえて使わないデザインも良かったりします。
整えれば、近接をあえて使わないデザインも良かったりします。

 近接は簡単ですが、良いデザインを作るための“適切な”近接が難しいのです。

 つまり近接を使っても上手くデザインができないときは、近接以外のデザインの能力が足りないと言えます。解決策としては、デザインの雰囲気を感じたり、コンセプトを理解したりといった、デザイナーとしての経験値が必要です。

部分だけを見ていると全体が崩壊する

 デザインは森を見て、木を見て、森を見て、木を見て、たまに周りを見て、を繰り返す仕事です。次の画像のように、犬の情報がまとまった良い感じのデザインができたと思っても、

全体を見たらバランスが悪いことも。

パーツは良い感じでも、アンバランスなデザインです。
パーツは良い感じでもアンバランスなデザインです。

 この解決策も、経験を積むしかありません。

 ここでいうデザインの経験とは「実践」です。お客さんのデザインを作ったり、上司や先生から課題のデザインを作りフィードバックをもらうこと。自分以外の意見が混じったデザインを作ること。そうやってデザインの雰囲気を感じたり、コンセプトなどの空気を理解していくのですが、そのときに近接やデザインの4原則を知っているかどうかで成長のスピードは変わっていきます。

まとめ

 近接はデザインだけではなくて、普段の生活にも使える技術です。

 たとえばお部屋の整理整頓で、同じ種類のものを同じ棚にしまうことは、誰もがやっていることだと思います。

 仕事のタスクも同じで、似たような作業はまとめてやってしまったほうが効率が良くなり、かつミスも減るでしょう。これは、まさに仕事をデザインしているわけですね。

 そもそもデザインとは、見た目を整えるだけではなく、目的を達成するための手段です。近接もデザインを良くするためのひとつの手段として使うことで、よりデザイン制作に役立てることができるはずです。