カード型レイアウトは、情報を四角い枠にまとめて並べる形式です。整理された印象になり、画面幅に応じて折り返せるため、多くのサイトで使われています。
ただし並べたものはすべて同じ重みに見えます。これは利点でもあり欠点でもあります。並列の選択肢を見せるには適していますが、優先順位を伝えたい場面では機能しません。
この記事では、向く場面と向かない場面、1枚に入れる情報の決め方、並べ方の判断、そして確認すべき箇所を整理します。
この記事でわかること
・並べたものは同じ重みに見える
・並列の選択肢には向き、優先順位には向かない
・1枚に入れる情報は判断に必要な最小限にする
・枚数が増えると比較されなくなる
・画面が狭いと縦に長く続く
・使わない選択肢もある
並べたものは同じ重みに見える
同じ形の枠に入れると、内容の重要度に関わらず対等に見えます。
| 伝えたいこと | カード型の適性 | 理由 |
|---|---|---|
| 並列の選択肢がある | 高い | 対等であることが伝わる |
| 同じ種類のものが複数ある | 高い | 比較しやすい |
| 特定の1つを勧めたい | 低い | 差がつかない |
| 順序に意味がある | 低い | 並列に見える |
| 主従関係がある | 低い | 同格に見える |
主力サービスとそれ以外を同じ形で並べると、主力が伝わりません。差をつけたい場合は、大きさを変えるか、カード以外の形式にしてください。
差のつけ方はデザインのジャンプ率とは｜差をつける幅で印象と伝わり方が変わるを参照してください。
同じ形に入れると、重要度に関わらず対等に見える。
主力を伝えたい場面では機能しない。
1枚に入れる情報は最小限にする
カードは面積が限られるため、入れる情報を絞る必要があります。
- そのカードを選ぶかどうかの判断に必要な情報を挙げる
- その中から、比較の軸になるものだけを残す
- 残りは遷移先に置く
- 全カードで同じ項目を、同じ順序で並べる
- 項目が欠けるカードがある場合、表記を統一する
カードごとに項目が違うと、比較ができなくなります。価格が入っているものと入っていないものが混在すると、入っていないほうが避けられます。項目を揃えるか、揃えられないなら別の形式を検討してください。
判断の軸になる項目だけを残し、全カードで揃える。
項目が欠けたカードは、比較の対象から外れる。
枚数が増えると比較されなくなる
並べる数には実用的な上限があります。
| 枚数 | 起きること | 対応 |
|---|---|---|
| 3〜6枚 | 全体を見て比較できる | 適量 |
| 7〜12枚 | 一度に把握しきれない | 分類するか絞り込みを付ける |
| それ以上 | 上から数枚しか見られない | 検索や絞り込みが必要 |
枚数が多い場合、並べること自体より、絞り込む手段のほうが重要になります。一覧として大量に並べるなら、条件で絞れる仕組みを先に用意してください。
情報の整理は情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。
枚数が増えるほど、並べることより絞り込みが重要になる。
大量に並べるなら、条件で絞れる仕組みを先に用意する。
画面が狭いと縦に長く続く
画面幅に応じて折り返せる点が利点ですが、狭い画面では1列になり、縦に長く続きます。
| 画面幅 | 見え方 | 起きること |
|---|---|---|
| 広い | 3〜4列で並ぶ | 一覧して比較できる |
| 中程度 | 2列 | 比較できる |
| 狭い | 1列 | スクロールしながら記憶で比較する |
狭い画面では、比較という利点が失われます。前のカードの内容を覚えていないと比べられないためです。スマートフォンでの利用が中心なら、カードを縦に並べるより、表形式や絞り込みのほうが機能することがあります。
狭い画面での設計はモバイルファーストデザインとは？重要視される理由と設計のコツを参照してください。
狭い画面では1列になり、比較の利点が失われる。
スマートフォン中心なら、別の形式のほうが機能することがある。
カードとして押せることを伝える
カード全体が押せるのか、中のリンクだけが押せるのかが分からない状態は避けてください。
- カード全体を押せるなら、カーソルを乗せたときに変化を付ける
- 中に複数のリンクを置くと、どこを押すか迷わせる
- 押せる範囲を、見た目の枠と一致させる
- スマートフォンでは、隣のカードとの間隔を確保する
カード内にボタンとリンクを複数置くと、選択肢が増えて判断が遅れます。主要な行動を1つに絞ってください。誤タップの防ぎ方はスマホで押しやすいボタンの設計｜大きさより間隔が誤タップを決めるを参照してください。
押せる範囲を、見た目の枠と一致させる。
カード内に複数の行動を置くと、判断が遅れる。
使わない選択肢もある
カード以外の形式が適している場面があります。目的から選んでください。
| 目的 | 適した形式 | 理由 |
|---|---|---|
| 並列の選択肢を見せる | カード | 対等であることが伝わる |
| 条件を細かく比較する | 表 | 項目が縦に揃う |
| 順序を伝える | 番号付きの縦並び | 順番が明確になる |
| 1つを勧める | 大きく1つ＋補足 | 主従が伝わる |
| 読ませる | 通常の文章 | 流れが途切れない |
細かい条件を比較させたいなら、表のほうが正確に伝わります。カードは項目が横に散るため、同じ項目を見比べるのに視線が動きます。
細かい比較には表のほうが向く。
カードは項目が横に散るため、見比べに視線が動く。
確認すべき箇所
実装後、実際の内容で確認してください。
- 最も長いタイトルで、カードの高さが崩れないか
- 画像がないカードがある場合、空白が不自然にならないか
- 項目が欠けるカードで、レイアウトがずれないか
- 狭い画面で、1枚が縦に長くなりすぎないか
- 枚数が少ないとき、右側が不自然に空かないか
見本の短いタイトルで作ると、実際の内容で高さが揃わなくなります。最も長いものと最も短いもので確認してください。
実際の最も長いタイトルと、画像がない場合で確認する。
見本の短い文字列では、高さの崩れが見つからない。
他の要素との順序
デザインの各要素には依存関係があり、決める順序が結果を左右します。この要素が全体のどこに位置するかはWebデザインの構成要素はどの順で決めるかを参照してください。
よくある失敗
優先順位があるものを同じ形で並べる
主力が伝わりません。大きさを変えるか、別の形式にしてください。
カードごとに項目が違う
比較ができず、項目が欠けたカードが避けられます。揃えてください。
枚数を絞らずに並べる
上から数枚しか見られません。絞り込む手段を用意してください。
カード内に複数の行動を置く
どこを押すか迷わせます。主要な行動を1つに絞ってください。
見本の短い文字列で確認する
実際の内容で高さが揃わなくなります。最も長いもので確認してください。
よくある質問
何枚までなら並べてよいですか
一度に把握できるのは6枚程度までが目安です。それ以上は分類するか、絞り込みを付けてください。ただし数より、比較の軸が揃っているかのほうが重要です。
画像は必須ですか
必須ではありません。ただし一部のカードだけ画像がある状態は、レイアウトが崩れて見えます。全てに入れるか、全て入れないかで揃えてください。
影を付けるべきですか
枠が分かれば必要ありません。影は要素の重なりを示す表現であり、並列のカードでは意味を持ちません。線や背景の差でも区別できます。
高さを揃えるべきですか
揃えると整いますが、内容が少ないカードに余白が生まれます。揃えない場合は、下端がばらつきます。どちらを許容するかを決めてください。内容量の差が大きい場合は、表示する文字数を制限する方法もあります。
価格を入れるべきですか
比較の軸になるなら入れてください。ただし全カードで揃える必要があります。一部だけ「要問い合わせ」となる場合、その表記でも揃っていれば比較は成立します。
まとめ
カード型レイアウトは情報を整理して見せられる形式ですが、並べたものはすべて同じ重みに見えます。これは並列の選択肢を示すには適している一方、優先順位を伝えたい場面では機能しません。主力サービスとそれ以外を同じ形で並べると、主力が伝わらなくなります。
1枚に入れる情報は、判断の軸になるものだけに絞ってください。そして全カードで同じ項目を同じ順序で並べる必要があります。カードごとに項目が違うと比較ができず、価格が入っているものと入っていないものが混在すれば、入っていないほうが避けられます。
また画面が狭いとカードは1列になり、縦に長く続きます。この状態では前のカードの内容を覚えていないと比べられず、比較という利点そのものが失われます。スマートフォンでの利用が中心なら、表形式や絞り込みのほうが機能することがあります。目的が細かい条件の比較であれば、そもそも表のほうが正確に伝わります。
当社ではデザイン制作において、目的に応じた見せ方をご提案しています。サイト全体の構成はホームページ制作とあわせてご相談ください。
