フィルタリング可能な制作実績セクション

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

このパーツは、カテゴリボタンで実績カードを絞り込めるポートフォリオセクションです。上部のフィルターボタンには data-cat 属性が、各実績カードにも対応する data-cat が付いており、ボタンを押すと一致するカードだけを表示する仕組みです。カードは article 要素で、サムネイル画像・案件名・カテゴリタグで構成されています。グリッドで並ぶため、件数が増えても自動で折り返して整います。

向いている場面

制作会社やフリーランスのポートフォリオ、デザインスタジオの事例紹介、施工事例を種類別に見せたい工務店などに向きます。「Web制作」「LP」「ECサイト」のように案件をジャンル分けして見せたいとき、訪問者が興味のある種類だけを素早く確認できます。

カスタマイズと注意点

• カテゴリを追加するときは、フィルターボタンとカードの両方の data-cat の値をそろえる必要があります。値がずれると絞り込みが効きません。
• サムネイル画像には内容を表す alt を必ず付けてください。装飾ではなく実績の中身を伝える画像です。
• フィルターボタンの集合には role="group" と aria-label が指定されており、操作の意味が支援技術に伝わるようになっています。

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