この LP の作り方

「AI からリッチな UI を引き出す」として公式に勧められている工程（方向性を 4 案 → 1 案を選ぶ → 避ける型を名指し → スクリーンショットで自己批評を 2 周）を、 書いてあるとおりに 1 回通しました。工程ごとに、実際に効いたかどうかを残しています。

1. 方向性を 4 案出す

   一部効いた

   雛形 ①: 背景 / アクセント / 書体 / 主役の演出 / 一行の理由。「似た依頼でも同じ案になりそうか」を自己評価し、なりそうなら差し替える

   • A テストピースの壁（炻器の焦げ茶灰 × 青磁）/ B 窯の焼成曲線（窯の闇 × 炎の橙）/ C ろくろ（濡れた土 × 灰釉の黄）/ D 教室の黒板（黒板の緑灰 × チョーク）
   • 自己評価で B を「暗い背景＋橙 1 色＝今の AI の典型」と判定し、B′（素焼きの棚板の灰 × 呉須の藍）に差し替えた

   差し替えの 1 回は、はっきり効いた（採用案はここから生まれた）。ただし 4 案は見た目ほど散っていない。差し替える前の 4 案は 4 つとも暗めの背景で、3 案が本文に同じ書体（M PLUS 2）だった。そして選んだのも同じ AI で、「人が 1 案を選ぶ」という前提は満たせていない。

2. 1 案を選び、3 つの宣言を書く

   効いた

   OpenAI 式: visual thesis（雰囲気を一文で）/ content plan / interaction thesis（動き 2〜3 個）

   • B′ を選択。理由は「主役の演出（作る日を選ぶ→受け取り日が出る）が予約という LP の仕事に直結している」
   • visual thesis: 素焼きの棚板の灰に、呉須の藍一色で焼成曲線を引く。温度と日付だけで窯の時間を語る
   • interaction thesis: ①日付を選ぶと曲線が組み変わる ②曲線をなぞると工程と温度が読める。スクロールで現れる演出は使わない

   作るときより、批評するときの物差しとして効いた。2 周目で「ヒーローより下で visual thesis が消えている」と気づけたのは、一文で書いておいたから。動きを 2 つに絞る宣言は最後まで守れた。

3. 避ける型を名指しする

   効かなかった

   雛形 ②: クリーム背景・テラコッタ・1 語だけの強調・番号見出し・全大文字・ピル型ボタン・同じカード 3 枚・フェードアップ・末尾の「→」。結果を見て足す

   • 雛形のリストに、陶芸で出やすいと予想した 3 つ（土のノイズ画像、手書き風の見出し、癒やし系コピー）を足した

   最初の実装にリストの型は 1 つも出なかった。そのため「リストが防いだ」のか「もともと出なかった」のか区別できない。実際に出たのはリストに無い型（罫線だらけの新聞風）で、1 周目の批評で見つけてから足した。「結果を見て足す」の方が効いた。

4. 実装

   効いた

   雛形 ④: 主役 1 つ＋操作への反応だけ。動きを減らす設定では止まった完成形。JS の予算を決める

   • 予算 10KB に対して 2.3KB（gzip）。ライブラリなし、SVG の折れ線 1 本と表だけ

   予算を先に数字で決めたので、ろくろの 3D や質感の画像に手を出す理由がなくなった。

5. 自己批評 1 周目

   効いた

   雛形 ⑤: 390 / 768 / 1440 のフルページのスクショで ①計画との差 ②AI っぽい型 ③読みやすさとコントラスト

   • ①曲線が「ダッシュボードの折れ線」に見える（温度の目盛りがない、受け取りが曲線上に無い）
   • ②罫線が多すぎる（区切り線＋表の罫線＋格子）。frontend-design が名指しする「罫線の多い新聞風」
   • ③山のラベルが下りの線と重なる。スマホで「残り 3」が 2 行に折れる。小さな文字の藍は 4.58:1 でぎりぎり
   • 直したあと撮り直して、SVG を横に伸ばしているせいで受け取りの点が楕円になっていたのも見つけた

   一番効いた工程。どれも実装中には気づいていなかった。目盛り・受け取りの点・ラベルの位置を直し、区切り線を消して余白で分けた。

   

   

6. 自己批評 2 周目 → 飾りを 1 つ外す

   一部効いた

   雛形 ⑤ をもう 1 周。最後に「出す前に飾りを 1 つ外す」

   • ①ヒーローより下が普通の予約フォームになり、「受け取り日が決まる」という主題が消えていた → 空き枠の表に受け取り日の列、フォームに受け取り日の一文を足した
   • ③768px で教室の表の列が詰まり「1 時間半」「2 点まで」が折れる → 900px 以下は 1 教室ずつの縦並びに
   • 飾りとして 400℃ の目盛り線を外した（窯の話で意味があるのは 800℃ と 1250℃ だけ）

   2 周目も見つかった（主題の消失は 1 周目で見落としていた大きめの問題）。ただし 1 周目より小粒。「飾りを 1 つ外す」は、外せる飾りがもう少なく、見た目の差はほとんど出なかった。

   

   

   

   

7. 性能トレース

   やっていない

   雛形 ⑤ の最後: DevTools の性能トレースで LCP / INP / CLS と長いタスクを報告

   • この環境に DevTools MCP が無く、実施していない。代わりに JS の転送量（2.3KB）だけ測った

   工程を「そのまま」回すという条件は、ここで守れていない。