セミナー

【CEDEC 2018】ヨコオタロウ氏の世界観を徹底反映させたUIの制作過程とは…ソーシャルゲームで表現するディープな世界観

2018.09.03 11:51

一般社団法人コンピュータエンターテインメント協会（CESA）は、8月22日～8月24日の期間、パシフィコ横浜にて、国内最大のゲーム開発者向けカンファレンス「コンピュータ・エンターテインメント・デベロッパーズ・カンファレンス 2018」（CEDEC 2018）を開催した。

本稿では、開催2日目の8月23日に実施された講演「ソーシャルゲームで表現するディープな世界観」についてのレポートをお届けする。

本講演では『SINoALICE -シノアリス-』をテーマに、UIデザインで特に世界観表現にこだわったポイントを解説する。

▲登壇者は、ポケラボで『SINoALICE -シノアリス-』UIディレクターを務める栗田昭氏。

▲テーマのタイトル『SINoALICE -シノアリス-』は、ヨコオタロウ氏が原作およびクリエイティブディレクターを担当するスマホ向けRPG。この講演日に、ちょうどリリース444日を迎えた。

▲UIデザイナーは、上記のような業務を担当する。

栗田氏は、シノアリスが評価された理由として、ヨコオタロウ氏の世界観をよく表現できていたからだとした。実際、シノアリスのUIにおいて世界観表現は最もこだわった部分であるという。本公演では、『SINoALICE -シノアリス-』の開発を通じて学んだUIデザインにおける世界観表現に必要なことを、ポイントを絞って紹介していく。

▲UIデザインにおける世界観表現に必要なことは、大きくは上記の2つがあると栗田氏。

上記2つのポイントのうち、まずはそのゲーム独自のデザインコンセプトについて解説が行われた。

▲デザインコンセプト決定に必要な要素。何を求められているのか、何を表現したいのかを洗い出して、コンセプトを決めたという。

▲ゲームの世界観設定。『SINoALICE -シノアリス-』は、本の世界を舞台に、童話の登場人物たちが命がけで戦うという、ダークな雰囲気を持つ。

▲作品のメインターゲットは、最初からヨコオタロウ氏のファンであるとしていた。

▲ヨコオタロウ氏が過去に携わった作品は、よく研究された。多くの作品で、やや陰鬱な世界やブラックユーモアが表現されている。また、ビジュアルイメージがスタイリッシュである。

▲原作者ヨコオタロウ氏からの要望。

上記の要素から、デザインコンセプトは「ダークでシックな古書の世界」に決定した。コンセプトが決定した後は、いよいよデザインの実践編へと突入する。

▲コンセプトを基に、デザインのルールを明確に定めておくことで、ゲームを通しての統一感が生まれる。その統一感こそが、世界観と呼ばれているものであると考えていると栗田氏。

▲画面は、グランジテイストに統一。グランジとは「汚れた」「薄汚い」「粗末な」という意味。

▲グランジテイストをUIに落とし込むと、上記のような雰囲気になる。

ヨコオタロウ氏の、ほぼすべての過去作品にグランジテイストが使われていることが、過去作の研究から明らかになっていた。そこで、本作にもグランジテイストは必要不可欠であるということになった。

▲ゲーム中でメッセージ代わりに使えるスタンプも、やや古い紙のテイストで統一している。

次に、カラーリングについて。ここは、特にヨコオタロウ氏と多くのやりとりを重ねた部分であるという。

▲FF（ファイナルファンタジー）的な色使いを避ける選択をした。

ファンタジー系ゲームのUIキーカラーに、青系の寒色を持ってくるパターンがたくさんあるため、それを避けるルールを設定したとのこと。

ある日、栗田氏がヨコオ氏と酒の席で話している時、栗田氏が「ヨコオさんの世界観はダークなものが多いですが、お好きなのですか？」と質問をしたことがあるという。ヨコオ氏の回答は、「そういうことではない」というものだった。日本でファンタジーもののゲームを作ろうとすると『ファイナルファンタジー』、『ドラゴンクエスト』という看板があり、剣や魔法やクリスタルというキーワードが溢れている。自分は、そこで勝負すべきではない……とヨコオ氏が語ったという。色使いに関しては、ヨコオ氏のこういったこだわりが強いのではないかと、栗田氏は分析した。

▲左は初期で、右が改良後。暖色メインの色使いになっている。

▲使用する色数も、初期からどんどん削っていった。

▲全画面が、ほぼベージュのバリエーションでできたUIとなった。

この色数の少なさこそが、『SINoALICE -シノアリス-』の世界観のポイントであると栗田氏は考えているという。

▲ナビキャラのギシンとアンキも、最初はもっとカラフルだった。しかし彼らもUIの一部ということで、最終的には他のUIと同色系に落ち着いた。

▲リリース後に追加実装された新機能でも、色数のルールは徹底された。

栗田氏は、もし世界観がまとまらないと悩んでいるとしたら、いったん色数を極限まで絞ってみるのもひとつの手かもしれないと、会場のクリエイターに提案した。

次に、フォントについて。『SINoALICE -シノアリス-』は、パラメータやスキルの数が多かったり、キャラクター1体1体にストーリーがあったりするなど、文章量が膨大である。

▲候補のフォント。最後は一番下の「パール」に決定した。

決定したフォントは、非常に細いものであった。しかし、『SINoALICE -シノアリス-』においては、この細さこそが良かったのだという。太いフォントを使うと、画面全体がフォントで埋め尽くされて重たく、読みづらくなってしまう。細いフォントがうまく隙間を作り、すっきりと読みやすくなった。

▲『SINoALICE -シノアリス-』のクエスト中のストーリー進行画面。パールフォントを気に入った栗田氏は、使用予定のなかったここでもパールを使用した。

▲色使い、フォント等以外のルールも細かく定められた。

最後に、メンバー内での共有について。ここまでに定めたデザインルールを、多数の画面に対して反映させていく必要がある。このような場合、複数のデザイナーが担当することになる。

▲ルール共有のため、Photoshopのライブラリ機能を活用したという。このライブラリにあるパーツ以外は使わないというルールが定められた。

画面を量産していく際に、デザイナーが独自の判断でパーツを増やしていくと、世界観の統一ができず収拾がつかなくなってしまう……という事態に陥るかもしれない。今回は、うまくルールが共有できていたため、このような事態を防ぐことができたのだ。