今回はこんな疑問にお答えします！
普段ソーシャルゲームをプレイしている方はゲーム内のお知らせやTwitterなどの広告でよく見かけると思いますが、ガチャ開催の告知画像、新キャラクター追加の紹介画像みたいなのってありますよね。
本記事では、いわゆるゲームっぽいバナー広告の制作工程をご紹介します！
僕は現在ゲーム会社に勤めていて、バナー広告デザインも制作しているので、その経験をもとに一からバナーを制作してみようと思います。
ハウツー記事というより、こんな流れで制作していますよという紹介なので、具体的なテクニックに関しては今回はふれておりませんので、あらかじめご了承ください。
記事でわかること
- ・ゲームっぽいバナー広告の制作手順
記事の信頼性
筆者のかがみ（@cony_tas）はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。
CONTENTS［ hide ］
ゲームっぽいバナー広告の作り方！
それでは早速制作していきます。
最初に、必要な文字要素、背景とキャラをざっと配置します。
ゲーム背景は用意できないので、無料素材の海の写真をお借りしました。
そして今回は仮に「ちょっと大人っぽいさくらもちちゃん」が新キャラとして登場する想定です。
いつもと少し塗り方変えてみました。
（塗りは研究中なので今後もコロコロ変わるかもしれません笑）
背景を加工する
まずは背景を加工しましょう。
このままでは違和感があるので、もう少しキラキラした美少女ゲームっぽい背景に加工します。
背景を複製して、下記のように調整。
- ・トーンカーブでコントラストを強めにする
- ・複製した背景をぼかし（ガウス）でぼかす
背景をぼかすことで、キャラが浮き出てきましたね。
これはカメラの写真撮影でよくやるボカしと同じ原理です。
続けて下記の調整をします。
- ・色相を暖色系に変更
- ・黄色のブラシをオーバーレイでランダムに塗る
- ・カスタムブラシで玉のエフェクトを入れる
色相を調整したことで暖色系のふんわりした背景になりました！
また黄色ブラシをオーバーレイで所々塗って黄色味を追加。
最後にカスタムブラシで全体にキラキラした玉のエフェクトをランダムで置きました。
キャラにエフェクトをかける
背景のふんわり感に対してキャラが若干浮いているので、キャラにエフェクトをかけてみます。
- ・キャラを複製し、ぼかして半透明にする
- ・トーンカーブでコントラストを調整する
- ・画像下から白いエフェクトを敷く
キャラも調整して背景に馴染みましたね♪
画像下から白いグラデーションを敷くと、幻想的な雰囲気になるので、おすすめです笑
文字装飾をする
背景とキャラの次は文字を装飾していきます。
文字の装飾は雰囲気が大きく変わるので作っていて楽しい部分ですね！
では下記のように調整します。
- ・期間限定の文字を楕円シェイプで囲む
- ・ピックアップガチャの文字はタイトルなので金色で豪華に
- ・新キャラ～の文字は控えめに
- ・カーニング（文字間）調整
文字装飾を施すだけでだいぶゲームっぽいバナーになりましたね笑
文字だけが連続して並ぶと読むのがしんどいので、「期間限定」などの文字はシェイプで囲んでしまったほうが画像が締まります。
次にSSRの文字を装飾します。
SSRとはゲーム上のキャラやカードのレアリティを表していて、文字は金色でちょっと豪華な装飾を周りに施すことが多いので、今回は文字の下に飾りを敷いてみます。
キャラ名の「さくらもち」の文字も調整します。
文字のジャンプ率（文字の大きさ）をランダムに変えて、動きを出すとロゴっぽく見えるのでおすすめです♪
最終調整
これで一旦すべての要素のデザイン・調整が終わりました！
最後に全体的に見栄えが良くなるように下記の調整をします。
- ・要素の配置を微調整する
- ・エフェクトを追加
- ・画像全体の周りに装飾を追加
ゲームっぽいバナーの完成ですー！
最後に：ゲームっぽいバナー広告の作り方！
今回はゲームっぽいバナー広告の作り方をご紹介しました。
本記事用に自前イラスト付きでバナー広告画像を作ってみて思ったんですが、やっぱり本物のゲームのキャラと背景が無いと、なかなかゲームっぽい雰囲気にはならないですね。
せめてもう少しイラストのクオリティが高ければ良かったのですが……もっと練習します……。
また気が向いたら、別の雰囲気のバナー制作手順をご紹介するかもしれません。
それでは今回はこの辺で！
