投稿する
マガジン
著者：アソバース編集部公開：更新：約9分で読めます

ゲームの文字サイズ：スマホで読める最小値の目安

遊びをつくる

執筆にClaudeを使用しています。

キーボード、ゲームパッド、タッチ画面を同じ机に置いた操作方法の比較。
記事のテーマをもとに制作したAI生成イメージ。実際のゲーム画面ではありません。

スマホでゲームを開いたとき、文字が小さすぎて読めなかった経験はないでしょうか。PCで作って問題なく見えていたテキストが、スマホの画面では潰れて判読不能になるのは、ブラウザゲーム開発でよく起きる失敗です。 最初に結論を示します。スマホのブラウザゲームで本文として使う文字の最小値は、CSSのfont-sizeで16pxが一般的な目安です。UIのラベルや補足テキストでも14pxを下回ると、多くの端末で読みづらくなります。この数字を基準に設計すると、後からの修正が減ります。 ただし「px」という単位だけで判断すると、端末のデバイスピクセル比（DPR）の影響を見落とします。この記事では、なぜその数字が目安になるのか、どのように実装するか、そして見落としやすい落とし穴を順に説明します。

この記事の目次
  1. なぜ16pxが最小の目安になるのか
  2. サイズ別の用途と判断基準
  3. 実装で押さえる3つのポイント
  4. 実機確認で見落としやすい点
  5. 確認の手順
  6. 次の行動
  7. 参考資料

なぜ16pxが最小の目安になるのか

スマホのブラウザは、物理的なピクセルと「CSSピクセル」を区別しています。現代のスマホはDPRが2〜3倍のものが多く、物理解像度は高くても、CSSで指定した1pxが画面上で占める実際のサイズは端末ごとに異なります。しかし、CSSピクセルで16pxと指定すると、主要な端末で約2.7mm前後の高さになります。これは人差し指の腹でタップしながら読む距離（30〜40cm程度）でも識別しやすいサイズです。

AppleのヒューマンインターフェースガイドラインやGoogleのMaterial Designも、本文テキストに対して同程度のサイズを推奨しています。また、iOSのSafariはfont-sizeが16px未満の<input>要素にフォーカスしたとき、画面を自動ズームする仕様を持っています。ゲームUIにフォームを使う場合、16px未満だとこのズームが発生してレイアウトが崩れます。

ゲーム固有の事情として、ダイアログのフレーバーテキスト、チュートリアルの説明文、スコア表示など、「読まなくても遊べる」テキストは小さくなりがちです。しかし読めない文字は存在しないのと同じで、ゲームの文脈説明やルール説明が読まれなければゲーム体験が損なわれます。

サイズ別の用途と判断基準

テキストの役割ごとに、最小値の目安を整理します。

  • 本文・説明文・セリフ、CSSの最小目安：16px、備考：これ以下は避ける
  • UIラベル・ボタン文字、CSSの最小目安：14px、備考：太字（font-weight: bold）にすると読みやすくなる
  • 数値・カウンター、CSSの最小目安：14px、備考：コントラストが高ければ許容されやすい
  • 注釈・免責、CSSの最小目安：12px、備考：読ませる必要がある内容には使わない
  • 10px以下、CSSの最小目安：—、備考：ゲームとして使うのは装飾目的のみ

「読ませる必要がある内容」という判断が重要です。ゲームオーバーの理由、アイテムの効果、クリア条件など、プレイヤーが知らないと詰まる情報は16px以上で表示します。スコアや残り時間のような数値は、プレイヤーが繰り返し確認するので14pxでも問題になりにくいですが、視認性を高めるために太字や高コントラストの色を組み合わせます。

実装で押さえる3つのポイント

1. `px`より`rem`を基準にする

CSSで文字サイズを指定するとき、pxは直感的ですが、ブラウザのフォントサイズ設定（アクセシビリティ設定で拡大している利用者がいます）を尊重しません。remを使うと、ブラウザのルートフォントサイズに追従します。多くのブラウザのデフォルトは16pxなので、1rem = 16pxとして設計できます。

html { font-size: 100%; }   /* ブラウザ設定を継承 */
p    { font-size: 1rem; }    /* = 16px相当 */

ゲームのキャンバス（<canvas>）内に直接テキストを描画している場合は、ctx.fontで指定するサイズが対象です。この場合はdevicePixelRatioを考慮してキャンバスを高解像度化した上で、表示サイズを逆算して設定します。

2. `viewport`メタタグとの関係を確認する

HTMLの<head>に次のタグが入っていないと、スマホでPCサイズのまま縮小表示されます。

<meta name="viewport" content="width=device-width, initial-scale=1">

このタグがないと、CSSで16pxと書いても画面上では物理的にずっと小さくなります。自分で書いたHTMLに必ず含まれているか確認します。

3. 画面幅に応じて最大サイズも制御する

スマホとタブレット・PCを兼用するゲームでは、画面が大きくなったときに文字が巨大になりすぎる問題も起きます。clamp()を使うと最小・推奨・最大を一行で指定できます。

font-size: clamp(1rem, 2.5vw, 1.5rem);

この例では最小16px、最大24pxの範囲で画面幅に応じてスケールします。ゲームのUIがビューポート幅に合わせて拡縮する設計なら、この方法が文字サイズの設定を簡潔にします。

実機確認で見落としやすい点

開発中はPC上のブラウザ開発ツールでスマホをエミュレートすることが多いですが、実際の端末でしか気づけない問題があります。

文字の太さとフォントレンダリング：同じサイズでも、Androidと iOSではフォントのアンチエイリアスや太さの表示が異なります。とくに細いウェイト（font-weight: 300以下）は、Androidで予想より細く見えることがあります。小さいサイズに細いウェイトを組み合わせるのは危険です。

背景色とのコントラスト：16pxでも背景とのコントラスト比が低いと読めません。WCAG（ウェブコンテンツアクセシビリティガイドライン）では通常テキストに4.5:1以上のコントラスト比を推奨しています。ブラウザの開発ツールや無料のコントラストチェッカーで確認できます。

ゲームの動き中に読まれるテキスト：チュートリアルのポップアップや戦闘中の数値など、短時間しか表示されないテキストは、静止状態より大きなサイズが必要です。動きの中で読む文字は、静止画面の1.2〜1.5倍を目安にします。

フォント指定がフォールバックしたとき：カスタムフォントを読み込んでいる場合、通信が遅い環境ではシステムフォントで表示される瞬間があります。日本語のシステムフォントは端末によって異なり、同じサイズでも見た目の大きさが変わることがあります。フォールバック時でも読めるサイズを確保します。

確認の手順

実際にスマホ対応を進めるときは、次の順で確認すると効率的です。

  1. <meta name="viewport">が入っているか確認する
  2. 本文テキストのCSSをfont-size: 1rem（または16px）以上に設定する
  3. UIラベルが14px未満になっていないか検索する（CSSファイルでfont-sizeを全検索）
  4. 実機またはBrowserStackなどのリモートテストツールで表示を確認する
  5. コントラスト比が4.5:1以上あるか、開発ツールで確認する
  6. 動いている状態（アニメーション中）のテキストを実際に読んでみる

次の行動

手元のゲームHTMLのCSSを開き、font-sizeで全文検索して14px未満の箇所を洗い出してみましょう。見つかったテキストが「読ませる内容」かどうかを判断し、必要なものは16px以上に変更します。修正後は実機か開発ツールのスマホビューで表示を確認し、文字とレイアウトの崩れがないかを目視してください。

参考資料

  • Apple Human Interface Guidelines（Typography）
  • Google Material Design 3（Typography scale）
  • Web Content Accessibility Guidelines（WCAG）2.1 — Contrast（Minimum）
  • MDN Web Docs — viewport meta タグ
  • MDN Web Docs — clamp()
マガジン一覧に戻る