9割の初心者がハマる、UIデザインの失敗例

■はじめに

面白いゲームを作りたい！でも、思ったようなゲーム体験を実現できない！

悩んだ時、大抵の人は「ゲーム性」や「ストーリーの魅力」の改善を意識すると思います。

それはもちろん大切なのですが、もしかしたら、ゲームの面白さや必要な情報が「伝わっていない」「操作しづらい」のが原因かもしれません。

この記事ではあえて「UIデザイン」に注目し、改善案を提案させていただきます。

■なぜUIは“素人感”が出やすいのか？

キャラクターや背景等、メインの絵や3Dモデルはアセットで補うことができますが、UIは自作で必要最低限…なんて人も多いのではないでしょうか？

それでもゲームは成立しますが、グラフィックとのバランスがチグハグで悪目立ち→結果的にゲームの質が低く見えてしまうこともしばしば。
たかがUIと思われるかもしれませんが、UIにも良し悪しや流行り廃りがあります。

また、UIには設計力がそのまま現れると言われ、「なんとなく」で作るとゲームの楽しさにブレーキをかけてしまう恐れがあります。

拙い設計はそのまま「不安感」や「不足」といった印象に直結してしまうため、脱素人感を掲げる上で非常に重要な要素になるのです。

■初心者がしやすい失敗8例

①文字が小さすぎる

可読性より「見た目の格好良さ」を優先して文字を小さく設定してしまう。

昨今のゲームでは「格好良いこと」「スタイリッシュな印象」が優先されがちで、情報としての役割が機能していないケースが見受けられます。

ゲーム内の文字は「情報をユーザーに届けること」が目的なので、何より優先すべきは「可読性」です。

【解決策】
・最小フォントサイズを決める

リリース予定のプラットフォームで一番解像度の低いものを選び、実際の端末で表示した際に問題なく認識できる文字サイズを検証しましょう。

最小サイズが分かれば、それ以上のサイズは安心して使うことができます。

②フォントがバラバラ

低品質に見えてしまう理由のひとつに「統一感のなさ」があります。

ゴシック体・明朝体・装飾体を数種類…等

個性を追求するあまり、フォントの種類を増やしすぎてしまうことが多々あります。

多数のフォントを扱う場合は、用途ごとのルールを定めて遵守すること。また、使用割合を意識する必要があります。

【解決策】
・フォントは2種類に制限する

・ルールに沿って複数の画面に適用する

タイトルはフォントA、本文はフォントB等
用途を決めて適用し、結果を踏まえて用途の見直しをしながら使用割合を調整すると失敗しにくいです。

また、1画面の完成度だけで決めてしまうと他の画面で破綻したり、品質がバラついたりしてまとめづらいです。

こだわりは大切ですが、最初は管理対象を最小限に絞り、少しずつアクセントを増やしていくことをおすすめします。

③影をつけすぎる

一般的に、立体=ハイディテール=クオリティが高いという認識を持ちやすいです。

間違いではありませんが、ただディテールを上げるだけでは、前述したフォントのように統一感を失い、画面内で悪目立ちしてしまいます。

【解決策】
・影のルールを固定する

パーツ単位でなく画面全体を1つの絵として扱い、影が伸びる向き・範囲・濃さ等を揃えると馴染みやすくなります。

作り手は「手が込んでいる（と感じる）もの」を神聖視しやすい傾向がありますが、UIに求められるのは、世界観との調和と分かりやすさです。作り込みの誘惑とうまく付き合っていきましょう。

④色を使いすぎる

・レアリティ・強さ・状態等、多数の要素に色を何色も設定してしまう

色数が多いと、複数の要素に気を取られて意識が分散し、どこを見て良いか分からなくなってしまいます。

【解決策】
・色数を絞る（メイン3色＋アクセント1色程度）

前提として、色を増やすことは悪いことではありません。目的に沿った最適な見た目になっていれば問題ないのです。

まずは最低限で設計し、見せたい場所に視線が集まるか？混乱しないかを見極めましょう。

⑤ボタンが押せると分からない

ボタンは機能の実行に欠かせない要素ですが、画面内に埋もれて分かりづらくなっている作品を見かけます。

原因は主に2点です。

1.ただの画像（装飾等）と見分けがつかない

2.選択した際のフィードバックがない

【解決策】
・ボタンとその他の要素で質感を分ける
┗ボタンにだけ立体感（影や凹凸）をつける
┗ボタンにしか使わない色を決めて運用する
┗ボタンにだけパターンやグラデーションを入れる 等

・選択状態に合わせたアニメーションをつける
┗オンカーソル、オンマウス、押下時 等

ユーザーにとって自分の行動・操作に対する反応は報酬であり、モチベーション向上に繋がります。

また、どこを押せば（何をすれば）先に進めるのか分からないことはユーザーのストレスに直結するため、快適さを損なわないよう留意しましょう。

⑥情報を詰め込みすぎる

楽しいアイデアを思いついたらどんどん取り入れたくなりますが、一画面に全部置こうとするのはおすすめしません。

要素が増えれば増えるほど優先順位が曖昧になり、他の項目でも述べた「何をすれば良いのかわからない」ストレスに繋がります。

俗に言う「設定を盛り込みすぎてキャラが死ぬ」状態。

自信作ほどシンプルにまとめてあげた方が魅力が伝わりやすくなることもあるので、バランスが大切です。

⑦余白がない

視線誘導の手段の一つに「粗密」を使い分ける、というものがあります。

絵を描くときに「描き込む場所」と「あえてざっくり描く場所」を使い分けることで、注視してほしい場所を強調したり、情報量を調整したりすることがありますよね。

UIも同じで

隅から隅まで1pxの隙間もなく文字が表示されるウィンドウよりも、各辺から16pxずつ余白を設けられたウィンドウの方が圧倒的に理解しやすく疲れにくいです。

【解決策】
・Photoshopで1マス8px程度に設定したグリッドを表示する

隙間を作ることに恐怖心を抱く人もいますが、そんな人にこそおすすめの方法です。

あらかじめデザイン作成時のルールとして「文字を配置する際は四隅から○pxずつ空白を作る」等の設計をしておき、グリッドを常に表示した状態で作業してみて下さい。

グリッドを表示することにより、常に正確な定規をあてている状態になり、余白の有無が視覚化されます。ルールをなぞって機械的に調整すれば最適な見た目に近づけることができるので、自分の感覚に自信が持てない時こそお試しください。

⑧世界観とUIが合っていない

こちらは言葉通りの意味です。

・SFなのに和風乙女ゲー風UI
・ホラーアクションなのに丸ゴシック 等

多彩なコンテンツが溢れる現代では、ジャンルごとにある程度共通のイメージが作られています。

カレーを頼んだのにラーメンが来たら期待を裏切られたと感じるし、カレーの味を完璧に再現したラーメンが来たとしても、やはり違和感が残ります。

世界観を後押しするはずのUIが違和感を生み出しノイズになっては本末転倒です。

世界観とテイストを揃えて作りましょう。

■結論

UIで失敗しやすい人は、UIを絵だと考え、その場の気持ち良さや自分のやりたいことを優先する傾向があります。

絵として優れているかどうかより、設計が重要です。

伝えるべき情報に優先度を付け、配置や大きさ・色等にルールを持たせれば、ゲームの世界観を損なうことなく、あるべき場所に必要な情報を当てはめていけるのです。

■まとめ

さて、今回は具体的な失敗例を紹介しましたが、あなたはいくつ当てはまりましたか？

ゲームをより良くするために、良かれと思って取り入れていた要素もあったのではないでしょうか？

その思いはもちろん大切です。

ただ、クリエイターの表現欲求とユーザーの感性は必ずしも一致しないため、まずは「分かりやすさ」「統一感」でクオリティアップしていくことをおすすめします。

基本を押さえた上で、自分だけのUIを追求し、楽しく斬新なゲームに仕上げていきましょう！