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

こんにちは、マイモールです。
最近バナーを作成することが増えました。
バナーを作成するときにいつも衝突するのが、文字を見やすくする方法なんです。
ということで今回は、画像上のテキストを読みやすくする方法について少し勉強したのでシェアします〜
そんな方法知ってるわ！という方も多いと思いますが、お付き合いください〜。HP制作にも役立つかも。

1.テキストの背後に図形を追加する

テキストを目立たせるために、レイヤーを追加する方法です。
例えばこちら。

読みにくいわけではないけれど、デザインされた感がないですね。
それでは透明な図形を入れてみましょう！
1.四角形を挿入
2.黒の塗りつぶし
3.透明度を約25％に設定
さらに赤い線を追加すると、この通りです。

いかがですか？少し見やすくなりましたよね？
長方形以外でも試してみて下さい。
 
次にこの方法を応用して、図形にグラーデーションを使ってみましょう。
同じように長方形を作った後に、その長方形にグラデーションを加えます。
ビフォー

アフター

これは透明度を４段階変えて、グラデーションにしています。
 
今度は長方形をさらにアレンジして、ストリップにしてみましょう！
画像に単純なストリップを追加すると、画像全体のバランスが取れますし、重みを付けられます。
ビフォー

アフター

単純な長方形を使っただけでも、ぐんと見やすくなりましたね！
ポイントは明るい色を使うことです！
 
長方形を、別の目立つものに変えてみるのも効果的です！
どんなに長方形でがんばっても、画像自体が目立つものを使っていては、テキストが負けてしまうこともあります。
そんなときは、ただテキストを入れるだけではなく、何か目立つイラスト等を使ってみるのもいいでしょう。
ビフォー

アフター

画像にあったイラストを使ってください！

2.余白を活用する

テキストをどこに入れるかというのは非常に大事なポイントです。

ここにテキストを入れるのではなく

こっち！
余白をうまく使って、見栄えの良いものにしましょう！
フォントサイズやデザイン性のあるテキストに仕上げると、さらに魅力的なものに仕上がります。
ぜひ試してみてください。
 
2の応用として、クリエイティブなものを利用しましょう！
例えばこちら

この画像の中にあるパソコンを使いましょう！
そうするとこうなります。

ノートパソコンを上手く使うことで、画面の中のテキストが目立っていますよね。
パソコン以外にも使える素材は転がっています。色々なもので試してみてください！
 
さて、何か参考になったものはありましたか？
次回は、画像上のテキストを読みやすくする方法パート２をシェアする予定です。
それではまた〜