ゲームトップ > ニュース・Q&A > ニュース > 『ペルソナ5』のカッコよすぎるUIの制作工程を紹介! アトラスの危機から生まれ、やがて特徴となったUIができるまで【CEDEC+KYUSHU 2017】
ここから本文です

ニュース詳細

配信日時:2017年11月13日 20時01分

PS4 PS3

『ペルソナ5』のカッコよすぎるUIの制作工程を紹介! アトラスの危機から生まれ、やがて特徴となったUIができるまで【CEDEC+KYUSHU 2017】

 2017年10月28日、福岡県の九州産業大学にて、コンピューターエンターテインメント開発者向けのカンファレンス“CEDEC+KYUSHU 2017”が開催。本記事では、同カンファレンスにて行われたセッション“ペルソナシリーズにおけるUIクリエイティブの手法 ~ペルソナ5のUI事例~”のリポートをお届けする。

 本セッションに登壇したのは、アトラスの和田和久氏と須藤正喜氏。和田氏はデザイナーとして入社後、さまざまな作品に携わり、現在は『ペルソナ』チームを統括しつつ、『ペルソナ3 ダンシング・ムーンナイト』、『ペルソナ5 ダンシング・スターナイト』のプロデューサーを担当している。須藤氏は、アトラス初のUI(ユーザーインターフェース)専属デザイナーであり、『ペルソナ5』ではアートディレクターとUIデザインリーダーを兼任。各種イベントのデザイン監修やプロモーション、ライツデザイン監修なども行っている。

アトラス プロダクションサブマネージャー&プロデューサー&ディレクター
和田和久氏

アトラス アートディレクター&チーフデザイナー
須藤正喜氏

独特UI誕生の背景にあったのは、アトラスの危機感

 『ペルソナ5』のUIと言えば、すでにプレイした方はご存じだと思うが、スタイリッシュかつ動的で、他に類を見ないものになっている。そんなUIについて解説する本セッションにおいて、和田氏がまず紹介したのは、『ペルソナ5』の第1弾PV。1分30秒を過ぎたあたりから、独特のUIが見られる。

 PVにUIのカットをふんだんに入れ込むことは、なかなかないこと。それだけUIが、同作の大きな特徴になっていると言える。このPVを公開したとき、和田氏のもとには、「あのUIは何だ!?」と驚きの声が多数寄せられたとそうだ。

 この独自のUIは、どのように生まれたのか。和田氏は、シリーズのターニングポイントとなった『ペルソナ3』の存在が大きかったと語る。

 『ペルソナ2 罰』が発売されたのは2000年。それから6年の月日を経てリリースされることになった『ペルソナ3』は、イメージを革新すること、ライトユーザーを獲得すること(それも低予算で)がデザイン面でのミッションとなっていた。それは目標ではなく、必ず達成しないといけないものだった。

 当時は、「アトラスのゲームはおもしろいけど売れない」という状況で、コンシューマ開発部が危機に陥っていた、と和田氏。その状況を打破するため、開発費が限られているなかでも『ペルソナ3』は成功する必要があり、いままでやってこなかった、マーケティングを見据えての開発となった。

 そして導き出された方針のひとつが、UIの徹底強化。“縁の下の力持ち”だったUIを、“主張の強い主人公”に変える――それが、ピンチに陥ったアトラスが必然的に選んだ手法だったのだ。

UIの強化は、タイトルカラーの主張力の強化につながる。また、ゲームリソースをラッピングする効果、低コストでのユーザーエクスペリエンスの向上ももたらす。

作品のイメージを担うデザインと情報伝達の役目を両立するために

 ここで、語り手が和田氏から須藤氏にバトンタッチ。具体的に、UIをどのように作っていくのかを説明した。なお、須藤氏がアトラスに入ったのは18年前だが、入社当時と現在のUI作業工程はほとんど変わりがなく、使っているツールも同じ(フォトショップとイラストレーター、アフターエフェクツ)だとか。

 『ペルソナ』シリーズのUIは、作品をリードするグラフィックデザインを構築する役目と、情報伝達というUI本来の役目を両立し、“(タイトルを)価値あるゲームとしてパッケージングする”という重要なミッションを担っている、と須藤氏。そんなUIを作るうえで重要なのは、まず“色”。人間の印象に強く残るものは色であり、それゆえ、まずメインカラーを決める。そのメインカラーが決まる段階で、タイトルロゴもできており、キーフォントも決まっているのだそうだ。

 『ペルソナ3』は青、『ペルソナ4』は黄色、『ペルソナ5』は赤、『キャサリン』はショッキングピンクがメインカラー。日常でよく見かける色と形を組み合わせることで、とっかかりやすいもの、敷居の低いものにしているとのこと。

ちなみに、『キャサリン』のショッキングピンクには特色インクを使っていて、ポスターなどの印刷する際、予算との兼ね合いで苦労したとか……。

 つぎに決めるのは、サブカラー。『ペルソナ3』では、ゲーム内で重要な存在である“月齢”の黄色をサブカラーとして使い、重要な情報がわかりやすいようにした。『ペルソナ4』では多色ストライプ(物語のカギを握る“テレビ”からイメージしたもの)と、その派手さに負けない色である黒が使われている。

 ただ、『ペルソナ5』では、とにかく情熱的な赤を目立たせるため、極力サブカラーは入れないことにしたという。では、色とは違う部分で、どのようにユーザビリティを確保したのだろうか。

HPやMPの数値などを除き、サブカラーがほとんど取り入れられていない『ペルソナ5』のUI。

『ペルソナ5』のコンセプトは“ポップパンク”。ポップは“大衆志向”、パンクは“反体制”を示すものだ。

 情報認識、視線誘導を阻害せずに、ダイナミックで動的なデザインを実現するため、須藤氏が利用したもののひとつが“視線の性質”だ。人は、線を追って視線を動かす性質がある。そこで、メニュー画面を開いたとき、中央に白いラインを引いて、視線誘導の役割を与えた。

 また、下の階層に移動するときは、レイアウトやアングルを変えて、階層認識のしやすさを意識。また、重要な情報がわかりやすいよう、流動的に明度が変わるように調整。優先度の高い情報のスペースは明度が高くなり、そうでない情報のスペースは明度が低くなる仕組みになっている。

 ほか、『ペルソナ5』のUIと言えば、操作とともに動き回る3Dモデルが特徴。この3Dモデルの実装にあたっては、専用ツールを用意したそうだ。まずはフォトショップでレイアウトを作り、その後、モーションデザイナーがポーズを作成、それを専用ツールで配置。3Dモデルの動きが決まったら、その最後のポーズと極力ズレが生じないように、キメカットの2Dイラストを作る……という流れで進めていったとのこと。

ちなみにこちらは、レイアウトを試行錯誤していたときに生まれ、ボツになったUI。試しにサブカラーを入れてみたこともあった(下段中央)そうだ。

この主人公のポーズは、ハリウッドスターがパパラッチに対して「撮るな!」とカメラに向かって手を出すときのポーズをイメージしたもの。

 デザインとレイアウトが決まったら、つぎはデータの実装だ。『ペルソナ5』では、バトルやシナリオなど、それぞれのパートにUI専属のプログラマーがおり、デザイナーはプログラマーに座標指定書を渡して、データを実装してもらったのだという。その際、デザイナーはプログラマーのそばでチェックし、1ドット1フレームの調整を行ったとのこと。

少しでも容量が軽くなるように、『テトリス』のように敷き詰めたテクスチャデータ。『ペルソナ5』は、PS3とPS4という解像度の異なるプラットフォームで展開しているため、拡大縮小しても劣化しないパスデータを用意。膨大なパスデータを作るべく、アルバイトを雇ったそうだ。

▲プログラマーにイメージを説明するときは、身振り手振りを使ったり、「シャララ~ンって感じ」など、擬音で伝えたりすることもあるという。

 紙ベースで仕様書を用意して(その数、1000枚以上だとか)データを実装してもらうのは、古いやりかたかもしれない……と須藤氏。だが、デザイナーだけでUIの挙動を決めてしまうと、その人ひとりがいいと思っているものにしかならない。プログラマーの手を経て、プログラマーのアイデアが入る余地を残すことが、UIのクオリティーアップにつながるのだと語った。

 最後に、“直感的に、さりげなく誘導する”UIを今後も作っていきたい、と須藤氏は抱負を語る。その“さりげなく”の中に“遊び心”であったり“驚き”であったり……そういう意味も込めていき、UIをグラフィカルなエンターテインメントに押し上げていけたら……と述べ、セッションを締めくくった。

CEDEC+KYUSHU 2017 関連記事

『イナズマイレブン』の楽曲制作に見る、妥協のない姿勢と工夫。光田康典氏と日野晃博氏の基調講演をリポート【CEDEC+KYUSHU 2017】

“CEDEC+KYUSHU 2017”にて光田康典氏と日野晃博氏が行った基調講演、“ゲームから映画まで クロスメディアにおけるサウンド制作の極意”のリポートをお届け。

『ペルソナ5』公式サイト CEDEC+KYUSHU 2017公式サイト
本文はここまでです このページの先頭へ