Feature Catalog

作った理由

Web サイトで見かけた機能の名前が分からないことがよくありました。名前を知らないと検索も相談もできないので、見た目で分かる UI パターンを 341 件集め、25 のカテゴリと 28 の困りごとから探せる索引にしました。各パターンのページには、名前・一行の説明・使いどころ・実装のポイント・動くデモをまとめています。

技術的な判断

このサイトの UI にも、カタログに載っているパターンだけを使っています。ヘッダーの縮小、⌘K の検索、ページ遷移、404 ページなどが該当します。X-ray モードを ON にすると、それぞれの位置にカタログの §番号のラベルが表示されます。

静的書き出しで 380 ページを生成し、サーバーは持ちません。デモは 1 件 1 ファイルで、デモを表示する領域（ステージ）だけライトとダークを切り替えられます。見出しの明朝体は、ホームやカテゴリなどのページ群ごとに、そこで使う文字だけを含むサブセットを作って自前で配信しています。

品質は CI で自動チェックしています。push のたびに、全ルートのコンソールエラー、axe によるアクセシビリティチェック（全デモ × ライト・ダーク）、390px 幅で横にはみ出さないこと、キーボードだけで操作できること、Lighthouse のスコアと表示速度の基準値を確認します。

技術スタック

言語

TypeScript

フレームワーク

Next.js（App Router / static export）React

UI

Tailwind CSSshadcn/uirechartsMotion

テスト・品質

VitestPlaywrightaxe-coreLighthouse CIGitHub Actions

インフラ

Cloudflare Pages