「Victoria 3」開発日記#30――ユーザーインターフェース

「Victoria 3」開発日記#30が公開されていましたので、その内容をご紹介。今回はユーザーインターフェースについて。本体発売前の開発日記です。

前回：開発日記#29――ユーザー体験

開発日記

開発日記#30は、ユーザーインターフェースについて。

• UIを通じてプレイヤーをVictoria 3の世界に引き込み、没入させる大きなチャンスがある。前回の開発日記で述べたように、UXチームの着目点は膨大な情報を親しみやすく、アクセスしやすいものにすることだが、UIチームは彼らと密接に連携し、すべての情報を視覚的に魅力的な方法で表示する。

アートの柱とUIとの関係

• Victoria 3のアートスタイルには、3つの核となる柱がある。こうした柱は全体のアートディレクションの指針となり、もちろんUIも含めて私たちがゲームで伝えたい感情を捉える。
• 格調高さ：UIはヴィクトリア朝時代の上流階級の奢侈品や高級品にインスピレーションを受けている。エレガントで上品な感じがするはずだ。
• ヴィンテージで牧歌的：ここでいうヴィンテージとは過去の高品質なもののことだ。ロマン主義の芸術運動はアートディレクションのインスピレーションの源だ。これは1800年代に始まり、牧歌的な過去や自然を理想とするこの運動は、私たちがUIに取り入れたいヴィンテージの感覚に合っていると思う。
• 詳細だがとっつきやすい：複雑な要素があり非常に詳細だが、控えめに使用することで雑然として圧倒されないようにしている。

UIパネル

これがUIパネルだ。金や色褪せた布の質感を持つ精巧な模様で、ヴィクトリア朝時代のの威厳とヴィンテージ感を高めている。

• UIパネルはゲーム内のすべてのUIメニュー（画面全体・ポップアップ・横）のベースや背景を構成している。マップ上にないものはUIパネル上にある。
• 私たちはパネルにアール・ヌーヴォー要素を取り入れた。アール・ヌーヴォーは主に自然や草花の自然な形や曲線にインスピレーションを得たものだ。これはアートの柱である「ヴィンテージで牧歌的」にも合致するし、1800年代の上流社会の建築に顕著に見られるスタイルだ。複雑なディテールが贅沢でエレガントな感覚を呼び起こし、これは他の2つの柱にも合致する。
• 私たちは細かい模様になりすぎないように注意を払う必要があった。そうなるとプレイヤーに情報を伝えるというUIの本分を逸脱してしまう。そのため、パネルのフレームや境界と、メニューのタイトルがあるヘッダーにディテールを集中させた。

ボタン

ボタンのエメラルドの色合いの違い。アクションボタンには細いゴールドの縁取りがあり、両者をボタンとして認識させつつ、さらに差別化している。

• ボタンはゲームやUIにおいてプレイヤーが直接操作する主要な要素だ。UXの観点からは、プレイヤーがボタンを瞬時に識別する必要がある。ボタンはナビゲーションボタン（別のUI画面へ誘導するボタン）、アクションボタン（ゲームの世界に影響を与える行動を実行するボタン）のどちらかを識別される必要がある。これを念頭に置いて、アートの柱に沿うようなボタンのテンプレートを作成した。
• 私たちは古くヴィンテージ感を出すために、ボタンのテクスチャーとして木を使用した。すべてのボタンはエメラルド色とし、アクションボタンとナビゲーションボタンを区別するために2つの色合いがある。

• UI画面には複数のボタンが配置されているものがあるが、優先順位の高いボタンがある場合、どうすれば注意を引けるだろうか？　私たちの解決策は、ボタンの縁や角にアール・ヌーヴォーの要素を加えてより「格調高い」見た目にすることだ。

アイコン

• パラドゲーにおいてアイコンはUIの重要な要素であり、もちろんVictoria 3においても変わらない。ゲーム内のアイコンはさまざまな形・サイズ・スタイル・色で、ゲーム内のさまざまなもの・機能・統計・能力を表現するのに使用される。ここではさまざまなアイコンの使い道を紹介する。

建造物と商品

• このグループのアイコンはゲーム内でもっとも視覚的で詳細なものだ。これはゲームの世界で実際に存在するものを表現している。こうしたアイコンはミニイラストのようなもので、プレイヤーの没入感を高め、想像力を刺激すること主な目的としている。

イベント・技術・Popグループ

• 技術やイベントのアイコンは現実世界にあるものや、複数のものを使って表現することにした。こうしたアイコンのほとんどはアイコンとしてかなり大きいため、没入感を高めるためかなり細かくリアルに描画することにした。ダイナマイトのような技術は直接的だが、イベント「抗議（Protest）」では拡声器を持った手のように、象徴的なものを使っている。

• Popグループは素晴らしいキャラクターモデルとアイコンで表現される。キャラクターモデルは縮小すると見にくくなるので、アイコンで補助している。Popアイコンのデザインにも同じガイドラインが適用され、例えば、「機械工（Machinists）」はスパナで表現される。

大隊はさまざまなUI画面でさまざまな大きさで登場する。

• 最後のグループはゲームの仕組み、カテゴリー、能力を表現するものだ。こうしたアイコンは複数の異なるUI画面で表示されることが多く、（アイコンとしては）それほど大きくないし、さまざまなサイズで表示する必要もあり、多くは小さくても認識できる必要がある。そのため、アイコンのディテールを大幅に減らし、少ない色とシルエットに注力している。

• また、こうしたアイコンを色分けすることで、より分かりやすくできる。例えば、いい状態のアイコンは緑、悪い状態のアイコンは赤にしている。

• 利益集団（Interest Groups）アイコンは色分けがより複雑な例だ。プレイヤーはアイコンのサブカテゴリーごとの色分けをすぐに覚えて理解しないかもしれないが、時間が経つにつれてよりわかりやすく識別しやすくなるはずだ。他の例として「レンズ」カテゴリーのアイコンがある。

チュートリアル

• 私たちはツールチップ、テキストによる説明、解説画像を組み合わせることで、ゲームの仕組みをよりよく視覚化できると考えている。ネット上で見かける解説画像の多く（Googleで検索してみてほしい）は綺麗で定型化され、非常に現代的な見た目をしているが、私たちはヴィクトリア朝時代により適するものがあると思う。これは間違いなく没入感を高める領域であり、もちろん、私たちのアートの柱を強化するものでもある。私たちはヴィクトリア朝時代新聞挿絵や設計図のイラストからインスピレーションを得て、解説画像に取り入れた。さらに、古びた紙の背景に画像を重ねている。

来週はジャーナルの項目について。

次回：開発日記#31――ジャーナルの記事