Webサイトに、情報を表示する時に、文字だらけにしてはいけません。
適度に画像を盛り込んだり、リスト毎の区切りを意識して、ページをデザインすることで、より見やすいWebサイトになります。
SNSなどでよく使われているカードデザインなどはリストで並べられてはいませんが、１つの要素として画像とリンクとセンテンスが表示されて見やすいですよね。
こんな感じに効果的にリンクと情報表示ができてしまうカードデザインは、表示するだけなら、ライブラリなど使わなくても簡単に表示することができるので、効率的なカードデザインの作り方について深堀りしてみたいと思います。
メリットとデメリット
カードデザイン
個人的に効率的な
カードデザインは、PinterestのUIを思い出します。
画像に特化して、アスペクト比などに依存しないように、横幅固定で縦のサイズで見栄えを調整しているので、縦スクロール重視のスマートフォンでも使いやすいです。
トップページなどで使われがちなカルーセルなども、スライド事にカードデザインにする事が多く、今どきのマルチデバイスブラウザの対応では利便性が高い事がわかります。
マトリクスデザイン
カードデザインの対比となるのが、
マトリクスデザインです。
わかりやすいのが、エクセルですね。
縦と横にそれぞれ見出しを表示して、表として見せるため、それぞれの項目の比較を最小スペースで表現できます。
数値比較や、名称一覧などの表示を省スペースで行いたい場合に有効です。
リストデザイン
カードデザイン、マトリクスデザイン以外にも、複数の項目を表示する場合、ホームページのお知らせ機能などで使われている、リストデザインというのがあります。
縦並びに一列表示にするのが特徴的で、マトリクスが縦横の2次元表示に対して、縦軸の1次元表示になるのがポイントです。
表示要素があまり多くないリストの場合に適しています。
簡単カードデザイン構築方法（レスポンシブ対応）
とりあえず、手軽にカードデザインの作り方をHTMLベースで説明してみたいと思います。
ソースコード
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="cards">
<li class="card">
<img src="img/onepiece01_luffy.png">
<div class="links">
<p class="card-title">モンキー・D・ルフィ</p>
<a href="#">本作の主人公。麦わらの一味船長。「ゴムゴムの実」の能力者のゴム人間。麦わら帽子がトレードマーク。夢は「ひとつなぎの大秘宝（ワンピース）」を見つけて「海賊王」になること。</a>
</div>
</li>
<li class="card">
<img src="img/onepiece02_zoro_bandana.png">
<div class="links">
<p class="card-title">ロロノア・ゾロ</p>
<a href="#">麦わらの一味戦闘員。「三刀流」の剣士。クールでストイックな武士道精神の持ち主。世界一の大剣豪を目指している。</a>
</div>
</li>
<li class="card">
<img src="img/onepiece03_nami.png">
<div class="links">
<p class="card-title">ナミ</p>
<a href="#">麦わらの一味航海士。元は海賊専門の泥棒。お金・お宝に目がない。世界地図を描くのが夢。</a>
</div>
</li>
<li class="card">
<img src="img/onepiece04_usopp_sogeking.png">
<div class="links">
<p class="card-title">そげキング（ウソップ）</p>
<a href="#">麦わらの一味狙撃手。臆病でお調子者ながら、器用で口八丁なパチンコの名手。父・ヤソップのような勇敢なる海の戦士を目指している。</a>
</div>
</li>
<li class="card">
<img src="img/onepiece05_sanji.png">
<div class="links">
<p class="card-title">サンジ</p>
<a href="#">麦わらの一味コック。コックの命である手を傷つけないように、足技で戦う。無類の女好き。伝説の海「オールブルー」を探す。</a>
</div>
</li>
<li class="card">
<img src="img/onepiece06_chopper.png">
<div class="links">
<p class="card-title">トニートニー・チョッパー</p>
<a href="#">麦わらの一味船医。「ヒトヒトの実」を食べ人の能力を持った人間トナカイ。万能薬（何でも治せる医者）を目指している。</a>
</div>
</li>
<li class="card">
<img src="img/onepiece07_robin.png">
<div class="links">
<p class="card-title">ニコ・ロビン</p>
<a href="#">麦わらの一味考古学者。「ハナハナの実」の能力者。「空白の100年」の謎を解き明かすため旅をしている。</a>
</div>
</li>
</ul>
</body>
</html>
style.css
*, *:before, *:after {
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
-ms-box-sizing : border-box;
box-sizing : border-box;
}
body{
width:100%;
padding:20px;
overflow-x:hidden;
}
.cards{
--size-w:350px;
--size-h:250px;
max-width:100%;
display:flex;
flex-wrap:wrap;
justify-content:left space-evenly;
gap:20px;
margin:0;
padding:0;
}
.cards *{
font-size:14px;
}
.cards .card{
list-style:none;
margin:0;
padding:0;
width:var(--size-w);
height:var(--size-h);
display:flex;
gap:0px;
border:1px solid black;
border-radius:20px;
overflow:hidden;
}
.cards .card > *{
width:50%;
}
.cards .card img{
width:calc(var(--size-w) / 2);
height:100%;
object-fit:cover;
}
.cards .links{
display:flex;
flex-direction:column;
gap:5px;
padding:10px;
}
.cards p{
margin:0;
}
.cards .card-title{
font-weight:bold;
font-size:1.1em;
}
デモ
解説
１つのカードは、次のコードで構成されています。
<li class="card">
<img src="img/onepiece01_luffy.png">
<div class="links">
<p class="card-title">モンキー・D・ルフィ</p>
<a href="#">本作の主人公。麦わらの一味船長。「ゴムゴムの実」の能力者のゴム人間。麦わら帽子がトレードマーク。夢は「ひとつなぎの大秘宝（ワンピース）」を見つけて「海賊王」になること。</a>
</div>
</li>
中の項目は、自由に配置してもいいんですが、デザイン的には、画像の位置、タイトルや説明文などの位置関係を同じに揃えることで、デザインの統一感が出ます。
HTMLを手動で更新する場合は、この項目をコピペして、画像、文章を書き換えるだけでいいです。
もしシステム化したいのであれば、このliタグをテンプレートとして、変更箇所を置き換え文字にすることで、簡単CMSを作ることができますよ。
あとがき
情報過多の時代ですが、ホームページでの情報発信も重要なアウトプットです。
そう言えば、このブログのトップページもブログ記事をカード表示にしています。
ホームページ以外でも、真帆アプリ、町中の看板、広告チラシ、雑誌の目次や見出し、色々な場面でカードデザインが使われているので、気にして見てみることでデザイン力も上がってくるかもしれませんね。
自分なりの効果的な使い方などの理論が持てるようになるとデザインにも強くなっていきますからね。
