「恋ぷれ」で学ぶエロゲUIデザイン

「恋ぷれ」という作品があります。正直すげぇ楽しいわけでもエロいわけでもない、普通のラブコメといった印象です。

しかしこの作品はすごいです。UIがすごい。

「恋ぷれ」はエロゲUIの教科書です

「恋ぷれ」は特別な機能を備えていたとかそういうことはありません。変わった機能は特にありません。全く普通です。というか完璧に普通です。あるべきものがあるべきところにあるべき姿でほぼ完璧に揃っています。そういう意味で、恋ぷれはエロゲUIの教科書です。見ていきましょう。

作品の起動

起動するとまずメーカーロゴと注意が短時間表示されます。誰も読まないので短時間で切り替わるようになっています。

続いてOPムービーが再生されます。作中ではなく作品起動時に再生されます。当然クリックでスキップできます。本作のムービーは初回からスキップ可能です。素晴らしい。

なお初回起動時にいきなり本編が始まるアレはありません。アレでスキップできないムービーが再生されるのって割と地獄ですよね。

タイトル画面

ボタンが一列に並び、きれいにまとまっている

他の場所に独立しているボタンはありません。ボタン群として大きく目立っており、ボタン群を探す必要がありません。そしてボタン群を順に見ていけば近い将来目的のボタンを発見できます。

ボタンがわかりやすく説明されている

日本語しかわからない私でも全てのボタンをすぐに理解できました。エロゲをプレイするのは「18歳以上の大人」ですが「勉強ができる」とは限りません。ただ18年以上生きてきただけです。なので変に難しい言葉を使うと理解できなくなります。

もちろんそれぞれのボタンは説明を読んだあなたが想像しただろう通りに機能します。

ボタンの大きさが適切で、目立っている

ボタンがクリックするのに十分な大きさで、枠で囲われている点も素晴らしいです。小さすぎると誤クリックの原因になり、枠で囲われていないとクリックできる範囲がわかりづらくなりますから。

マウスカーソルを合わせるとボタンの色が変わる

今マウスカーソルを合わせているのはどこでしょう。「はじめから」ですね。

マウスカーソルを合わせても色が変わらないと「ボタンではない」と認識してしまうおそれがあります。きちんとマウスカーソルを合わせられたか不安になる人もいます。

クリックできないボタンがグレーアウトされている

パッと見ただけで「クリックできないこと」がわかります。

改善点

回想機能を最初から利用できるようにしておいた方がよかったように思います。「回想する機能」なので「全てが終わってから開放すべき機能」みたいなアレがありますが、プレイヤーとしてはクリア前でも回想したいことがありますし、そもそもクリアまで辿り着かないプレイヤーもいます。彼らにとって、回想機能が利用できないのは単純に不便です。

ゲーム画面

テキスト枠右下のハートマーク

点滅しています。エロゲはクリックするまで動かないゲームです。しかし画面に全く動きがないとフリーズしているように見えて不安になるプレイヤーがいるので、このように画面に常に変化を付けて不安を取り除いています。プログレスバーと同じですね。

ボタンのデザイン

タイトル画面と比べて小さめですが、テキスト枠など要素が増えたので仕方ないです。その仕方ない中でも、クリックしやすい十分な大きさを確保しています。

とても地味ですがボタン端が丸まっているのも誤クリック防止に一役買っています。これが四角いと「どこでも押せる」印象を与え、プレイヤーのクリックが雑になり誤クリックを誘発します。

丸まっているとその部分は細く「押してはいけない」印象を与えますし、実際細いので押しづらいです。すると無意識のうちにボタンの中心を押そうとして誤クリックが発生しにくくなります。

また枠と透けていない背景色によってよく目立っているのも素敵です。

ボタンの数が少ない

プレイヤーが使用法を学ばなければならない機能が少ないということであり、わかりやすいです。必要な機能は全て揃っていますから、不足を感じることはないでしょう。

メニューバーを非表示にしている

メニューバーってアレです。ファイル(F)、編集(E)…みたいなメニューが並んでいるウィンドウ上部のバー。

メニューバーは一覧性が終わっています。一度開いて、場合によってはサブメニューまで表示させてみて、どういう機能があるのかを把握しなくてはなりません。それがメニューの数だけあるんですから嫌にもなります。

しかもメニューバーって大体難しい言葉が並んでいるじゃないですか。なんでふわふわかわいい女の子と楽しい一時を過ごしたいだけなのにわけわからない専門用語を理解しなくちゃいけないのでしょう。

本作ではプレイ上必要な機能が全てボタン群に揃っており、メニューバーが必要ありません。ボタンをクリックすればいい。それでいいんですよ。

ボタンがアイコンではなく文字で説明されている

アイコンのみで文字説明がない作品もあるんですが、アイコンと機能が結びつくほど長い付き合いではないので、単純にわかりづらくなります。本作のように文字で説明してもらった方がわかりやすくていいです。

「アイコンのみ」にするのは機能が多すぎて並べきれなくなるからなんでしょうけど、本作は機能が整理されているので文字説明でも十分収まるんですよね。

ボタンのグループ化

「テキスト関係」「音声関係」「セーブデータ関係」「オプション関係」でまとまっています。このまとまりがないと端から順に目で追っていったときに違和感があります。

右クリックでテキスト枠を非表示にできる

エロゲのゲーム画面において、右クリックはテキスト枠を非表示にする機能を持っているべきです。ですよねエロゲオタクの皆様。

これがないと専用の小さいボタンを頑張ってクリックしなくてはならなくなり面倒くさくなります。テキスト枠を消してCG全体を見てみたいって軽い気持ちなので、軽い操作で実現できてほしいです。

改善点

「テキスト枠を非表示にするボタン」がテキスト枠右上辺りにあった方がよかったように思います。「右クリックすればいいじゃん」ですが、それが通用するのはエロゲオタクだけであり、「本作からエロゲを始める人」もいるはずで、彼らが右クリックの機能を知っているとは限らないので。

またスペースキーでもテキストを進められるようにした方がいいです。本作は抜きゲーではないのであまり問題にならないかもしれませんが、抜きゲーではその性質上左手でテキストを進めたい人が出てきます。

セーブ・ロード画面

十分な数のセーブ枠が用意されている

普通の学園ラブコメなので100枠あれば十分ですよね。

NEWの表示がある

いくつかセーブデータを作ると、どれが前回プレイしていたデータかがわからなくなります。日付を見て考えるなどすれば思い出せなくもないですが、このNEWの表示があれば何も考えなくても一発でわかります。

セーブ枠に番号が振られている

攻略情報サイトの多くは「セーブ1」「セーブ2から再開」のように表記しています。セーブ枠1にセーブ1、セーブ枠2にセーブ2、とセーブしていけばどれがどのセーブデータかがわからなくなることはありません。

縮小版を表示している

この時代の作品はウィンドウが現代のそれほど大きくなかったので小さめですが、これがあるとセーブした当時の状況を思い出しやすくなります。

セーブ画面とロード画面で色が違う


セーブ画面はピンク色でロード画面は青色ですね。もう少し大きな変化でもよかったかもしれませんが、こうした違いを付けることで「セーブしようと思ってロードしてしまった」といった事故をいくらか防げます。

セーブしたらゲーム画面に戻る

セーブしたら次にすることは何だろうと考えたら、ゲーム画面に戻るんですよね。ゲームを終了することもありますけど、それはウィンドウ右上の×ボタンをクリックすればいいだけの話ですし。

右クリックでゲーム画面に戻る

「戻る」ボタンを押さないと戻れないなんてクソUIだったらキレますよね。

回想画面

差分CGが1枠にまとまっている

ときどきまとまっていない作品に遭遇することがあり、その場合「最初のCGをクリックする→クリックして一覧画面に戻る→次のCGをクリックする→…」という割と面倒くさい操作が必要になります。ページをまたいでいたりするとそこで止めたくなります。

改善点

本作では差分CGがそれほど多くなかったので致命傷にはなりませんでしたが、差分CGの途中で右クリックすることでいつでも一覧画面に戻れるようにしておいた方がいいです。差分CGが多い作品でこの機能がないと「間違えてクリックしたら10回以上クリックしないと脱出できなくなった」みたいな地獄が発生します。

またヒロイン毎にページを分けた方がよかったかもしれません。ヒロイン3人について、2~3ページずつになります。現状では、最悪の場合7ページ探すことになります。検索エンジンの検索結果ページもほとんどの場合1、2ページ程度しか見られないそうなので、7ページも探させてしまうと途中で挫折するプレイヤーも発生するでしょう。検索結果と違いこちらは「確実に目的の情報がある」とわかっているので多少マシですけど。

オプション画面

スライダーがクリックすることで一発で設定できる

「画面演出速度」のようにつまみをドラッグして設定するUIってありますよね。アレですが「つまみをドラッグしないと設定できないスライダー」と「バーの部分をクリックするとつまみがクリック地点に移動するスライダー」があります。本作は後者で、こちらの方が便利です。

スライダーの向きが表示されている

「min」と「max」ですね。「min」の意味が難しすぎてわからなくても「max」は何となく大きいイメージがあり理解できます。青色と赤色で着色されており、どちらかと言うと赤色の方が大きい印象を受けます。他にも「maxに向けてバーを太くしていく」という方法もよく使われていますね。

この向きが表示されていないと一度いじって変化を見てみないと向きがわかりません。

ウィンドウの大きさが固定されている

エロゲはクリックするゲームで、人間は正確な動作を繰り返せる生き物ではないので、結果としていつの間にかマウスカーソルがウィンドウ端に到達していることがあります。

それに気付かずクリックして、それがうっかりドラッグと判定されてしまうと、ウィンドウの大きさが変わってしまうことがあります。きれいな拡大率ではないので拡大処理が汚く、そのまま続行するのは違和感があり困難です。そうなると元に戻す作業が発生します。

そういう事故を防ぐためにウィンドウの大きさが固定されています。

「現在の設定」がわかりやすく表示されている

背景色付きの枠で囲った上に文字の色まで濃くして目立たせていますね。これなら「どちらが現在の設定かわからない」ということはないでしょう。

まとめ

重箱の隅を突くようにすればいくらか改善点は出てきますけど、あるべきものがあるべきところにあるべき姿でほぼ完璧に揃っています。実際快適にプレイできています。

「恋ぷれ」はDMM GAMES 遊び放題対象タイトルになっているので、利用しているのであればやってみるといいと思います。色々普通なので。

コメントを読みました

Chuablesoft作品のセーブ・ロード画面は…あれはダメです。人類の能力を高く見積もりすぎています。

コメントの自由編集は「恋ぷれ」では微妙です。「恋ぷれ」のゲーム性、難易度は大して高くなく、コメントを手入力したくなることはあまりありません。その上大多数の人類にとって「キーボードによる文字入力」は苦痛を伴う作業です。

そうすると大多数のプレイヤーに使われないのに、画面に要素が増えてわかりづらくなります。なので当時開発陣に「自由編集できるようにする」という案があったかは不明ですが、仮にあっても付けなかったような気がします。