【脱・初心者】文字の周りのデザインがダサくなる3つの罠!現役デザイナーが教える本当に伝わる目立たせ方5選

0701-title

文字を目立たせるデザインテクニック5選 【NG例と正しい方法をデザイナーが解説】

文字を目立たせるデザインテクニック5選
【NG例と正しい方法をデザイナーが解説】

「文字を目立たせたい」と思ったとき、あなたはどうしますか?

大きくする、色を変える、影をつける、枠をつける……

やり方を間違えると逆に「読めないデザイン」になります。

現役デザイナーの目線で、よくあるNG例と正しい方法を5つにまとめました。

テクニック 01

色を変えるだけでは目立たない

色変えだけではNGなデザイン例

「強調したいから色を変えた」よくあります。

目立たせようとして黄色や水色で文字を強調しようとして、むしろ見えなくなっているデザインをSNSでよく見かけます。

× NG
色を変えた=目立つ、ではない。背景との明暗差(コントラスト)がなければ、どんな色を使っても文字は見えない。

正しい考え方

  • 黄色や水色を使いたい場合→その色より濃い色を強調色にする
  • 迷ったら一度画面から離れて目を細めて見る。何色が目立っているかがはっきりわかります
ポイント
「かっこいい色」より「コントラストが出る色」を選ぶ。デザイナーは見た目の美しさより「伝わるかどうか」を優先する。
→ 詳しくはこちら:見えない文字をデザインするデザイナー
テクニック 02

ドロップシャドウはダサい?安易に使わず文字を目立たせるプロの技

ドロップシャドウではなく文字の下に四角を敷く

フォトショップの「ドロップシャドウ」は初心者がハマりやすい罠です。

影をつければ文字が浮き出て見える……気がする。でも実際には読みにくくなることがほとんどです。

そもそも、あなたの身の回りのおしゃれなデザインに影がついてますか?たぶんついていないはずです。

× NG
なんとなく読みやすくなった気がするからドロップシャドウをつける。これは「見にくくするため」に使われる機能でもあります(認証画像のアレです)。

正しい使い方

ドロップシャドウに頼る前に、まずこれを試してください。

  • 文字の色や配置を変える
  • 文字の下に四角(ボックス)を敷く←これが一番手っ取り早い
  • 背景の明るさや彩度を調整する
どうしても使う場合
距離5%以下、透明度を落として、ギリギリ見えるかどうかのラインで入れる。色は背景に近い色を選ぶ。
→ 詳しくはこちら:デザイナーはテキストにドロップシャドウは使うな!
テクニック 03

境界線(文字の枠線)も基本はNG!ごちゃごちゃしたデザインを回避する方法

文字の境界線(枠線)のNG例

ドロップシャドウと同じく、境界線(文字の周りの枠線)も初心者がつけがちな機能です。

ドロップシャドウ+境界線+文字色を変える……この3点セットをやってしまうと、もうデザインがごちゃごちゃです。

× NG
「なんとなく目立つから」という理由で境界線をつける。重ねれば重ねるほどダサくなる。

境界線を使っていい場面

  • YouTubeのサムネイルなど、あえてポップな印象を出したいとき
  • 背景がどうしても複雑で、他の方法では対応できないとき
ポイント
境界線は「使わない前提」で考える。使う理由がなければ入れない。
→ 詳しくはこちら:デザイナーはテキストに境界線(文字の枠線)も使うな
テクニック 04

同じ数値でも色によって文字の大きさは変わる

白文字と黒文字の大きさの見え方の違い

これ、知らないデザイナーが意外と多いです。

白文字と黒文字を同じフォントサイズで並べると、白の方が大きく見えます。

白は「膨張色」、黒は「収縮色」だからです。つまり数値を同じにするだけでは見た目が揃わないんです。

× NG
「同じフォントサイズにしたから揃っているはず」と思い込む。デザイナーの仕事は「数値を揃えること」じゃなく「見た目を揃えること」。

正しい対処法

  • 黒文字を白文字に揃えたい場合→黒文字のサイズを0.5pt程度大きくする
  • または黒の色を少し薄くして「軽さ」を白に近づける
ポイント
決まった正解の数値はない。自分の目で見て「揃って見える」ところを探すのがデザイナーの仕事。
→ 詳しくはこちら:文字の色によって大きさは変わる
テクニック 05

すべて明朝体にせずゴシック体とバランスを取る

“”明朝体とゴシック体をバランスよく

文字を目立たせたいからと、すべての文章を強そうな明朝体だけで構成していませんか?

すべてを明朝体にしてしまうと読者の目が疲れやすくなり、かえって視線が流れて何一つ目立たなくなってしまいます。

× NG
画面のすべてを明朝体で埋め尽くしたり、強烈な真っ黒(#000000)の文字を使い続けたりする。コントラストが強すぎてチカチカし、読む気を失わせます。

正しい対処法

  • すべての文字を同じフォントにするのではなく、ゴシック体などとバランスを考えて構成する。これによってお互いの文字が引き立ち、自然に目立つようになります。
  • さらに、文字色を真っ黒(#000000)からほんの少しグレーに寄せてあげる。これだけで一気に目に優しくなり、圧倒的に見やすく・伝わりやすいレイアウトになります。
ポイント
文字を目立たせる極意は、派手にすることではなく「見やすく、お互いを引き立て合うバランス」を作ること。読者の目にストレスを与えない優しさがプロの技です。
→ 詳しくはこちら:文字構成は優しくしてあげて

まとめ

文字を目立たせるテクニックを5つ紹介しました。

やりがちなNG 正しい考え方
色を変えるだけ コントラスト(明暗差)で目立たせる
ドロップシャドウを安易につける 文字の下にボックスを敷く
境界線を重ねる 背景か配置を工夫する
数値で大きさを揃える 見た目で揃える
すべて明朝体+真っ黒文字 ゴシック体とのバランスと優しいグレー

共通して言えるのは「安易な機能や色に頼らない」ということです。

フォトショップやイラレには便利な機能がたくさんありますが、それはあくまでも道具です。

大事なのは「どうすれば引き立ち、どうすれば読者の目が疲れないか」のバランスを考えてレイアウトすること。それができれば、文字は自然と目立つようになります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です