フィルター付き実績グリッド

このパーツの使いどころと実装ポイント

このパーツは、上部のカテゴリボタンで表示する実績を絞り込めるポートフォリオグリッドです。各実績カードは data-cat 属性にカテゴリを持ち、ボタンをクリックするとJavaScriptが一致しないカードに非表示クラスを付けて出し分けます。レイアウトはCSS Gridの grid-template-columns: repeat(3,1fr) で3列に整列し、サムネイル画像は実写を object-fit: cover 相当で枠にきれいに収める作りです。ページ遷移なしで切り替わるため、軽快に閲覧できます。

向いている場面

• 制作会社・デザイナー・フォトグラファーの実績一覧
• 「Web/デザイン/SEO」など複数領域を扱う事業の事例紹介
• 建築・リフォームの施工事例ギャラリー

カテゴリが3〜5種類程度のときに使いやすく、来訪者が見たいジャンルへ素早くたどり着けます。

カスタマイズと注意

カテゴリを追加するときは、フィルターボタンの data-cat と各カードの data-cat の値を必ず一致させてください。画像はサイズの大きい原本を直接置かず、軽い表示用に最適化したものを使うと読み込みが速くなります。実装上の注意として、非表示は表示数が変わるだけでDOMからは消えないため、件数が非常に多い場合は表示・非表示の切り替え時にレイアウトが詰まる動きを意識してください。img には alt・loading="lazy" を付け、スマホでは3列が窮屈なので2列や1列へ折り返す設定にすると見やすくなります。

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。