ゲームの画面構成：視線の流れを設計する
遊びをつくる執筆にClaudeを使用しています。
ゲームの画面を作るとき、「なんとなく配置してみたが、どこを見ればいいか分からない」と感じたことはないでしょうか。その違和感の原因は、多くの場合、視線の流れが設計されていないことにあります。視線の流れとは、プレイヤーの目が画面上をどの順番でたどるかという経路のことです。これを意図的に設計すれば、操作の直感性が上がり、情報の見落としも減ります。 この記事では、視線誘導の仕組みを理解したうえで、ゲーム画面の構成にどう応用するかを具体的に説明します。配色やフォントの話ではなく、「どこに何を置くか」という空間配置の判断基準に絞ります。
視線はなぜ「流れる」のか
人の目は、コントラストの強い場所・動いているもの・孤立した要素に反射的に引き寄せられます。これは意識的な操作ではなく、視覚システムの自動処理です。ゲーム画面でいえば、明るいボタン・点滅するアイコン・余白に浮かぶテキストが「視線を引く」要素になります。
問題は、引き寄せる要素が多すぎると視線が迷子になることです。体力バー・スコア・ミニマップ・残り時間・コンボ数・アイテムアイコンが同じ輝度・同じサイズで並んでいると、目はどこから読み始めればよいか判断できません。設計者がやるべきことは「何を見せるか」より先に「何を先に見せるか」を決めることです。
画面を「層」で考える
視線の設計を始めるとき、画面要素を重要度の順に三つの層に分けると整理しやすくなります。
第一層（今すぐ見るべき情報）は、プレイヤーが毎秒判断に使う要素です。体力・残り時間・照準など、ゲームによって異なりますが、常に視野の中心に近い位置か、動きや明度で常に目立つ場所に置きます。
第二層（定期的に確認する情報）は、スコア・アイテム数・マップなど、プレイヤーが数秒おきに参照する要素です。第一層ほど目立たせなくてよいですが、視線を向けたときにすぐ読めるよう、画面の端に固定します。
第三層（必要なときだけ見る情報）は、説明テキスト・設定・詳細ステータスです。プレイ中は意識の外に置いてよいため、アイコン一つで畳んでおき、操作時だけ展開する構成が適しています。
この三層を決めずに配置すると、第三層の情報が第一層と同じ大きさ・輝度で並び、プレイヤーの判断を遅らせます。
視線を誘導する四つの手段
層の優先順位が決まったら、それを画面上で表現する手段を選びます。
コントラストと輝度
最も強力な手段です。白背景に黒テキスト、暗い背景に明るいボタンのように、目立たせたい要素だけコントラストを上げ、第二層・第三層は中間調に落とします。全要素のコントラストが高いと「全部目立つ＝何も目立たない」状態になります。
サイズと余白
大きい要素は小さい要素より先に目に入ります。第一層の要素を他より1.5〜2倍大きくするだけで視線の優先順位が生まれます。また、要素の周囲に余白があると孤立して見え、視線を集めます。ぎっしり詰めた画面は、余白がないため全要素が等価に見えます。
位置と慣習
画面の左上から右下へ読む習慣（横書き文化圏）は、ゲームUIにも影響します。重要な情報を左上や中央に置くと自然な読み順と一致します。ただし、アクションゲームでは視線の中心が画面中央付近に集中するため、体力バーを画面下中央に置く設計も有効です。どの慣習を採用するかは、ゲームのジャンルとプレイヤーの視線が常駐する場所を基準に判断します。
動きとアニメーション
動く要素は静止した要素より強く目を引きます。残り時間が少なくなったときにバーを点滅させる、コンボが増えたときに数字を弾ませるといった演出は、プレイヤーの注意を必要なタイミングで正確に引き付けます。ただし、常時アニメーションが多い画面は視線が分散します。「静止が基本、動きは警告と報酬」と位置づけると使いすぎを防げます。
視線の流れを検証する手順
設計したつもりでも、自分では気づけないズレがあります。以下の手順で確認します。
- スクリーンショットをグレースケールに変換する。 色情報を除いた状態で輝度差だけを見ると、コントラストの優先順位が視覚化されます。最も明るい部分が第一層に対応しているか確認します。
- 画面を3秒だけ見てから目を閉じ、覚えている要素を書き出す。 最初に思い出した要素が視線を最初に引いた要素です。それが設計意図と一致しているかを判定します。
- 別の人に「最初にどこを見たか」を口頭で聞く。 自分では意図した順番でも、初見の人には別の順番で見えることがあります。3〜5人に確認すると傾向が見えます。
グレースケール変換はブラウザの開発者ツールやペイントソフトで手軽にできます。工程を増やさずにできる検証なので、最低でも手順1だけは実施する価値があります。
失敗しやすいパターンと対処
「全部大事だから全部目立たせる」 ── 最もよくある失敗です。要素を増やすたびに輝度・サイズを上げると、最終的に全要素が均等に目立ちます。対処は、要素を追加するたびに既存の要素の輝度を少し下げ、画面全体の「総輝度の予算」を一定に保つことです。
「装飾が情報を隠す」 ── 背景テクスチャや演出エフェクトがUIの視認性を下げるケースです。UIの下にそのまま背景を描かず、半透明の黒や白のパネル（スクリム）を敷いてコントラストを担保します。
「一貫性のない配置」 ── 場面が変わるたびにUIの位置が変わると、プレイヤーは毎回「どこにあるか」から探し直します。第一層の要素は画面のどの場面でも同じ位置に固定するのが原則です。
「モバイルで指が邪魔する」 ── スマートフォンでのプレイを想定する場合、親指の自然な位置（画面下端の両角付近）に第一層の操作UIを置くと、視線と手の動きが一致します。PC向けに設計した画面をそのまま流用すると、指で隠れる位置に重要情報が集まることがあります。
次の行動
自分のゲームのスクリーンショットを一枚撮り、グレースケールに変換して最初に目が行く場所を確認してみてください。それが第一層に設定した要素と一致していれば設計が機能しています。ずれていれば、その要素の輝度かサイズを調整するところから始めると、最小の変更で視線の流れを整えられます。作ったゲームはアソバースに投稿して、初見のプレイヤーから実際のフィードバックを得ることも、視線設計の検証として有効な方法です。
