ゲームの操作説明を画像1枚にまとめる：レイアウト例
遊びをつくる執筆にClaudeを使用しています。
ゲームを完成させたあと、「操作方法をどこで伝えればいいか」に迷う作者は少なくありません。テキストで箇条書きにする、タイトル画面に書き添える、プレイ中にツールチップを出す——方法はいくつかありますが、最もシンプルで使い回しやすいのが「操作説明を1枚の画像にまとめる」手法です。 この記事では、その画像をどう設計するかに絞って解説します。どの情報を載せるか、どう配置するか、どのサイズで書き出すか。実際に手を動かせる具体的な判断基準を示します。
画像1枚にまとめる理由と使いどころ
操作説明を画像化すると、HTMLの中では<img>タグ1行で表示でき、CSS調整も最小で済みます。ゲームのタイトル画面、ポーズ画面、またはゲーム外のプラットフォームページに添付するケースすべてに同じファイルを流用できます。
テキストと<div>で作った説明は、フォント環境やブラウザによってレイアウトが崩れることがあります。画像であれば見た目が完全に固定されるため、スマートフォン・PCどちらで見ても同じ情報が届きます。ただし、画像内のテキストはスクリーンリーダーに読み上げられません。アクセシビリティを重視する場合は、alt属性に操作の概要を書き込む、または画像の直下にテキスト版も置くという対応を検討してください。
載せる情報を絞り込む判断基準
「1枚に全部書こう」とすると画像が読めなくなります。掲載すべき情報を選ぶには、次の3段階で考えると整理しやすいです。
1. ゲームを始めるために絶対必要な操作だけを残す
移動・決定・攻撃など、この操作を知らないとゲームが開始できないものがレベル1です。まずこれだけ書けば「最低限の説明」は成立します。
2. 知らないと詰まる操作を追加する
ポーズ・キャンセル・特殊アクションなど、知らないとゲームが途中で止まりやすい操作がレベル2です。多くのゲームでは、レベル1とレベル2を合わせて5〜8項目に収まります。
3. 知っているとより楽しめる操作は別扱いにする
コンボや隠しコマンドは「操作説明」ではなく「ヒント」です。これらは1枚の画像には入れず、ゲーム内のヘルプ画面や別のページに分離します。
この3段階を経て絞り込むと、画像に載せる項目数は自然に10以下に収まります。それを超える場合は、ゲームの操作が複雑すぎるか、情報の粒度が細かすぎる可能性があります。
レイアウトの基本パターン3つ
操作説明画像のレイアウトは、ゲームのインターフェース（PC向けキーボード操作か、スマートフォン向けタッチ操作か）によって向いている形が変わります。代表的な3パターンを示します。
パターンA：キーアイコン＋説明文の横並び
[ W ] 上に移動
[ S ] 下に移動
[ Space ] ジャンプ
[ E ] インタラクトキーボード操作のゲームに向いています。左列にキーのアイコン（四角い枠で囲んだ文字）、右列に動作の説明を並べます。行間を十分に空け、1項目あたりの高さを揃えると読みやすくなります。フォントサイズは説明文を14〜16px相当に設定し、キーアイコンは少し大きく強調するのが一般的な作り方です。
パターンB：コントローラー図またはスマートフォン画面の上に吹き出し
ゲームパッドやスマートフォンのタッチUI（バーチャルパッド）を中央に配置し、各ボタンや領域から線を引いて吹き出しで説明します。視覚的に直感的ですが、作成に時間がかかります。FigmaやCanvaのフレームを使って実物のUIのスクリーンショットを下敷きにすると作りやすくなります。
このパターンはスマートフォン向けタッチゲームに特に有効です。「画面左半分をタップで移動、右半分をタップで攻撃」のように領域で操作が決まるゲームでは、テキストリストよりも格段に伝わります。
パターンC：2カラムのブロック分割
画像を左右に分割し、左に「移動・基本操作」、右に「アイテム・特殊操作」のようにカテゴリごとに並べます。操作数が多めのゲームに向いていますが、画像サイズが縦に伸びやすい点に注意が必要です。カテゴリの見出しに色を使い、左右の視覚的な重さを揃えると整って見えます。
画像サイズと配色の実務的な決め方
サイズ： 横幅800px・縦600px以内を起点に考えると、PCとスマートフォンのどちらでも読みやすい大きさになります。スマートフォン縦持ちで表示する前提なら横幅を600px以下に抑えると、拡大なしで読める確率が上がります。書き出し解像度はPNG・72〜96dpiで十分で、過度に高解像度にすると読み込みが遅くなります。
背景と文字のコントラスト： テキストを読めるようにするには、WCAG（ウェブアクセシビリティの国際ガイドライン）が示すコントラスト比4.5:1以上を目安にします。黒背景に白文字、または薄いグレー背景に濃いグレー文字のような組み合わせが安全です。ゲームのスクリーンショットを背景にする場合は、半透明の黒や白のパネルをテキストの後ろに敷いてコントラストを確保します。
フォント： 画像内のフォントは環境依存しないため、Noto Sans JPなどの日本語対応フォントを使って書き出せば、どの端末でも崩れません。デザインツールがない場合は、ブラウザでHTMLとCSSを使って操作説明ページを作り、そのスクリーンショットを画像として書き出す方法が手軽です。
作成から組み込みまでの手順
- 項目を書き出す 前述の3段階で情報を絞り込み、テキストだけでリストを作ります。
- パターンを選ぶ キーボード操作ならA、タッチ操作ならB、項目が多いならCを基準に選びます。
- ツールで作成する Figma・Canva・Photoshop・または前述のHTMLスクリーンショット法で画像を作ります。
- 実機で確認する 作成した画像を実際のスマートフォンで表示し、文字が読める大きさかを確認します。フォントが小さすぎると感じたら、項目を減らすか画像の縦サイズを増やします。
- ゲームに組み込む タイトル画面の「？」ボタンを押したときに表示する、または<img>で固定位置に表示します。モーダル（ポップアップ）で表示する場合は、閉じるボタンをわかりやすい位置に置くことを忘れないようにします。
よくある失敗と回避策
詰め込みすぎて読めない フォントを小さくして全部収めようとするのが最もよくあるミスです。読める最小フォントサイズを先に決め（スマートフォンなら12px相当以上が目安）、それ以上小さくなるなら項目を削ります。
操作と結果が分離している 「Eキー」とだけ書いて動作が書いていない、またはその逆。「Eキー：宝箱を開ける」のようにキーと動作をセットで書く形式を徹底します。
PCとスマートフォンで表示サイズが大きく変わる <img>にmax-width: 100%を指定しないと、スマートフォンで画像がはみ出します。CSSでimg { max-width: 100%; height: auto; }を書いておくのが基本対応です。
更新したときに古い画像がキャッシュに残る ファイル名をhow-to-play-v2.pngのようにバージョン番号付きで管理すると、キャッシュの影響を避けられます。
次の行動
作ろうとしているゲームの操作を書き出し、前述の3段階で10項目以内に絞り込んでみてください。それが揃ったら、CanvaやFigmaの無料プランでパターンAの構成から試すと、1時間以内に最初の1枚が完成します。完成した画像とゲーム本体をまとめてZIPにし、アソバースに投稿すれば、操作説明付きのゲームとしてそのまま公開できます。
