2019年11月23日、福岡県・福岡市で開催された技術カンファレンス“CEDEC+KYUSHU 2019”より、スマートフォン向けバトルファンタジーRPG『SINoALICE（シノアリス）』の開発を手がけるポケラボのUI（ユーザーインターフェイス）ディレクター栗田昭氏が登壇したセッション、“シノアリスの世界観を表現するためのデザインとは -ver.2.0-”の模様をお伝えしよう。
なお、『SINoALICE（シノアリス）』のシナリオ＆クリエイティブディレクターを担当しているヨコオタロウ氏は“CEDEC+KYUSHU 2019”の基調講演に登壇して、自身のゲームディレクションの考えかたなどを語っている。
以下の基調講演の記事とこの記事をあわせて読めばより見えてくるものがあると思うので、ぜひ両方をご覧頂きたい。
“デザインルールを決める＝世界観表現を決める”ということ。ヨコオタロウ氏の世界を表現するため試行錯誤の連続！
栗田氏が取り組んだのは、UIなどのデザインで、ヨコオタロウ氏が手掛けたゲームの魅力や、ヨコオ氏の世界観を『SINoALICE（シノアリス）』でも表現するというものだ。
そもそも『SINoALICE（シノアリス）』の開発コンセプトには“ヨコオタロウの世界観＋ポケラボのGvG（ギルドvsギルド）”というものがあり、ヨコオタロウ氏の世界観を表現することが当初からメインとしてあった。
また、ヨコオ氏からはデザインの参考にと提示されたのは、ゲームではミストウォーカーが開発・運営しているゲームアプリ『テラバトル（TERRA BATTLE）』と、トレジャーが製作した縦スクロールシューティングゲームの『斑鳩』。
とくに『斑鳩』の色使いやタイプグラフィーなテキストの見せかたをご存じの人だと、『SINoALICE（シノアリス）』のビジュアルに通じるものを感じるかもしれない。
さらにヨコオ氏から提案されたデザインの方向性は“ゴシック／モード系（シック）”、“すっきりUI”、“ごてごて、ビカビカしたソーシャルゲームテイストはNG”というものだったそうだ。
これを受けて栗田氏は、まずヨコオタロウ氏の過去作品を研究。『ドラッグ オン ドラグーン』シリーズ（特に『3』）や、『NieR』シリーズ（とくに『NieR Gestalt（ニーア ゲシュタルト）』）から、共通するデザインの要素を取り出していったという。
そこから考えられたデザインコンセプトは“ダークでシックな古書の世界”だ。
このコンセプトに沿って、まずビジュアルテイストという画面の質感を“グランジテイスト”で統一。グランジとはロックバンドの“ニルヴァーナ”などに代表されるグランジロックという音楽ジャンルなどで知られるが、言葉そのものの意味は“汚れた・薄汚い”というもの。
ヨコオ氏の作品にはグランジテイストが使われていると気づいた栗田氏は、『SINoALICE（シノアリス）』でもすべての画面にザラザラと汚れの見える紙のようなグランジテイストを適用していった。
続いてはカラーリングのルール。『SINoALICE（シノアリス）』では、王道ファンタジーによく見られる青系の色を使うことを避けたという。
栗田氏がヨコオ氏と最初に話し合ったときに「ヨコオさんのゲームには残酷な表現やストーリーがありますけど、そういうものがお好きなんですか？」と質問したという。
するとヨコオ氏からは「別にそういうわけではなくて、僕の世代ではすでにRPGというと『ドラゴンクエスト』や『ファイナルファンタジー』が王道としてあったから、それとは違うものを考えていった結果なんです」と教えてくれたという。
その“王道とは差別化すべき”という考え方はカラーリングにも生きており、開発当初で青系の色を多彩に使っていた『SINoALICE（シノアリス）』の画面を見たヨコオ氏は「『ファイナルファンタジー』っぽいですね」とひと言。これを受けて栗田氏は色数をどんどん削っていったそうだ。
最終的に、全部の画面がほぼくすんだ白から黄土色や茶色といったベージュのバリエーションの色だけに。唯一、濃い色のもので暗めの赤を使っているが、これはむしろアクセントになり映えてくれてよかったということだ。
というわけで、グランジテイストにベージュのバリエーションという、じつに色味の少ないデザインになり、それが『SINoALICE（シノアリス）』で画面を作るときのデザインルールとなった。
たが、例外として、バナーとアイコンだけは視認性を高くし、差し色として鮮やかな色を使うことにしたそうだ。
ヨコオタロウ氏の作品といえば“テキストで物語を伝える”ことが多いのも特徴。『SINoALICE（シノアリス）』でもメインストーリーやウェポンストーリーなどテキストを表示する量が多い。
ヨコオ氏のテイストを出すために“フォント”も重要と考えた栗田氏は、使用するフォントについてじっくり吟味。
栗田氏はそれ以前は太くくっきりとしたフォントを好んでいて視認性も高いと考えていたそうだが、それでは主張が強すぎてヨコオ氏の書くテイストには合わない。そこで細くすっきりとしたフォントの“パール”を選んだそうだ。
また、メインストーリーではフォントを複数使った文字組みにして、いわゆるタイポグラフィー風の見せ方をしたいとヨコオ氏から提案があったという。そこで、基本のフォントを“パール”、一部大きく見せるフォントには“明朝体”を使って、メリハリのある見せ方に仕上げたということだ。
画面レイアウトはヨコオ氏の要望であった“すっきりUI”を心がけて、要素を格子状に並べるグリッドレイアウトを採用。
バトル画面でも、それまでポケラボが作ったアプリでは定番だったという通常攻撃ボタンを廃止してエネミーをタップする操作に変えて、外観をすっきりさせた。
また、こうしたデザインを構成するパーツは全てPhotoshopのCCライブラリ機能で共有。デザイン面の制作において、これ以外のパーツを使わないというルールにしているという。
開発の効率をよくするとともに、デザイン素材が勝手に作られて統一感が損なわれることがないようにしているわけだ。
こうして作られた『SINoALICE（シノアリス）』がサービスを開始してから約2年が経って、その間にはいろいろなイベント展開や機能の拡張などがあったが、世界観を保つためにこのデザインルールを守り続けている。
イベントやガチャで表示バナーは、前述のようにカラーリングのルールからは例外的に多彩な色を使ってはいるものの、載せる情報は最低限のものにしているという。栗田氏はバナーもアートの一部として考えていて、あまり詰め込みすぎないようにしてほかのデザインとの融和を意識しているということだ。
いわゆるコラボイベントとなるとコラボ先のゲームやタイトル、それぞれのIP（知的財産）が持つイメージもあるが、そこもコラボ先のテイストを取り入れつつも、色味の明度や彩度を落とすなどして『SINoALICE（シノアリス）』に近づけているという。
キャラクターも『SINoALICE（シノアリス）』のキャラクターと並んでも違和感がないようにデザインし直しているそうだ。コラボの際には“コラボ作品も『SINoALICE（シノアリス）』の世界の一部”として扱ってデザインラインを揃えているということだ。
一方で、このデザインルールにも納まらないイベントもある。社内撮影した写真を素材にするなどの“掟破り系イベント”だ。
そうした企画の際には栗田氏はデザインルールは考えずに、むしろ豪快にルールを破っていくべきと考えているそうで「あえてわかりやすくルール違反な企画を出していくのもある意味で『SINoALICE（シノアリス）』の世界観と言えるのでは」と語った。
新機能を作るときの開発工程も紹介。紹介されたのは最近に導入された“すごろくイベント”ができるまでの工程だ。
開発期間は約2ヵ月とかなり短かったそうで、開発メンバーはエンジニア6人、プランナー1人、イラストレーター3人、エフェクトアーティスト1人、サウンドクリエーター1人、そしてデザイナーが栗田氏1人となる。
デザインのコンセプトが“ギシンとアンキがオーナーのカジノ”に決定。カジノ街なので本来ならきらびやかなビジュアルにするところだが、そこはデザインルールを考えて色数を抑えたシックな装いにまとめた。天国と地獄という要素から“豪遊モード”と“暴落モード”の2種類の画面を作ったが、とくに暴落モードの方はグランジテイストの薄汚れた感じを強めたという。
イラストレーターやエフェクトアーティストに発注をして制作してもらうのだが、そちらにも同様に、“色数を増やしすぎていないか”や“グランジテイストを入れているか”などのデザインルールに基づいた監修を行っていく。
そうして素材が出揃って組み上がったあとには、時間が許す限りテストプレイを実施。
とくにテンポ感を重視しつつ、演出の増減や画面のトーンの調整など、ブラッシュアップを行ってリリースへと進めていくというわけだ。
開発初期からリリース後の運用、そして現在に至るまで、“ヨコオ氏の世界観を表現するためのデザインルール”を意識して取り組み続けている栗田氏。
「世界観の表現にはデザインルールが欠かせない」として、そのルールは常識に囚われず自由な発想で作った方がいいと感じているそうだ。
“ゲームのUIはこうあるべき”というような考えも必要ではあるが、それよりも“どんな世界をユーザーに見せたいのか”を考えてデザインルールを作ることがいいのでは、と講演を締めくくった。
