ゲームのアイコンデザイン：16pxで伝える

なぜ16pxは別設計が必要なのか

人間の目は、視覚の解像度と認知の仕組みから、ある程度の形の「骨格」を読み取ることで物体を識別します。16pxの格子では、使えるピクセル数が非常に少なく、曲線や斜め線はアンチエイリアス（境界をぼかして滑らかに見せる処理）の影響を大きく受けます。結果として、元のデザインの輪郭が溶けたように見えます。

さらに、現代のディスプレイには「1倍解像度（96dpi相当）」と「Retinaや高DPIディスプレイ（2倍・3倍）」が混在しています。SVGや高解像度PNGをそのまま使えば高DPIでは綺麗に見えますが、旧来の16pxラスター（ドット絵のような整数ピクセル単位の画像）の文脈では依然として16×16ドットの情報が基準です。faviconとして.ico形式や16×16のPNGを要求されるケースもあります。

したがって、16px対応は「縮小の最適化」ではなく「別解像度向けの再設計」として捉えるのが現実的です。

16px制約下での造形の原則

シルエットを1〜2色で成立させる

16pxでは、細い線や複雑なグラデーションは識別できなくなります。まずシルエット（輪郭と塗り）だけで「何か」が伝わるか確認することが基本です。たとえばチェスのコマ、火の玉、星、丸いキャラクターの顔——これらは単色のシルエットだけでも識別できます。逆に、横向きの人物が走っている構図や、文字を含むロゴは16pxではほぼ判読不能になります。

細い線は使わない

1pxの線はRetinaディスプレイ以外では「あるかないか」の境界線になります。16pxアイコン内で意味のある線の太さは最低2px、できれば3px以上を目安にします。元のデザインで「輪郭線」を使っている場合、16px版ではその線を省略するか、形そのもので輪郭を表現するように変更します。

色数を絞り、コントラストを上げる

縮小によって中間色が混ざるため、元のデザインより色数を減らし、メインカラーとバックグラウンドのコントラスト比を高めます。淡いパステルカラーの組み合わせは16pxでは沈みます。背景が白や黒でも視認できるよう、少なくとも1色は彩度・明度の差がはっきりした色を使います。

中心に意味を集める

16pxの四隅はほぼ捨てる覚悟で、アイコンの主役をグリッドの中央寄りに配置します。余白は意図的に入れず、使えるピクセルを主役の形に集中させます。

実際の作り方：2ステップのアプローチ

ステップ1：大きいサイズで設計してから別バージョンを作る

まず512pxまたは256pxで「フル解像度版」を設計します。このサイズではゲームの世界観・配色・主役モチーフを自由に表現できます。次に、このデザインを参照しながら16px版を「別ファイルで」設計します。縮小コピーをそのまま使うのではなく、16pxのキャンバスを新規に開き、フル解像度版のどの要素が「最も識別しやすいシルエット」になるかを判断して描き直します。

Figma、Inkscape（無料）、Aseprite（ピクセルアート向け）など、複数のアートボードやキャンバスを同時に管理できるツールを使うと、両サイズを並べて確認しながら作業できます。

ステップ2：縮小テストを繰り返す

16px版を描いたあと、実際のブラウザのタブや、ゲーム一覧のような小サムネイルに並べた状態でどう見えるかを確認します。確認方法の例を示します。

1. 作ったPNGをHTMLファイルの<link rel="icon">に指定してブラウザのタブで確認する。
2. 同じアイコンを複数並べた小サムネイルのプレビューをFigmaや画像編集ツールで作り、他のゲームアイコン（例：既存のゲームのfavicon）と並べて識別できるか比較する。
3. 白背景・黒背景・グレー背景の3条件で表示し、どの背景でも形が読み取れるか確認する。

この確認で「何かよくわからない塊」に見えたら、シルエットの単純化と色のコントラスト強化に戻ります。「キャラクターの顔の目が消えた」「ゲームタイトルの文字が潰れた」といった現象は16pxでは起こるべくして起こるため、その要素は省略する判断をします。

よくある失敗と対処

「縮小したら全部灰色になった」これはアンチエイリアスが中間色を大量生成した結果です。16px版ではアンチエイリアスを切るか、縮小前提のツール（Asepriteなど）でピクセル単位で描くことで回避できます。

「文字入りアイコンにしたい」16pxに文字を収めるのは1〜2文字が限界で、それ以上は判読不能です。英数字1文字を太いフォントで表示するデザイン（例：「G」「P」「1」）は成立しますが、ゲームタイトルのロゴをそのまま縮小するのは避けます。どうしてもタイトル文字を入れたい場合は32px以上を前提とし、16pxではキャラクターや記号のみのシルエット版を別途用意します。

「アニメーションアイコンにしたい」faviconはGIFアニメーション対応のブラウザもありますが、動くアイコンはユーザーの注意を強制的に引くため、プラットフォームやページ設計のルールを事前に確認することを推奨します。アソバースへの投稿アイコンに関しては、公式の投稿ガイドラインで現在対応している形式を確認してください。

複数サイズの用意と出し分け

実務的には、一つのゲームアイコンに対して以下のサイズをそれぞれ個別に用意することが推奨されます。

• ブラウザfavicon、推奨サイズ：16×16px、32×32px
• iOSホーム画面、推奨サイズ：180×180px
• Androidホーム画面、推奨サイズ：192×192px
• OGP・SNSシェア、推奨サイズ：1200×630px（横長）
• ゲーム一覧サムネイル、推奨サイズ：プラットフォームの仕様による

HTMLで複数サイズを指定する場合、<link rel="icon" sizes="32x32" href="icon-32.png">のようにsizes属性で出し分けができます。ブラウザは表示環境に応じて適切なサイズを自動選択します。SVGをfaviconとして使う方法（type="image/svg+xml"）もあり、この場合は高DPIで自動的にシャープに表示されます。ただしSVGフォントやフィルターを多用したデザインは、縮小表示時に想定外の見た目になることがあります。

次の行動

まず手元のゲームのアイコン画像を16×16pxにリサイズして、ブラウザのタブに表示させてみてください。「何かわからない」と感じたら、それがリデザインの出発点です。16px専用のキャンバスを新規作成し、最もシンプルなシルエットだけで描き直すところから始めると、方向性が見えてきます。アソバースへゲームを投稿する際は、公式の投稿ガイドラインでアイコンの推奨サイズと形式を確認してから最終ファイルを書き出してください。

参考資料

• MDN Web Docs「rel=icon」（Mozilla）
• Google Search Central「favicon に関するガイドライン」
• Aseprite 公式ドキュメント
• W3C「Scalable Vector Graphics (SVG) 2」仕様