ゲームのロゴデザイン：小さくても読める形
遊びをつくる執筆にClaudeを使用しています。
ゲームのロゴは、サムネイル・アイコン・タイトル画面・SNSのシェア画像と、さまざまなサイズで表示されます。大きく並べたときに美しく見えても、小さくなった途端に文字がつぶれて読めなくなる——そのギャップに気づかないまま公開してしまうケースは少なくありません。 「小さくても読める」とは、具体的には縦32〜64px程度のサムネイルサイズでも文字が判別できる状態を指します。これはフォント選びだけの問題ではなく、字間・太さ・色の対比・装飾の取捨選択が複合的に絡む問題です。この記事では、ロゴを小さいサイズで壊れにくくするための判断基準と調整手順を順番に解説します。
小さいサイズで読めなくなる原因を把握する
ロゴが縮小されたときに読みにくくなる原因は、大きく三つに分類できます。
ストロークが細すぎる：装飾的な筆記体や極細のセリフ体は、縦横のストロークに大きな太さの差があります。細い部分が2px以下になると画面上でほぼ消えてしまい、文字の骨格が読み取れなくなります。
字間と字形の余白がつぶれる：文字と文字の間隔（トラッキング）が狭いと、縮小時に隣の文字のストロークが接触したように見えます。特に「illi」「mn」「vw」のような字形が隣接するとき、判別が難しくなります。
背景との明度差が不足する：ロゴ色と背景色の明度差が小さいと、縮小されてアンチエイリアスがかかったときに輪郭がぼやけます。明度差を数値で管理するには、WCAG（ウェブアクセシビリティ基準）のコントラスト比が参考になります。ゲームロゴに直接適用される基準ではありませんが、コントラスト比4.5:1以上を目安にすると、小サイズでの視認性が安定しやすいです。
フォント選びの判断基準
ロゴ用フォントを選ぶとき、縮小耐性の観点で確認すべき点は以下のとおりです。
- xハイト（小文字の高さ）が大きい：xハイトが高いほど、小文字の内部空間（カウンター）が広く取れ、縮小後も文字の穴や曲線が見えやすくなります。
- ストローク太さの差が小さい：サンセリフ体や、モノラインに近いデザインのフォントは縮小に強いです。装飾的なディスプレイ書体を使いたい場合は、大きいサイズ専用と割り切り、小サイズ用に別のシンプルな版を用意することを検討します。
- 字形の開口部が広い「c」「e」「a」「s」などの字形で、開口部が閉じかけているデザインは小さくなると閉じて別の文字に見えることがあります。開口部の広いフォントを選ぶか、後述するカスタマイズで開口部を広げます。
カスタムロゴとして既存フォントのアウトラインを加工する場合、太さを均一に保つ「オプティカルサイズ補正」（Illustratorなどのツールで手動でノードを動かす作業）は手間がかかりますが、縮小耐性を高める最も直接的な方法です。
縮小テストのやり方
デザインを作ったら、必ず以下の手順で縮小確認をします。
- 書き出し解像度を統一する：最終的に表示する想定サイズと同じ解像度（px）で書き出します。Retinaディスプレイ向けに2倍解像度で書き出して縮小表示するのが一般的です。
- 実際の表示環境に近い背景で確認する：白背景だけでなく、ゲームで使うタイトル画面の背景色・テクスチャの上に重ねた状態で確認します。
- 32px・64px・128pxの三段階で並べる：それぞれのサイズを横並びにして、どのサイズから崩れ始めるかを確認します。
- スマートフォン実機で確認する：モニターで見るよりもスマートフォンの小画面で見たときに問題が顕在化することが多いです。
縮小確認を後回しにせず、デザインの初期段階（ラフ案の選定時）からこの三段階テストを行うと、作り直しのコストを減らせます。
装飾を「削る」判断基準
ゲームロゴには光彩・影・グラデーション・テクスチャなどの装飾が加わることが多く、これが縮小時の可読性を下げる原因になります。装飾を残すか削るかの基準を持っておくと判断が速くなります。
残してよい装飾：文字の輪郭を強調するアウトライン（縁取り）は、背景との境界を明確にするため縮小時に有効です。ただし縁取りが太すぎると文字の穴をつぶすので、縁取りの幅は文字ストロークの太さの20〜30%を上限の目安にします。ドロップシャドウも、ぼかし量を小さく（1〜2px相当）して方向を斜め45°以内に収めると縮小後も輪郭のずれとして機能します。
縮小時に削るべき装飾：グラデーションは縮小後に色差が失われ、一色のフラットな印象になります。大きいサイズで効いていたグラデーションが小さいサイズでは意味をなさなくなるため、縮小版では単色に差し替えることを検討します。テクスチャ（ざらざき・木目・金属感など）は縮小するとノイズになり、文字のエッジをぼかします。縮小版のロゴには使わない方が安全です。
装飾を大小で使い分けるには、マスターデータとは別に「縮小用」のロゴバリエーションを最初から用意する習慣が効果的です。一つのファイルに大・中・小の三サイズを並べたアートボードを持つと、修正のたびに三サイズを揃えて確認できます。
色とコントラストの具体的な調整
ロゴカラーを決めるとき、小サイズ表示を意識した色の選び方があります。
彩度が高い色同士（例：赤と青）を隣接させても、明度が近ければ縮小時にコントラストがなくなります。色の判別は「色相の差」より「明度の差」に依存するため、ロゴの文字色と背景色は必ず明度差で評価します。グレースケールに変換したときに文字がはっきり見えるかどうかが確認の目安になります。
複数色を使うロゴでは、文字の外周に単色の縁取りを追加する方法が汎用性の高い解決策です。文字色が何色であっても、白または黒の縁取りを付けることで背景を選ばず読めるようになります。縁取りの色は文字の補色ではなく、あくまで明度差の大きい色（白か黒）を基本にします。
ダークモード・ライトモードの両方で使われる可能性があるなら、白背景用・黒背景用の二種類のロゴを用意するのがもっとも確実な対処です。単一ファイルで両方に対応しようとすると、どちらかの環境で必ず妥協が生じます。
次の行動
今使っているロゴを32pxに縮小して画面に並べ、文字が判別できるかどうかを確認してみてください。崩れているなら、まず縁取りの追加とストロークの太さ調整から始めると効果が出やすいです。アソバースにゲームを投稿する際はサムネイルも表示されるため、縮小版ロゴをサムネイルに流用できるよう最初から小サイズで成立するデザインを用意しておくと、後の作業が減ります。
