クソUIで学ぶエロゲUIデザイン「関係ない要素を枠でまとめる」

エロゲをプレイしていてよくクソUIに遭遇します。なぜこんなクソUIにしてしまったのか…テスト段階で誰もおかしいと感じなかったのか…。

そういうUIの失敗例を紹介していきます。今回は「関係ない要素を枠でまとめる」。

枠で囲まれた要素は関係がある

これはキュリオディーラーの回想画面です。一見普通の回想画面ですね。

画面右側にヒロイン3人とetc.のボタンが並んでいます。なるほど。これをクリックするとヒロイン毎に絞り込めるんですね。「ミラビリス」ボタンをクリックしたらミラビリスちゃんのCGが絞り込まれました。

しかしここで変なものに気付きました。「リナリア」ボタンの上に1、2ボタンがあります。本作のヒロインは3人しかいないはずなのに。攻略サイトを見ても隠しヒロインがいるなどとは書かれていないんですけど。っていうかetc.って普通一番後ろじゃないの?何でしょうこれ。

どうやらこれは「ミラビリスのCGのページボタン」のようです。ミラビリスのCGが1ページに収まらず2ページに分けた、と。そう理解するのにしばらく掛かってしまいました。

というのも、ページボタンがヒロインボタンを囲んだ枠の中にあったためです。それに加えて距離的にもサムネイルよりヒロインボタンの方が近いこともあり「ヒロインボタンのページボタン」にしか見えませんでした。

おそらくこの位置なら「ヒロインボタンのページボタン」という勘違いは発生せず、一発で「ミラビリスのCGのページボタン」と理解できたんじゃないかと思います。

まとめ

「枠」はとても強力で、実際に関係があるかどうかを問わず、関係があるように見せてしまいます。うっかり囲うと今回みたいな勘違いの原因になります。

関係ない要素は関係ある要素に見えないよう、無関係を主張しましょう。同じ場所にある、近くにある、それだけで関係あるように見えてしまいます。