「OKボタンは右か左か」問題から始まったゲーム「Factorio」のGUIデザインの工夫

by Neal Jennings

キャラクターや世界観の他にゲームで重要な点の1つに、グラフィカルユーザーインターフェース(GUI)があります。GUIとはコンピューターの操作を絵や記号などで直感的に扱えるようにデザインされたユーザーインターフェースを意味します。このGUIをどのように設計しているのか、さまざまな作業を自動化しながら工場を建設するシミュレーションゲーム「Factorio」のスタッフが公式ブログで語っています。

Friday Facts #246 - The GUI update (Part 3) | Factorio
https://www.factorio.com/blog/post/fff-246

Factorioがどういうゲームかは以前にもGIGAZINEでレビュー済み。

さまざまな作業を自動化しながら漂流した星に工場を建設＆拡張するリアルタイムシミュレーションゲーム「Factorio」 - GIGAZINE

Factorioの制作スタッフであるkovarex氏は、どんなものでも日頃からOKボタンを左、キャンセルボタンを右に配置すべきだと主張していたそうです。

しかし、PCのGUIで「OK」が左で「キャンセル」が右にくる仕様は実はWindowsだけのもの。例えば以下のmacOSでの画像を見ると分かるように、macOSとLinuxでは「キャンセル」が左で「OK」が右という仕様になっています。kovarex氏はこのことを最近初めて知って驚いたとのこと。実は、OKボタンとキャンセルボタンの位置についての論争は今に始まったことではありません。

ボタンの左右の位置ひとつとってもGUIの設定はしっかり考えなければなりません。もしOKを左に、キャンセルを右に設置したとして、Appleのユーザーがゲームをプレイすると、OKをクリックしたい時にいつものくせでキャンセルをクリックしてしまうかもしれません。kovarex氏は、Factorio独自のユーザーインターフェースをデザインすることで、「クリックするべきではないボタンを惰性でクリックしてしまった」という状況をユーザーが回避できるようにしようと考えました。

例えば以下の画像はFactorioのバージョン0.16での音設定画面。左に「Reset」ボタンがあり、右に「Back(戻る)」ボタンがあります。実際には「Back」をクリックすると、変更した設定が反映されるのですが、プレイヤーにとって「Back」ボタンが「変更を反映させるOKボタン」なのか、「変更を反映させずに前画面に戻るボタン」なのかがぱっと見て判別しづらいのが問題だとkovarex氏は考えました。

そこでバージョンアップでデザインが変更された音設定の画面が以下の画像。左に「Back」を設置し、右に「Reset」と「Confirm(承認)」を設置しました。「Back」は変更を反映させずにに前画面に戻るボタンとなり、「Confirm」をクリックすることで設定を保存して戻るようになりました。

また、ボタンのデザインも「Confirm」「Back」「Cancel」でそれぞれボタンの色・形・フォントサイズを変えています。例えば、クリックする頻度が高いであろう「Confirm」は緑色でユーザーの目を引くデザインとなっていたり、「Cancel」ボタンは注意を促すために赤色基調のデザインとなっています。それぞれのボタンは、放置状態・選択した状態・マウスカーソルがオーバーした状態・押した状態で色やデザインに変化を与えることで、ユーザーに操作が視覚的に伝わるようになっています。

また、地形を生成するマップジェネレーターの画面では、タブ表示を用いて「Resources(資源)」「Terrain(地形)」「Enemy(敵)」「Advanced(高度)」と設定項目を分けています。各項目の調整にスライドバーを使うことで、ユーザーが一目見てわかるようにデザインされています。

また、一番下の「Preview」の横には警告マークが記されています。「Preview」をクリックすると現在の設定でどんな地形ができるかが表示されるので、その様子を見ながら設定することもできるのですが、どこにどんな資源があるのかという情報はネタバレになってしまいます。そのため、ユーザーが安易に「Preview」ボタンを押さないよう警告マークが描かれているというわけです。

さらに制作スタッフは、プレビューマップに資源の量や敵の規模などの具体的な情報を表示させることで、ユーザーが一目でマップの詳細を把握できるような機能も考えているとのことです。