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

Yuny — Sat, 19 Sep 2026 15:18:27 +0000

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

この記事はこんな方に向けて書いています

カードUIを作ると画面全体がごちゃついて野暮ったく見えてしまう方
枠線・ドロップシャドウ・余白のどれで境界を作るべきか迷っている方
クリック領域のアクセシビリティや破綻しないレイアウト設計を整理したい方

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

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

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

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

クイックアンサーカード型UIの本質的な役割とは？

カード型UIの役割は、異なる種類の情報（画像・タイトル・メタ情報・アクション）を1つの独立したコンテンツ単位としてグルーピングし、認知の負荷を下げることです。
情報を詰め込む箱ではなく、「ひと目でコンテンツの塊を判別させるための視覚的な境界線」として機能します。

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

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

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

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

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

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

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

比較項目	カード型UI	リスト型UI
主な用途	探索型ブラウジング（写真・ビジュアル重視）	検索・高速比較（タイトル・日付・数値重視）
視覚的情報量	高い（アイキャッチやボタンを含む）	低い〜中程度（テキスト主体）
画面の専有面積	大きい（1画面に3〜6件程度）	小さい（1画面に10件以上表示可能）
ユーザーの行動	じっくり眺めて直感的に選ぶ	上から下へ素早くスキャンして探す
代表例	EC商品一覧、SNSフィード、ダッシュボード	メールの受信トレイ、設定項目、検索結果一覧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アプローチ	視覚的な重み	推奨されるユースケース	設計時の注意点
枠線（ボーダー）	中	フォームパネル、ダッシュボード、白背景画面	濃い色を避け、ごく薄い無彩色で組む
影（シャドウ）	高	クリッカブルな記事カード、商品カード	影を濃くしすぎず、光源と拡散を自然にする
サーフェス背景色	低〜中	モダンSaaS、アプリダッシュボード	ページ背景とカード背景の明度差を確保する
余白のみ	最小	ミニマルなポートフォリオ、メディア一覧	近接の法則を意識し、外側余白を広めに取る

実務でよくある失敗が、「枠線と濃い影の両方を適用してしまう」パターンです。
線と影が喧嘩して画面がごちゃつく原因になるため、基本は「枠線主体」「影主体」「面差主体」のいずれか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の法則）にも優れています。
しかし、単純にカード全体をタグで囲んでしまうと、アクセシビリティやHTML仕様の面で重大な問題が発生します。

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

スクリーンリーダーでの全文章読み上げ問題:
カード全体がリンクになっていると、画像Altから本文まですべてが1つの長大なリンクテキストとして読み上げられます。
音声読み上げを利用するユーザーにとって、何のリンクかを判断する大きな負担になります。

インタラクティブ要素のネスト（リンク内リンク）の禁止:
カード内に「お気に入りボタン」や「タグ」が含まれる場合、タグの中に別のや

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

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

Bootstrap等でも標準化されているこの手法では、カード内で最も重要な要素である「タイトルのリンク（

`タイトル`

）」の ::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（省略表示）と最大行数を設定しておくと、モックアップ作成時にも実データに近い自然な検証が行えます。