e1177t.jpg

ペルソナ5 どのようにしてP5のユーザーインターフェースは生まれたのか【ファミ通】










10月28日に九州産業大学にて行われた、コンピューターエンターテインメント開発者向けのカンファレンス“CEDEC+KYUSHU 2017”にて、『P3D』『P5D』のプロデューサーを担当している和田和久氏と、アトラス初のUI(ユーザーインターフェース)専属デザイナーであり、『ペルソナ5』ではアートディレクターとUIデザインリーダーを兼任した須藤正喜氏が登壇しました。

そのレポートがファミ通.comに掲載されましたので、一部抜粋してご紹介します。

ファミ通.com
https://www.famitsu.com/news/201711/13145540.html

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




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


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

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

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

5a011802e012b.jpg

5a011802afc12.jpg



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


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

5a011802790b7.jpg

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

5a011802ca585.jpg

5a01180284080.jpg

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

5a011802a1d11.jpg

5a0118028a613.jpg

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

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

5a011802c2883.jpg

5a011802bede7.jpg

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

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


全文はコチラ
https://www.famitsu.com/news/201711/13145540.html

全文はこれの2倍位の量になりますので、お時間がある時にでもどうぞ。




色々と考えられた末に、あのようなデザインになったんですね。デザイン先行とも思われがちですが、むしろ機能美と言ったほうが近いのかもしれません。

こうなると、P6のカラーがすごく気になってきますね!




  何かが!湧き上がってきそうだ…!



キャンバスアート ペルソナ5 273mm×220mm

関連記事
 P5santora300x250  P5kousikigashu300x250

コメント

2017年11月16日(木) 21:49
UIがショボいとやり続けるのが苦痛になる
各メーカーさんもUIにこだわってもらいたい
2017年11月16日(木) 22:28
ごちゃごちゃしてるのにスタイリッシュで今までプレイしたゲームの中で一番すげえと思うわ
2017年11月16日(木) 22:58
やる前は見づらそうって思ってたけど実際やると全然気にならなかったわ
2017年11月16日(木) 22:59
わかる
ごちゃごちゃしてるのにストレスだとか陳腐だとかそういうのにはならないんだよね
2017年11月17日(金) 00:01
5のUIが一番好き
2017年11月17日(金) 02:18
2Dイラストに移る前の一瞬の動き見たさに何度もメニュー切り替える
未だに飽きないのが凄いわ
徹底的に拘って頂いて感謝!
2017年11月17日(金) 06:35
初めてプレイしたときに何度もメニュー画面を開いて主人公のアニメーションを見ていたのは俺だけじゃないはず
2017年11月17日(金) 12:28
ゴチャゴチャしてるのに不思議と使いやすいなーとは思ってたけど、視線誘導とかいろいろ考えて作られてたからなんだな
2017年11月17日(金) 13:11
P3PのピンクやP5の赤なんて見辛いはずなのに全然そうならないとかよく練り込まれてる
2017年11月17日(金) 14:10
コアなデザイン、交渉だの合成だの弱点属性だの耐性だの…「なんだか難しそうな新規お断りRPG」ていうイメージがあったよね。
それらを打破する見事なコンセプトとセンスだったって事かな
2017年11月17日(金) 14:21
実際に操作してみたらわかるこの使いやすさ
2017年11月18日(土) 11:55
いやほんとにペルソナやってこなかった俺がP5に手を出したのも、ゲーム紹介画像のUIを見てといっても過言ではない
逆にゼノブレイド2なんかは期待の声高いんだけども、UIが微妙すぎて怖い

コメントの投稿

 作品に対する不満のコメントは不満・愚痴専用欄に投稿してください。

  また、誘導もお願いいたします。皆さんが楽しく使えるようご協力ください。
非公開コメント

 

 ※当ブログは、5ch.netの所有者Loki Technology,Inc.からコンテンツ使用許諾を得ています

 ※煽り・中傷・人格攻撃・自演などの迷惑行為は削除や規制の対象となります

  悪質な場合はホスト・IP情報をもとにプロバイダー及び所轄の警察署へ連絡致します

  他の閲覧者を不快にさせないようマナーを守ってご利用ください
   

 Sponsored Link
 関連グッズ
amazon2018dancing.jpg amazon20thperukon.jpg amazonp5maniakus.jpg amazonp5maniaxtape2.jpg amazonp5kyaraanso.jpg amazonp5ansodna1 amazonperumaga20th amazonp5anso
 
 人気記事
 リンク
RSSリンクの表示
 メールフォーム

名前:
メール:
件名:
本文:

 Sponsored Link
ペルソナ persona ペルソナ5 ペルソナ5 P5 persona5 persona5theanimation P5A p5a 女神異聞録 罪罰 ペルソナ3 ペルソナ3 persona3 P3 P3F P3P P3M ペルソナ4 ペルソナ4 persona4 P4 P4G P4A P4GA personaQ PQ PQ2 最新情報 攻略 まとめ ブログ 2ch 5ch 評判 感想 雨宮蓮 来栖暁 福山潤 高巻杏 水樹奈々 佐倉双葉 悠木碧 新島真 佐藤利奈 奥村春 戸松遥 明智吾郎 保志総一朗 喜多川祐介 杉田智和 坂本竜司 宮野真守 モルガナ 大谷育江 ジョーカー アルセーヌ カルメン キャプテンキッド ゴエモン ミラディ ヨハンナ ネクロノミコン ゾロ 鳴上悠 番長 結城理 キタロー 足立透 キャベツ 東郷一二三 武見妙 川上貞代 べっきぃ 新島冴 どうなの イゴール ベルベットルーム カロリーヌ ジュスティーヌ コープ パレス メメントス 女神転生 メガテン アバチュ ライドウ アトラス ATLUS 真エンド アバチュ ライドウ D2メガテン ペルソナまとめサイト ペルソナ5まとめサイト