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

今回のテーマは「反復」です。

反復がされてなくて課題のあるデザインを、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要素（課題点）があるのか、理由とセットで確認しましょう。

今回のNG要素：「“見た目のルール”が統一されていない」
デザイン前は下線や左線が入っているもの、キーワードだけ角丸四角形で囲われているものがあったりと、「見た目のルール」が統一されていません。

そうするとそれぞれの要素が同じ粒度のことを言っているにも関わらず「違うもの」として見られてしまう恐れがあります。

改善の方向性

改善のポイントは、“見た目のルール”を統一してあげること。
今回のケースだと、白い角丸四角形でそれぞれの要素をまとめてあげると見やすくなりそうです。 白い角丸四角形を使いながらまとめていきます。

デザインする

「改善の方向性」であげたポイントを意識しながら、デザインを整えていきます。

デザインステップ：
・白い角丸四角形でそれぞれの要素をまとめる
・「整列」「近接」「強調」「反復」のキーワードと説明部分の間隔を統一するなどして、全体を整える

その他「反復」の活用例

こちらの画像だと、どのような「反復」の原則が使われているでしょうか？

答えは「整列」「近接」「強調」「反復」の各要素に「イラスト」がセットで使われている、です。
これが仮に1つや2つだけイラストが使われていて、他が使われていないとなると、それぞれが別の要素のように見えてしまい、分かりづらくなってしまいます。
“見た目のルール”を統一することを心がけて、デザインするようにしましょう。

まとめ

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

次は、「色と配色の基本」について説明していきます。