フィルター付き 制作実績グリッド
「フィルター付き 制作実績グリッド」は、 カテゴリボタンで表示する事例を絞り込める 実績一覧です。上部の「すべて／Webサイト／LP／EC」といったボタンを押すと、対応する data-cat 属性を持つカードだけが残り、それ以外は非表示になります。
このパーツの使いどころと実装ポイント
「フィルター付き 制作実績グリッド」は、カテゴリボタンで表示する事例を絞り込める実績一覧です。上部の「すべて／Webサイト／LP／EC」といったボタンを押すと、対応する data-cat 属性を持つカードだけが残り、それ以外は非表示になります。切り替えは JavaScript がクラスを付け外しするだけのシンプルな仕組みで、画像・タグ・タイトルを持つカードを Grid で並べています。
向いている場面
- 制作会社・デザイン事務所のポートフォリオ
- 建築・施工会社の施工事例（住宅／店舗／オフィス等）
- 商品点数が多いブランドのギャラリー
カテゴリを増やすときは、ボタンに新しい data-cat を追加し、対応するカードに同じ値を振るだけで連動します。フィルター文字とカードのタグ名をそろえておくと運用ミスが減ります。
実装上の注意
画像にはサイズ違いでも崩れないよう object-fit:cover を当て、alt に各事例の内容を入れてアクセシビリティを確保します。点数が多い場合は loading="lazy" で初期表示を軽くするのが有効です。フィルタリングは見た目を切り替えるだけでページ遷移がないため、URL に状態が残らない点は把握しておきましょう。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
カテゴリを追加するにはどうすればいいですか
フィルターボタンを1つ増やして新しい data-cat の値を付け、その値を該当する実績カード側の data-cat にも振ってください。ボタンとカードの値が一致すれば、JavaScriptを書き換えなくても絞り込みが動きます。
実績が増えても表示は重くなりませんか
件数が多いと初期読み込みの画像枚数が増えます。各画像に loading="lazy" を付ければ画面外の画像は後から読み込まれ、初期表示が軽くなります。さらに多い場合は1ページの件数を絞るか、ページ送りの併用を検討してください。