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