ゲームUIデザイン

ゲームUIのカード型UIとリスト型UIの違いとは？

2026/03/25

UIを作っていると、ここはカード型がよいかな、それともリスト型かなと迷う場面がありますよね。

特にゲームUIでは、ステージ選択、キャラクター一覧、ミッション一覧、報酬受け取りなど、一覧画面を作る機会がとても多いです。
そのたびに、見た目の印象だけで決めてしまうと、後から何となく使いにくいなとなってしまうことがあります。

では、どうやって判断すればよいのでしょうか。

結論からいうと、まず考えたいのは、プレイヤーがその画面で何をしたいのかです。
カード型とリスト型の違いは、単なる見た目の違いではなく、プレイヤーの行動に合わせた設計の違いなんですね。

今回は、ゲームUIにおけるカード型UIとリスト型UIの違いと、使い分けのコツについてまとめてみます。

カード型UIとは？

カード型UIは、画像、タイトル、状態表示などを、1つのまとまりとして見せるUIパターンです。
各項目が独立したかたまりに見えるため、情報を視覚的に把握しやすいのが特徴です。

一般的なUIガイドラインでも、カードは1つの内容をまとめて見せることや、詳細画面への入口にする使い方に向いているとされています。
ゲームUIでいうと、ステージ、キャラクター、装備、編成などを並べるときに使いやすい形式ですね。

カード型のよいところは、眺めながら選びやすいことです。
まだ候補が決まっていないときでも、画像や色、レアリティ、雰囲気などを見ながら、気になるものを自然に絞り込めます。

リスト型UIとは？

リスト型UIは、アイコン、テキスト、数値、ボタンなどを1行にまとめ、それを縦に並べていくUIパターンです。
各項目の構造が揃うので、情報をすばやく見比べたり、目的の項目を探したりしやすいのが特徴です。

こちらも一般的なUI設計では、似た種類の情報を効率よく並べる形として広く使われています。
ゲームUIだと、ミッション一覧、報酬受け取り、スキル強化、設定画面などが代表例ですね。

リスト型の強みは、探しやすさと比較しやすさです。
プレイヤーが何かを見つけたい、数値や条件を確認したい、そのまま操作したいという目的を持っているときに、特に使いやすくなります。

ゲームUIでカード型が向いている場面

カード型が向いているのは、プレイヤーがまだ何を選ぶか決めていない場面です。

たとえば、ステージ選択画面。
このときプレイヤーは、次はどのステージを遊ぼうかなという気持ちで画面を開くことが多いと思います。テキストだけが並んでいるより、ステージのサムネイルや雰囲気が見えるカードのほうが、直感的に選びやすくなります。

キャラクター一覧や装備一覧も同じです。
ゲームでは、性能だけでなく見た目やレアリティの印象も選択の大きな材料になります。カード型なら、イラストや属性、状態バッジなどをまとめて見せやすいので、情報と魅力を同時に伝えやすいです。

また、編成の切り替え画面でも、主要キャラクターが並んだカードになっていると、どの編成かをひと目で判断しやすくなります。

つまりカード型は、発見しながら選ぶ画面と相性がよい、ということですね。

ゲームUIでリスト型が向いている場面

一方で、リスト型が向いているのは、プレイヤーが明確な目的を持って画面を開く場面です。

たとえばミッション一覧。
プレイヤーは、達成できるものはあるかな、報酬は受け取れるかなという目的を持って開きます。このような場面では、ビジュアルの印象よりも、ミッション名、進捗、報酬、受け取り可否がすばやく分かることのほうが大切です。

報酬受け取り画面もそうですね。
何がどれだけ受け取れるかを確認して、必要ならまとめて操作する。この流れでは、カード型よりも、同じ形式で整理されたリスト型のほうがスキャンしやすくなります。

スキル強化画面も、リスト型と相性がよい場面です。
スキル名、レベル、効果、必要コストなどを並べて比較したいので、一覧性の高いリスト型のほうが判断しやすくなります。設定画面でリスト型が多いのも、同じ理由ですね。

つまりリスト型は、探して確認し、そのまま操作する画面に向いています。

カード型UIとリスト型UIの違いをどう判断する？

では、実際に迷ったときは、どこを見ればよいのでしょうか。
私としては、下記の4つを順番に見ると判断しやすいと思います。

1. プレイヤーは眺めたいのか、探したいのか

これが一番大事です。

まだ候補が決まっておらず、雰囲気や見た目も含めて選びたいならカード型。
一方で、特定の情報を探したり、条件を比較したりしたいならリスト型が向いています。

2. ビジュアルそのものが判断材料になるか

画像や見た目の印象が重要なら、カード型の価値が高くなります。
逆に、テキストや数値が主役なら、リスト型のほうが使いやすいです。

3. 項目ごとの情報量は揃っているか

同じ形式の情報が続くなら、リスト型のほうが整理しやすいです。
逆に、項目ごとに見せたい情報が少しずつ違う場合は、カード型のほうが無理なく構成できます。

4. 主な操作は詳細を見ることか、その場で操作することか

項目をタップして詳細に入るのが中心なら、カード型でも問題ありません。
ただし、各項目ごとに受け取る、強化する、装備するといった操作が多い場合は、リスト型のほうが扱いやすいことが多いです。

実装時に気をつけたいポイント

どちらの形式を選ぶにしても、最終的な使いやすさは細部で決まります。

まず大事なのは、タップしやすさです。
Appleのガイドラインでは 44x44pt、Androidでは 48dp 以上のタップ領域が推奨されています。さらにWCAG 2.2でも、ポインタ入力の最小ターゲットサイズとして 24×24 CSS px が示されています。見た目が整っていても、押しにくいUIはそれだけでストレスになってしまいます。

次に、リスト型では情報の並び順を揃えることが重要です。
毎行で同じ位置に同じ種類の情報があると、視線移動が少なくなり、かなり見やすくなります。

カード型では、情報を詰め込みすぎないことが大切です。
カードは便利なのですが、画像、テキスト、バッジ、進捗バー、ボタンを全部盛りにすると、一気に見づらくなります。カードに何を載せるかは、一覧で見せたい情報に絞ったほうがうまくいきやすいです。