カード構造

定義

カード（card）は、互いに関連する情報をひとつの面の上にまとめて盛りつける入れ物です。 たいていは上部に画像やメディアが来て、その下に見出しを載せたヘッダー、説明を載せた本文、 そしてボタンやリンクといったアクションが順番に並びます。こうしたいくつものパーツを ひとつの表面でまとめ上げるのがカードの役割なので、ユーザーはカード1枚をそのまま ひとつの完結した単位として受け取ります。このとき内側のパディング、パーツ同士のgap、 角の丸み、そして影のかけ方によって、同じ中身でもあっさりしたカードにも、 華やかなカードにもなります。

なぜ重要か

カードが大切なのは、バラバラに散らばった情報を、ユーザーがひとかたまりとして 認識できるようにしてくれるからです。見出しと画像とボタンがそれぞれ別々に置かれていると、 ユーザーはこれらがひとまとまりなのかを自分で推測しなければなりませんが、ひとつのカードの 中に収まっていれば、特に説明がなくても関連する情報だとすぐに理解できます。とりわけ カードは、リストやグリッドの中で何十個も繰り返し並ぶことがよくあります。このとき カードごとにパディングやgap、丸みが少しずつ違っていると、並べたときに微妙にずれて見えて、 全体が雑然としてしまいます。逆にすべてのカードが同じルールで作られていれば、何十個 並んでも画面は落ち着いた、整ったリズムを保ちます。だからカードは、値をそろえることが 特に重要な要素なのです。

よくある間違い

• カードごとに内側のパディングをバラバラに与えてしまうことです。あるカードはゆったり、 あるカードは窮屈だと、リストで複数のカードが横に並んだとき、高さや余白がデコボコに見えて、 全体がちぐはぐになってしまいます。
• ひとつのカードの中に情報やアクションを詰め込みすぎることです。カードはひとつの単位で あるべきなのに、ボタンがいくつも入り、中身が長くなると、ユーザーはこのカードが何に ついてのもので、何をすればいいのかを一目でつかみにくくなります。
• カード全体を濃い枠線と濃い影で二重に囲んでしまうことです。境界を作る手段を重ねて使うと カードが重たく見え、リストにいくつも並んだとき、画面が窮屈な箱でびっしり埋まって見えます。 どちらか一方だけをほんのり効かせるほうがきれいです。

実務のヒント

• カードの内側のパディングと要素同士のgapを、決めておいた間隔スケールに合わせて固定しましょう。 値をそろえておけば、カードが何枚並んでもお互いにずれず、すっきりと整列します。この ルールは、再利用できるコンポーネントとして作っておくとさらに効果的です。
• カードの性格は、丸みと影で調整しましょう。角ばって影のないカードはあっさりと真面目に、 丸くて薄い影のあるカードはやわらかく浮いている感じになります。プロダクト全体で、この 組み合わせをひとつにそろえておくのがおすすめです。
• カードの中の情報は、上からメディア、見出し、本文、アクションの順に階層を守って配置し、 ユーザーの視線が自然に上から下へ流れるようにしましょう。この順番をすべてのカードで 同じように守れば、ユーザーは毎回どこを見ればいいかを覚え直す必要がなくなります。

関連概念