みなさんこんにちは！

株式会社エディア　瀬下です。
突然ですが、この記事を見てくださる方はゲームが好き！という方が多いのではないでしょうか？普段遊んでいるゲームの好きな部分は人によって様々だと思うのですが、ゲームのビジュアルに惹かれてプレイするなんてこともありますよね。

そんなゲームのビジュアルは誰が作っているかご存知でしょうか？

そう、デザイナーです！

実は私もデザイナーとしてエディアで制作に携わっているのですが、入社して４ヶ月、まだまだスキルを伸ばさなけばいけない部分も多くあると感じています。

ということで！今回はゲームを制作しているデザイナーの方に制作物のメイキングを見せて頂きましょう！

こちらはエディアでデザイナーとして活躍されている山口さんです。

今回は、山口さんにデザインの制作の過程を教えて頂きたいと思います。

その前に、山口さんのプロフィールについて少しお聞きしてみましょう！

山口さんのプロフィール

山口さんはいつエディアに入社されて、今までどのようなものを制作されてきましたか？

昨年の4月に入社しました。ゲーム内で使われる、ガチャページのバナーやUIデザインを作成しています。

１年半ほど働かれているんですね！普段はゲームをされたり、アニメを観たりするんですか？

はい！アニメも観ますし、ゲームもしますね。アニメだと夏目友人帳、蟲師、ヒロアカなんかを観ていました。ゲームだとDevilMayCry(特に4)、アサシンクリード2、リトルビッグプラネット、ピクミンが好きですね。

僕もDevilMayCryやアサシンクリード好きです！アクション系のゲームが多いんですか？

アクション系多いです！ストーリーしかしませんが(笑)

休日はどんなことをしているんですか？

休日は散歩や映画館によくいきます！お洒落過ぎず長居しても良さげな喫茶店やカフェをよく探して歩いてます！

プライベートがとてもオシャレな感じがしますね！１年間で特にスキルアップしたと感じる部分はありますか？

文字の扱いは特にスキルアップしました。バナーにすると小さくなる事を考えて大きく配置したり、ごちゃついたものの上に置く文字の処理などは入社してから学びました。

学生の頃から勉強を重ねても、やはり実践で学ぶ部分も多いんですね。それでは早速メイキングを見せて頂きましょう！

メイキング風景１　文字で雰囲気を掴む

今回は何を制作されているのですか？

今回はゲーム内イベント「深紅の魔弾来襲」のバナーを制作して行きたいと思います。

僕もよくバナー制作をすることが多いので勉強になります！よろしくお願いします！

頑張りましょう！では、はじめにフォントを決めていきます。最初に何個か文字を打ったものを用意して、その中から選んでいます。

なるほど、山口さんは最初にフォントを決めてから制作して行くんですね。

そうですね。今回はイベントストーリーのシリアスなイメージを表現したくて、明朝体を選びました。配置もシリアスなイメージのある推理小説などを参考にしています。

この時点で気をつけていることはありますか？

文字ごとに強調したい文言を決めています。今回の場合は「来襲」の部分を大きくして強調しています。なぜこのようにしたかは後で色を置いた時に一緒に説明しますね ♪

メイキング風景２　全体のイメージを決める

ここまで大体の配置が決まったら、次に色や効果を決めて行きます。

色と効果はどちらから決めているんですか？

特にどちらからというのはないのですが、今回は色から決めています。

赤い色のグラデーションが印象的なロゴですね！

そうですね。深紅というタイトルの通り赤色を強調させたくて「来襲」に入れています。来襲をに赤を入れ強調したのは、このイベントストーリーの終盤に街が炎に包まれるシーンがあるのでそこから想起しました。

あとは、プランナーと話合い、白色も使用しています。背景が暗いことで、無彩色（白）を入れることによって有彩色（赤）が際立つという効果があります。

なるほど！ところで、自分も仕事をする中でよくプランナーから仕様書を頂いたりしながら制作をしているんですが、ゲーム会社のプランナーってどんな方々なんですか・・・？

ゲーム運営に関わる全てをチェックする方々で、デザイナーの作成物がゲームの雰囲気とあっているか伝えたいことが伝わっているかをチェック・指摘をしてくれる方々でもあります。

先ほどの「プランナーと話合い」というのはどのような相談をしたのでしょうか？

プランナーからの指示では、全体が「赤色と黒色」の印象になるようにということでしたが、先ほどの理由で白を入れる事でより赤が映えるので白を使いたいというものです。

プランナーの方でもイメージが固まっていないこともあり、そのイメージを話し合いで明確にしていくのもデザイナーの仕事です！

手を動かす能力だけでなく、コミュニケーション能力も大切なんですね！ここまでスムーズに作業されているように感じますが、ここから工程の戻りが発生しないように工夫していることなどはありますか？

私はロゴを制作している途中で一度仮のバナーに配置してみたりしています。

なるほど。そうすることで、全体像を掴みながら作業することができるんですね！

そうですね。他にも渡された背景イラストを差し込んでみることで全体のイメージを確認しながら作業しています。

効果はどのように決めてどのように制作したのですか？

今回のイベントのキャラクターが得体の知れないキャラクターであるので、不安感を出すような演出を意識しました。そこから文字に対してノイズや砂嵐のイメージを盛り込みました。効果はパスを手描きで引いています。文字を繋げるのもこの段階で行いました。

メイキング風景３　背景の制作

ここまでロゴが決まったら背景の制作に入って行きます。背景についてもプランナーから黒と赤のイメージで。と指示があったので赤黒メインで制作して行きます。シリアスなイベントで、今回登場するキャラクターのイメージカラーが赤色だからという感じですね。

スモークやガスなどをイメージした靄を入れることで不安感を表現しています。さらに背景のイラストをぼかすことで奥行き、空間を演出しています。

この背景イラストは山口さんが描かれたのですか？

いえ、今回は自分で描いているわけではありません。背景イラストはゲーム内のストーリーの背景の一部を持ってきています。効果は自分で上から描き足していますね。でも自分で背景イラストから作っちゃうこともあります。

デザイナーでもイラストを描くこともあるんですね・・・！

そうですね、ですが担当するコンテンツや制作物によっても違いますし、そのデザイナーのスキルによっても変わってくるのでみんなが描くという訳ではないですね。

メイキング風景４　配置

次に背景の上にキャラクターを載せます。

キャラクターによってポーズが違うので見せ方を考えます。今回のバナーではキャラクターを１番に見せられるようにしました。キャラクターを馴染ませるために「光彩」や「色の調整」をしていきます。

そして先ほど制作したロゴを載せます。
キャラの次に目が行くようにサイズを合わせます。

先程までなかった弾痕が入っていますね！

この弾痕は背景からロゴが浮かないように要素を足しました。背景にロゴが乗っているというイメージではなく元から背景の中にあったかのような表現を意識しています。

デザイナーによって考え方や表現が違っておもしろい部分ですね。

雰囲気を大切に繊細にまとめる方、読みやすさを意識して全く違う効果をぶつける方と、他のデザイナーの作成物を見ると新鮮な気持ちになります！

メイキング風景５　訴求バナーに仕上げていく

次にゲーム内アイテム画像や訴求文言を配置していきます。目立たせたい部分のサイズや色を考え、ユーザーに伝わりやすい配置を探します。

自分はここでよく迷うことがあるのですが、何かオススメの配置の方法などありますか？

訴求文言が長文だと迷うことが多いですよね。そんなときは、トラッキング（文字と文字の間の広さ）を広く見えるように調整してみましょう！

わかりやすさを重視するんですね！

そうですね。あと文章は下のラインを揃えるようにすることで見やすくなるかと思います。フォントによってアルファベット、数字、漢字、ひらがなのサイズがバラバラなので全て綺麗に揃えます。

完成

長時間のご説明ありがとうございました！完成イメージは最初に考えていたイメージと同じようになりましたか？

最初から決まっている部分が多かったので、今回は楽でしたね。シリアスなイベントのイメージやキャラクターをしっかり見せることの出来ているバナーになったのではないでしょうか。制作前にプランナーからも細かい要望があったので想像しやすかったです。

今回プランナーの方からの指示があったという事をよく言われたと思うのですが、デザイナーはプランナーと関わることは多いんですか？

はい。基本的にはプランナーから来た仕様に沿って制作して行きます。ですが、以前頂いた仕様書のアイテム名が長いと感じたことがあり、もっと短くした方がいいのではないかと提案した事もあります。

ガチャ画面の見せ方なども、もっと見やすくできると思ったのでプランナーと相談して変えてみようという話になりました。変更した結果、提案した構成の方が好評だったのでさらに改修を加えて現在に至っています。

１年目のデザイナーの意見でもちゃんと聞いて取り入れてもらえるんですね！エディアの良いところだと感じます！

そうですね。ユーザーからどう見えるかという部分では私たちデザイナーの方が詳しい事もあるので積極的に提案してみましょう！

ありがとうございます！ちなみに今回の制作についてフィードバックなどはありましたか？

上司からのフィードバックをいただきました。

「バナーの中にゲームのイベントの空気感がわかるような雰囲気になっている。弾痕をつけることでこのキャラクターが銃を使うことがわかって良い。」

という評価をいただきました。

社内で制作物に対して周りからの意見が聞けるのはいいですね！今回はお忙しい中お時間頂きありがとうございました！

お疲れ様でした♪

みなさん、デザイナーがどんな仕事をしているかお分りいただけたでしょうか？普段何気なくタップしているバナーも実はこんなにも考えられて作られています。ユーザーの方に伝わりやすく、面白さのあるモノを制作しているので、いつもプレイしているゲームのバナーやロゴなど少し気にしてみてください☆

↑最後に山口さんから今までの制作で作ったラフを見せて頂きました。

すごい量ですね・・・自分もこれから多くの制作を経験してレベルアップしていこうと思いました！！

★編集後記★

エディアでは自分からやりたいことをアウトプットして、デザイナーでもコンテンツの指針に関わって行くことでき、それを求められているということを感じています。

上場している企業ではあるのですが、マインドはベンチャー企業のような部分もあり、常に新しいことにチャレンジしていくことのできる場所だと思います。自分も様々な事に積極的に手を上げていきたいと思っています！

この先どんな制作に関わっていけるのか楽しみでもありますし、何ができるかは自分次第だと思います。多くの経験は将来無駄になることはないと思います！

一緒にチャレンジしていきましょう！