CEDEC2023｜『コードギアス 反逆のルルーシュ ロストストーリーズ』 IPタイトルの世界観を崩さない為の UI/UXデザインの進め方

2023年8月23日（水）〜25日（金）に開催された「コンピュータエンターテインメントデベロッパーズカンファレンス2023」、通称「CEDEC」で当社のUI/UXデザイナーが登壇した資料です。

▍f4samuraiの参考リンク
HP（https://www.f4samurai.jp/）
リクルートサイト（https://recruit.f4samurai.jp/）
note（https://note.com/f4samurai）
X（https://twitter.com/f4samurai）
Facebook（https://www.facebook.com/f4samurai）

Transcript

1. IPタイトルの世界観を崩さない為の UI/UXデザインの進め方 『コードギアス 反逆のルルーシュ ロストストーリーズ』 株式会社f4samurai UIデザイナーチームリーダー 松久保直樹
2. アジェンダ はじめに 自己紹介 コードギアス 反逆のルルーシュについて IPタイトルにおける[UIデザイン] IPタイトルにおける[UXデザイン] その他デザインの制作事例 ファンの反応 まとめ
3. はじめに 自己紹介 コードギアス 反逆のルルーシュについて IPタイトルにおける[UIデザイン] IPタイトルにおける[UXデザイン] その他デザインの制作事例 ファンの反応 まとめ アジェンダ
4. 松久保 直樹 株式会社f4samurai UIデザイナーチームリーダー 主な担当タイトル ・アイドルマスター SideM ・シンエンレジスト ・アークザラッド R ・ディズニー ツイステッドワンダーランド ・コードギアス 反逆のルルーシュ ロストストーリーズ 2019年入社
5. はじめに 自己紹介 コードギアス 反逆のルルーシュについて IPタイトルにおける[UIデザイン] IPタイトルにおける[UXデザイン] その他デザインの制作事例 ファンの反応 まとめ アジェンダ
6. コードギアス 反逆のルルーシュ サンライズ制作のアニメ作品。 2006年に1期、2008年に2期がTBS系列で放映され人気を博す。 その後、劇場版やコミック、小説、舞台など様々な展開を見せる。 2021年には15周年を記念した再放送もされ、 今なお色褪せない大人気IPタイトル。
7. コードギアス 反逆のルルーシュ ロストストーリーズ 『コードギアス 反逆のルルーシュ』の世界を 新たな主人公の視点で楽しめるスマートフォン・PC向けゲーム。 リアルタイムで進行する戦略性の高いバトルシステム。 アドベンチャーパートでは Live2Dのキャラクターたちがキメ細やかに動き、 バトルシーンにおけるナイトメアフレームは迫力の3Dで再現。
8. IPタイトルをゲーム化する際にUI/UXデザイナーが 意識すべきことをお伝えします 本セッションでは、『コードギアス 反逆のルルーシュ ロストストーリーズ』を題材に
9. アジェンダ はじめに 自己紹介 コードギアス 反逆のルルーシュについて IPタイトルにおける[UIデザイン] IPタイトルにおける[UXデザイン] その他デザインの制作事例 ファンの反応 まとめ
10. IPタイトルにおける[UIデザイン]で 大事なポイントは… 流行りのUIデザインには流されないこと！
11. [ 競合タイトルを参考に制作した案 ] 奥行き感のあるデジタル案 UIデザインを制作する際に競合タイトルを調査して、 流行りを参考にすることはもちろん大切 奥行き感のあるフラット案 やや立体的な透明感のあるフラット案
12. しかし、IPタイトルを扱う上で、 流行りのUIを意図なく参考にするのは正しいことなのだろうか...？ 参考にして真似るのは楽だし簡単...
13. そもそも自分たちが作っているものは、 原作があるIPタイトルのゲームだよね？ 流行りのゲームを作りたいわけじゃないよね？ IPを好きな人（ファン）が楽しめるゲームを作らないと 受け入れてもらえないよね？ UIデザイナーとして、出来ることは何だろう？ まずは、IPの世界観に沿ったUIを作らないといけないよね？ UIデザイナー ファン こんなゲーム、 私の知っている 〇〇じゃない！
14. UIデザインは、 そのIPらしさを表現することを最優先にすべきだよね！ UIデザイナー
15. 流行りのUIデザインに囚われず、 IPらしさを表現するためには... そのIPのアニメ、グッズ、他ゲームなどの デザイン傾向を調査する ２ そのIPを誰よりも熟知している版元さまの 意見をヒアリングする １
16. そのIPを誰よりも熟知している版元さまの意見をヒアリングする １ ＜ その理由は... IPに関する情報の量と質に圧倒的な差があるから 情報 情報 情報 情報 情報 版元さま 情報 ゲーム開発メンバー 情報 情報 情報 情報 この がIPらしいUIデザインのヒントに！
17. [UIデザインの方向性を探るための叩き案] そのIPを誰よりも熟知している版元さまの意見をヒアリングする １ 黒の騎士団アジト風 ブリタニア軍基地風 貴族風
18. [ヒアリング結果] そのIPを誰よりも熟知している版元さまの意見をヒアリングする １ ・コードギアスの世界観は、汚れなどないイメージ ・雰囲気をあまり暗くしたくない ・ロスストの主人公は、色々な勢力に所属するので、 どちらか一方を連想させるデザインは避けたい
19. そのIPのアニメ、グッズ、他ゲームなどのデザイン傾向を調査する ２ ファン その理由は... 版元さまが世に出して良いとOKしたものだから OK！ 版元さま ⇒ これらの デザイン傾向がIPらしいUIデザインのヒントに！
20. [アニメ／グッズ／他ゲームを徹底調査] そのIPのアニメ、グッズ、他ゲームなどのデザイン傾向を調査する ２
21. そのIPのアニメ、グッズ、他ゲームなどのデザイン傾向を調査する ２ [調査結果] ・紫が象徴的に使われていることが多い ・金の文字や金の装飾を目にすることが多い ・英数字は、ほぼ明朝体のフォント ・ハニカム表現 etc...
22. コードギアスを想起させる要素を散りばめる カラー ロスストが導き出した UIデザインの方向性（コンセプト）は... シンプルなフラットデザイン キャラクター、ナイトメアフレームとの親和性 フォント 形状 その他
23. ロスストの最終UIデザイン ・ホーム ・ホーム（イラストver.） ・バトルリザルト ・ユニット詳細 ・ローディング
24. キャラクター、ナイトメアフレームとの親和性 シンプルなフラットデザイン キャラが際立つように 過度なグラデーションや立体感を避け、 色味も「黒ベース」で抑え目にする どのキャラや背景と組み合わせても UIの主張が強くなり過ぎないように注意する ホームでは、KMFがしっかり見えるように UIは上下左右に寄せる
25. カラー コードギアスを想起させる要素を散りばめる コードギアスの象徴とも言える ゼロ（ルルーシュ）の衣装からカラーを抽出 メインはグッズ等でも多用されていた「紫」、 次の行動を促したい重要箇所には「赤」を採用 ・メイン／サブカラー
26. フォント コードギアスを想起させる要素を散りばめる 目立たせたい文字は「明朝」や「金色」を使用、 そのルールを徹底して統一感を図る システムフォントのゴシックは、 アニメで使用された文字と似た書体を選定 ・アニメの文字 ・ゲームの文字
27. 形状 コードギアスを想起させる要素を散りばめる アイコンや重要なボタンは「ハニカム」を踏襲 可愛らしい印象にならないよう角丸は避け、 その他のボタンも左上と右下を欠けさせて ハニカムの角度に合わせた斜めの形状に統一 ・ボタン（ハニカム） ・ボタン（その他）
28. その他 コードギアスを想起させる要素を散りばめる アニメの場面写や映像、イラスト、 ナイトメアフレームなど、 直感的に「コードギアスだと分かる要素」も 随所に盛り込む ゲーム開始時のダウンロード画面の背景は1期オープニングの ルルーシュが夕日を背に登場する有名なシーン ゲームとアニメの始まりの印象を合わせる狙い
29. ー まとめ ー 流行りに流されず、 そのIPらしさを構成する要素を調べ上げ、 UIデザインに落とし込むことが重要！ IPタイトルにおける[UIデザイン]は...
30. アジェンダ はじめに 自己紹介 コードギアス 反逆のルルーシュについて IPタイトルにおける[UIデザイン] IPタイトルにおける[UXデザイン] その他デザインの制作事例 ファンの反応 まとめ
31. IPタイトルにおける[UXデザイン]で 大事なポイントは... UXデザインは原作準拠に徹すること！
32. 突然ですが、 この2つの演出を見比べて気付くことはありますか？
33. 「カートリッジの射出がありません」 ファン
34. ・プロモ用 ・ゲーム用 ・アニメ 紅蓮弐式は輻射波動を使用後はカートリッジを射出する ファンの方の指摘で修正
35. この事例から分かる通り... ファンはすぐに違和感を察知する ファンそれぞれにIPに対する思い出や感情があるので、 それらを捻じ曲げるような体験を与えてしまうことは、 IPのゲームとして避けないといけないよね？ ゲームを通して得られる体験は、 過去、ファンがそのIPタイトルを通して得た体験と 可能な限り近づけないといけないよね？ このゲーム、 〇〇って名前だけで、 中身は全然違う！ UIデザイナー ファン
36. UX＝ユーザー体験は、 ファンが感じていた懐かしく楽しい感情を蘇らせて ワクワク感を与えるために、 原作準拠であることが大前提だよね！ UIデザイナー
37. 原作準拠に拘った演出を いくつかご紹介... スカウト 3 バトル １ ADV 2 KMFスキル 4
38. ナイトメアフレームのHUD、破壊音などのSE バトル １ アニメ
39. ナイトメアフレームのHUD、破壊音などのSE バトル １ ゲーム ・敵の進路演出 ・敵の拠点演出 ・自部隊の登場演出 ・ボスの登場演出 ・KMFの出撃演出 ・KMFの撃破演出
40. ADV 2 アニメ TV中継画面など、アニメ内のストーリー演出
41. ゲーム ADV 2 TV中継画面など、アニメ内のストーリー演出 ・0話の冒頭演出 ・章のタイトル演出 ・ゼロのマスク内の演出 ・テレビ演出 ・モニター演出 ・To Be Continue 演出
42. 赤黒のチェス盤、ルルーシュの確定演出の台詞 スカウト 3 アニメ／グッズ
43. ゲーム 赤黒のチェス盤、ルルーシュの確定演出の台詞 スカウト 3 ・チェスの盤面 ・椅子（銀） ・椅子（金） ・チェスの駒
44. ゲーム（台詞） 赤黒のチェス盤、ルルーシュの確定演出の台詞 スカウト 3 ★2以上「これでチェックだ」 ★3以上「条件は全てクリアされた」 ★4確定「王様から動かないと、部下がついてこないだろう？」 ★4確定「すでにチェックメイトだ」 ・ルルーシュ（学生服） ・ルルーシュ（ゼロ）
45. アニメを踏襲した迫力の3D演出 KMFスキル 4 アニメ
46. ゲーム アニメを踏襲した迫力の3D演出 KMFスキル 4 ・グロースター（コーネリア機）のKMFスキル ・ガウェインのKMFスキル
47. ー まとめ ー IPタイトルにおける[UXデザイン]は... 原作を常にリスペクトし、再現方法を模索して、 そのIPでファンが感じていた体験を ゲームでも提供することが重要！
48. アジェンダ はじめに 自己紹介 コードギアス 反逆のルルーシュについて IPタイトルにおける[UIデザイン] IPタイトルにおける[UXデザイン] その他デザインの制作事例 ファンの反応 まとめ
49. おまけ程度に その他の制作物の事例もご紹介... キービジュアル ２ ゲームロゴ １
50. ゲームロゴ １ 旧版を改修するにあたって、今までのコードギアスシリーズのロゴを参考に、 IPとしての統一感を意識した案を作成 [旧版] [新版／初稿]
51. ゲームロゴ １ [制作過程でのFB] ・ロスストは、コードギアスシリーズの幅を広げることを コンセプトにしていない ・ルルーシュが生きている時代と舞台、設定の深さを増すことを コンセプトにしているので方向性が違う
52. ゲームロゴ １ FBでのご意見を参考に、 「反逆のルルーシュ」との親和性を重視したロゴに調整 [最終稿]
53. キービジュアル 2 [旧版] [新版／構成案] 旧版を改修するにあたって、劇場版などを参考にしつつ、 ロボットものでよく見られる3レイヤーでの構成として、 主人公を取り巻く構図がより分かりやすくなるよう練り直す
54. ・「コードギアス 反逆のルルーシュ」で メインアニメーターを務めた千羽由利子さんと ナイトメアフレームデザインを務めた中田栄治さんが キービジュアルの担当になった キービジュアル 2 [制作過程でのFB]
55. 描き下ろしのキービジュアルにファンも開発陣も大興奮 当時のスタッフに関わっていただくことは、IPのゲーム化にとって重要な要素 [最終稿] キービジュアル 2
56. アジェンダ はじめに 自己紹介 コードギアス 反逆のルルーシュについて IPタイトルにおける[UIデザイン] IPタイトルにおける[UXデザイン] その他デザインの制作事例 ファンの反応 まとめ
57. ロスストは紆余曲折ありながら、 2022年5月17日に無事にリリース... 実際、ファンの反応はどうだったのか？
58. 「コードギアスへの愛を感じる！」 ファン
59. 特に反響が大きかったのは、 スタートダッシュログインボーナス 印子ちゃんに合わせて専用の背景を制作 スタンプも専用の演出に変更 ゲーム アニメ
60. 初動も予想以上の結果に 22年5月（リリース月） 勿論、コードギアスの元々の人気や、 UI/UXだけでなく他セクションの開発陣の拘りもあってこそ 22年7月（過去最高月） ・総合7位 ・総合5位 ・ゲーム5位 ・ゲーム3位
61. アジェンダ はじめに 自己紹介 コードギアス 反逆のルルーシュについて IPタイトルにおける[UIデザイン] IPタイトルにおける[UXデザイン] その他デザインの制作事例 ファンの反応 まとめ
62. ー まとめ ➊ ー IPタイトルにおける[UIデザイン]は... 流行りのUIデザインには流されないこと！ そのIPらしさをUIに落とし込むために最善の手法を模索し、 それを徹底することが大切
63. ー まとめ ➋ ー IPタイトルにおける[UXデザイン]は... UXデザインは原作準拠に徹すること！ そのIPをリスペクトし、再現方法を模索して、 ファンが当時感じていた体験を再び届けることが大切
64. IPタイトルのゲーム化に関わる際は、 『原作を熟知するための努力』が最も重要！ 流行りや新しい体験をゲームに盛り込む場合は、 この根底を忘れないことが大切
65. ご清聴ありがとうございました！