ゲームのカードデザイン：一覧で目を引く
遊びをつくる執筆にClaudeを使用しています。
プラットフォームの一覧画面でゲームのカードが並ぶとき、プレイヤーが最初に見るのはサムネイル画像とタイトルの組み合わせです。どれだけゲーム本体が面白くても、カードの段階でスクロールして通り過ぎられれば、プレイされる機会は生まれません。「目を引く」とは派手にするということではなく、ゲームの内容をコンパクトに伝えて「これは自分向きかもしれない」と思わせることです。 この記事では、一覧表示を前提にしたカードデザインの判断基準と、実際に手を動かす手順を示します。レイアウトの美学ではなく、「一覧の中の1枚」として機能するかどうかを軸に置きます。
この記事の目次
一覧表示でカードが果たす役割を整理する
一覧の中のカードは、ゲームの入口となる小さな広告です。クリックを促すために伝えるべき情報は、実は3つだけです。ジャンルや雰囲気（どんな体験か）、難易度や対象者（自分に合いそうか）、視覚的な個性（他と区別できるか）。この3つが一瞬で伝わるカードは、説明文を読む前にタップしたいと思わせます。
一覧画面では複数のカードが同時に視野に入ります。自分のカードが「隣のカードとどう違うか」を意識しないと、並べた時点で埋もれます。単体で見て綺麗なサムネイルでも、隣に似たトーンのカードがあれば印象は薄れます。デザインの判断は常に「一覧の中の1枚」として行う必要があります。
サムネイル画像の作り方：情報密度と余白のバランス
カードの大半を占めるサムネイルは、横長（16:9）か正方形（1:1）で作るのが基本です。表示サイズが小さくなっても潰れないよう、中心に置く要素は1〜2個に絞ります。
避けるべき構成の例
- キャラクターや物体を画面いっぱいに並べる（小サイズで何か分からなくなる）
- 細かいテキストをサムネイルに入れる（100px幅では読めない）
- グラデーションの上に薄い色のテキストを重ねる（コントラスト不足で視認性が下がる）
- スクリーンショットをそのまま使う（ゲーム内UIが邪魔になることが多い）
機能するサムネイルの条件
中心に「ゲームを象徴する1オブジェクト」を置き、背景との明度差を十分に取ります。たとえば、暗い背景に明るい主役、または明るい背景にシルエット。この組み合わせは縮小しても輪郭が残ります。色数は3色以内に制限すると、小さなサイズでも統一感が保てます。
フォントを使う場合は太めのサンセリフ系（日本語ならゴシック系）を使い、1行で収まるタイトルだけをサムネイルに載せます。ゲームジャンルをアイコンで補足する方法も有効です。パズルならピースのシルエット、アクションなら剣のシルエットなど、汎用的な形で伝えられます。
タイトルテキストの設計：読まれる前に機能させる
一覧でのタイトルはカード画像の下か上に表示されます。文字数が多いと途中で省略されるため、10〜16文字程度を目安にします。
タイトルに含めると効果的な要素は次の通りです。
- ジャンルを暗示する語（「〜パズル」「脱出〜」「〜サバイバル」など）
- 数字や具体性（「100ステージ」「3分で終わる」など、規模感が伝わる）
- プレイヤーが主語になれる語（「〜を探せ」「〜を守れ」など、体験への誘いになる）
逆に、タイトルに「面白い」「最高の」「究極」などの評価語を入れても、一覧では機能しません。プレイヤーは評価語を読んで選ぶのではなく、自分の好みに合うかどうかで選ぶからです。
一覧の中で「隣と違う」を作る色戦略
同じプラットフォームに並ぶカードは、無意識に似たトーンに集まりがちです。ファンタジー系は青・紫、アクション系は赤・黒、パズル系は明るい原色、という傾向があります。
自分のゲームがこの傾向と同じトーンなら、彩度か明度をずらすだけで視線を引きやすくなります。たとえば、ファンタジー系なのに暖色系（オレンジ・ベージュ）を使う、パズル系なのに淡いモノトーンにする、といった選択です。完全に外すとジャンルが伝わらなくなるため、メインカラーだけずらしてサブカラーはジャンルの慣習に従う方法が安全です。
色のチェックリスト
- サムネイルを50%に縮小して、主役オブジェクトの輪郭が分かるか確認する
- グレースケールに変換して、明度差が十分か確認する（色を抜いた状態でもコントラストがあるか）
- 同カテゴリの他ゲームのサムネイル5〜10枚を横に並べて、自分のカードが埋もれていないか確認する
説明文の最初の1行：カードの補足として使う
カードに添付する説明文の冒頭1行は、サムネイルとタイトルを見てから読まれます。ここで「〜がテーマのゲームです」と繰り返しても情報が増えません。
最初の1行で機能する書き方は、プレイ時間・操作方法・難易度のいずれか1つを具体的に示すことです。「マウスだけで遊べます」「1プレイ3分の短時間パズルです」「スマホタッチ対応、クリア率30%の難関面あり」といった文は、プレイするかどうかの判断材料を即座に渡せます。
説明文は一覧上では数十文字しか見えないことが多く、続きを読むには詳細ページへ移動が必要です。だからこそ、最初の1行に最も決定的な情報を置きます。
完成前の確認：実際の表示環境でテストする
デザインツール上のプレビューと、プラットフォームの一覧画面に表示されたときの見え方は異なります。投稿前に次の手順で確認することを勧めます。
- サムネイル画像をスマートフォンのブラウザで開き、縮小表示を確認する
- 一覧ページのスクリーンショットを撮り、自分のカードを画像編集ツールで貼り付けて「並んだ状態」を再現する
- 5秒見て視線が自分のカードに向かうかどうかを、別の人に確認してもらう
3番目の確認は、デザインを知らない人に「どのカードが気になりますか」と問いかけるだけで十分です。説明を加えず5秒以内に選ばれなければ、修正の余地があると考えます。
次の行動
作っているゲームのサムネイルを、同じジャンルの公開済みゲーム5本のサムネイルと横に並べて比べてみてください。埋もれていると感じたら、まずメインカラーの明度か彩度を一段ずらすことから始めると変化が分かりやすいです。アソバースへ投稿する際は、HTMLファイルまたはZIPファイルとともにサムネイルと説明文を設定し、一覧上での見え方を確認してみてください。
