Shufumin日記

のんびりデザイナー続けているひとの雑記ブログです

【バナー】キャラと文字を見やすくする方法【UIデザイン】

f:id:yuumin5220:20200829150722j:plain

手を動かす前に、デザインの目的を意識する。

まずはデザインを考える間に「見て欲しい・読んでもらいたい部分」を
ユーザーに伝えられるようなデザインにするぞ!
思考を持って作業に取り掛かるのが良いです。

恥ずかしながら、新卒時の私はとりあえずやってみようのテンションでデザインを考えるのが癖になっていて、なかなか説得力のある案を確実に出すことができていませんでした。
(まぐれはありましたが、それは喜ばしいことではないですよね・・。)

私は油断すると今でもとりあえずやるぞマインドが働きそうになるので、自戒の意味も込めて書いています。まだまだ修行が足りないです。

文字の後ろにキャラクターがいるときは、キャラの色を微調整してあげると見栄えが良くなります

例えば、以下のようなバナーがあるとします。(ざっと用意した架空のバナーです。)
f:id:yuumin5220:20190602220006p:plain
帽子のつばの部分や、首から下の部分に文字がかぶってしまっています。極端に気になる
わけではありませんが、少々、文字が見づらくなっています。


「じゃあ、キャラの首から下をレイヤーマスクで隠せばいいじゃん!」 f:id:yuumin5220:20190602220400p:plain
当時の私はこのやり方をとりました。・・確かにスッキリはします。1つの方法としてはありです。しかし、スパッとキャラの体が消えているのは違和感があります。
キャラクターの全身もちゃんと見せたい要素だとしたら、このやり方は適していません。


キャラの色を一部暗く/明るく調整すると・・・。 f:id:yuumin5220:20190602220914p:plain
キャラクターの全身を見せつつ、文字に自然と目が行くようになりました。


f:id:yuumin5220:20190603104413p:plain
こんな感じで調整しています。
キャラの絵を完全に消さずに、文字をしっかり見せたい!というときに
おすすめな方法です('◇')ゞバナー以外でもポスターとかキャラと文字を扱うときにも使えるかもしれません。