カード型デザイン7種まとめ｜HTMLとCSSで実装できるUI例
Webデザイン

カード型デザイン7種まとめ｜HTMLとCSSで実装できるUI例

Webデザインにおける「カード型デザイン」は、Googleのマテリアルデザインにも採用されている定番のUIパターンです。画像・テキスト・ボタンといった複数要素を1つのブロックにまとめ、情報を整理しながら直感的に伝えることができます。特にレスポンシブデザインに適しており、スマートフォンからPCまで統一感のあるレイアウトを提供できます。 

本記事では、HTMLとCSSのコピペで実装可能な7種類のカードデザインを取り上げ、それぞれの特徴やユースケース、サンプルコードを詳しく紹介します。 

 

1. リンクボタン付きの四角いカード 

まず基本となるのが、リンクボタンを持ったシンプルな四角いカードです。無駄な装飾を排除したレイアウトで、記事一覧やサービス紹介のカードに適しているのが特徴です。 

項目 

内容 

概要 標準的な四角いカード。汎用性が高く、ブログやECサイトにも活用可能。 
特徴 ・直線的なデザイン・ボタン付きでユーザーアクションを誘導・レスポンシブ対応が容易 
活用例 記事一覧ページ、製品紹介カード、ランディングページのCTA 

このカードは「とにかくシンプルに使いたい」というケースに最適です。特に企業ブログやニュース一覧における導入が多く、ユーザーの視線を自然に誘導できる点が強みです。 

 

コード例 

最も基本的なカードスタイルです。画像 + タイトル + ボタンというシンプル構成なので、ブログや製品紹介など何にでも使いやすいです。 

1. リンクボタン付きの四角いカード

#HTML 

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>Basic Card</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

 <div class="card-basic">
   <img src="https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=300&q=200" alt="サムネイル">
   <div class="card-content">
     <h3 class="card-title">タイトル</h3>
     <p class="card-text">
       これは説明テキストです。簡潔に内容を伝えます。
     </p>
     <a href="#" class="card-button">詳細を見る</a>
   </div>
 </div>

</body>
</html> 

 

#CSS

body {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 background: #f7f7f7;
 margin: 0;
 font-family: sans-serif;
}

.card-basic {
 width: 300px;
 border: 1px solid #ddd;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 overflow: hidden;
 display: flex;
 flex-direction: column;
 background: #fff;
}

.card-basic img {
 width: 100%;
 height: auto;
 display: block;
}

.card-content {
 padding: 16px;
}

.card-title {
 font-size: 1.25rem;
 margin: 0 0 8px 0;
}

.card-text {
 font-size: 1rem;
 color: #555;
 margin-bottom: 12px;
}

.card-button {
 display: inline-block;
 padding: 8px 12px;
 text-decoration: none;
 background-color: #007BFF;
 color: #fff;
 border-radius: 4px;
 transition: background-color 0.3s ease;
}

.card-button:hover {
 background-color: #0056b3;
}

このカードは見た目が整っており、クリックを促す要素が明確なので、コンバージョン率を意識するサイトで有効です。 

 

2. テキスト多めの角丸カード 

次に紹介するのは、角丸デザインを取り入れ、柔らかく親しみやすい印象を与えるタイプのカードです。テキストを多く配置できるため、商品説明やプロフィール紹介に適しています。 

項目 

内容 

概要 四辺を角丸に加工し、タイトル部分に下線を加えたカード。 
特徴 ・テキスト情報を多く配置可能・角丸でフラットかつ柔らかい印象・装飾が少ないため情報主体のデザインに向く 
活用例 プロフィールカード、サービス詳細、製品仕様紹介 

このカードを利用すれば、「情報をしっかり伝えたいが、堅すぎる印象は避けたい」という要望に応えられます。ユーザーの信頼感を醸成するのに適した形式です。 

 

コード例 

情報量が多い説明文や特徴を伝えたい場合に、この角丸カードが役立ちます。角丸＋余白で柔らかく親しみやすい印象を与えます。 

2. テキスト多めの角丸カード

#HTML 

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>Rounded Text Card</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

 <div class="card-rounded-text">
   <div class="card-inner">
     <h3 class="card-title">角丸タイトル</h3>
     <p class="card-description">
       こちらは多めのテキストを含むカードです。製品の仕様や特徴を箇条書きにせず、自然な読みやすさで伝えたいときに適しています。
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     </p>
   </div>
 </div>

</body>
</html>

 

#CSS 

body {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 background: #f7f7f7;
 margin: 0;
 font-family: sans-serif;
}

.card-rounded-text {
 width: 320px;
 border: 1px solid #ccc;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 background-color: #fff;
}

.card-inner {
 padding: 20px;
}

.card-title {
 font-size: 1.3rem;
 margin: 0 0 10px 0;
}

.card-description {
 font-size: 0.95rem;
 line-height: 1.6;
 color: #444;
}

角丸・余白・テキスト中心で構成することで、読み手に安心感を与え、情報への集中を促します。 

 

3. ホバーで浮き出るカード 

視覚的なアニメーションを加えたのが、ホバー時に浮き上がるカードです。動きによって注目度を高め、ユーザー体験を豊かにできるのがポイントです。 

項目 

内容 

概要 カードにシャドウとトランジションを加え、ホバーで浮き上がる動きを演出。 
特徴 ・インタラクション性が高い・コンテンツを強調しやすい・ホワイト背景との相性が良い 
活用例 LPのサービス紹介、製品ギャラリー、記事サムネイル 

特にグローバル企業のランディングページで多用され、「シンプルかつ動きで魅せる」デザインを実現します。 

 

コード例 

ホバー時にカードが浮き上がるような影の変化を持たせることで、視覚的アクセントが生まれ、ユーザーの注目を集めやすくなります。 

3. ホバーで浮き出るカード

#HTML

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>Card Hover Example</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

 <div class="card-hover">
   <img src="https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=300&q=200" alt="サムネイル">
   <div class="card-content">
     <h3 class="card-title">タイトル</h3>
     <p class="card-text">
       ホバーで浮き出る効果。見た目に動きがあり、クリックしたくなるデザイン。
     </p>
   </div>
 </div>

</body>
</html>

 

#CSS

body {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 background: #f7f7f7;
 margin: 0;
}

.card-hover {
 width: 300px;
 border: 1px solid #ddd;
 border-radius: 6px;
 overflow: hidden;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 cursor: pointer;
 background: #fff;
}

.card-hover img {
 width: 100%;
 height: auto;
 display: block;
}

.card-hover:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.card-content {
 padding: 16px;
}

.card-title {
 font-size: 1.25rem;
 margin-bottom: 8px;
}

.card-text {
 color: #555;
 font-size: 1rem;
 line-height: 1.5;
}

動きを付けたいカードにはこのタイプが適しており、LPや商品一覧などで使うと視覚的な引きつけが強まります。 

 

4. プロフィール紹介向きカード 

このカードは、人物紹介やチームメンバー紹介ページに最適です。ホバー時に反転して裏面が表示される仕様を取り入れることで、コンパクトな情報量でも詳細を伝えられるようになっています。 

項目 

内容 

概要 フロントに顔写真やアイコン、裏面にテキスト情報を配置できる。 
特徴 ・反転アニメーションを利用・人物や製品の紹介に適応・UIがリッチで印象に残りやすい 
活用例 チーム紹介、講師一覧、製品レビュー 

単なるプロフィール表示にとどまらず、「裏面に連絡先やスキルセットを載せる」といった工夫でUXを強化できます。 

 

コード例 

人物紹介やスタッフ紹介など、顔写真＋役職＋簡単な説明を含むデザインが求められる用途向けです。反転アニメーションを加えることで、裏面に補足情報を入れられます。 

#HTML

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>プロフィールカード</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="card-profile">
   <div class="card-inner">
     <div class="card-face front">
       <img src="https://via.placeholder.com/150" alt="Avatar">
       <h3 class="profile-name">名前</h3>
       <p class="profile-title">役職</p>
     </div>
     <div class="card-face back">
       <p class="profile-bio">
         この人物の簡単な紹介文。専門分野やスキル、連絡先などを裏面にまとめます。
       </p>
     </div>
   </div>
 </div>
</body>
</html>

 

#CSS

body {
 font-family: Arial, sans-serif;
 background: #f5f5f5;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}

.card-profile {
 width: 200px;
 height: 300px;
 perspective: 1000px; /* 3D空間効果 */
 cursor: pointer;
}

.card-inner {
 position: relative;
 width: 100%;
 height: 100%;
 transition: transform 0.6s;
 transform-style: preserve-3d;
}

.card-profile:hover .card-inner {
 transform: rotateY(180deg);
}

.card-face {
 width: 100%;
 height: 100%;
 position: absolute;
 backface-visibility: hidden;
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.front {
 background-color: #fff;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

.front img {
 border-radius: 50%;
 width: 100px;
 height: 100px;
}

.back {
 background-color: #f9f9f9;
 transform: rotateY(180deg);
 padding: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.profile-name {
 margin: 10px 0 5px;
 font-size: 1.25rem;
}

.profile-title {
 margin: 0;
 font-size: 1rem;
 color: #777;
}

.profile-bio {
 font-size: 0.9rem;
 color: #555;
 text-align: center;
}

このカードはスタッフ紹介などで豊かな印象を与えるため、企業の「顔」を見せたいページに向いています。 

 

5. ブログサムネイル向きカード（2種類） 

情報量を多く持たせたサムネイル型カードは、ブログ記事やニュースサイトに最適です。見出し、日付、アイキャッチ、本文の一部を組み合わせることで、クリック率を大幅に改善できます。 

項目 

内容 

概要 サムネイル下部に本文や日付を配置するタイプと、写真の上に文字を載せるタイプの2種。 
特徴 ・視覚的にリッチ・複数情報を自然に整理可能・ニュースサイトやブログでの利用に最適 
活用例 メディアサイトの記事カード、ECの特集ページ 

クリックしたくなる見出し＋ビジュアル訴求ができるため、ニュースポータルやオウンドメディアに特におすすめです。 

 

コード例 

ブログ記事一覧やメディアサイトで使いやすいのが、サムネイル＋見出し＋抜粋テキストを組み合わせたカードです。以下に2種類のスタイル例を示します。

 

5.1 スタイルA: 下にテキストを配置するタイプ 

5.1 スタイルA: 下にテキストを配置するタイプ

#HTML

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ブログカードA</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="card-blog-a">
   <img src="https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=300&q=200" alt="記事画像">
   <div class="card-blog-content">
     <h3 class="card-title">記事タイトルA</h3>
     <p class="card-excerpt">
       記事の抜粋テキストがここに入ります。短めにまとめると見栄えが良くなります。
     </p>
   </div>
 </div>
</body>
</html>

 

#CSS

body {
 font-family: Arial, sans-serif;
 background: #f5f5f5;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}

.card-blog-a {
 width: 300px;
 border: 1px solid #ddd;
 border-radius: 6px;
 overflow: hidden;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 background: #fff;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 cursor: pointer;
}

.card-blog-a:hover {
 transform: translateY(-6px);
 box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.card-blog-a img {
 width: 100%;
 display: block;
 transition: transform 0.4s ease;
}

.card-blog-a:hover img {
 transform: scale(1.05);
}

.card-blog-content {
 padding: 14px;
}

.card-blog-content .card-title {
 font-size: 1.2rem;
 margin: 0 0 6px 0;
 color: #333;
}

.card-blog-content .card-excerpt {
 font-size: 0.95rem;
 color: #666;
 line-height: 1.4;
}

このタイプは記事一覧で使いやすく、画像とテキストのバランスが良いためユーザーが記事内容を予測しやすくなります。 

 

5.2 スタイルB: 画像の上に文字を載せるタイプ 

5.2 スタイルB: 画像の上に文字を載せるタイプ

#HTML

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ブログカードB</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="card-blog-b">
   <div class="overlay-image">
     <img src="https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=300&q=200" alt="記事画像">
     <div class="overlay-text">
       <h3 class="card-title">記事タイトルB</h3>
     </div>
   </div>
 </div>
</body>
</html>

 

#CSS

body {
 font-family: Arial, sans-serif;
 background: #f5f5f5;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}

.card-blog-b {
 width: 300px;
 position: relative;
 border-radius: 4px;
 overflow: hidden;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 cursor: pointer;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-blog-b:hover {
 transform: translateY(-6px);
 box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.overlay-image img {
 width: 100%;
 height: auto;
 display: block;
 transition: transform 0.4s ease;
}

.card-blog-b:hover .overlay-image img {
 transform: scale(1.05);
}

.overlay-text {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 background: rgba(0, 0, 0, 0.5);
 color: #fff;
 padding: 12px;
}

.card-title {
 margin: 0;
 font-size: 1.25rem;
}

視覚的インパクトが強く、ビジュアル重視のサイトやフォトブログなどに適しています。 

 

6. リンク付きの角丸カード 

角丸を活かしたデザインにリンク機能を持たせたカードは、シンプルかつ直感的に操作できるUIを実現します。余白を大きめに取り、モダンで読みやすいレイアウトになります。 

項目 

内容 

概要 角丸で余白を持たせたデザイン。リンクを含み、CTAとして活用可能。 
特徴 ・直感的に操作できる・汎用性が高い・コーポレートサイトとも相性が良い 
活用例 企業概要カード、CTAボックス、サービス紹介リンク 

「見やすさ・使いやすさ・クリック率」を同時に高めたい場合に導入すべきUIです。 

 

コード例 

シンプルで直感的なリンク付き角丸カードは、企業概要やサービス紹介でよく使われ、ユーザーにクリックを誘導しやすいです。 

6. リンク付きの角丸カード

#HTML

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>リンク付きカード</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <a href="#" class="card-link-rounded">
   <div class="card-inner">
     <h3 class="card-title">サービス名</h3>
     <p class="card-text">このサービスはこんな特徴があります。クリックで詳細へ。</p>
   </div>
 </a>
</body>
</html>

 

#CSS

body {
 font-family: Arial, sans-serif;
 background: #f5f5f5;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}

.card-link-rounded {
 display: block;
 width: 300px;
 text-decoration: none;
 border: 1px solid #ccc;
 border-radius: 12px;
 overflow: hidden;
 background-color: #fff;
 transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.card-link-rounded:hover {
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 background-color: #f5f5f5;
}

.card-inner {
 padding: 16px;
}

.card-title {
 margin: 0 0 8px 0;
 font-size: 1.3rem;
 color: #333;
}

.card-text {
 font-size: 1rem;
 color: #555;
}

リンク全体をカードにすることでクリック範囲が広くなり、ユーザーの操作性が向上します。 

 

7. jQueryで折り畳み式カード 

最後に紹介するのが、jQueryを利用してアコーディオン風に展開する折り畳み式カードです。インタラクティブで動的な要素を取り入れたい場合に最適です。 

項目 

内容 

概要 jQueryを組み込み、クリックで詳細部分が展開されるカード。 
特徴 ・情報量をコンパクトに整理・動きのあるUIで印象を強化・FAQやQ&Aページで活用可能 
活用例 Q&A、商品仕様説明、FAQページ 

「情報を隠しながらも必要に応じて表示する」という設計により、ユーザーが能動的に操作できる体験を提供できます。 

 

コード例 

FAQページや仕様説明など、見せたい情報を折り畳みで隠せるカードは、ページの長さを抑えつつ必要な情報を提供できる手法です。 
 

#HTML

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>折り畳みカード</title>
 <link rel="stylesheet" href="style.css">
 <!-- jQuery CDN -->
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="script.js" defer></script>
</head>
<body>
 <div class="card-collapse">
   <div class="card-header" data-toggle="collapse">
     <h3>見出し（クリックで開閉）</h3>
   </div>
   <div class="card-body collapse">
     <p>こちらは折り畳み後に表示される詳細部分です。テキストやリンクなどを含められます。</p>
   </div>
 </div>
</body>
</html>

 

#CSS

body {
 font-family: Arial, sans-serif;
 background: #f5f5f5;
 display: flex;
 justify-content: center;
 align-items: flex-start;
 padding: 50px;
}

.card-collapse {
 width: 300px;
 border: 1px solid #ddd;
 border-radius: 6px;
 overflow: hidden;
 background-color: #fff;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 margin-bottom: 16px;
}

.card-header {
 padding: 16px;
 cursor: pointer;
 font-size: 1.2rem;
 background-color: #f7f7f7;
 transition: background 0.3s ease;
}

.card-header:hover {
 background-color: #eaeaea;
}

.card-body {
 padding: 0 16px 16px 16px;
 display: none; /* 初期は非表示 */
 font-size: 0.95rem;
 color: #555;
 line-height: 1.4;
}
 

 

#JS

$(document).ready(function() {
 $(".card-header").click(function() {
   $(this).next(".card-body").slideToggle(300);
 });
});

このカードはページの可読性を保ちつつ、多くの情報を提供したい時やFAQなどで有効です。 

 

おわりに 

カード型デザインは、情報を整理しながらユーザーに心地よいUXを届けるためのUI手法です。本記事で紹介した7種類のカードは、それぞれに特徴があり、Webサイトの目的やユーザー層に応じて使い分けることで、デザインの質とコンバージョン率を高められます。 

特に「汎用性の高いリンクボタン付きカード」「アニメーションを加えた浮き出しカード」「情報量を整理する折り畳みカード」などは、あらゆる業界で有効に機能します。デザインを選ぶ際はサイトの目的とユーザー行動を軸に検討し、最適なカードを導入することが成功への近道です。 

Webデザイン