コンパクトなゲームUIでペットの操作部とキャラクターの視認性を両立する方法

メインのプレイループにおいて、プレイヤーが必要とする情報とアクションをリストアップします。初期設計としては、ペット、エサやりや遊びなどの主要なアクション1つ、そしてそのアクションが利用可能かどうかを示すコンパクトなインジケーターを含めるとよいでしょう。設定、コレクション、使用頻度の低いアクションは、セカンダリメニューや一時的なコンテキストパネルへと移動させます。これはひとつのデザイン手法であり、万能のルールではありません。複数のアクションから選択することが主となるゲームでは、一度に多くの操作部を表示しておく必要がある場合もあります。

操作部を配置する前に、まずキャラクター用の明確な表示領域を確保してください。シルエットや表情などの重要な部分を遮らないようにし、その上にボタンやラベルを重ねることは避けます。ペットに直接触れる操作が必要な場合は、そのインタラクションエリアを塞がないようにしてください。操作部がゲームシーンの上に重なる場合は、プレイヤーが見る必要のあるキャラクターの一部を覆わないように注意します。Appleのゲームコントロールに関するガイドラインでは、ゲームオブジェクトへの直接的な操作で代用できる場合は、仮想コントロールを減らすことが推奨されています（Game controls）。

使用頻度の高いアクションは手の届きやすい場所にまとめ、補助的なアクションは離れた場所やメニュー内に配置します。タッチスクリーンでは、プレイヤーの手によってペットが隠れてしまう領域にボタンを密集させないようにしてください。Appleは、頻繁に使用するタッチコントロールを親指の近くに、補助的なコントロールを画面上部付近に配置することを提案しており、無理のないリーチ範囲やデバイスの境界を考慮することも推奨しています。これらはすべてのゲームに共通する固定レイアウトではなく、対象とするデバイスや画面の向きでテストするための出発点として捉えてください。

実際のタッチターゲットのサイズを小さくすることなく、表示されるアイコンをコンパクトに抑えます。Appleは自社プラットフォームにおいて、頻繁に使用するコントロールには最小44×44ポイント、重要度の低いコントロールには28×28ポイントを推奨しています。Androidでは、インタラクティブなタッチターゲットに対して48×48dp以上を推奨しています。これらはプラットフォーム固有の測定基準であるため、数値を互換性のあるものとして扱うのではなく、各プラットフォームの単位とガイドラインに従ってください（Apple game controls、Android accessibility guidance）。特に異なる結果をもたらす2つのアクションの間には、誤タップを防ぐための十分な間隔を空けてください。

操作部、ラベル、装飾パネルなどが干渉すると、ペットが画面上に表示されていても目立たなくなってしまうことがあります。補助的なUI要素の視覚的な重みは控えめに抑えましょう。アイコンは小さく、ラベルは短くし、パネルは必要な領域のみを覆うようにします。最も重要なアクションの最中には、キャラクターの顔やその他の重要なディテールがはっきりと見える状態を保ってください。テキストやアイコンの背面でゲームシーンが変化する場合は、大きな不透明パネルを追加する代わりに、控えめな背景やアウトラインを適用してUIの可読性を維持することを検討してください。

シーンの明るい部分と暗い部分の両方で、テキストとアイコンの見え方を確認します。ある背景で良好だったコントラストも、ペットが動いたりシーンが変化したりすると損なわれることがあります。テキストに関しては、W3CのWCAGガイドラインで通常サイズのテキストに4.5:1、大きなテキストに3:1のコントラスト比が定められています。WCAGはゲーム専用のルールではなくWebコンテンツ向けのガイドラインですが、そのコントラスト基準値は、変化する背景におけるUIテキストの視認性を確認する有用な指標となります（W3C contrast guidance）。利用できないアクションを示す際に色だけに頼るのではなく、ラベル、形状、または状態も視覚的に変化させるようにしてください。

常時表示のコントロールがスペースを取りすぎる場合は、プレイヤーがメニューを開いたときやペットを選択したときに任意の操作を表示するようにします。現在の状態で利用できないアクションは非表示にし、コントロールが押されたときには明確な状態変化を示してください。Appleは特に、関連性のないコントロールを非表示にしたり、アクティブなコントロールを目立たせたりするなど、ゲームプレイのコンテキストに応じて仮想コントロールの表示を適応させることを推奨しています。実用的なパターンとしては、主要なアクションは常に利用可能にしておき、関連する選択肢は選択後に閉じる小さなメニュー内に表示する方法があります。

状態の変化は予測可能なものにしてください。使おうとした瞬間にコントロールが消えてしまうと混乱を招くため、表示／非表示の切り替えは、現在の状態から利用可否が明らかなアクションのみに留めます。ボタンが無効になった場合はその状態を示し、必要に応じて何が変わったのかを簡潔に説明してください。展開したメニューがペットの顔や、プレイヤーが次にタップすべき領域を覆ってしまうことは避けてください。

画面の外側の矩形だけでなく、有効表示領域（使用可能領域）を基準にしてデザインします。ノッチ、カメラの切り欠き、システムバー、ジェスチャーエリアなどは、画面端近くにある重要な操作部と重なってしまう可能性があります。Appleのレイアウトガイドラインでは、セーフエリアをUI要素やデバイスの機能とコンテンツが干渉しないようにするための領域として説明しています。Androidでも同様に、システムバー、ジェスチャー、ディスプレイカットアウトのインセットを尊重し、重要なコントロールをカットアウトから離して配置することを推奨しています（Apple layout guidance、Android edge-to-edge guidance）。背景のアートワークは画面端まで広げつつ、インタラクティブな要素はインセットの内側に収めるようにします。

ひとつのコンパクトな配置があらゆるアスペクト比に適合すると思い込まないでください。コントロールを使用可能領域に固定し、利用可能な幅の変化に応じて間隔やグループ分けが適応されるようにします。AndroidのUnityゲーム向けガイドラインでは、Safe Area APIを使用し、さまざまなディスプレイサイズやアスペクト比をサポートすることが推奨されています。縦向きまたは横向きのレイアウトはゲームがサポートしている場合にのみテストし、画面の回転、ウィンドウのリサイズ、デバイスの折りたたみなどが対象に含まれる場合は、それらが発生した後に再確認を行ってください（Android guidance for Unity games on large screens）。

静的なモックアップでは、操作中にプレイヤーの指がどの領域を覆ってしまうかを確認できません。対象となる物理的な画面サイズでUIを確認し、キャラクターのディテールが隠れていないか、タップミスがないか、システム機能と操作部が重複していないかを意識しながら、メインのアクションを試してください。サポート対象の最小ディスプレイや、より横長・縦長のアスペクト比でも同様の確認を繰り返します。可能であれば、そのレイアウトに見覚えのない人に主要な操作を行ってもらい、どこをタップしたか、どこで躊躇したか、ペットを見失わなかったかなどを観察してください。

サポートする各レイアウトについて、簡潔な合否チェックリストを活用しましょう。

• メインアクションの最中も、顔などの重要なディテールを含め、ペットが隠れずに見えているか。

• 主要なアクションが無理なく届く位置にあり、押下時の状態が明確で、他のターゲットと重なっていないか。

• シーンの背景が変化しても、ラベルや重要なステータス表示の可読性が維持されているか。

• 重要なコントロールが、カットアウト、システムバー、ジェスチャーエリアの下に配置されていないか。

• 補助的なコントロールを開いた際に、次のステップに必要なキャラクターの一部やプレイエリアが隠れてしまわないか。

不合格の項目があった場合は、優先度の低い要素を削除する、セーフインセットを考慮しながらコントロールをプレイエリアの端へ移動する、補助的なアクションは必要なときにのみ表示するなど、一度にひとつの変更を加えます。その後、同じ操作を再テストしてください。これにより、その変更によって視認性の問題が解決したのか、あるいは別の場所に問題が移っただけなのかを判断しやすくなります。

• Apple Developer、Game controls

• Apple Developer、Layout

• Android Developers、アプリのアクセシビリティを向上させる

• Android Developers、Edge-to-edge design

• Android Developers、あらゆるフォーム ファクタに対応した優れた Unity ゲームを作成する

• W3C Web Accessibility Initiative、達成基準 1.4.3: コントラスト (最低限) を理解する