ぼっちパーティー

自分と結婚した21歳が幸せになるブログ

デザインの基本・文字の色と視認性 [アイキャッチ画像を見やすくしよう]

 

どうも!ぱるぽろです( ´ ▽ ` )ノ

 

今回はデザイン講座第2回目!

アイキャッチ画像を見やすくする方法をご紹介します( ^ ^ )/

 

 

文字を見やすくする方法

背景の色と文字の色の明度差を大きく!

 

 明度とは

 

 簡単に言うと色の明るさのこと。

 

白に近いほど明度が高く、黒に近いほど明度が低いです。

 

f:id:harux2x0414:20170529205243j:plain

 

 

  • 背景が明るければ文字は暗めに
  • 背景が暗ければ文字は明るく

 

これだけでだいぶ見やすさが変わります( ´ ▽ ` )ノ

 

 

例外

 

対極にある色を一緒に使用してしまうと、目がチカチカして見づらくなるので使用するときには注意が必要です。

 

 f:id:harux2x0414:20170529205237j:plain

 

 

 

例えばこんな感じです

 f:id:harux2x0414:20170529213341j:plain

 

色選びって結構重要なんです!

 

これで基本はOK!( ´ ▽ ` )ノ

 

 

 

 

写真にいい感じに文字を入れる方法

例を挙げてみた

 

 

f:id:harux2x0414:20170530065349j:plain

 

 

どうしてもこの画像が使いたい!!!

っていう時ありますよね…

 

でも、この画像に黒い文字を入れると…

f:id:harux2x0414:20170530070412j:plain

うーん。見えづらい…

 

 

対処法1:背景にフィルターをかける

f:id:harux2x0414:20170530070549j:plain

さっきよりは良くなりましたよね!

もちろんフィルターは全体にかけてもOK。

背景を無理やり白っぽくして明度を上げました( ^ ^ )/

 

 

 

対処法2:文字を白で囲む

 f:id:harux2x0414:20170531034841j:plain

この方法も結構有効です。

文字にコントラストが出るので割とどんな時にでも使えます!

 対処法3:背景をぼかしてみる

f:id:harux2x0414:20170531040910j:plain

こうすることで、文字にピントを合わせるようなイメージの画像になります。

さっきよりも見やすくなったのではないでしょうか( ^_^)/

 

 

 

さいごに

 

いかがでしたか?

感覚的に身についていた強者もいるかもしれませんね…!笑

 

魅せ方は広告媒体にもよって変わってきます。

手元で見れる媒体に関しては今紹介した方法が基本です( ´ ▽ ` )ノ

 

ぜひ皆さんも作ってみてはいかがでしょうかd( ̄  ̄)