プロっぽいゲームバナー作成のコツとは？文字のデザインに注目しよう！
自分が作成したゲームやWebのバナーに対して、
もう少し、この文字を目立たせてほしい
と指摘されたことはありませんか？
当時は、「うーん。。でもバナー全体としての色合いは調和取れて馴染んでるし・・・。文字も読めなくはないよね。」と心の中でひっそりと思っていたことがありました。
この文字だけはユーザーに伝えたい、目立たせたいという企画者の意図を汲み取るためにも、できるだけ要望に沿う形でデザインしたいですよね！
今回は、文字（フォント）デザインのコツについて、6つの手法をご紹介します。
ゲームバナーの文字デザインで使えるテクニックをご紹介
サンプルとして架空のお正月バナーを作成しました。キャラクター素材は、「三日月アルペジオ」様よりお借りしています。
今回は、「毎日ログインでガチャチケットをプレゼント」の部分を6つの手法で可能な限り目立たせるように調整してみます。
ちなみに対象の文字は、初期の状態ではあえて見づらい文字色にしています（笑）。ここからの変化率を楽しんでいただければと思います。
文字に境界線をつけて縁取りする（袋文字にする）
文字に境界線をつけて袋文字にしてみましょう。これだけでもグッと見やすくなりますね！
背景の色と離れた文字色を選ぶ
背景と同系色の色を選ぶのはやめましょう。思い切って、反対色を使ってみてもよいかもしれません。今回は、赤の反対色である緑色を選択しました。
読みやすいフォントを選ぶ
思いきって、視認性の高いフォントへ変更してみましょう。お正月感を損なわない程度に読みやすいフォントを選択しました。
文字の大きさにメリハリをつける（ジャンプ率を上げる）
1文の中で特に目立たせたい文字だけを大きくしてみましょう。今回は「毎日ログイン」「ガチャチケット」「プレゼント」の文字を目立たせたいので、それ以外の文字は小さくしています。
文字を立体的にしてみる
文字自体にドロップシャドウをつけて、浮き上がって見えるようにしてみましょう。緑の縁取りを太くし、強めに緑色のドロップシャドウと軽めに黒色のドロップシャドウを二重がけしています。
文字の後ろや周囲に装飾をつける
文字の後ろに座布団を置いたり、フレームをつけたり、イラストを置いたりなど、文字の周囲に目を引くような装飾をつけてみましょう。
今回少し悩んだのですが、後ろに座布団や装飾を置くと、要素が多すぎて逆に見づらくなるため、「ガチャチケット」の文字付近に、チケットのイラストを置くことにしました。
文字を目立たせる方法は無限大
今回、ゲームバナーで文字を目立たせるテクニックを6つご紹介しました。
- 文字に境界線をつけて縁取りする（袋文字にする）
- 背景の色と離れた文字色を選ぶ
- 読みやすいフォントを選ぶ
- 文字の大きさにメリハリをつける（ジャンプ率を上げる）
- 文字を立体的にしてみる
- 文字の後ろや周囲に装飾をつける
この他にも細かなコツがたくさんあると思います。それは自分でデザインしながら見つけたり、本を読んで勉強したり、教えてもらったりなど人それぞれです。
数をこなしていくことで、自分の中で型やルールができてくると思いますので、それを明文化していくと悩むことなくサクサクお仕事をこなせるようになるかもしれませんね！
あわせて読みたい
ゲームUIデザインやバナー制作などのご依頼はこちらへ
お問い合わせ
または、会社サイトからお問い合わせください。
2clue合同会社のサイトへ
