こんにちは、つしまです。
今週は、パンフレットやポスター、チケットなど、紙媒体のデザインに多く関わらせていただきました。そこで今回は、デザイン制作時によくある「このテキストを強調させて」といった要望に対応するための考え方を整理しようと思います。
1. 目立つ色を選ぶ
色で目立たせるケースについてです。
目立たせたい「ここぞ！」という文字に、読みやすくて鮮やかな色をつけます。当たり前すぎな気もしますが、この色選びが意外と難しいです。筆者は配色に悩むことが多いので、色調整の時に意識した方がいいポイントを二つまとめます。
①高めの彩度
まず彩度は高めに設定します。しかしやりすぎると子供っぽく見えるので、デザインのテイストに合わせて調整します。
②読みやすい明度
黄色は発色は良くても可読性が低かったり、グリーンやピンクは色がチカチカして見えることがあります。これは明度を調整することで解消できます。
色を反転させてみる
より配色で強調させたい場合は色反転も効果的です。背景に色をつけて、テキストを白抜き文字にします。
こうするとテキストに色をつけた場合よりも色の面積が大きくなるため、配色によってより目立たせることができます。
また、丸、四角形、吹き出しなどの記号で一部が囲まれていると、他と差別化することもできて目を引きます。
2. サイズを大きくする
サイズ感で目立たせるケースです。
ただ大きければいいわけではなく、同じ要素内で強調したい要素のみを大きくします。全てを一律に大きくすると、何を強調したいのかがわからなくなってしまいます。「メリハリをつける」ことが大切です。
フォントサイズは20px→22pxのように少しだけ大きくしても差が分かりにくいので1.5倍〜2倍くらいに大きくすると差が分かりやすくなります。「て・に・を・は」や「です・ます」、秒や%などの「単位」は小さくすると横幅を節約しながらメリハリをつけることができます。
上の例では「¥1000OFF」の文字を大きく強調していますが、下の例では「¥1000」のみ強調しているので、数値がはっきりと目に入るかと思います。一番目立たせたい文字を、単語や意味の区切りの部分で大きくすることが効果的です。
3. ウェイトを太く、高密度にする
テキストは太字の方が強調されて見えます。
要素の余白を詰めて高密度にするとギュッと詰まった印象で目を引きます。太字で余白を少なくすることで詰まった感じになって、より主張が強く感じます。
余白を取り独立させる
デザインテイスト的に太くしたくない、スッキリさせたいから高密度にしたくないという場合は、逆に余白を多めにとって独立させることで目を引くのも効果的だと思います。
4. アイキャッチを活用する
ラインを引いたり、罫線で囲んだり、矢印、吹き出しなどの装飾といった、注目を集めるためのオブジェクトを配置します。
「鉤括弧」や”引用符”の効果のように、普段何気なく使用しているデザインパーツも、「注目を集めるため」「視認性を上げるため」など意識して使用してみるとやるべきデザインが見えてくる気がします。
5. 変形させて動きを出す
他の要素との差別化をし動きを出すことで目立たせることもできます。
例えば10個のリンゴのイラストの中に一つだけブドウがあればすぐに目につくと思います。実際には赤いリンゴの色の方が目立つはずなのに異質なものがあるとそっちの方が目立ちます。
オブジェクトを画面からはみ出させてみたり、要素を重ねて前面に出すことでも強調できます。はみ出た要素、前面に配置された要素は、その他の要素より目に入りやすいです。
6. 情報を絞る
情報の優先順位をつけてもうまくまとまらない場合は、思い切って言葉を削ったり言い回しを変えたりすることで、スッキリ見やすくなることがあります。
例えば、「初回ご利用の方限定」は「初回限定」に、「すべての商品に使える」は「全商品対象」に変更しても意味合いは伝わるので、可能であれば情報を絞るということも効果的です。
さいごに
今回は「テキストを目立たせる」場合の考え方をまとめました。
最初の頃はデザインの修正を受けるたびに表現のリサーチを行っていましたが、「目立たせるためにはこれをやる」など、ある程度頭に入っているとデザインに悩む時間も減らせそうです。今回のような「目立たせる場合はこう考える」といったことに限らず、デザインの理由づけができるといいなと思いました。
前回、「高級感のあるデザイン」について書きましたが、他にも「可愛くしたい」「カチッと見せたい」といった場合のデザインソースもあれば、判断に迷うことがなくなると思うので、機会があれば整理したいと思います。
