カード型UIの設計ルール｜枠線・影・余白の使い分けと情報整理術

こんにちは！UIデザイナーのYunyです。

Webサイトやアプリの画面を作っていると、必ずと言っていいほど登場するのがカード型UIです。
複数の情報を1つのブロックにまとめられるため、非常に便利で扱いやすいコンポーネントですよね。

しかし、いざ作ってみると「なぜか画面全体が重苦しい」「要素を詰め込みすぎて何を見ていいか分からない」と悩むことも少なくありません。
自分自身もデザインを始めた当初は、見やすさを求めて枠線と影を両方重ねてしまい、画面を野暮ったくしてしまった経験がありました。

今回は、実務で迷いがちなカード型UIの設計ルールと、情報の詰め込みすぎを防ぐレイアウトの基本を整理してお伝えします。

そもそもカード型UIの役割とは？（リストUIとの違いと認知の区切り）

UIデザインにおけるカードとは、現実世界の「名刺」や「トランプ」のように、それ単体で意味が完結する情報のまとまりを指します。
ユーザーは画面を一目見ただけで「ここからここまでが1つの情報だ」と直感的に把握できるため、認知の負荷を大幅に軽減できるのが大きな特徴です。

カードUIが適している3つの場面

カードUIを採用すべき代表的なシチュエーションは、以下の3点です。

• 画像とテキストをセットで見せたい場合（ECサイトの商品一覧、ブログ記事一覧、ポートフォリオなど）
• カードごとに完結したアクションがある場合（予約カードの「確定する」、タスクカードの「完了」など）
• 異なるデバイス幅に柔軟に対応させたい場合（PCでは3カラム、スマホでは1カラムに並び替えるグリッド設計）

カードUI vs リストUIの使い分け

一方で、すべての情報をカードにすれば良いわけではありません。
カードUIは1つの情報あたりの専有面積が大きくなるため、一覧性や比較のしやすさという点ではシンプルなリストUIに劣る場合があります。

両者の視覚的な特徴と使い分けの基準を整理したのが、以下の図解です。

例えば、受信トレイやファイル一覧のような「目的の項目を素早く探したい画面」に大きなカードを並べてしまうと、スクロールの手間が増えてユーザーにストレスを与えてしまいます。
「ビジュアルで引きつけて選ばせたいならカード、素早く見比べて探させたいならリスト」という使い分けが、最初の判断基準になります。

枠線・影・背景色・余白｜カードの境界線を作る4つのアプローチ

カードUIを設計する際、最もデザイナーを悩ませるのが「境界線をどう表現するか」という点です。
境界線の作り方には大きく分けて4つのアプローチがあり、それぞれ視覚的な重みや適したシーンが異なります。

各アプローチの見た目と推奨ユースケースをまとめた全体像がこちらです。

1. 枠線（ボーダー）：境界を最も厳格に区切る

枠線は、カードの輪郭をはっきりと定義する最も直接的なアプローチです。
フォームの入力欄やダッシュボードの数値パネルなど、情報の境界線を厳格に区切りたい場面に適しています。

枠線を使う際の実務的なポイントは、線の太さと濃さを最小限に抑えることです。
濃いグレーや太い線を引いてしまうと、線自体の主張が強くなりすぎて中のコンテンツ（テキストや画像）を邪魔してしまいます。
背景色に対してわずかにコントラストがつく無彩色（実務の目安として1pxの薄いグレー）を選び、控えめに佇ませるのが上品に仕上げるコツです。

2. 影（ドロップシャドウ）：階層とクリック可能性を示す

ドロップシャドウは、カードを背景からふわりと浮き上がらせることで、画面内の「Z軸（奥行き・階層）」を表現する手法です。
人間は浮いている要素に対して「触れる」「押せる」というアフォーダンス（操作の手がかり）を感じるため、クリッカブルなカードに最適です。

影を設計する際は、真っ黒で硬い影を落とすのではなく、拡散（Blur）を広めにとった透明度の低い影を重ねるのが現在のモダンUIの標準です。
また、ホバー時に影の広がりやY軸オフセットをわずかに変化させることで、心地よいフィードバックを生み出すことができます。

3. サーフェス背景色（面のコントラスト）：軽快でモダンな境界

枠線も影も使わず、背景色との面差だけで境界を作る手法です。
例えば、ページ全体の背景色を淡いペールブルーやライトグレーにし、カード自体の背景を真っ白（#ffffff）に設定することで、自然な浮き上がりを作ります。

このアプローチは装飾線や影のノイズが一切ないため、画面全体を非常にすっきりとクリーンに見せられるのが最大のメリットです。
情報量の多いダッシュボードや、現代的なWebサービスのUIで広く採用されています。

4. 余白のみ（近接のグルーピング）：引き算の美学

ゲシュタルト心理学の「近接の法則」を利用し、線も影も使わずに適切なホワイトスペース（余白）だけでコンテンツの塊を認識させる徹底した引き算のアプローチです。
カード同士の間隔をしっかり空けることで、装飾に頼らずとも情報のグループが自然と視界に入ってきます。

ミニマルで洗練された印象を与えられますが、余白のバランス設計が甘いと「バラバラのテキストが散らばっているだけ」に見えてしまうため、後述する余白比率の厳格な管理が必要です。

境界線アプローチの使い分け早見表

実務でよくある失敗が、「枠線と濃い影の両方を適用してしまう」パターンです。
線と影が喧嘩して画面がごちゃつく原因になるため、基本は「枠線主体」「影主体」「面差主体」のいずれか1つを主役に選び、引き算で設計することを心がけてみてください。

情報の詰め込みすぎを防ぐ！カード内レイアウトの視覚階層ルール

カードUIがダサく見えたり使いづらくなったりする最大の原因は、1枚のカードの中に情報を詰め込みすぎることです。
日付、カテゴリタグ、著者アイコン、お気に入りボタン、要約文、シェアボタン……と要素を足していくと、カード自体が「小さなWebサイト」のように複雑化してしまいます。

カード内の視覚階層と余白のバランスをまとめた基本モデルがこちらです。

カード内のレイアウトを美しく保つためには、以下の3つの原則を意識します。

原則1：1カード1メッセージに絞る

カードの主目的は「詳細画面への導線」や「1つの明確な意思決定」です。
カード単体で完結させようとせず、ユーザーが次に進むために本当に必要な情報だけを厳選する必要があります。

例えばブログカードであれば、「魅力的なアイキャッチ」「クリックしたくなる見出し」「カテゴリ」の3つがあれば十分です。
長文の要約や複数のSNSシェアボタンは、詳細ページに入ってから見せれば問題ありません。

原則2：上から下へ流れる視覚階層（Visual Hierarchy）

カード内の要素は、ユーザーの視線が上から下へ自然に流れるように配置します。

• ① アイキャッチ画像: 最上部で視線をキャッチし、コンテキストを一瞬で伝えます。
• ② カテゴリタグ: 情報のジャンルを素早く定義します。
• ③ タイトル / 見出し: 最も太く濃い文字で主メッセージを伝えます。
• ④ 補助テキスト / 抜粋: 必要最小限の補足情報を2〜3行でスマートにまとめます。
• ⑤ フッターアクション: 日付やPrimaryボタンなど、意思決定のアクションを促します。

視線の流れがジグザグに行ったり来たりしないよう、「見る ➔ 読む ➔ 判断する」という自然な認知プロセスに沿って縦方向に整列させることが大切です。

原則3：外側余白 ≧ 内側余白 ＞ 要素間余白の距離感ルール

カードUIの洗練度を決定づけるのが、余白（Spacing）の相対的な比率です。
美しいカードコンポーネントを観察すると、必ず以下の不等式が成り立っています。

外側の余白（カード同士の間隔） ≧ 内側の余白（Padding） ＞ 要素間の余白（Gap）

• カード同士の間隔（Margin / Grid Gap）: 最も広く取り、カード同士が独立した塊であることを示します（目安: 24px〜32px）。
• カードの内側余白（Card Padding）: コンテンツが枠線にぶつからないよう、十分な呼吸空間を確保します（目安: 16px〜24px）。
• 内部の要素間隔（Internal Gap）: タイトルと本文の間など、関連する要素同士はキュッと近づけて近接感を保ちます（目安: 8px〜12px）。

この距離感のメリハリが崩れ、内部の要素間隔とカード外側の間隔が同じになってしまうと、どこからどこまでが1つのグループなのかが脳内で即座に判別できなくなります。
「関連するものは近づけ、別グループは離す」というゲシュタルトの近接を意識するだけで、ぐっと整った印象に仕上がります。

全体クリック vs 個別リンク｜アクセシビリティを損なわない実装パターン

カードUIの実装において、デザイナーとエンジニアの間で最も議論になりやすいのが「クリッカブル領域（タップ範囲）の設計」です。

ユーザー視点では「カードのどこを押しても詳細ページへ飛べる」のが最も操作しやすく、スマホでの操作性（Fittsの法則）にも優れています。
しかし、単純にカード全体を <a> タグで囲んでしまうと、アクセシビリティやHTML仕様の面で重大な問題が発生します。

カード全体をaタグで囲む2つの落とし穴

• スクリーンリーダーでの全文章読み上げ問題:
  カード全体がリンクになっていると、画像Altから本文まですべてが1つの長大なリンクテキストとして読み上げられます。
  音声読み上げを利用するユーザーにとって、何のリンクかを判断する大きな負担になります。
• インタラクティブ要素のネスト（リンク内リンク）の禁止:
  カード内に「お気に入りボタン」や「タグ」が含まれる場合、<a> タグの中に別の <a> や <button> を入れることはHTMLの仕様違反です。
  スマートフォン等でタップした際に意図しないリンクが発火し、誤タップの原因になります。

解決策：擬似要素（Stretch Link）を活用した設計

この問題を美しく解決する実務的なベストプラクティスが、CSSの擬似要素を使った「Stretch Link（ストレッチリンク）」パターンです。

Bootstrap等でも標準化されているこの手法では、カード内で最も重要な要素である「タイトルのリンク（<h3><a href="...">タイトル</a></h3>）」の ::after 擬似要素を position: absolute; inset: 0; でカード全体に広げます。

/* カード本体を相対配置 */
.ui-card {
  position: relative;
}

/* タイトルリンクの擬似要素をカード全面に拡張 */
.ui-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* カード内の個別ボタンやタグは前面に配置して独立操作を保証 */
.ui-card__favorite-btn,
.ui-card__tag {
  position: relative;
  z-index: 2;
}

この設計にすることで、以下のメリットが同時に得られます。

• セマンティクスとアクセシビリティの保持: スクリーンリーダーはタイトルのみを簡潔なリンクとして読み上げます。
• カード全面のクリック性: ユーザーはカードのどこをタップしても詳細ページへ遷移できます。
• 個別アクションの共存: お気に入りボタンやタグは z-index: 2 で前面に出ているため、カード全体の遷移を発火させずに単独でクリックできます。

デザイナー側でもこの構造を理解しておき、「カード全体をクリック可能にしつつ、お気に入りボタンは独立して押せる仕様にする」といったエンジニアとの共通言語を持っておくことが、手戻りのないスムーズな実装につながります。

Figmaオートレイアウトでのカードコンポーネント設計手順

最後に、Figmaで実際にカードコンポーネントを組む際の手順と、破綻しないオートレイアウト（Auto Layout）の組み方を整理します。

1. 3層のネスト構造で組む

カードコンポーネントは、1つのフレームに全要素を平坦に並べるのではなく、意味のある3つの階層に分けてネストします。

• 最外枠コンテナ（Card Root）: 縦方向のオートレイアウト。角丸（目安: 12px〜16px）、クリップコンテンツ、背景色、枠線または影を設定。Paddingは上下左右均等。
  – 画像フレーム（Image Container）: 幅 Fill、高さ Fixed（アスペクト比16:9等）。画像をFillで配置。
  – コンテンツフレーム（Body Container）: 縦方向のオートレイアウト。幅 Fill、高さ Hug。タイトル、タグ、本文をまとめる。
  – フッターフレーム（Footer Container）: 横方向のオートレイアウト。幅 Fill、高さ Hug。日付やアクションボタンを両端揃え（Space Between）で配置。

2. リサイズ挙動は「幅 Fill / 高さ Hug」が基本

カードをレスポンシブに伸ばしたりグリッドで並べたりする際、最も重要なのがリサイズ挙動の設定です。

• 横方向（Width）: カード内部のすべてのテキストやコンテナを Fill container に設定します。これにより、親のグリッド幅が変化してもテキストが自動で折り返され、枠外にはみ出しません。
• 縦方向（Height）: 最外枠およびコンテンツコンテナを Hug contents に設定します。テキストが2行や3行に増えた場合でも、カード全体の高さがコンテンツ量に応じて自然に伸び縮みします。

3. テキストの行数制限（Truncate）のルールを決めておく

実務の運用でよくあるのが、「タイトルが長すぎてカードの高さがバラバラになり、グリッドの並びがガタつく」という問題です。

デザインシステムの段階で、「タイトルは最大2行まで表示し、超える場合は3点リーダー（...）で省略する」「抜粋文はPCで3行、スマホで非表示」といったテキストの行数制限ルールをチームで決めておきましょう。
Figmaのテキストプロパティで Truncate text（省略表示）と最大行数を設定しておくと、モックアップ作成時にも実データに近い自然な検証が行えます。

次のステップ：あわせて深掘りしたい知見

カード型UIのレイアウトやコンポーネント設計をさらに極めたい方は、以下の関連記事もぜひ参考にしてみてください。

カード型レイアウトの発展形として、昨今のWebで広く活用されているのがBento UIです。
四角形のカードを美しく敷き詰めるグリッド設計の基本を整理していますので、ぜひあわせてご覧ください。

Bentoグリッド（Bento UI）とは？参考サイト事例とFigmaでの作り方

AppleやMicrosoftが採用して話題のBentoグリッド（Bento UI）。カードを美しく敷き詰めるグリッド設計の基本とFigmaでの作成手順を整理して解説します。

カード内の余白崩れを防ぎ、コンテンツ量に応じて自動伸縮させるにはAuto Layoutの理解が欠かせません。
PaddingやGapの具体的な数値設定から崩れないネスト手順まで詳しく解説しています。

Figmaオートレイアウト完全ガイド！崩れないネストと余白設計

Figmaオートレイアウトの基本と崩れないネスト設計を解説。Padding・Gapの設定からHug・Fillの使い分けまで、実務でのコンポーネント構築手順を網羅。

カード内に配置するPrimaryボタンや補助アクションの優先度設計に迷った際は、こちらの記事が役立ちます。
Apple HIG準拠の44ptタップ領域の確保や、ユーザーが迷わない視覚的ヒエラルキーの作り方を整理しています。

ボタンのUIデザイン設計ガイド｜Primary・Secondary優先度と44pt基準

ボタンの視覚的優先度（Primary / Secondary / Tertiary）の決め方と、Apple HIG準拠の44ptタップ領域の設計基準を解説。

まとめ：境界線の引き算と適切な視覚階層が使いやすいカードUIを作る

カード型UIは、一見するとシンプルな四角形の組み合わせに見えますが、枠線や影の選び方、情報の引き算、そしてクリック領域のアクセシビリティなど、細部への配慮によって使い心地が大きく変わるコンポーネントです。

「情報を詰め込む箱」ではなく「ユーザーの思考を助ける認知の区切り」としてカードを捉え直すことで、画面全体の秩序と一覧性が高まります。
実務の画面設計において、境界線の足し算を見直し、目的に合った適切なアプローチを選定してみてください。