DESIGN.md — 白大理石×ティールの清潔系日用品LP（Clean Teal Marble Daily Goods LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 清潔・爽やか、上品・高級、情報量多め・訴求型
• キーワード: 白大理石・ティール・明朝見出し・清潔感・機能訴求
• 地の質感: 大理石・白い布のドレープ・柔らかなボケ写真を背景に敷き、紙のような白さと光沢感を出す
• 形: 角丸ピル、円形バッジ、ギザギザの星形バッジ、斜めの帯ラベル
• 温度感: やや冷たい。茶色の差し色で温度を少し足す

Colors

• 白と薄グレーの大理石・布地を地にして、清潔感を最優先にする
• ティールは機能ピル、円バッジ、斜めの帯ラベルだけに使う
• 茶色は悩み・汚れ系の訴求（星形バッジ・見出しの面）に限って使う
• 見出しは墨色にし、キーワードだけティール文字で大きくする
• ファーストビューだけはベージュ系の暖色写真で始める
• circle-badge は文字 #1F9A8A × 背景 #FFFFFF のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1A8375、4.62:1）を使う。

Typography

• 見出しは明朝体にし、強調語だけ 1.3〜1.5 倍に大きくする
• 強調語はティール、助詞は小さめの墨色にする
• 本文は 11px 前後のゴシックで中央揃えにし、3〜4 行に収める
• 英字見出しはセリフ体の大文字で字間を広く取る
• 数字は明朝で特大にして円バッジの中に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。画像の並びは 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は端まで広げ、見出しと本文はその下か上に重ねる
• 見出しの下に、幅 80% ほどの細い線を引く
• STEP 説明は 2 列の写真グリッドにし、左下に番号を置く
• スペック部は余白を多めに取り、英字見出し・短い下線・図の順に並べる

Elevation & Depth

• 影は基本的に使わない
• 白いカードの上に、写真からわずかに浮く程度の弱い影を付ける
• 奥行きは、写真の切り抜きを重ねて出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 商品は白抜きの切り抜き。シーン写真は角丸なしの矩形で端まで広げる
• セクション境界: 区切りは写真背景の切り替えで作り、直線で区切る
• 機能ラベルはティールのピル型にする
• 訴求は白地に細いティール線の円形バッジで囲む
• 悩みワードは茶色のギザギザ星形バッジに入れる
• ラベル帯は斜めの平行四辺形にする

Components

• 機能ピル（feature-pill）: 機能名を 2 列×3 行で並べるティールのピル
• 円形訴求バッジ（circle-badge）: 白地にティールの線で囲んだ円。中に小さな前置きと大きな強調語を入れる
• 数字の円バッジ（number-badge）: ティールで塗った円に、白の明朝で大きな数字を入れる。周囲に英字の弧を添える
• 星形の悩みバッジ（star-badge）: 茶色のギザギザ円に白文字で悩みワードを入れ、写真の周囲に散らす
• 斜め帯の見出し（slant-label）: ティールの平行四辺形に、白の明朝で検証タイトルを入れる
• STEP番号（step-number）: 写真の左下に、小さな英字と斜線、大きな明朝の数字を重ねる
• 写真キャプション帯（photo-caption）: 写真の上に置く、ティール地に白文字の短い説明帯
• 英字セクション見出し（section-title-en）: セリフ体の大文字に、短い太下線を中央に添える

Do's and Don'ts

Do - 地は白〜薄グレーに保ち、清潔さを最優先にする - 見出しは明朝体にし、キーワードをティールで大きくする - 機能は円バッジやピルに入れて短い言葉で示す - 商品は白抜きの切り抜きで大きく見せる - 説明文は中央揃えで短くまとめる

Don't - ビビッドな赤や黄色の CTA 色を入れない - 見出しを丸ゴシックにしない - 濃い色の面を広く敷かない - 強い影やグラデーションのボタンを使わない - 本文を長い段落にしない

Page Structure

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

1. ファーストビュー（商品の用途と入数をひと目で伝える）: ベージュ系の使用シーン写真に、右上へ白抜きのゴシックのタイトルと入数ラベルを置く
2. 悩みの提起（汗による汚れの悩みを喚起する）: シャツと帽子の写真の中央に、茶色の面で悩みワードを大きく置く
3. 解決と機能一覧（商品で解決できることを列挙する）: 白いカードに明朝のリードを入れ、ティールのピルを 6 個並べる
4. 効果の説明（防汚の効果を示す）: 商品の写真の周囲に茶色の星形バッジを散らし、その下に明朝見出しと中央揃えの本文を置く
5. 特長（貼りやすさ）（使いやすさを訴求する）: 大理石の背景に、大きな明朝見出しと円形の訴求バッジを置く
6. 対応アイテム（使える範囲の広さを示す）: 切り抜いた帽子写真を 5 点散らし、その下に見出しと本文を置く
7. 検証（吸水力を実験で証明する）: 斜め帯の見出しの下に、STEP 番号付きの写真グリッドを置き、手書き風の結論で締める
8. 構造の説明（層の構造で防水性を説明する）: 断面の写真に、点線と層名のラベルを重ねる
9. 素材（肌へのやさしさを伝える）: 白い布のドレープに素材のアップ写真を円形に重ね、その下に見出しを置く
10. 枚数の選択（入数の選び方を案内する）: ティールの円バッジ 2 つを「or」でつなぐ
11. カラー展開（色の使い分けを示す）: 大きな明朝の数字見出しに、左右 2 分割の使用写真とティールのキャプション帯を合わせる
12. サイズ情報（寸法と素材を明示する）: 英字見出しの下に、寸法線付きの商品図と素材の注記を置く
13. カラーバリエーション（セットの内容を見せる）: 扇状に広げた商品を 2×2 で並べ、英字の色名と注記を添える

Imagery

• 白い大理石や白い布のドレープを、明るく柔らかい光で撮って背景にする
• 商品は白抜きの切り抜きにし、斜めや扇状に並べる
• 使用シーンは自然光で、清潔感のある白いシャツやキャップと合わせて撮る
• 検証写真は水を青く着色し、効果を見える化する
• 汚れやカビは、小さくかわいいイラストで添える程度にとどめる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に 750px 前後の 1 カラムでそのまま見せ、左右は白〜薄グレーの地にする
• 写真グリッドは PC で 3〜4 列に広げてもよい
• 見出しサイズは PC で 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 行書くと起動時に読み込まれる。