【デザイン制作に役立つ】視認性もデザインもgood!画像の上に文字を載せる時のテクニック

テクニック①透過の色をかける

画像上に白地を載せたい時って、大体見えにくさで悩みますよね。

そんな時は画像に色を重ねると見えやすくなります。

とは言え、ベタ塗りすると画像が見えなくなるので、適度な透過を加え、画像が透けるようにするのが大切です!

また、ポイントとしては上に重ねる色はサイト全体とバランスのいい色を選ぶことで統一感が出ます。

今回使用した画像は白字でも黒字でも見えにくいのですが、この方法なら透過の調整で問題なく見えそうです。

テクニック②シェイプを加える

文字の下にシェイプを加えると、デザイン性もキープしながら、視認性をアップさせることができます。

ポイントとしては、シェイプをベタ塗りせず、透過を加えることでおしゃれな印象になります。

この方法なら、今回使用している画像でも全く視認性に問題ありません!

テクニック③ドロップシャドウを加える

文字自体に工夫を施す方法としては、ドロップシャドウを加えるのがオススメです!

ポイントとしては、あまり強くかけすぎると逆にダサくなってしまうので、かかっているのかが分からない程度で調節しましょう。

また、シャドウの色は画像に含まれている色やサイトに使われている色を取り入れると統一感が出ます。

今回使用している画像ですと、ドロップシャドウの不透明度を100%にしたとしても、視認性がいい…とは言い切れないですね。

もちろん画像によりますので、一度試してみてください!

テクニック④画像をぼかす

この方法は背景画像やテキストを見せたい時など、画像をメインとしない場合に活用できます。

ぼかすことで白字でも見えやすくなり、適度なぼかしが逆におしゃれさを演出してくれます。

今回使用した画像では、強めにぼかしを入れないと視認性が悪いかな…という印象でした。

その画像に合わせて、ぼかしの強弱を調整してみてください!

まとめ

いかがでしたでしょうか!

今回は視認性もデザイン性も保つながら、画像の上に文字を載せる方法をご紹介しました!

使用する画像によって合う方法は異なってきますので、色々と試してみましょう。

コメント

タイトルとURLをコピーしました