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

今回のテーマは「強調」です。

強調がなくて課題のあるデザインを、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

強調とは？

「強調」とは、優先度で強弱をつけて意味をつくる手法です。
1つの要素のサイズを大きくしたり色にメリハリをつけることで他の要素との相対的な大きさが強調され、目立たせたい情報を印象づけることができます。

Before/Afterを確認する

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

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

NG要素を確認する

それではこれから、どのように課題を改善していくのかについて説明していきます。
まず、どのようなNG要素（課題点）があるのか、理由とセットで確認しましょう。

今回のNG要素：「テキストのサイズが同じ」
デザイン前はどのテキストも同じサイズ（25px）になっていて、「重要な情報が何か」がパッと目に入ってきません。

それ以外にも課題があります。
・「近接」「強調」のそれぞれの文字と説明部分が左揃えになっていない
・「デザインの4つの基本原則」の文字が強調されていない

改善の方向性

今回目立たせたいのは「整列」「近接」「強調」「反復」のキーワード。
それぞれのキーワードのテキストサイズを大きくして、他のテキストと差をつけてあげることで
見るべき情報の優先度が整理されて、分かりやすくなりそうです。

デザインする

実際にテキストサイズの調整しながら、強調要素を整理していきます。

デザインステップ：
・「デザインの4つの基本原則」の文字サイズを大きくする（25px→36px）
・「整列」「近接」「強調」「反復」のキーワードの文字サイズを大きくする（25px→65px）
・「近接」「強調」のそれぞれの文字と説明部分が左揃えにする
・「整列」「近接」「強調」「反復」の4項目が全体的にやや右に寄っているので、左右中央を揃える

「絶対的」な大きさではなく、「相対的」な大きさを意識する

今回「サイズを大きくする」デザインのBefore/Afterを行いましたが、注意したいのがここでいう「大きさ」とは「絶対的」な大きさではない、ということです。
たとえば先ほどの「整列」「近接」「強調」「反復」のキーワードは「65px」になったらいいのではなく、他の文字と比べて大きくなっているから改善されているのです。

つまり重要なのは「絶対的」な大きさではなく、「相対的」な大きさ。このことを「ジャンプ率」と言います。

さらに目を引いてもらうためには？

文字の大きさ以外にも、より目立たせたい要素を強調させ、相手の目を引かせるための様々な方法があります。

たとえば、イラストや図の活用。イラストは文字よりもパッと見たときに「どんな内容か」が伝わりやすく、
このように「整列」「近接」「強調」「反復」のキーワードに合ったイラストを脇に添えることで、
強調して伝えたいキーワードの要素が分かりやすくなっています。

目を引かせるための手段は、本当に様々です。Webサイト、雑誌、電車広告など、日常で触れる様々なデザインを見る中でも、こうした目を引かせるための手法だと何が使われているのか？を意識して見てみることで、参考になるでしょう。

まとめ

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

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