6 グリッド制作実績
サムネイル画像・業種タグ・案件名をワンセットにし、3列×2行の計6件を並べた制作実績グリッドです。 display:grid の repeat(3,1fr) で等幅3カラムを作り、各カードは <a> 全体がリンクになっています。
このパーツの使いどころと実装ポイント
サムネイル画像・業種タグ・案件名をワンセットにし、3列×2行の計6件を並べた制作実績グリッドです。display:grid の repeat(3,1fr) で等幅3カラムを作り、各カードは <a> 全体がリンクになっています。サムネは wk-6__th の背景画像（高さ160px）で、ホバー時に transform:translateY(-4px) でわずかに浮き上がり、影が濃くなる動きで操作感を伝えます。画像はUnsplashのCDNから読み込んでいます。
向いている場面
制作会社・デザイン事務所のポートフォリオ、コーポレートサイトの実績ページ、ECや写真スタジオのギャラリーなど、成果物をビジュアルで見せたい場面の主役になります。タグで業種を示すことで、見込み客が自分に近い事例を探しやすくなります。
カスタマイズと注意点
差し替えどころはサムネ画像URL・業種タグ・案件名、そして各カードのリンク先です。実案件では自社の実績写真に置き換え、軽量化のためWebP化してください。注意点として、背景画像方式は alt が付けられず検索エンジンに内容が伝わりにくいため、SEOを重視するなら <img> 方式へ変え、alt と loading="lazy" を付けるのがおすすめです。3列のままだとスマホで小さくなるので、狭い画面では2列または1列に積む指定を足してください。
よくある質問
サムネ画像はどう差し替えますか？
各カードの wk-6__th の背景URLを自社実績の画像に置き換えてください。表示を速くするためWebP化し、サイズは横600px程度に最適化すると軽くなります。実績の許諾が必要な場合は事前に確認してください。
背景画像のままでSEO的に問題ありませんか？
背景画像はalt属性を付けられず、検索エンジンに画像の内容が伝わりにくいです。実績ページとして検索流入を狙うなら、imgタグ方式に変えてaltに案件名や業種を入れ、loading=lazyで遅延読み込みする方が有利です。