【バナー】キャラと文字を見やすくする方法【UIデザイン】
手を動かす前に、デザインの目的を意識する。
まずはデザインを考える間に「見て欲しい・読んでもらいたい部分」を
ユーザーに伝えられるようなデザインにするぞ!思考を持って作業に取り掛かるのが良いです。
恥ずかしながら、新卒時の私はとりあえずやってみようのテンションでデザインを考えるのが癖になっていて、なかなか説得力のある案を確実に出すことができていませんでした。
(まぐれはありましたが、それは喜ばしいことではないですよね・・。)
私は油断すると今でもとりあえずやるぞマインドが働きそうになるので、自戒の意味も込めて書いています。まだまだ修行が足りないです。
文字の後ろにキャラクターがいるときは、キャラの色を微調整してあげると見栄えが良くなります
例えば、以下のようなバナーがあるとします。(ざっと用意した架空のバナーです。)
帽子のつばの部分や、首から下の部分に文字がかぶってしまっています。極端に気になる
わけではありませんが、少々、文字が見づらくなっています。
「じゃあ、キャラの首から下をレイヤーマスクで隠せばいいじゃん!」
当時の私はこのやり方をとりました。・・確かにスッキリはします。1つの方法としてはありです。しかし、スパッとキャラの体が消えているのは違和感があります。
キャラクターの全身もちゃんと見せたい要素だとしたら、このやり方は適していません。
キャラの色を一部暗く/明るく調整すると・・・。
キャラクターの全身を見せつつ、文字に自然と目が行くようになりました。
こんな感じで調整しています。
キャラの絵を完全に消さずに、文字をしっかり見せたい!というときに
おすすめな方法です('◇')ゞバナー以外でもポスターとかキャラと文字を扱うときにも使えるかもしれません。