minote

Photoshop/UI/雑記ブログです。

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

私がゲーム会社に入って初めてやらせてもらった仕事が、バナーのデザインでした。
その時の経験をブログに書きます。

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

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

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

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

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

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


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


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


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