GUIの配色

GUIとは

GUIとはGraphical User Interfaceの略で、 アイコンをタッチまたはマウスで押したりして操作する環境のことを指します。

それに対してプチコンのDIRECTモードで「LOAD"RPG"」とか入力して操作する環境を CUI(Character User Interface)というそうです。

また、スマホとかでピッチアウトして画像を拡大するなどの 直感的に操作する環境を(UIに対して)特にUXとか言うそうです。 どうでもいいですけれど、 高校1年の情報のテストで、正答率が一番低い問題の答えがGUIです。

配色ミス

UXは作るのが流石に辛いので、 GUIでメニュー画面を作っていきます。

これが1番最初に作ったやつです。 その頃の私は未熟でした。 配色について一切考えていませんでした。 見づらく、目が痛くなるような配色。 最悪です。

改良した後

配色には
・ベースカラー70%
・メインカラー25%
・アクセントカラー5%
のバランスで3色をベースに構成するっていう基本テクがあるよ。 配色を工夫することで同じUIでもよりプロっぽく見せられるよ。

という親切なコメントでコツを掴みました。ありがとうございます。 ベースカラーは緑、メインカラーは青、アクセントカラーは赤です。

その後改良して、

ITEMメニューはこのような感じになりました。 まだ、それっぽく魅せる比率に完全に則していないので、 改良が必要ですけれどね。今作の所は良いとしましょう。

全体的な統一感

良い例として、新世界樹のバトル画面

ベースカラー青、メインカラーは薄い緑、アクセントカラーは黄色。 で、メニュー画面は、

全体的に統一感がありません? 構造的にも似ていますが、ベースカラーは青と決まっていて綺麗です。 ちなみに世界樹の迷宮シリーズは作品ごとにベースカラーが青、緑、青、緑と交互になっています。

余計な仕掛けはいらない

悪い例としてセブンスドラゴンⅢ code:VFD

まず、ベースカラーは黒、メインカラーとアクセントカラーは同じ黄色になってしまっている。 2色であると何か、変な感じがする。

この画面だけじゃわかりにくいですが、 選択している項目によってアクセントカラー(今、黄色の所)が変わるので、チカチカして見えます。 慣れたら大したことが無いかもしれないが、コロコロ色を変えるべきじゃないです。

そして、何故かアイテムボックスの右枠がオレンジ。 左枠は黄色なのに…… 左右で色を変える意味がわからない。

SKILL(SHILLに見える……)では、アクセントカラーがオレンジになるのだが、 その場合は、左右の枠は共にアクセントカラーのオレンジである。

また、選択している項目(ここでは、メディスⅠ)の色の抜け方があまりにも急で ベースカラーと近い色になるタイミングが多い。 もう少し変化を抑えたほうが良い。

その画面は何をする為の表示か

次はメニュー画面の話になるのだが

この画面は何をしているところだろうか。

アイテムを選んでいるのではなく、メディスⅠの使用する対象者を選んでいるところなのだ。 わかりにくいので、メディスⅠの色をいつもと違う色に反転させるか、 アイテム欄の所を暗転させるか、消すかするべきだ。

DESIRED ROUTEでは、アイテム欄を暗転させて中央に表示している。

関係ないが、セブンスドラゴンはボタンを押しで反応を見た感じでは、 なんかプログラムに無駄な処理が通ってる感じがします。 演出をそんなにしていないのに処理落ちするかな? そんなもんだから、「プログラムはまるで迷宮だ」 (ゲーム中に登場するセブンスエンカウントの開発者の話) とか言ってしまうのだろう。ちゃんと作れば迷わない。

ちょっとした挑戦

DESIRED ROUTEでは、 主人公の今いる場所によって GUIのベースカラーとメインカラーが変わったら面白いんじゃないかと思い、 そういう仕組を作っています。

新しいダンジョンに入った時、変わったなという雰囲気を モンスターやマップチップだけでなく、 GUIの色を変えることによっても演出する…… すでに世界樹の迷宮のメニュー画面の背景は場所によって違いますけどね。