こんにちは、デザイングループのNORIKOです。
8月20日にイケメンシリーズ7周年記念作品として、
『イケメン源氏伝(げんじでん)　あやかし恋(こい)えにし』 がリリースされました。

皆様もうプレイしていただけましたでしょうか？

——————————————-
あやかしと契りを交わしたあなたは
愛憎渦巻く源氏兄弟の戦いに巻き込まれ
宿命の恋に出会う－

ゲームの詳細については是非公式サイトをご覧ください。
https://ikemen.cybird.ne.jp/title/genji/original/
——————————————-

 

さて、今回のブログでは『イケメン源氏伝(以下源氏伝)』のUI制作についてご紹介したいと思います。
イケメンシリーズ4年ぶりの和風タイトルという事もあり、
新しくも既存のシリーズを遊んでいただいているお客様にも馴染みのあるデザインを意識して制作しました。

 

①資料集め、UIのテーマ提案

事前に決まった世界観やターゲットに基づき、UIのテーマ提案を行いました。
『源氏伝』ではストーリーの演出を大幅に追加したり、
より世界観やシナリオに没入して楽しんでいただく事をテーマにしていたため、
王道和風の中にフラットデザインを取り入れ、
主張しすぎず、ゲームへの没入感を阻害しないUIを制作する事になりました。

 

②ラフ制作・ブラッシュアップ

チームとすり合わせたUIテーマを元にラフ案を制作していきます。
こちらも事前に決めたゲームカラーを踏襲する形で複数提案しました。

 

 

ここでは六角形、円形、ひし形など色々な形状を使用した案を制作し、
より『源氏伝』のイメージが伝わりやすい且つ既存のタイトルに寄り過ぎないデザインになるよう、
チームメンバーと都度話し合いを重ね、情報を合算・精査しながらデザインを詰めていきました。

 

 

③各種汎用素材に展開

マイページのデザインを元にルールとなる資料を作成し、ゲーム内の各種素材を制作していきます。
汎用背景、ボタン、ゲーム内フォントなど皆様がプレイする際、一番目に触れる素材を汎用素材としています。

 

 

フォントについては世界観と視認性を両立させる事を意識して選びました。
グラフィックソフト上で配置するだけではなく、実際にエンジニアさんに組み込んでいただき、
複数の端末で確認する等時間をかけて選んでいきました。

汎用素材は以降全てのページに影響するため慎重に進めると共に、
画面サイズの異なる端末でも問題なく表示されるようパーツをどう切り分けるか、等もこの段階で決めていきました。

 

 

④基本UIの完成、各種ページ・素材に展開

ここまでで基本の素材は完成です。
完成した素材を使用して、ここからは複数のデザイナーで各ページへ展開していきます。

ここまで作ってきた素材やレギュレーションを元に、作成者によってデザインに差異が出ないよう、
これまで以上にデザイナー間の連携を意識して制作を進めました。

ページ以外にもカードフレームやアイコン、アイテムイラスト等、この段階で一気に制作を進めます。
ぐっとゲームっぽい見た目になってきましたね。

 

 

完成した画面から随時チーム内確認を挟み、
ブラッシュアップを繰り返して実際のゲーム画面に組み込んでいきます。

 

⑤レビューを実施し、改善

実際に触れるようになってから、社内レビューを実施しました。
そこで出た意見をチーム内で精査し、さらに改善を重ねます。

1部のみの紹介になりますが、このレビューによりマイページのアイコンを修正しました。
情報が集約されるマイページだから、となるべく細かい要素で埋め尽くさないようにしたのですが、
そのため役割の優先度が下がってしまっていた事がレビューにより分かったためです。

 

 

こうした改善を繰り返し、全ての画面が実装されリリースとなります。
デザイナーとしてお客様に最大限ゲームの魅力を感じていただくため、
今後も試行錯誤を重ね、より良いUI・UXが提供出来るよう、努力していきたいと思います。
ここまで読んでいただきありがとうございました！

『イケメン源氏伝』では毎月イベントやカードがちゃ、かわいいアバターがちゃ等を配信しています。
是非プレイしてみてください。

 

——————————————-
アクセス方法：
App Store／Google Playで「イケメン源氏伝」で検索
公式サイト：
https://ikemen.cybird.ne.jp/title/genjiden/original/index.html
公式Twitter：
https://twitter.com/ikemen_genjiden
公式LINE：
LINE友だち検索で「イケメン源氏伝」を検索
——————————————-