160日目　薄い背景と白文字の使い方について

WEBデザイン日記160日目です！
本日は薄い背景に白い文字を載せた際に使える方法を紹介していきます。
簡単にできる方法を3つご紹介！
白っぽい画像に白い文字を載せたいときってあると思いますがそんな時に使える方法です！

１．文字を太くするorフォントを変えてみる

左のような通常の太さで配置すると文字がかすんでしまい背景色と同化してしまい、読みづらい印象を持ちます。

そんな時は太くしてみたり、フォントを変えてみると読みやすくなります。
真っ白に近い背景には使えませんが、今回の青系統のような背景画像等、色を持つ画像に対しては有効です！

ただ、淡い印象を持たせたい等といった場合には使えますが、はっきりと読ませたいとき等については使えないので使用用途に分けて使う必要があります。

２．文字に輪郭をつける

太さの違う輪郭をつけてみました！
左は文字に100％の濃さで輪郭をつけています。
右二つは輪郭の濃さを薄くしたものになります。
ただ輪郭をつけるだけだと悪目立ちしてしまい、逆に見づらくなってしまいます。

なので輪郭をつけて文字を目立たせる際は少し薄くすることがポイントです。

３．背景色をつける

文字の輪郭と同様、背景色と反対の色をべた塗りで配置することで文字が読みやすくなります。こちらも背景色が濃すぎると悪目立ちしていしまうので用途に応じて濃さを調整する必要があります。

この背景色が一番手っ取り早く見やすくする方法かなと思います！

あとがき

---

同じ目的でもやり方というのは今回だけでも3つあるのでどうしたらいいか選ぶのが楽しいですね！
文字と背景が同系色ということで、今回は白系統を選びましたが、逆に黒色であれば、白い背景色だったり白い輪郭をつけることで同じような効果をつけることが出来ます。

目立たせる方法としては基本的な部分ではありますが、うまく使うとなると難しい部分でもあります。

私自身もこれらの表現をもっとうまく使っていきたいなと感じています！

こんな感じで今日はここまでです
明日は引き続きポートフォリオの作成を行い、今回ご紹介した方法も使ってうまいこと文字と背景との色味の調整を行いたいと思います。