DESIGN.md — 白×墨黒×金の真空保存キッチン家電LP（Monochrome Gold Kitchen Gadget LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 上品・高級、シンプル・ミニマル、信頼・誠実、情報量多め・訴求型
• キーワード: モノトーン・ゴールド数字・月桂樹実績・暗転の問題提起・ポイント番号・生活写真
• 地の質感: フラットな白・グレーの面に、実写のキッチン写真と淡い影のカードを重ねる
• 形: 角丸カード、細い水平罫線、楕円の写真切り抜き、円柱形の番号台座
• 温度感: やや冷たい無彩色に、金と木目で温かみを添える

Colors

• 地は白とライトグレーを交互に使い、セクションを区切る
• 数字と強調語だけを金茶にして、本文は墨黒にする
• 問題提起は黒背景に白文字で暗く転調させ、悪い例を印象づける
• 深紅はメディア紹介と第三者の推薦だけに使う
• 青はブランドストーリー帯と手順内の強調だけに限る
• 購入ボタンは深緑の 1 色にして、他の強調色と混ぜない
• compare-row は文字 #997327 × 背景 #FEFEFE のコントラスト比が 4.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#957026、4.5:1）を使う。

Typography

• 見出しは字間を 0.1〜0.15em と広めにとり、上品に見せる
• 数字は単位の 2〜3 倍の大きさにし、金茶で強調する
• 本文中の強調語は太字にせず、金茶の色替えだけで示す
• 英字の添え書きは手書き風の筆記体にして小さく置く
• 注釈は 9px 前後の灰文字で、該当ブロックの直下に右寄せで置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。実績・使い道・機能カードは 2〜3 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しの上下を細い水平罫線で挟む
• 実績の数字は中央揃えにし、月桂樹で左右を挟む
• 比較表は 1 行ずつ白いカードにして、改善後の段をクリーム色の帯にする
• 手順は細い枠線のボックスに入れ、step の英字を薄く重ねる
• 写真は全幅か 2 分割で並べる

Elevation & Depth

• 口コミカードは白地に、ぼかしの大きい淡い影をつける
• 比較表の行カードはごく薄い影で浮かせる
• 雑誌の表紙や使い道の写真には右下に軽い影を落とす
• それ以外はフラットにし、罫線で区切る

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 基本は角あり矩形。検証結果は有機的な楕円、補足写真は正円で切り抜く
• セクション境界: 基本は直線。黒セクションの下端は下向きの浅い台形、青い帯は上端を大きな円弧にする
• 色名のラベルは片側だけ丸いピル型タブにする
• ポイント番号は円柱形の台座の上に数字を載せる
• 口コミカードは大きめの角丸にする
• 購入ボタンは角丸なしの矩形にする

Components

• 購入ボタン（button-primary）: 深緑の矩形ボタン。右端に丸い矢印アイコンを置き、下段に特典を小さな白いタグで並べる
• 月桂樹つき実績（stat-laurel）: 金の月桂樹で大きな数字や順位を挟み、横に※番号を添える
• 口コミカード（review-card）: アバター・日付・星 5 つを並べ、感想の要所を金茶にする白カード
• ポイント番号（point-number）: 白い円柱台座にセリフ体の 2 桁番号を載せ、横罫線と重ねる
• 比較表の行（compare-row）: 食材アイコンと保存期間を 2 段で比べる。改善後の段はクリーム色の帯にして、期間を金茶で示す
• 推薦見出しラベル（red-label）: 写真の上に重ねる深紅の帯に白文字を入れ、2 段に積む
• 特典・機能チップ（feature-chip）: グレー地か白地に太字の短い語を入れ、2×2 のグリッドで並べる
• 手順ボックス（step-box）: 細い枠線の中に手順名・写真・説明を入れ、step の英字を薄いグレーで重ねる

Do's and Don'ts

Do - 数字の実績は大きく金茶で見せ、すぐ下に注釈を添える - 白とグレーの地の中に、黒い問題提起セクションを 1 か所入れる - 見出しは上下を罫線で挟み、字間を広めにとる - 写真はキッチンの実写にし、彩度を抑えた落ち着いたトーンにそろえる - 第三者の推薦は、写真に深紅のラベルを重ねて見せる

Don't - ビビッドなグラデーションや蛍光色を使わない - 金茶を本文全体に広げない - 購入ボタンを角丸ピル型やポップな色にしない - 注釈を省略しない - 手書き風フォントを見出しに使わない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（商品の世界観と主要な実績を一目で伝える）: 木目のキッチン写真の上に白い縦書きコピーを置く。下部に半透明の実績バッジを 3 つ並べる
2. ビフォーアフター（効果を直感的に見せる）: 劣化した食材と新鮮な食材の写真を 2 枚並べ、矢印でつなぐ
3. 実績（支援額・販売数・ランキングで信頼を得る）: グレー地に大きな金茶の数字を置き、月桂樹で挟む。プロジェクトのスクリーンショットを階段状に重ねる
4. メディア掲載（TV・雑誌の露出で権威づけする）: 深紅の帯に見出しを置き、TV 画面の画像を重ねる。雑誌の表紙は 4 冊を細い金枠の中に並べる
5. お客様の声（評価平均と生の声で安心させる）: 大きな金の星で平均評価を示し、角丸の白カードを縦に積む
6. 商品と価格・CTA（サイズ・価格・特典を示して購入へ導く）: 大きな円弧の線で囲んだ価格表と、色違いの写真を並べる。グレーの特典チップの下に深緑の購入ボタンを置く
7. 問題提起（保存の課題を暗く印象づける）: 黒背景にスポットライト風の果物写真を置き、悪い例は白黒の写真で見せる
8. 比較（保存期間の差を数字で示す）: 行カードにアイコンを並べた比較表を置き、結論を大きな金茶の数字で示す
9. 特長ポイント（容量・お手入れ・使い方を説明する）: 円柱台座の番号に続けて字間の広い見出しを置く。楕円写真のグリッドと手順ボックスで説明する
10. 機能まとめ（細かな機能とメリットを整理する）: グレーのカードを 2 列に並べ、内側に白いチップを 2×2 で配置する
11. 専門家の推薦（プロの評価で裏づける）: シェフの写真に深紅のラベルを重ね、左右交互に配置する
12. ブランドストーリー（作り手の想いを伝える）: 上端が円弧の青い帯にスケッチの線画を敷き、白文字の見出しを置く
13. ライフスタイルギャラリー（暮らしの中での使用イメージを示して締める）: 大きな見出しの後、使用写真をタイル状のコラージュで並べる

Imagery

• グレーや木目のモダンなキッチンで、自然光で撮った製品の実写
• 人物は手元中心に写し、生活感を控えめに出す
• 問題提起は黒背景で、食材に強いスポットライトを当てる
• 比較表は切り抜いた食材アイコンを個数で並べて表す
• 金色の月桂樹と星はフラットなイラストで描く
• ブランド帯は青地に白い線画のスケッチを重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため推奨として書く。PC では本文幅を 760px 前後の中央寄せにする
• 実績や機能カードは 3〜4 列に広げる
• 推薦は写真と文章の左右 2 カラムにする
• ギャラリーは 3 列のタイルにする
• 数字の大きさは SP の 1.3 倍程度にとどめる

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。