記事一覧や商品一覧を作ろうとして、カードの中に何を入れればいいのか、どこまでを押せるようにすればいいのかと迷ったことはありませんか。
カードUIはよく見かける部品ですが、中に入れる情報の順番や、一覧に並べたときのそろえ方で、見やすさと使いやすさが大きく変わります。
この記事では、カードUIとは何か、向いている場面と向かない場面、画像・見出し・説明・ボタンといった構成と、一覧で並べるときやカード全体を押せるようにするときのコツを、見本を使って初心者向けに解説します。
この記事の見本は、サイトの配色ではなく、架空のサービスの配色(青系)で描いています。見本の部品は押しても動きません。
カードUIの基本
まずは、カードUIとはどんな部品なのか、そしてどんな場面に向いているのかを押さえましょう。
カードUIとは
カードUIとは、1つの話題に関する画像・見出し・説明文などを、四角い枠の中にひとまとめにして見せる部品のことです。
UI(ユーザーインターフェース)は、画面の中で人が見たり操作したりする部分のことで、ボタンや入力欄、カードなどの部品はまとめて「UIコンポーネント」とも呼ばれます。
デジタル庁デザインシステムは、行政機関などのWebサイトやサービスを、誰にとっても使いやすく作るためにデジタル庁が公開しているデザインのルール集です(デジタル庁デザインシステム)。使いやすさやアクセシビリティを踏まえて部品ごとの使い方が定められているので、この記事でもたびたび参考にします。
デジタル庁デザインシステムでは、カードを「単一の主題に関するコンテンツをまとめて表示するコンテナ(入れ物)」と説明しています(カード – デジタル庁デザインシステム)。
名前のとおりトランプのカードのような形で、1枚に詳しい内容をすべて載せるのではなく、「要約」を見せて詳しいページへの入り口にするのが基本の使い方です。
1枚のカードが1件の情報を表すので、たくさんの情報を並べても「どこからどこまでが1件か」がひと目で分かります。
カードUIが向いている場面・向かない場面
カードUIは、似た形の情報をたくさん並べて、見る人に「眺めながら選んでもらう」場面に向いています(カードが多くて1ページに並べきれないときの分け方は、ページネーションとは?で解説しています)。
1件ずつが独立したまとまりになるので、写真を見比べながら気になるものを探す、といった使い方と相性がよいからです。
- 向いている場面
ブログの記事一覧、ネットショップの商品一覧、イベントやお店の紹介、管理画面のトップに「売上」「お知らせ」「予定」など種類の違う情報を並べるときなど。 - 向かない場面
料金や性能を項目ごとに細かく比べたいとき、名前だけを順番に探したいときなど。
比べるなら表、名前を探すなら文字だけのリストのほうが、目を縦や横にまっすぐ動かせて読み取りやすくなります。
デジタル庁デザインシステムでも、データの比較や分析にはカードよりも行と列を使った表のほうが適している、と説明されています。
Webの使いやすさ(ユーザビリティ)を長年調査・研究しているアメリカの専門機関、Nielsen Norman Groupも、カードは種類の違う情報を眺める場面に向く一方、特定の項目を探す場面や比較する場面には向かないと説明しています(Cards: UI-Component Definition(英語))。
「とりあえずカードにする」のではなく、見る人が何をしたいかに合わせて、カード・表・リストを選びましょう。
カードUIの作り方
ここからは、カードの中に入れる要素と並べ方、一覧にしたときのそろえ方、押せる範囲の決め方を順に見ていきます。
カードの構成を決める
カードは、主に次のような要素の組み合わせでできています。
| 要素 | 役割 | 例 |
|---|---|---|
| 画像 | 内容をひと目で想像させる | 記事のアイキャッチ、商品の写真 |
| ラベル | 分類や状態を短く示す | カテゴリ名、「新着」「在庫わずか」 |
| 見出し | そのカードが何についてかを伝える(一番大事) | 記事タイトル、商品名 |
| 説明文 | 見出しを補う短い要約 | 記事の概要、商品の特徴 |
| 補足情報 | 判断の材料になる小さな情報 | 日付、価格、評価 |
| ボタン・リンク | 次の行動の入り口 | 「詳しく見る」「カートに入れる」 |
すべての要素を入れる必要はなく、必須なのは「何についてのカードか」を伝える見出しだけ、と考えると組み立てやすくなります。
デジタル庁デザインシステムでも、画像の領域やリンク・ボタンをまとめる領域は省略できる部分として扱われています(カード 使い方 – デジタル庁デザインシステム)。
並べる順番は、見る人が判断する順番に合わせ、見出しを一番目立つ大きさ・太さにします。
カードは小さな面積に情報を詰め込むので、見出し・説明文・補足情報の文字の大きさや色に差をつけないと、どこから読めばよいか分からなくなるからです。
たとえば「見出しは大きく太く、説明文は普通の大きさ、日付などの補足情報は小さく薄い色で」のように、大事な順に見た目の強さを段階的に下げていきます。このように、画面の中の情報に重要度の順番をつけて見せ分けることを「情報の階層」と呼びます(詳しくは情報の階層の記事で解説しています)。
なお、カードの内側の余白や、カードの中の要素同士の間隔はカード内の余白とは?で詳しく解説しているので、この記事ではカードに入れる中身と並べ方を中心に見ていきます。
カードの境界を枠や影ではっきり見せる
カードは、背景との境目が分かるように、枠線・影・背景色のどれかでカードの形をはっきり見せます。
境目があいまいだと、画像や文字が隣のカードのものと混ざって見え、1枚ずつのまとまりが伝わらないからです。
デジタル庁デザインシステムでは、カードの入れ物には背景色と外周(縁)を持たせ、外周と周りとのコントラスト比(2つの色の明るさの差を表す数値)を3:1以上にするよう定めています。
Webのアクセシビリティ(障害の有無や年齢にかかわらず使いやすくすること)の国際的なガイドラインであるWCAG 2.2でも、ボタンの枠のように部品を見分けるために必要な線や形は、隣り合う色とのコントラスト比を3:1以上にすることを求めています(WCAG 2.2 達成基準1.4.11 非テキストのコントラスト・WAIC日本語訳)。
要するに、ごく薄い灰色の線1本だけで区切ると、視力の弱い人や、明るい屋外でスマートフォンを見ている人には境目が見えにくくなる、ということです。線を少し濃くするか、影や背景色の差を組み合わせて、境目がはっきり見えるようにしましょう(コントラスト比の測り方はコントラスト比とは?で解説しています)。
一覧に並べるときは「位置」と「量」をそろえる
カードを一覧に並べるときは、どのカードでも同じ要素が同じ位置に来るように、画像の比率・見出しの行数・ボタンの位置をそろえます。
見る人はカードを見比べながら選ぶので、見出しや価格の位置がカードごとにずれていると、毎回探し直すことになり疲れてしまうからです。
同じ形の部品をくり返し並べると、見る人は「同じ種類のもの」として受け取り、違いだけに目を向けられるようになります。
人の目には、近くにあるものや形の似たものを、無意識にひとまとまりの仲間として見る性質があります。こうした見え方の決まりをまとめて「ゲシュタルトの法則」と呼びます(詳しくはゲシュタルトの法則の記事で解説しています)。
NGの見本では、画像の縦横の比率がカードごとに違い、1枚だけボタンが見出しより先に来ているため、目が行ったり来たりしてしまいます。
OKの見本では、画像の比率・見出しの位置・説明文の長さ・ボタンの位置がそろっているので、商品名と写真の違いだけをすっと見比べられます。
実際のサイトでは、記事タイトルや商品名の長さはそろわないことが多いので、次のようなルールを決めておくと崩れにくくなります。
- 画像の比率を1つに決める
「16:9」「4:3」「正方形」など、一覧の中では1つの比率に統一します。
写真の比率が違う場合は、決めた比率の枠に合わせて切り抜いて表示します。 - 見出しと説明文の行数の上限を決める
「見出しは2行まで、説明文は3行まで」のように上限を決め、長いものは文章を短くするか、上限を超えた部分を「…」で省略します。 - カードの高さを横の列でそろえ、ボタンは一番下に置く
文字の量が違っても、ボタンやリンクの位置が横一列にそろっていれば、一覧全体が整って見えます。
画像の選び方や比率の決め方そのものは、画像の扱い方として別の記事でくわしく扱う予定なので、ここでは「一覧の中でそろえる」ことだけ押さえておきましょう。
カード全体を押せるようにするか決める
カードを作るときに必ず決めておきたいのが、「カード全体を押せるようにするか」「中のボタンやリンクだけを押せるようにするか」です。
どちらにするかで、見た目の作り方も、カードの中に置けるものも変わるからです。
- カード全体を押せるようにする
記事一覧のように、カードを押したら詳しいページへ移動するだけの場合に向いています。
押せる範囲が広いので、スマートフォンでも指で押しやすくなります。
その代わり、カードの中に別の行き先や操作(保存ボタンやタグのリンクなど)は置けません。 - 中のボタンやリンクだけを押せるようにする
カード自体はただの入れ物にして、押せるのは中のボタンやリンクの部分だけにする方法です。
「詳しく見る」と「カートに入れる」のように、1枚のカードに行き先や操作が2つ以上ある場合に向いています。
カード全体を押せるようにした場合は、カードの中に別のリンクやボタンを置かないのが原則です。
カード全体とその中のボタンが重なっていると、押した場所によって行き先が変わり、見る人も「どこを押すと何が起きるのか」が分からなくなるからです。
デジタル庁デザインシステムでも、カード全体を押せる範囲にした場合は、カードの中にリンクやボタン・チェックボックスなどを持たせることはできないと定めています。
NGの見本では、カードのどこを押しても記事が開くはずなのに、説明文の中のリンクや「保存」ボタンを押すと別のことが起きるため、見る人が押すのをためらってしまいます。
OKの見本は、カードの中を見出し・説明文・日付だけにして、カード全体を1つの入り口にしています。
保存やお気に入りのような操作もカードに付けたい場合は、カード全体を押せるようにするのをやめ、見出しのリンクと「保存」ボタンをそれぞれはっきり分けて置きましょう。
押せるカードはホバー時の変化で伝える
カード全体を押せるようにした場合は、マウスを重ねたとき(ホバー時)に見た目を変えて、「ここは押せる」と伝えます。
ボタンと違って、カードは見た目だけでは押せるかどうかが分かりにくい部品だからです。
よく使われるのは、影を濃くする、カードを少し浮かせる、見出しに下線を付ける、といった変化です。
はじめての家庭菜園
ベランダで育てやすい野菜を紹介します。
はじめての家庭菜園
ベランダで育てやすい野菜を紹介します。
ホバー時の見本では、影と見出しの下線という2つの変化が同時に起きるので、「このカードが押せる」ことがはっきり伝わります。
ただし、スマートフォンにはマウスを重ねる操作がないため、ホバー時の変化だけに頼らず、通常の状態でも枠や影で「1枚のまとまり」に見えるようにしておくことが大切です。
キーボードで操作する人のために、カードを選んだとき(フォーカスが当たったとき)にも、枠線を太くするなどの変化を付けておきましょう(部品の状態ごとの見せ方は、今後「コンポーネントの状態」の記事でまとめる予定です)。
コーディングするときのHTML要素
ここからは、Webサイトを自分でコーディングする人向けの補足です。
デザインツールだけで作る場合は、「カード全体を押せるなら中に別のリンクを置かない」ことだけ押さえておけば十分です。
HTML(Webページの骨組みを書く言語)では、カード1枚を<article>要素で囲み、見出しをリンクにする書き方がよく使われます。
<article class="card">
<img src="garden.jpg" alt="">
<h3><a href="/kitchen-garden/">はじめての家庭菜園</a></h3>
<p>ベランダで育てやすい野菜を紹介します。</p>
</article><article>は、それだけで内容が完結するまとまりを表す要素で、MDNでも使い道の例として商品カードが挙げられています(MDN: <article>)。
見た目は何も変わりませんが、ブラウザや読み上げソフトに「ここからここまでが1つの独立した情報」と伝えられるので、記事や商品を1件ずつ表すカードと相性のよい要素です。
カード全体を押せるようにするには、カード全体を<a>要素で囲む方法と、見出しのリンクの押せる範囲をCSSでカード全体に広げる方法があり、細かい作り方は今後のHTML/CSS入門シリーズで扱う予定です。
実践のポイント
カードUIで陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 1枚のカードに、見出し・長い説明文・タグ・価格・ボタン複数と、情報を詰め込みすぎてしまうことがあります。
カードは詳しいページへの入り口なので、選ぶのに必要な情報だけに絞りましょう。 - 料金プランの細かい違いのように、項目ごとに比べたい情報までカードで並べてしまうことがあります。
比べることが目的なら、表のほうが読み取りやすくなります。 - カードごとに画像の比率や文字の量が違い、一覧ががたがたに見えることがあります。
画像の比率、見出しと説明文の行数の上限、ボタンの位置をルールとして決めておきましょう。 - カード全体を押せるようにしたのに、中にも別のリンクやボタンを置いてしまうことがあります。
行き先が2つ以上あるなら、カード全体は押せないようにして、それぞれのボタンを分けて置きましょう。 - 押せるカードと押せないカード(ただの情報の囲み)が同じ見た目で混ざっていることがあります。
押せるものにはホバー時の変化を付けるなど、見た目で区別できるようにしましょう。
よくある質問
- Q. カードの枠線と影は、どちらを使えばいい?
A. どちらでも構いませんが、サイトの中ではどちらかに統一しましょう。
枠線はすっきりと平面的な印象、影は少し浮き上がって押せそうな印象になりやすいです。
どちらの場合も、背景との境目がはっきり見えるかを確認してください。 - Q. 1列に何枚並べればいい?
A. 決まった枚数はありません。
パソコンでは3〜4枚、スマートフォンでは1〜2枚のように、画面幅に合わせて並べる数を変えるのが一般的です。
文字が読める幅を保てる枚数にとどめ、画面を狭くしたときに1枚あたりの幅が狭くなりすぎないかを確かめましょう(画面の列の分け方はグリッドと余白の関係とは?で解説しています)。 - Q. カードに画像は必ず必要?
A. 必須ではありません。
お知らせの一覧のように、内容を表す画像がない場合は、見出しと日付だけの文字のカードにしても構いません。
ただし、一覧の中で「画像があるカード」と「ないカード」が混ざるとそろわなくなるので、ない場合は代わりの画像を用意するなどして形をそろえましょう。
まとめ
カードUIとは、1つの話題に関する画像・見出し・説明文などを四角い枠にまとめて見せる部品で、似た形の情報を眺めながら選んでもらう場面に向いています。
見出しを一番目立たせて中身を絞り、一覧では画像の比率・文字の量・ボタンの位置をそろえ、カード全体を押せるようにするなら中に別のリンクを置かないことがポイントです。
まずはよく使うネットショップやニュースサイトのカードを1枚選び、「どこを押すとどこへ行くのか」「隣のカードと何がそろっているか」を確かめてみてください。
