
エリオスRのグラフィック/イベントロゴ制作について
この記事は「Happy Elements カカリアスタジオ デザイナーアドベントカレンダー2023」の7日目の記事です。
はじめに
はじめまして。
Happy Elements株式会社 カカリアスタジオでHELIOS Rising Heroes (以下 エリオスR)チームのグラフィックデザイナーをしております、T.I.と申します。
この記事では、私たちがどのようにエリオスRのイベントロゴを作り上げているか、その過程をお話できればと思います。
最後までお付き合いいただけますと幸いです。
グラフィックデザイナーの役割
まずエリオスRチームでのグラフィックデザイナーの業務内容についてお話させていただきます。
現在、チームには2名のグラフィックデザイナーが所属しており、それぞれがゲームコンテンツに関連したクリエイティブを制作しています。
イベントロゴをはじめ各種バナー画像や勲章画像、アイテム画像、アイコンの書き出し、SNS告知画像などゲームに関連するグラフィックアセット制作は多岐にわたります。

また、新規施策や改修改善の際には、UXを考慮したUI制作も行うためコンテンツに対して非常に広く携わることが出来ます。
エリオスRのUI制作については、[12月14日に公開予定の記事]で詳しくお話ししますので、ぜひご覧ください。
ロゴ制作工程
エリオスRチームでのロゴ制作は、大きく分けて3工程で進行します。

今回は、11月30日に開催したユニオンイベント「聖夜に響くHero's Carol」 のイベントロゴを例に、制作工程をお話ししていこうかと思います。
1. イベントテーマの把握(ストーリー、イベントテーマの理解)

まず最初に、ストーリーとイベントテーマを理解することから着手します。
この段階では、ストーリーをどう見せたいのか、逆にどう見せたくないのかといったテーマ性についてチーム内で共有します。
例にあげている今回のイベントの場合では、クリスマスシーズンのイベントストーリーが展開される内容でありイベントテーマが「聖歌隊」 であること。
それらを踏まえた形でロゴの方向性を考えるところからはじまります。
「クリスマス」は季節的に楽しく賑やかな表現が出来る冬のテーマですが、キャラクターや「聖歌隊」のテーマに一貫性を持たせるべく以下の方向性の検討を行います。
イベントテーマから導き出す方向性
・ストーリーシーンやイラストの背景が教会なので神聖さを持たせてあげたい
・イベントキービジュアルのイラストが持つ光のコントラストや羽など荘厳さがあっても良さそう
・夜空を背景に舞う羽の動きや澄んだ空気感のあるものにできないか
・イラストのマリオンが天使すぎるのでイラストに合うロゴにする
これらの内容から今回は 「教会の雰囲気や神聖さを軸にした少しの厳かさと透明感」 のある方向性 とし採用しました。
ー
2-1. ラフ案の作成

ストーリーとテーマの理解が深まった後、ラフ案の作成に移ります。
方向性は決まっているものの、それらのモチーフをどのように表現するのかという部分をこの段階で具体化していきます。
制作に使用するツールは基本的にAdobe社のPhotoshopを使用して制作を進めていくのですが、全体構成を考える段階なので細かな装飾や文字に遊びを入れたい場合などはIllustratorで素材を作成するなど必要に応じて使い分けて制作することが多いかと思います。
今回は以下の要素を取り入れ、このイベントが持つ特性を保つよう心掛けました。
ロゴに持たせるモチーフ
・ 聖歌隊の持つ落ち着いた印象を反映するため、筆記体、蔦、リボンの表現を採用
・ イベント衣装にあるバラの表現は筆記体と組み合わせ、今回のイベントの特性として強調したい
・ クリスマスの要素はオーナメントや雪の結晶などで表現し、イラストにもある羽を用いて神聖さを強調
・ 背景にサンバーストを入れることで、後光が差すような教会のイメージを取り入れたい
ラフ案の制作時には、何案か作成し、その中から最もコンセプトに近いイメージをブラッシュアップしてチームチェックに提出します。
ー
2-2. フィードバックと修正

ラフ案を提出後、フィードバックを受け取ります。
ラフ案はロゴの設計図のようなものなので、この時点で出したい表現が適切か、またはもっと適切なイメージがないかを確認し、調整を行います。
今回のチェックでは以下の調整ポイントなどを中心に「聖歌隊テーマの強調」を書体の調整、モチーフ配置調整などを行いました。
フィードバック
1. "Hero’s"の書体選択がポップな印象を受けるので「Hero's Carol」を1つの単語として書体をあわせる
2. 教会やクリスマスを連想させるモチーフは大きく効果的に配置する
3. 天使を連想させる羽モチーフは持っている情報が効果的に機能していないので今回は削除
ー
2-3. 色ラフの作成
全体設計の完了後は色彩設定と形状の微調整へと移ります。(色ラフ案)

この段階では、ディテールに注意を払いながら、ロゴに持たせたい印象を再確認しつつ制作を進めます。
この時点では細い詳細や配色までは詰めず、ラフ案の明暗設計に基づき色の設計を組み立てて行きます。
今回は、文字周りに発光感を持たせ、背面に広がる星空を添えることで、夜空に向けて聖歌隊の賛美歌が広がるイメージを目指しました。また、イラストに合わせて彩度は高めとしてクリーンで淡いロゴを目指します。
ー
3. 最終確認と完成

フィードバックを反映し、完成したロゴに対して最終的なチェックをもらいます。
この段階まで進むと制作ツールもPhotoshopでの作業が中心となり、ロゴの色味や効果やテクスチャなどを作り込み完成まで進めます。
最終チェックでは、彩度や細かな装飾の調整など、必要な修正や調整を加わえる場合もあり入念に確認を行います。
文字の可読性・視認性の担保、シルエットの明暗差、テクスチャ効果やレイヤースタイルのかかり方などの確認が無事とれれば最終確認は完了。
イベントロゴの完成です!
イベントロゴにこめた想いや考え
簡単ではありますがエリオスRのイベントロゴ制作についてとなります。
イベントを盛り上げる要素のひとつではありますがロゴを見て「どんなお話なんだろう」「気になるイベントだ」など想像して楽しんでもらうことを目的として制作を行っています。
最後にそんなエリオスRのイベントロゴにこめた想いや考えをいくつかご紹介させていただきます。
Best Day Ever!ウエディング大作戦!

WESTセクターの『ヒーロー』をメインにしたセクターイベントになるのですが、ゲームのテーマ的にかっこいいイメージが多くなりがちな中、このイベントでは「結婚式」をテーマにした内容で新郎に扮したキャラクターとの違った表情が楽しめるお得なイベントです。
とにかく集合絵のエモさに合うものを作りたい!という想いで突き進んだイベントロゴで、甘々でふんわりしたブーケや花束をイメージして制作しました。
モチーフの選定についても教会やリボンなどテーマから想像できる要素を取り込んで可愛くもあり落ち着いた柔らかい印象になるように心がけました。
ー
Heroes with Dirty Faces

マフィア感とは?について考えたイベントでした。
リアルにマフィア感目指すと血などの物騒なモチーフが飛び交ってしまうので、プレイしてくれいているユーザーさん的にもやんちゃな感じは抑えつつ危険な印象がでるように…を目指す形に。
大人っぽさや「火傷するぜ」感が出せるといいなと思い人物のシルエットやハットなどもラフ案作成時に入れてはみましたがしっくりこないのでボツにしつつ、薬莢とひび割れのコンボを採用。
こういった大人っぽさを真面目に作るとオーセンティックな本物重厚感な雰囲気に突入しがちなので書き文字やペン字を使って硬い雰囲気を崩す方法をとったりしています。
(テクスチャはワニ柄つかったりと「らしさ」みたいなところを密かに目指してたりします)
ー
『ヒーロー』忍法帖ORDER

エリオスRのイベントでは珍しい彩度の高いオーダー(ガチャ)ロゴです。
オーダーロゴの場合の多くは特定のキャラクターをピックアップしてそのキャラクターを象徴するようなものにしていくケースがあります。
今回★4となるビリー・ワイズをメインとしたアメコミ要素が強く出た「アメコミ忍者」というテーマでは、アメコミ×和風のイメージといった相反しそうな要素を取り込み制作しています。
カラフルな配色であったり、ポップなテイストもピックアップされたキャラクターとの親和性を考えてキャラクターの性格やシチュエーションに合わせたものにしています。
動きのあるロゴは作っていて楽しいクリエイティブでしたし、中央に配置した「"HERO"NINPOCHO」はあえて和文を使うことで海外から見た日本っぽさを出すことが出来た部分となります。
ー
夕映夏日

イベントタイトルにもなっている夕映夏日(ゆうばえカジツ)はこのイベントに合わせた造語です。
夏の夕暮れを感じるこのイベントでは、軸となる物語がビームス兄弟の距離感を語った鬼エモい内容となっており、二人の関係や見ていた風景、空気感など夏のノスタルジーをギュッと固めた象徴になるものにしたいと制作しました。
湖畔や夏草といったモチーフの選定を行いつつ、最終的には物語のワンシーンを閉じ込めたような夏の夕日写真をベースに水彩調で儚さを出す形で哀愁のあるロゴに仕上げました。
以上一部ですがイベントロゴやオーダーロゴにこめた想いや考えをお話させていただきました。
他のロゴも同様に想いを詰めて制作しているのでまた機会がありましたらお話させていただきたいと思います。
まとめ
ここまでお読みいただき、ありがとうございます。
アプリ内のイベントでは、素晴らしいイラストと共に、ユーザーの皆さんに楽しんでいただけるようなストーリーを展開しています。
想像力を掻き立てるクリエイティブを目指して、日々制作を行っており、イベントロゴはその一部として、今後もその役割を全うしていきたいと思っています。
さいごに
弊社では、同じくクリエイティブな仕事に情熱を持つメンバーを積極的に募集しています。
デザインが好き、ゲームが好き、そして熱狂的に愛されるコンテンツを作り出したいという方、ぜひご応募ください。
詳細については、弊社の採用サイトをご覧いただくか、お気軽にお問い合わせください!
Happy Elements カカリアスタジオでは
いっしょに「熱狂的に愛されるコンテンツ」をつくっていただけるメンバーを大募集中です!
もし弊社にご興味持っていただけましたら、ぜひ下記採用サイトをご覧ください!