ゲームのアイコン・サムネイルをスマホで映えるサイズにする
遊びをつくる執筆にClaudeを使用しています。
ゲームを投稿したあと、スマホで自分のページを開いて「思ったより小さくてよく見えない」と感じたことはありませんか。アイコンやサムネイルは、ゲームの中身ではなくそのゲームの「顔」です。ここで手を抜くと、どれだけ内容が良くても一覧ページでスキップされてしまいます。 スマホの画面でサムネイルが映えるかどうかは、大きさだけの問題ではありません。解像度・構図・テキストの読みやすさという3つの要素が重なって初めて「押したくなる画像」になります。この記事では、サイズの選び方から実際に書き出す手順、よくある失敗パターンまでをまとめます。
スマホ画面でサムネイルがどう表示されるかを先に把握する
サムネイルを作る前に、表示される文脈を確認しておくことが重要です。スマホのブラウザでゲーム一覧を見ると、サムネイルは横幅の半分以下の小さなカードに収まります。ピクセル数にすると、実際に描画される幅はおよそ150〜200px相当になることが多いです。ただし、昨今のスマホは「デバイスピクセル比」が2〜3倍あるため、150pxのスロットに表示するには300〜450pxの画像データを用意しないとぼやけて見えます。
この「論理ピクセル×デバイスピクセル比」のギャップを意識していない作者が多く、640pxで書き出した画像が実機でモヤっとする原因になっています。まずブラウザの開発者ツール（Chromeなら F12 → デバイスモード）で、自分のゲーム一覧ページをスマホ表示にして、サムネイル要素の描画サイズを確認するところから始めてください。
推奨サイズの考え方と具体的な数値
ゲームプラットフォームのサムネイルには正解の一つのサイズがあるわけではありませんが、汎用的に使える目安は以下の通りです。
正方形アイコン（アプリアイコン的な用途）
- 最小書き出しサイズ：512×512px
- 推奨書き出しサイズ：1024×1024px
512px以下だと、Retina/高DPIディスプレイで拡大されたときに粗さが目立ちます。1024pxで書き出しておけば、どんな画面密度でも余裕を持って対応できます。
横長サムネイル（カバー画像・OGP的な用途）
- アスペクト比：16:9 または 1.91:1
- 推奨書き出しサイズ：1200×630px または 1280×720px
SNSでシェアされたときのOGP画像も兼ねる場合は1200×630pxが扱いやすいです。ゲームのスクリーンショットをそのまま使うなら、1280×720pxのキャプチャをほぼそのまま流用できます。
ファイル形式と容量
形式はPNGまたはWebPが基本です。JPEGはグラデーションや写真素材に向きますが、ドット絵やフラットデザインでは圧縮ノイズが出やすいためPNGを選んでください。容量は表示速度に直結するため、PNGで200KB以内、WebPで100KB以内を目安にしてください。Squoosh（Googleのブラウザ上圧縮ツール）を使うと、品質を確認しながらサイズを落とせます。
「映える」構図の判断基準
適切な解像度で書き出しても、構図が悪いと小さなカードに表示したときに何が描いてあるかわかりません。スマホ一覧表示を前提にした構図の基準は3つです。
1. 主役を中央寄りに配置するサムネイルがリスト表示される際、端が切り取られることがあります。伝えたいキャラクター・ロゴ・シーンは必ず中央付近に置き、端には余白または背景だけを残す設計にしてください。
2. テキストは使わないか、最小限にする「操作説明」「使い方」などの文字をサムネイルに入れる作者がいますが、150〜200px幅に縮小されると読めなくなります。タイトル文字を入れるなら最大2〜3語、フォントサイズは元画像で60px以上を目安にしてください。それ以下のテキストは入れない方が清潔に見えます。
3. 背景との対比を確認するプラットフォームの背景が白系か暗色系かによって、サムネイルの見え方が大きく変わります。白背景に白いキャラクターを置くと輪郭が消えます。書き出し後に実際のページに並べてみて、周囲のカードと比べて「浮いていないか」「埋もれていないか」の両方を確認してください。
実際に書き出す手順
ツールはなんでも構いませんが、無料で使えるCanva・Figma・GIMP・Aseprite（ドット絵向け）あたりが定番です。ここでは手順の骨格だけを示します。
- キャンバスを推奨サイズで新規作成する。正方形なら1024×1024px、横長なら1200×630pxで始めます。
- 主役のビジュアルをキャンバスの中央に配置する。ゲームのスクリーンショット、キャラクター、ロゴなどを拡大・縮小して中央に収めます。
- 周囲に10〜15%の余白を確保する。1024px幅なら両端100px程度は空けておくと、縮小後も構図が崩れません。
- PNG（またはWebP）でエクスポートする。JPEGは最終手段と考えてください。
- ブラウザの開発者ツールのデバイスモードで確認する。iPhone SE（375px幅）程度の小さい端末サイズで見て、主役が認識できるかどうかチェックします。
- 必要ならSquooshで圧縮してから投稿する。200KBを超えるようなら品質を少しずつ落として調整します。
よくある失敗と対処
失敗1：ゲームのプレイ画面をそのままキャプチャしてサムネイルにするプレイ画面はUI要素が多く、縮小すると煩雑に見えます。一番映えるシーン1コマを切り出し、不要なUIを省いたうえでサムネイル用に再構成する手間が必要です。
失敗2：作業中に小さいプレビューで確認しないFigma・Canvaでもプレビューは大きいサイズで表示されます。書き出し前にサムネイルを「150px幅」に縮小して確認するショートカットを習慣にしてください。Figmaなら表示倍率を15〜20%に落とす、Canvaならプレビューモードで画面を小さくして確認するなどの工夫ができます。
失敗3：アイコンと横長サムネイルを別々に作らず流用する正方形アイコンをそのままトリミングして横長に使うと、左右が白帯になったり構図が崩れたりします。用途が異なる画像は最初から別々に作る方が結果的に早いです。
次の行動
まず開発者ツールのデバイスモードで、投稿済みまたは投稿予定のゲームのサムネイル表示サイズを実機相当で確認してください。そのうえで1024×1024pxのキャンバスを新規作成し、ゲームの一番映えるシーンを中央に配置したアイコンを書き出してみてください。アソバースではZIPまたはHTMLとともに画像を登録することができるので、最新の投稿フローは公式サイトで確認するのがおすすめです。
