DESIGN.md — 金箔×和紙調の高級ヘアケアセットLP（Gold Washi Luxury Haircare Set LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、和風、情報量多め・訴求型
• キーワード: 金箔・和紙・明朝体・セット比較・ブロンズ・ギフト感
• 地の質感: 和紙の繊維感と金箔が散った背景、商品は白い円柱台座に載せた写真
• 形: 細い金の二重線枠、左上の三角コーナー番号、菱形番号、円形の特長バッジ
• 温度感: 温かみのある生成りとゴールドに、黒い商品ボトルで締める

Colors

• 地は生成りの和紙調で統一し、白カードで情報を載せる。
• 見出し帯と特長バッジはブロンズ茶の単色かグラデーションにする。
• セットは金・緑・赤で色分けし、番号三角と価格帯を同色で揃える。
• 朱赤はキャンペーン帯・割引率・Q&Aの強調だけに使う。
• 金は線・文字・グラデで使い、大面積の原色ベタにしない。
• corner-number は文字 #FFFFFF × 背景 #D49A03 のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#986E02、4.6:1）を使う。
• price-bar は文字 #FFFFFF × 背景 #D49A03 のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#986E02、4.6:1）を使う。
• heading-band は文字 #FFFFFF × 背景 #947643 のコントラスト比が 4.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8F7241、4.51:1）を使う。
• feature-circle は文字 #FFFFFF × 背景 #947643 のコントラスト比が 4.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8F7241、4.51:1）を使う。

Typography

• 見出しは明朝、本文・説明はゴシックで分ける。
• 価格と番号は欧文セリフで大きく、円・税込は小さく添える。
• 割引率は数字だけを大きくする。
• セット名は対応色の文字で書く。
• 注釈は右寄せの小さい文字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。セット一覧だけ 3 列カード
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• セットごとに金細枠のブロックで囲む。
• 商品写真は中央に置き、その下に構成品と通常価格を表で並べる。
• 価格帯はブロック下端いっぱいに配置し、左に円形割引バッジをはみ出させる。
• 商品紹介は帯見出し＋左写真・右バッジ＋説明の2カラムカード。
• Q&Aは白カードを縦積みし、間を24px程度空ける。

Elevation & Depth

• 白カードにはごく薄い影をつけて和紙から浮かせる。
• 円形バッジは立体感のあるブロンズのグラデーションにする。
• 割引バッジは金のぼかし円で光らせる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きで白い円柱台座に載せる。背景はクリーム状のテクスチャ写真をフェードさせる
• セクション境界: 直線で背景色だけを切り替える。見出し下は金の細い横線
• カード・帯は角を立てた四角にする。
• 番号は左上の三角コーナーか菱形で示す。
• 特長は正円のバッジで示す。

Components

• キャンペーン帯（campaign-band）: 赤地の上に白箱を2つ並べ、割引率とポイント倍率を赤の極太数字で示す
• セット一覧カード（set-index-card）: 上部の菱形番号を色分けし、セット名と点数を3列で並べる
• 三角コーナー番号（corner-number）: ブロック左上に色付き三角を置き、欧文セリフで番号を入れる
• 価格帯（price-bar）: セット色の帯に通常価格の取消線、二重矢印、大きなセット価格を並べ、左に円形の割引バッジを置く
• 帯見出し（heading-band）: ブロンズ地に白の明朝で商品名を中央揃えにする
• 円形特長バッジ（feature-circle）: 直径70px前後のブロンズ円に白文字で効果を2〜3語入れ、横に並べる
• 選べる香りタグ（choice-tag）: 赤い円バッジまたは白箱に小さな商品写真を添え、選択できる項目を示す
• Q&Aカード（qa-card）: 白カードに赤線丸のQと赤塗り丸のAを置き、質問を赤文字で書く

Do's and Don'ts

Do - 地は和紙調の生成りにし、金箔を散らした質感を出す。 - 見出しは明朝で、金のグラデーションか濃墨色にする。 - セットごとの色分けを番号・セット名・価格帯で統一する。 - 商品は白い円柱台座に載せて並べる。 - 価格は通常価格と割引後を並べて比較させる。

Don't - 丸ゴシックやポップな書体を使わない。 - 蛍光色や青系を入れない。 - 角丸の大きいカードやピル型ボタンにしない。 - 金を黄色のベタ塗りにしない。 - 白背景だけの平坦なページにしない。

Page Structure

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

1. ファーストビュー（限定セレクションであることと商品群を見せる）: 淡いベージュのグラデ背景に金の明朝大見出しと金ラベル、台座に載せた商品集合写真、赤い円バッジ
2. キャンペーン訴求（割引率とポイント特典を示す）: 赤い帯に白箱2つを並べ、大きな赤数字を入れる
3. セット一覧（3つのセットを比較して選ばせる）: 金箔和紙の地に明朝見出しを置き、菱形番号付きの3列カードを並べる
4. セット詳細×3（各セットの中身と価格を示す）: 金細枠のブロックに三角番号、色付きのセット名、商品写真、構成表、価格帯を入れる
5. アイテム紹介（単品ごとの効果を説明する）: 明朝見出しの下に帯見出し付きの白カードを縦に並べ、写真・円形バッジ・説明を入れる
6. よくある質問（香りや使い方の不安を解消する）: 欧文セリフのQ&A見出しと小見出し、金線の下にQ&A白カードを縦積みする

Imagery

• 黒地に金の筆跡模様が入ったボトルを、白い円柱台座の上に段差をつけて置く。
• 背景は柔らかな自然光の生成り壁、金の光の反射を入れる。
• 単品カットは横に乳液状テクスチャや気泡をぼかして添える。
• 和紙繊維と金箔片のテクスチャ、青海波などの和柄を薄く敷く。
• 香りの説明にはスパイスや花のドライ素材を小さく添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅480〜750px程度のカラムを置き、左右には和紙背景を広げる。
• セット一覧の3列カードは PC でも維持し、余白を広げる。
• アイテム紹介カードは PC で写真とテキストを横並びのまま幅だけ広げる。
• 見出しは 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 行書くと起動時に読み込まれる。