対象: 27-member-site-builder 生成物（株式会社アイウエオ 会員サイト・架空サンプル）
基準: 実運用されている学習系会員サイトの作り込みレベル（カテゴリ→カード→詳細プレイヤー、進捗、スマホ対応）に寄せる。
採点は項目別（各10点・合計100点）。低い項目を直し、再採点。最低2周回した。
| # | 項目 | 点 | 弱点 |
|---|---|---|---|
| 1 | ログイン | 7 | きれいだが平板。1カラムで訴求要素なし |
| 2 | カード余白 | 6 | カテゴリ各2枚＝計6枚。下半分が空白で寂しい |
| 3 | カード情報量 | 5 | タイトル+説明のみ。番号/所要時間/完了状態なし |
| 4 | 詳細プレイヤー | 7 | モーダルは機能。パンくず/完了導線なし |
| 5 | 進捗表示 | 2 | 皆無。基準サイトとの最大の差 |
| 6 | ダッシュボード性 | 5 | ヒーロー+続きから+お知らせのみ。コース俯瞰なし |
| 7 | ブランド一貫 | 8 | :root 変数は使えている |
| 8 | スマホ対応 | 7 | 折返しはするが未検証・topbarメール残り懸念 |
| 9 | 情報密度 | 5 | カード6枚で全体が薄い |
| 10 | 細部 | 6 | focus-visible なし、ナビアイコンが汎用記号 |
合計: 58/100
主因: 進捗ゼロ・カード密度不足・ダッシュボード性の弱さ。
実施した修正:
localStorage に完了レッスン集合）。ドーナツ（全体%）・サイドバー進捗バー・ナビのカテゴリ完了数バッジ・コースカードの進捗バー・カテゴリ見出しの進捗バー・カードの完了バッジ・モーダルの「完了にする」トグルを全部連動。--shadow-hover）、お知らせラベルを種別で色分け。| # | 項目 | 点 | メモ |
|---|---|---|---|
| 1 | ログイン | 9 | 2カラム訴求ヒーロー＋カード。900px以下でヒーロー畳み |
| 2 | カード余白 | 9 | 9枚で密度十分・グリッド余白均一 |
| 3 | カード情報量 | 9 | 番号/所要時間/完了バッジ/hover |
| 4 | 詳細プレイヤー | 9 | パンくず・図解矢印・完了トグル |
| 5 | 進捗表示 | 9 | ドーナツ＋4種バー＋完了バッジが全連動 |
| 6 | ダッシュボード性 | 9 | コース俯瞰カードで一望できる |
| 7 | ブランド一貫 | 9 | 追加色も :root に集約 |
| 8 | スマホ対応 | 8 | 実 narrow 幅で崩れ0確認。figure矢印の残り1点 |
| 9 | 情報密度 | 9 | 寂しさ解消 |
| 10 | 細部 | 7 | focus-visible 未追加・figure折返し矢印 |
合計: 87/100
実施した修正:
:focus-visible のアウトラインを全リンク/ボタン/入力に追加（キーボード操作の可視化）。| # | 項目 | 点 | メモ |
|---|---|---|---|
| 1 | ログイン | 9 | |
| 2 | カード余白 | 9 | |
| 3 | カード情報量 | 9 | |
| 4 | 詳細プレイヤー | 9 | |
| 5 | 進捗表示 | 10 | 全画面で破綻なく同期 |
| 6 | ダッシュボード性 | 9 | |
| 7 | ブランド一貫 | 10 | 全色 :root 由来を確認 |
| 8 | スマホ対応 | 9 | figure縦積みで矢印浮き解消・崩れ0 |
| 9 | 情報密度 | 9 | |
| 10 | 細部 | 9 | focus-visible 追加 |
合計: 92/100
動画モーダルの YouTube は file://＋headless 環境で「エラー153」を出すが、これは参照元/ネットワーク制限による YouTube 側挙動で、http 配信や通常ブラウザでは再生される（iframe 構造は正）。減点はこの環境要因のみで、実装上の崩れはなし。
株式会社アイウエオ / AIO Marketing OS（架空シナリオ）向けに生成した成果物サンプル。実在の個人情報・口座・連絡先は含みません（example.com のみ）。