資格選択マップ — UX・実装判断 (2026-10-14)
対象となるユーザーの仕事
資格名の分かるユーザーには既存の検索・個別記事がある。一方、何を取るか決めていないユーザーには、分野と学習負荷の相場感が見えず、カテゴリの静的カードや装飾的な軌道図から比較に到達しにくい。
新しい体験
トップに資格選択マップを追加。分野、学習時間帯を選択すると実際の記事から生成した掲載候補の分布と具体的な資格が更新される。バーを押すとその分野に絞られ、個別記事と既存 /explore/ の3件比較へ進める。集計は build 時に記事から取得した qualification-index を唯一の正本にする。
技術
React + CSS のみ。既存Docusaurus/資格インデックスを再利用。分布は表現力より正確な件数とキーボード操作を優先し、棒グラフをCSSで実装する。D3/Canvas/Three/GSAP/Riveを導入しない。操作要素はbutton、状態はaria-pressed、更新件数はaria-live。prefers-reduced-motionで遷移停止。
データ上の注意
現行かつindex-readyのみ表示。学習時間は記事中の参考値で、公式統計や厳密な難易度・キャリア効果とは見なさない。時間の下限値で分類。情報なしはユーザーの選択がない限り時間帯絞り込みから除外。記事URL・canonical・noindex境界を変更しない。
検証
npm run typecheck / npm run build / npm run test:seo。分野を切り替えたとき件数・候補が変わること、モバイル横幅、リンク先、公式情報未確認記事の非表示を確認。公開前にGitHub CIを確認し、本番 / と /explore/ のHTTP200・最新UIを外形確認する。
近い資格は検索画面から条件を変えて探せます。
資格検索を開く →