近接を利用して、デザインをきれいにしてみよう

今回のテーマは「近接を利用して、デザインをきれいにしてみよう」です。

近接がなくて課題のあるデザインを、Figmaを利用してきれいにしていきます。

※今回使うFigmaの元データはこちら。ぜひ自分でも試しながら使ってみてください。
https://www.figma.com/file/TePvjvNpRxBXSrUcVu4Grt/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%BC%E3%82%B9_%E6%95%99%E6%9D%90?node-id=2%3A37

近接とは？

「近接」とは、まとめることで強い意味をつくる手法です。 関連のある要素同士をまとめる（グループ化する）ことで、内容を直感的に理解することができます。

Before/Afterを確認する

今回扱う題材のBefore/Afterはこちらです。

下の画像を見て、課題をどのように改善し、整ったデザインにしているのか一度立ち止まって考えてみてください。

NG要素を確認する

今回のNG要素：「全ての要素が縦に等間隔で並んでしまっている」
全ての要素が縦に等間隔で並んでいるため、どの要素同士に関連があるのかが分かりづらくなってしまっています。

関連のある要素であればそれぞれ近づけてあることで「同じグループだ」と認識することができるのですが、
どれも同じ距離にあるので、まとまりが一目で分からない、というところに課題感があります。

改善の方向性

・「Webデザインコース」と「デザインの4つの基本原則」
・「②近接」とその説明部分
がそれぞれ関連する要素になるので、それぞれの間隔を詰めてあげることで、分かりやすくなりそうです。

デザインする

関連性のあるそれぞれの間隔を詰めながら、配置を整理していきます。

デザインステップ：
・「Webデザインコース」と「デザインの4つの基本原則」の間隔を詰める
・「②近接」とその説明部分の間隔を詰める
・全体のバランスを見ると上部の要素が上に配置されすぎているので、下に寄せることで全体のバランスをとる

そうすることで、「コース名」と「説明」のまとまりが一目で分かるようになりました。

また、四角で囲うことで、はっきりとまとまりを分かりやすく見せることもできます。
「近接とは〜」の詳細説明の文字部分のおさまりが悪かったので、グレーの四角で囲っています。

※後ほどのレッスンで説明する「強調」の要素も一部取り入れてます

まとめ

以上が「近接」を利用したデザインの整理です。

次は、「強調」を利用したデザインの整理を確認していきます。