カード内の余白とは?内側の余白とカード同士の間隔を決める方法

カード内の余白の基本

まずは、カードUIとは何か、そしてカード内の余白がどこを指し、なぜ大切なのかを押さえましょう。

カードUIとは

カードUIとは、1つの話題に関する画像・見出し・説明文などを、四角い枠の中にひとまとめにして見せる部品のことです。

UI(ユーザーインターフェース)は、画面上でユーザーが見たり操作したりする部分全体を指す言葉です。

ブログの記事一覧、ネットショップの商品一覧、料金プランの比較など、同じ形の情報をいくつも並べる場面でよく使われます。

1枚のカードが「1つのまとまり」を表すので、たくさんの情報を並べても、どこからどこまでが1件なのかが分かりやすくなります。

カード内の余白とは

カード内の余白とは、カードの枠(縁)と、その中に入る見出しや文章との間に取る空きのことです。

要素の内側に取る余白なので、CSSやデザインツールでは「パディング(padding)」と呼ばれます。

これに対して、カードとカードの間の空きは、カードの外側の余白(間隔)にあたります。

カードを段ボール箱にたとえると、内側の余白は「中身と箱の壁の間に詰める緩衝材」、カード同士の間隔は「並べた箱と箱のすき間」です(内側と外側の余白の違いはCSSのmarginとpaddingの違いとはで解説しています)。

カードをきれいに見せるには、この「内側の余白」と「外側の間隔」の両方をセットで考えることが大切です。

次の見本は、同じカードの内側の余白だけを変えて並べたものです。

NGの見本は、見出しや文章が枠の線にほとんど接していて、情報が箱に押し込められたように見えます。

OKの見本は、内側の余白を広げただけで、同じ内容でもすっきりと読みやすくなっています。

カード内の余白が大切な理由

カード内の余白が大切なのは、カードの読みやすさと、一覧全体の整い方の両方を左右するからです。

• 読みやすさ:枠の線と文字が近いと、線が目に入って文字に集中しにくくなり、内容が詰まって見えます。
• 一覧の統一感:カードは何枚も繰り返し並べる部品なので、内側の余白がカードごとに違うと、文字の書き出し位置がずれて一覧全体が雑然と見えます。

カードは一覧の中で何度も繰り返されるので、1枚のわずかな余白の差が、ページ全体の印象に大きく響くのです。

カード内の余白とカード同士の間隔の決め方

ここからは、カードの内側の余白と、カード同士の間隔を実際にどう決めればよいかを見ていきます。

内側の余白は上下左右を揃えるのが基本

カードの内側の余白は、まず上下左右を同じ値に揃えるのが基本です。

四方の余白が揃っていると、中身がカードの中央にバランスよく収まり、どのカードも同じ形に見えるからです。

小さめのカードなら16px、ゆったり見せたい大きめのカードなら24pxのように、8の倍数から選ぶとほかの余白とも揃えやすくなります(8の倍数を基準にする考え方は余白(デジタル庁デザインシステム)でも紹介されています)。

なお、カードの上部に写真を置く場合は、写真だけをカードの縁まで広げ、文字の部分にだけ内側の余白を取るデザインもよく使われます。

この場合も、文字の部分の左右と下の余白は同じ値に揃えておきましょう。

カード内の要素の間隔にも差をつける

カードの中に入る画像・見出し・説明文・日付などの間隔も、関係の深さに合わせて差をつけると、小さなカードの中でも情報が整理されて見えます。

近くにあるもの同士は同じグループに見えるという「近接の原則」が、カードの中でも働くからです(詳しくは近接の原則とはで解説しています)。

たとえば、見出しと説明文はセットなので近づけ、日付やタグのような補足情報は少し離す、といった具合です。

ただし、カードの中の間隔は、カードの内側の余白(枠から中身まで)より広くしないのが目安です。

中の要素同士が枠よりも離れてしまうと、1枚のカードの中身がばらばらに見え、カードとしてのまとまりが弱くなります。

カード同士の間隔は内側の余白と同じか広めに

カード同士の間隔は、カードの内側の余白と同じか、それより広めにとるのが目安です。

カード同士の間隔が内側の余白より狭いと、隣のカードの中身との距離のほうが近く見えて、1枚ずつのまとまりが分かりにくくなるからです。

次の見本は、内側の余白12pxのカードを、間隔だけ変えて並べたものです。

間隔4pxのNGの見本では、カードの区切りが弱く、3つのカードが1つの大きな表のように見えてしまいます。

間隔16pxのOKの見本では、カードの間にしっかりした空きがあるので、「3つの別々の話題」だとすぐに分かります。

つまり、カードまわりの余白は次の順に広くしていくと、まとまりと区切りが自然に伝わります。

1. いちばん狭く:カードの中の間隔(見出しと説明文の間など)
2. 中くらい:カードの内側の余白(枠から中身まで)
3. 内側の余白と同じか、それより広く:カード同士の間隔

式で書くと、「カードの中の間隔 < カードの内側の余白 ≦ カード同士の間隔」という関係です。

情報量に合わせて余白を調整する

カードに入れる情報が多いほど、内側の余白は削らずに確保することが大切です。

情報が多いカードで余白を詰めると、ただでさえ多い文字がさらに窮屈に見え、どこから読めばよいか分からなくなるからです。

入りきらないときは、余白を削るより、説明文を短くしたり、カードの横幅を広げて1列に並べる数を減らしたりするほうが読みやすさを保てます。

反対に、タイトルだけの小さなカードなら、内側の余白を少し控えめにしてもまとまりは崩れにくくなります。

デザインツールやCSSで設定する例

Figmaでは、カードの枠にオートレイアウト(中身の量に合わせて枠の大きさや並びを自動で調整する機能)をかけると、「パディング」で内側の余白を、「間隔」で中の要素同士の距離を数値で指定できます(オートレイアウトのガイド(Figmaヘルプ))。

カードの一覧を包む枠にもオートレイアウトをかければ、カード同士の間隔も「間隔」で揃えられます。

ここからは、コーディングする人向けの補足です。

CSSでは、カードの内側の余白をpaddingで、カード同士の間隔を一覧の枠のgapで指定します。
内側の余白はカード自身(.card)に、間隔はカードを並べている外側の枠(.card-list)に、と指定する場所が違う点に注意しましょう。

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;         /* カード同士の間隔 */
}

.card {
  padding: 16px;     /* カードの内側の余白(上下左右同じ) */
  border: 1px solid #E7E1D3;
  border-radius: 8px;
}

paddingに値を1つだけ書くと、上下左右すべてに同じ余白がつきます(MDN「padding」)。

gapは、グリッドやフレックスボックスで並べた要素の「間」だけに余白をつけるプロパティで、一覧の外周には余白がつかないので、カード同士の間隔を揃えるのに向いています(MDN「gap」)。

grid-template-columnsの行は、「1枚のカードの幅を240px以上に保ちながら、画面に入るだけ横に並べる」という指定です。

実践のポイント

カード内の余白で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• カードの枠や影のデザインに気を取られ、内側の余白を後回しにして、文字が枠にくっついたまま完成させてしまうことがあります。
  カードを作るときは、枠を描いたらすぐに内側の余白を決めましょう。
• カードごとに内側の余白を手作業で調整し、一覧に並べたときに文字の書き出し位置がずれることがあります。
  同じ種類のカードは、1つの部品(コンポーネント)として作って使い回すと、余白が揃います。
• 情報を詰め込みたくて内側の余白を削り、カードが窮屈になることがあります。
  余白を削るより、載せる情報を絞るほうが、結果的に伝わりやすいカードになります。

よくある質問

• Q. 枠線も背景色もないカードでも、内側の余白は必要?
  A. まず「枠のないカード」とは、線は引かれていないのに、写真とタイトルのかたまりが規則正しく並んでいるニュースサイトやブログの記事一覧のようなデザインのことです。
  枠がなくても1件分の情報がひとまとまりになっているので、これもカードUIの一種といえます。
  こうした枠がないカードでは、内側の余白は見た目にはほとんど現れません。
  その代わり、カード同士の間隔を広めにとって、1件ずつのまとまりを余白で見せることが大切になります。
• Q. カードの高さがばらばらになってしまうときは?
  A. 説明文の長さが違うと、カードの高さも変わります。
  CSSのグリッドで並べると同じ行のカードは高さが揃うので、内側の余白は同じまま、見た目の高さを揃えられます。
  説明文の長さ自体を、なるべく近い文字数に揃えるのも効果的です(カードの高さと並びのリズムの関係は余白のリズムとはで解説しています)。
• Q. スマホでもカードの内側の余白は同じでいい?
  A. 同じ値でも問題ないことが多いですが、画面が狭くカードが1列になる場合は、少し控えめにすることもあります。
  その場合も、カード同士の間隔が内側の余白より狭くならないように注意しましょう。

まとめ

カード内の余白とは、カードの枠と中身の間に取る内側の余白(パディング)のことで、カードの読みやすさと一覧全体の統一感を左右します。

内側の余白は上下左右を揃え、カードの中の間隔はそれより狭く、カード同士の間隔はそれと同じか広めにとると、1枚ずつのまとまりと区切りが自然に伝わります。

まずは、よく使うネットショップやブログの記事一覧を見て、カードの枠から文字までの余白と、カード同士の間隔のどちらが広いかを比べてみてください。