わがままアリスと百日戦争 制作手記 グラフィック編 ~その1

この記事はフリーゲーム「わがままアリスと百日戦争」の制作秘話をだらだらと書いたものです。
・ネタバレ上等
・ゲーム遊んだよ!
という方向けの内容なので、その点をご承知ください。

はじめに

本記事のグラフィック編では、この5つの項目について、制作手法などを書いていこうと思います。
第一回の今回はUIデザインについてです。

・UIデザイン
・背景
・立ち絵&イベント絵(キャラクタービジュアル)
・戦闘用のドット絵
・戦闘用のエフェクト

UIデザイン

アリ百におけるUIの役割はとても重要でした。
戦略シミュレーションというゲーム性のため、
ゲーム中のほとんどの操作が、ボタンやスクロールビューといった、
UIオブジェクトの操作で完結するのです。

そのため、UIは完成までに最も修正を入れた部分になりました。

フィールド画面

初期デザイン

f:id:chicchi0531:20171013021816p:plain

プロジェクト開始時に、まずはフィールド画面の試作に取り掛かりました。
まず作った初期案は上の画像です。ラフ状態のマップイラストはともかくとして、
UIのパーツも配置も製品版とは大違いです。
このようなテスト画面を、仕様がしっかり固まるまでにまず仮配置としておいていました。

そして、しっかり仕様が固まり始めたころ、f:id:chicchi0531:20171013023923p:plain
このような現在に近いデザインになりました。

このときのデザインは体験版のものです。
体験版から得られたフィードバック、

・メニューの開き方がわからない、というかメニューの存在にすら気付かない
(左下に操作が書いてあるがユーザーはそんなもの見ないのだ!)
・どれが味方の領地で、どれが敵の領地なのかわからない
・どこに攻め込めるのかわからない

を反映し、最終的に完成したUIがこちら。

最終デザイン

f:id:chicchi0531:20171013024610p:plain

・メニューを開きやすくするため、上にメニューバーを設置、おまけで全体表示などの機能も追加
・どれが味方領地、敵領地かわかりづらい問題には、ポップアップアイコンを付けることで対処
・このポップアップアイコン追加で、フィールドの探索要素を明示化できることに気付いたため、本来メニューバーに合った町へ行く機能を、フィールド上に点在する町エリアへ分散。ゲームが進むごとに、より強い武器や防具が手に入る店へ遭遇するという、RPG的要素が誕生、侵略がより楽しくなる一因になった
・このポップアップアイコンの問題として、ノートPCなどではアイコンが小さく文字が見えないという問題があったため、マウスホイールで拡縮できるようなおまけ操作も実装した
・拡縮機能は結果的にポップアップの見やすさだけではなく、マップ全体の広さをユーザーに印象付ける役割も果たしてくれた

このようにフィードバックを受け、体験版からさらにあそびやすく、わかりやすいUIを実現できました。

戦闘編成画面

初期デザイン

f:id:chicchi0531:20171013022953p:plain

初期案ではこんな感じでした。
操作も現在とは違い、ユニットリストからドラッグアンドドロップで、出撃リストへ入れるような方式でした。

ドラッグアンドドロップ自体はあまり悪くなく、むしろ直感的でいいアイディアのように思えますが、
このUIの問題点は、まず第一に配置でした。
出撃ボタンが右側にあるにもかかわらず、出撃リストは左にあるのです。
ユーザーは右にあるユニットリストから、左にある出撃リストへ、
「右から左」への操作を要求された後、再び右の出撃ボタンへ動かなければなりません。

ユーザーの操作の導線を考えたときに、このUIはとても不親切でした。
さらに、画像のD&Dは戦略シミュレーションというゲーム性には適さないことがわかりました。
戦略シミュレーションは、RPGやアクションゲームに比べて、意識すべきパラメータが多いのです。
そのため、多くのパラメータを表示させる必要があり、ユニットのイラストをD&Dするような形状のUIでは情報が収まり切りませんでした。

そこで完成した最終デザインがこちらです。

最終デザイン

f:id:chicchi0531:20171013030343p:plain

ユーザーの導線を考え、ユニット→カード→出撃ボタン
と自然にクリックできるよう、左から右への配置へ変更しました。
さらに、リスト形式にすることでより多くの情報を表示できるようになり、
見た目がさみしいのを防ぐため、上半分にはユニットのドットとステータスが表示されるディスプレイスペースを設けました。

操作においても小さな工夫があります。
本ゲームでは、出撃時にユニットとカード、両方を同時にセットする必要があります。
そのため、ユニットとカードを間違えて配置し、外したくなった時の操作を工夫しなければなりませんでした。

はず初めに考えた、右クリックで「外す」という操作はとても直観的でした。
ただ、その外す順は、ユニット優先、カード優先、ごちゃまぜで後にセットしたもの優先、と、いろいろ考えられました。
試行錯誤の結果、ユニットもカードも平等に、後にセットしたものから外していく、という処理になりました。

しかし、これだけでは、例えば最後から2番目にセットしたものを変えたいときに、直近にセットしたものを外さなければならなくなります。
これは1つの操作のために2クリックが必要となり、とてもストレスです。

そこで、右上に特定のユニット、もしくはカードを外すことができるUIを用意しました。
これにより、右クリック連打で大雑把に外すこともできるし、右上のアイコンから、選んで外すこともできる、
柔軟なUIとなりました。

メニュー画面

最後にメニュー画面の改善を紹介します。

初期デザイン

f:id:chicchi0531:20171013022818p:plain

メニューのUIは実装が遅かったのもあり、体験版のものが初稿となりました。
体験版では、プレイできる範囲が狭く、ユニット数も少なかったため、
このUIでも何とかなっていたのですが、
製品版ではそうはいきませんでした。
大きく問題となったのが

・ユニットの増加によるレベルアップ、兵数回復のめんどくささ
・ユニットが増えすぎて、使わないユニットがどんどんたまっていく

ということでした。

その後も細かい点で、プレイ中にストレスを感じることがあり、
手を入れまくって最終的に完成したのがこちら。

最終デザイン

f:id:chicchi0531:20171013032340p:plain

改善点として、以下のようなものが挙げられます。

・レベルアップ等のめんどくささをなくすため、リスト上部に「まとめてボタン」を設置。全ユニットに対して、一括でレベルアップ、兵数回復などが行えるように
・種族が漢字一文字でダサかったのでアイコンに変更
・強さの指標となるレベルが表示されていなかったので、表示にレベルを追加
・ユニットがどんどんたまっていく問題を解決するため、解雇ボタンを設置。解雇すると換金アイテムがもらえるというユーザーへの誘惑も用意し、積極的な解雇を狙う設計に
・リスト上部に並び替えボタンを設置。これにより、レベル順や、種族別といった並びに変更することができるようになった
・装備ボタンを追加(これは体験版に装備機能がなかっただけ)
・レベルアップなどのウィンドウをキャラのステータスウィンドウに被らないよう、右に移動(見た目にバランスが悪かった)

非常に細かい改善が多いです。
メニューが結果的に最も手を入れた場所になりました。

おわりに

今回取り上げた問題は、戦略シミュレーションだけではなく、
多くのゲームのUI設計でも起こりうる問題だと感じます。

いわゆるUXを考慮したUIの設計は、ゲーム制作においての永遠の課題です。

ユーザーのフィードバックと真摯に向き合い、
ユーザビリティを追求したUI設計を行いたいと日々思うばかりです。

次回は背景やイメージボードなどについて書こうと思います。
見ていただいてありがとうございました。