AI にランディングページを作らせてみた — 「出尽くした」を破る2つの実バグ（やってみた #22）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は ⁠SaaS のランディング（マーケ）ページ⁠。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、ナビ・主役ブロック（h1＋CTA）・ロゴの帯・特徴グリッド・指標バンド・お客様の声・価格3プラン・FAQ・最終CTA・フッターの全部入りランディング。

#21 で「個別コンポーネントのアクセシビリティは安定した」と分かりました。だから今回は⁠別の軸⁠——「マーケ画面という組み立て」を初めて突きました。

結果 — 3.5/5（これまで最低、でも意味のある低さ）

tsc/build 緑・コンソール 0・サーバーとブラウザの表示ずれ（hydration）なし・⁠h1 は1個・見出しレベルの飛ばし無し⁠・375px でのはみ出し0・36個の操作できる要素は全部、本物の <a>/<button>。⁠土台は強い⁠——Card・Grid の minItemWidth（自動で折り返してモバイルでも安全）・Button の asChild・Accordion・Statistic・Container 単体。

低いのは品質のせいではなく ⁠「アプリ/ダッシュボード向けの作りで、マーケ向けの作りではない」⁠ から。そして予備知識ゼロの AI は⁠実際のバグを2つ⁠掘り当てました。

「出尽くした」が破れた — コンポーネント内部の実バグ2件

#21 で「機能の面は出尽くした」と書きました。⁠#22 がそれを更新しました。⁠

⁠① LandingTemplate が素の .container を使っていた（重大）。⁠ マーケ用に唯一用意したテンプレなのに、中の各セクションが Tailwind の .container（＝画面幅ごとの最大幅だけで、中央寄せの mx-auto も余白も無い）を使っていました。実測で⁠コンテンツが画面の左端に貼り付き・右に64pxの効かない余白⁠。本物の Container コンポーネントがあるのに、自前で使っていなかった → #111。

⁠② Img が 256×256 に固定（軽微）。⁠ ラッパーが全状態で h-[256px] w-[256px]。aspectRatio を渡しても、明示された height が勝つので、主役画像が正方形に固定されてしまう → #113。これは ⁠固定寸法の一族⁠（#47/#58/#66/#72/#78/#100）の続きです。

今ラウンドの修正 — #111 を一つの正（SSOT）の中で完結させて反映

LandingTemplate を <Container size="2xl"> に差し替え（自前で使う）。.pen の見た目の寸法は変わらない（Container は React 層で中央寄せするための接着剤）ので、⁠ソース＋ドリフト検査だけで完結⁠します:

+ <Container as="section" size="2xl" className="py-12 ...">  // 以前は className="container ..."
+ assertMatch(landingSource, /<Container\b/, ...)             // 自前で使うことを強制
+ assertNoMatch(landingSource, /className="container\b/, ...) // 素の .container の再発を禁止

/embed/landing で実際に確認: 追従ヘッダの内側が mx-auto … max-w-screen-2xl になり、ロゴ/CTA が正しい余白の内側に入りました。design:verify 緑・除外0。⁠#113 Img は固定寸法の種類なので .pen 側の担当へ⁠。

でも、根はまた typography だった

新しいアクセシビリティ・バグは出ませんでした。代わりに予備知識ゼロの AI が⁠最大の欠落⁠として挙げたのは——⁠「ランディングは8割がタイポグラフィなのに、見出し・本文をどう組むかの決まった型が無い」⁠でした。h1/h2/eyebrow/本文を全部手組み。CardTitle（h3 固定）と MarkdownRenderer 以外に⁠見出し/本文のコンポーネントが無い⁠。

これは #110——#21 のブログでも名指しされた「typography 用コンポーネントの不在」です。⁠別の種類の画面（ブログ→ランディング）から、2回連続で同じ根⁠。サインははっきりしています。

学び — 予備知識ゼロのテストは「作りの不一致」を炙り出す

品質（バグ・アクセシビリティ・型・画面幅対応）→ 個別はほぼ出尽くした
作り（マーケ画面の組み立て・見出しの型）    → ここに欠落。ダッシュボード向けのまま

コンポーネントが良くても、⁠「ランディングを組む」という組み立ての筋書き⁠が無いと 3.5 点になります。予備知識ゼロの AI は「LandingTemplate を使わず、手で組み直した」——テンプレが信頼されなかった。それが一番の学びです。⁠まだ欠落はある。⁠ 出尽くすまで回します。

次回予告（やってみた #23）

• ⁠Docs ホーム / 価格比較 / エラー画面⁠ ほか。組み立てと見出しの型を引き続き突きます。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#21
• まとめ記事: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。「機能は出尽くした」を自分で破った回。次は作りと見出しの型へ。