実写カードグリッド制作実績
このパーツは、実写サムネ付きの3列カードで制作実績を並べるポートフォリオ用セクションです。 grid-template-columns:repeat(3,1fr) で3列に整列し、各カードはサムネ・カテゴリタグ・案件名・説明・「詳しく見る」リンクで構成されます。
このパーツの使いどころと実装ポイント
このパーツは、実写サムネ付きの3列カードで制作実績を並べるポートフォリオ用セクションです。grid-template-columns:repeat(3,1fr) で3列に整列し、各カードはサムネ・カテゴリタグ・案件名・説明・「詳しく見る」リンクで構成されます。サムネは高さ200pxの枠に object-fit:cover で収まり、ホバーで画像が拡大する演出が付きます。カード全体が a 要素のリンクになっているため、どこをクリックしても詳細へ遷移できます。
向いている場面
- 制作会社やデザイナーが、案件サムネで実績を見せたいとき
- 施工会社やリフォーム業の、ビフォーアフター事例の一覧
- 店舗やブランドの、商品・空間ギャラリーとして
差し替えどころは、サムネ画像・カテゴリタグ・案件名・一言説明・リンク先です。タグはCorporateやBrandingなど案件の種類で色分けすると一覧性が上がります。説明文は成果や工夫を一文で添えると、ただの画像並びより伝わります。
実装上の注意
サムネの alt には案件内容が伝わる説明を入れます。カード全体がリンクなので、内部に別のリンクを入れ子にしないよう注意してください。3列はタブレットで2列、スマートフォンで1列へ折り返すと見やすくなります。srcset で複数解像度を指定しているため、元画像は十分な解像度を用意し、拡大時のぼやけを防ぎます。
よくある質問
カード全体がリンクですが、タグもクリックできるようにできますか？
カード全体が a 要素になっているため、その内側に別の a を入れ子にするとHTMLとして不正になり、クリック挙動も不安定になります。タグも独立して押せるようにしたい場合は、カード全体のリンクをやめ、サムネと案件名だけを個別のリンクにする構成へ作り替えてください。
実績がまだ少ないときはどう見せればいいですか？
3列ぴったりに埋まらないと寂しく見えるため、件数が少ないうちは grid-template-columns を2列にして1枚あたりを大きく見せる方法があります。実績が増えたら3列へ戻します。サムネは雰囲気が伝わる実写を使い、説明文で工夫や成果を補うと少数でも見応えが出ます。