【出張ヒストリア2018】Caligula OverdoseでのUIデザインアプローチ
15.9K Views
September 06, 18
スライド概要
2018年8月5日に行われた「出張ヒストリア！ ゲーム開発勉強会2018」にて発表させていただいたPS4ゲーム『Caligula Overdose』のUI制作事例です。
イベント詳細
https://historia.co.jp/archives/14224/
講演者：
岩田 里奈（UIデザイナー）
以下、セッション概要より抜粋。
制作にあたって山中プロデューサーから頂いた「デザインの一新」という使命をどのようにアプローチして完成させたのか。UIデザインの基礎を交えて紹介します。
関連スライド
【出張ヒストリア2017】 想像と違ってた！ VRUI作りのコツ
https://www.docswell.com/s/historia_Inc/ZMLRG5-vrui-78798570
株式会社ヒストリアは、Unreal Engine専門のソフトウェア開発会社です。ゲーム事業とエンタープライズ事業、2 つの軸でソフトウェアの企画、開発を行っています。また、Unreal Engine の学習を目的とした作品制作コンテスト『UE5ぷちコン』や、『出張ヒストリア！ ゲーム開発勉強会』を主催、技術ブログを毎週更新など、Unreal Engine コミュニティを盛り上げる活動も行っております。
関連スライド
各ページのテキスト
※公演中に口頭で話した内容を必要な場合は追記しています。
今回は2016年にPlaystationVitaで発売された「カリギュラ」が
PS4に移植することになり、弊社が開発を担当しています。 移植といっても、シナリオもキャラクターもダンジョンも増え過剰強化されたことで タイトルも「カリギュラオーバードーズ」として生まれ変わりました。
その際にUIに対してクライアントの山中プロデューサーから頂いたのは UIの一新というお題でした。新たにゼロから作り直すだけでも驚きなんですけども、この「一新」という言葉の中には
このタイトルでは、山中プロデューサーと直にやりとりする方法でデザインをすすめていきました。
山中Pからの要望は主に上記の２点でした。
「黒」の利点を捨てることに。
プレイした方ならわかると思いますが、 このように見た目だけでも十分な個性がこのタイトルには揃っています。
華やかな乙女ゲーな感じに…
右側のほうが最終デザインに近くなってきています。 色数を絞り、落ち着いた感じにまとめて男性にもとっつきやすくしていますが。。
映画字幕などで使われる「ニューシネマ」。見方によっては少し怖い雰囲気を持ちながらも 読みやすさはお墨付きという イカした フォントです。
英字フォントがうまい感じにナウくはまる※ニューシネマも今回合わなかっただけでナウいフォントです。
デザインが完成して、ここから様々な画面へ取り掛かります。 このフォントを変えたことで変化した部分やこれまでの内容をまとめて、つぎのもくじへ進みます。
イラストを邪魔しない色の工夫をするために おぐちさんのイラストをかなり研究しました。
揃った箇所を作ると完成度が高く見える。
重さを揃えると完成度が高く見える。
このタイトルで使ったグラデーションはメインメニューだけで７箇所あります。
いろんなゲームのUIを見るとベタ塗りは案外少ないです。 RPGもシューター系もスマホゲームでもグラデーションを探してみると面白いと思います。
それでは、これらの「余白 と 揃えること と グラデーション」を 使うことによってどれだけリッチになれるのか、カリギュラオーバードーズのUIで比較してみます。
すみませんが、実装ワークフローと言いながら時間の都合でイラレの紹介に絞ります。
ここからはGIF動画を使って説明しています。 同じ内容をこちらのURLでご確認いただけます。 https://youtu.be/tyJH3J2NGIE
次回はアニメーションや手触りについて話せるようになると良いなと思います。
UIの基本的な作り方に触れているので、興味のある方は、 スライドシェアで検索してみてください。