テキストが見やすいデザイン 初級編(2)

こんにちは、マイモールです。
さて、前回は画像上のテキストを読みやすくする方法についてシェアしました。
（前回はこちら→https://www.mymall.co.jp/blog/post10971）
今回はその続きからです。

3.画像の色を変える

画像の色が邪魔をして文字を見えにくくするのはよくあることです。
例えばこれ。

白が同化して見にくくなっていますね。
そんな時は、こう！

だいぶ文字が見やすくなりましたよね？
好きな色で試してみましょう！
 
3の応用として、画像の上にレイヤーを乗せる方法もあります。
画像いっぱいにレイヤーを乗せるとこんな感じ。
ビフォー

アフター

 
他にも応用として、画像をぼかすという方法もあります。
ムードを出すためかつ、画像を目立たせる必要がない時に使える方法です。
ビフォー

アフター

どれくらいぼかすかは、画像によって意図によって変えてみてください！

4.文字に変化を与えてみる

1~3の中では、画像になにか処理を加えたり、図形を使う方法をシェアしました。
ここからは基本の、文字自体に変化を与える方法についてです。
例えばこちら

これをもう少し見やすくするために、文字の周りに境界線をいれてみましょう。
するとこんな感じ。

テキストから足が痺れた感じが伝わりますよね！
 
ドロップシャドウを使う手もあります。
例えばこちら。

このテキストをもっとはっきりさせましょう。
するとこんな感じ。

不透明度やぼかしの程度など、好きに変えてベストな見え方を探してみて下さい。

最後に

まだまだWEBデザイナー駆け出しの私が最近学んだ方法をシェアしました！
ただ単に文字や数字の大きさを変えるだけではなく、ちゃんとデザインするだけでも見え方は変わってくるということを感じられたでしょうか。
デザインに悩む方の参考になれば嬉しいです！
他にも、文字サイズや行間によってテキストを綺麗に揃えるという方法もありますが、それについてはまたいつか。
それではまた次回で〜