出荷前の欠陥修正・無料100個の可視化・UI/UXの磨き込み・配布物の整備

[yoggydev]

🚨 出荷を止めるレベルの欠陥を、配布前に発見・修正

書き出したHTMLで色が出ていませんでした。

bg-card / text-muted-foreground / bg-background などはこのプロジェクト固有のデザイントークンで、素の Tailwind には存在しません。ところが wrapDocument() は <script src="https://cdn.tailwindcss.com"> を1行入れるだけで、設定もCSS変数も渡していませんでした。

実ブラウザでの実測（修正前 → 修正後）:

	修正前	修正後
bg-card の背景色	rgba(0, 0, 0, 0) （透明）	rgb(255, 255, 255)
text-muted-foreground の文字色	rgb(0, 0, 0) （真っ黒）	rgb(113, 113, 122)
bg-muted の背景色	rgba(0, 0, 0, 0)	rgb(244, 244, 245)

影響範囲: 880件中430件、無料MCP版100件中30件。 しかもこれは無料版だけの問題ではなく、generateVanillaHtml はスタジオの「バニラHTML書き出し」＝この製品の中心価値そのものなので、買い切り版の購入者がコピーするHTMLも同じ状態でした。

4つの機械検査（コントラスト・axe・キーボード・横スクロール）は全てこれを素通りしていました。検査していたのは「Reactとして描画した結果」で、「書き出したHTML」ではなかったためです。

修正: wrapDocument / generateDynamicVanillaHtml に生成モジュール経由でトークン定義を注入。静的HTML880件とMCPデータを再生成し、注入率 880/880・無料 100/100 を実測確認。配布ZIP生成時に未注入HTMLが1件でもあれば停止する検査も追加（同じ内容を2箇所に持たせない設計）。

npm未公開・BOOTH未出品・GitHubリリース未作成のため、壊れたものは誰の手にも渡っていません。

無料100個が見えるようになった

880個のうちどれが無料版の100個か判別する手段がなく、無料MCPユーザーが「何が足りないか」を知れませんでした（購入判断ができない）。

• スタジオに**「無料100個」トグルとカードの「無料」バッジ**を追加（検索・カテゴリ・お気に入りとAND併用）
• 無料IDの生成と照合テスト（880件のmanifestと100/100一致をビルド時に恒久検査）
• 件数のみ別モジュールに分離し、LP初期チャンクへのID混入を回避（ビルド後のchunk grepで実測）

UI/UX の磨き込み

実機スクリーンショットで確認した欠陥を根拠に修正しました。

• 375pxでスタジオのヘッダーが画面外に溢れ、JAボタンが切れていた → 1行に収まるよう段階的に畳む（「…」メニュー新設、キーボード操作可）
• LPの言語切替がヘッダーCTAに重なっていた → ヘッダー行内へ移設
• 日本語見出しが単語途中で改行 （「ランディングペ/ージは、」「"組み立て/る"時代へ。」）→ 文節単位で折り返す Phrased を導入。見出しとリード文のみに適用
• 同名コンポーネント26種（53件）にコレクション名を併記して識別可能に
• 「お気に入り 880件」と誤読される件数表記を「表示中 880 件」に
• ギャラリーの空に見えるカード・過大な高さを調整、ライトテーマのコントラスト改善
• 検証中に発見した詳細ビューの375px溢れも修正
• 375/768/1280 の3幅で横スクロールが無いことを実測（21計測すべてOK）

買い切りへの移行残り

統計バーの「¥0 あなたの月額」→「100 無料で使える数」（ja/en）、LPの「3つのプラン」→2プラン表記。

配布物の整備

• LICENSE を配置（無料版=個人利用/非商用、買い切り版=商用可を分離。英訳付き）
• 配布ZIP生成・検証スクリプト — 9.6MB / 4554ファイル。node_modules・.git・.env 等の混入なしを検査。展開して実ブラウザで描画確認するところまで自動化
• MCPのREADMEを実態に修正 — npx 手順は npm未公開のため動かないことを npm view（E404）で実証し、今動く手順に差し替え。ツール表も実装と一致させた

note記事の訂正

「109件の欠陥を直した」という数字が、記事自身の内訳（12+29+0+26=67）と合っていませんでした。67に訂正し、タイトルもその顛末を主題に変更。あわせて今回の430件欠陥の話を追記しています（「検査は、検査した経路しか守らない」）。

導入時点の違反数はコード内コメント（src/registry/a11y.test.tsx:20 の29件、scripts/check-overflow.mjs:14 の26件）に当時の記録が残っており、そちらと照合済みです。

検証エビデンス

• テスト 2666件グリーン（+12）。typecheck / build / prerender グリーン
• 実ブラウザでの computed style 実測（上記の表）
• 注入率 880/880・100/100 の実測
• 3幅×4画面の横スクロール実測
• build-release.mjs → verify-release.mjs の出荷ゲートがすべてOK

残件（要対応）

• mcp/package.json の files に LICENSE が無く、npm公開時に同梱されない
• package.json に release / verify:release スクリプト未登録（node scripts/... で実行可）
• モバイルでスタジオの検索欄が出ない（サイドバーが md 未満で非表示）

🤖 Generated with Claude Code

https://claude.ai/code/session_01YXb6DP2sELzRyZkqpe15p4

---

Generated by Claude Code