フィルター付き実績ギャラリー

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

このパーツは、カテゴリボタンで表示を絞り込める実績ギャラリーです。「すべて／Web／LP／EC」のフィルターボタンと、3カラムのグリッドで並んだ実績カードで構成されています。各カードには data-cat 属性でカテゴリを持たせ、ボタンを押すと該当しないカードを隠す仕組みです。画像は Unsplash の実写を object-fit:cover でサムネ枠に収めており、縦横比の違う写真でも崩れません。

向いている場面

制作実績を種類別に見せたいWeb制作会社・デザイン事務所、施工事例をジャンル分けする建築・内装、商品ラインナップを分類するEC・メーカーに向きます。点数が多くても利用者が見たいカテゴリだけ素早く確認できます。

カスタマイズと注意点

• カテゴリを増やすときはボタンとカードの data-cat を同じ値で揃えます
• グリッドの列数は画面幅に応じて変え、スマホは1〜2列に落とすと見やすくなります

フィルターは見た目の表示切替なので、JavaScript が無効でも全件は読めるようにしておくと安心です。ボタンには現在の選択状態が分かるスタイル（is-active）を必ず付けてください。

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