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

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

カテゴリボタンで表示を絞り込めるフィルター付きの実績（ポートフォリオ）グリッドです。各カードには data-cat でカテゴリ（corporate / ec / lp など）を持たせ、フィルターボタンの押下に応じてJavaScriptで該当カードだけを表示します。フィルター群は role="group" と aria-label でまとまりを示し、現在選択中のボタンには is-active が付きます。サムネイル・タグ・タイトルを持つカード型レイアウトです。

向いている場面

• 制作会社・デザイナーの実績一覧やポートフォリオ
• 事例が増えてきて種類別に絞り込みたいコーポレートサイト
• 導入事例・お客様の声をジャンル別に見せたい場面

カスタマイズの勘所

カテゴリを増やすときはフィルターボタンと、各カードの data-cat の値をそろえるのが要点で、ボタンの値とカード側の値が一致しないと絞り込みが効きません。サムネイルは実際の制作画面に差し替えると説得力が上がります。アクセシビリティ面では、選択中のボタンを aria-pressed などで状態として伝えると、見た目以外でも現在のフィルターが分かります。グリッドは grid なので、列数を画面幅で2→1へ切り替えるとスマホでも崩れません。JavaScriptが無効な環境でも全件が表示される作りにしておくと、最低限の情報は失われません。

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