DESIGN.md — ベージュ×焦げ茶×深紅の福袋ヘアケア LP（Warm Beige Botanical Haircare Gift Set LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、ナチュラル、情報量多め・訴求型
• キーワード: ベージュグラデーション・深紅の価格訴求・白ボトルの物撮り・植物と果実の添え物・種類ごとの色分け・冬のギフト感
• 地の質感: 紙のようにマットなベージュと茶色の面を斜めに切り替える。赤い実の枝や葉を添えて季節感を出す。
• 形: 四角いカードと帯ラベルが基本。香りや特徴は細線の正円の吹き出しで添える。
• 温度感: 暖かい。茶系の地の上で、白とグレーの製品写真を涼しく見せる。

Colors

• 地はベージュから焦げ茶へ斜めに切り替え、上品で暖かいトーンを保つ。
• 深紅は価格・割引率・限定セットの見出しにだけ使う。
• 種類の色分けは濃茶黒・白（枠線つき）・くすみピンクの 3 色に固定する。
• 製品解説は白か淡グレーのパネルに入れ、茶色の地から浮かせる。
• 実績や受賞はゴールドで、ローレル（月桂樹）と組み合わせる。
• 最後のブランドの思想を語るブロックは、明るい青白の地に切り替える。
• award-badge は文字 #FDFBF4 × 背景 #B39553 のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#88703C、4.58:1）を使う。
• ingredient-label は文字 #FDFBF4 × 背景 #C7BC7E のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#7F7437、4.55:1）を使う。

Typography

• 価格数字は極太にし、「円」と「(税込)」は小さく添える。
• 英字ラベルは字間を広げた細めのサンセリフにし、和文見出しの上に置く。
• 見出しのキーワードだけ一段大きくするか、下線を引く。
• 注釈は ※ 番号つきでパネル下にまとめる。
• 本文は 13px 前後にし、行間を広めに取る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。種類比較だけ 2〜3 列にする。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• パネルは左右に 5% 程度の余白を取って中央に置く。
• 製品写真は斜め上から並べ、大きく見せる。
• 種類ごとに『見出し帯＋悩みチェック 2 つ＋製品写真＋香りの吹き出し』を同じ構成で繰り返す。
• パネルの間は『＋』の丸記号でつなぎ、セット内容の足し算を見せる。
• 注釈はセクション末尾にまとめる。

Elevation & Depth

• パネルはフラットにし、影はごく薄くする。
• 製品写真には接地影を落とし、立体感を出す。
• 円形バッジにはやわらかい影を付けて浮かせる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 製品の物撮りは四角に切る。香りの素材は正円に切り抜く。
• セクション境界: 地の色は斜めの直線で切り替える。パネルの下辺には小さな三角の吹き出し状の切り欠きを付ける。
• ボタン・ラベルは角丸なしの長方形にする。
• 香り・特徴は細い線の正円で囲む。
• 受賞は王冠やローレルを付けた円形バッジにする。

Components

• 割引価格ブロック（price-block）: 深紅の矢羽型ラベルに割引率を白抜きで入れ、横に深紅の巨大な価格を並べる。
• 種類選択ラベル（variant-selector）: 3 種類のラベルを横に並べ、濃茶黒・白枠・くすみピンクで塗り分ける。
• 見出し帯（section-band）: 濃茶黒の細い帯に白文字を入れ、主見出しの上に置く。
• 種類別解説カード（variant-card）: 上部に種類名と悩みチェック 2 つ、右上に原料の丸写真を置く。下に淡グレーの製品写真エリアを続ける。
• 香りの円吹き出し（scent-bubble）: 細いグレーの線の正円に、製品の種類と香りを 2 行で書く。
• ランキングバッジ（award-badge）: 赤と金の円形メダルにリボンを付け、順位を大きく見せる。
• 成分見出しタブ（ingredient-label）: オリーブ色の小さな長方形タブに白文字を入れ、白カードの上辺中央に置く。
• 足し算の丸記号（plus-circle）: 焦げ茶の正円に白い細線の＋を入れ、パネルの間に置く。
• 仕上がりメーター（texture-meter）: 5 段階のバーで、軽やかさとしっとり感の度合いを示す。

Do's and Don'ts

Do - 価格と割引率は深紅で一番大きく見せる。 - 種類の違いは色・香り・悩みチェックの 3 点で比べさせる。 - 製品写真には果実や花、葉を添えて植物由来らしさを出す。 - 効能の表現には ※ 注釈を必ず付ける。 - 赤い実の枝をアクセントに散らし、冬の季節感を出す。

Don't - 原色の青や黄色を使わない。 - ボタンを丸いピル型にしない。 - 深紅を本文や装飾に多用しない。 - 地を真っ白だけにして、暖かみを失わない。 - 製品写真を小さく詰め込まない。

Page Structure

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

1. ファーストビュー（限定セットと割引価格を一目で伝える）: ベージュの斜めグラデーションに深紅の大きな題字を置き、製品を一面に並べる。下に割引価格を入れる。
2. セット内容（点数と中身を示す）: 送料無料の丸バッジ、英字ラベル、製品群の写真を並べる。白カードに 3 種類の選択ラベルを入れる。
3. 価格まとめ（通常価格との差を示す）: 取り消し線の通常価格と、白丸の割引率、深紅の巨大な価格を並べる。
4. 受賞実績（信頼を補強する）: 左にメダルを 2 つ縦に並べ、右に製品写真を置く。
5. 種類診断（自分に合う種類を選ばせる）: 大きい写真カード 1 枚と小さい 2 枚に、悩みの見出しと種類名のタグを付ける。
6. 仕上がりマップ（種類の位置関係を示す）: 濃茶黒の見出し帯の下に白地の 4 象限図を置き、円形アイコンを配置する。
7. ヘアケアの特長（成分と仕組みを説明する）: 焦げ茶の地に白抜きの見出しを置き、髪の断面図と成分の丸吹き出しを入れる。
8. 種類別の詳細（種類ごとの香りと仕上がりを説明する）: 解説カードを 3 回、同じ構成で繰り返す。
9. 集中補修アイテム（追加アイテムを訴求する）: クリーム色のパネルに丸い悩みバッジ 3 つを並べ、成分カードと使い方の STEP を続ける。
10. ボディケア（ボディ製品を紹介する）: 肌の写真に赤い点線の円を重ねる。香りはピラミッド図で示す。
11. ブランドの思想（世界観を伝える）: 青白い地にロゴと中央揃えの短い文章を置き、葉の装飾を添える。
12. 実績（信頼で締める）: ゴールドのローレルで No.1 と 3 つの数値を囲み、下に注釈を並べる。

Imagery

• 白と半透明のボトルを、明るい背景に斜め上から撮る。
• 製品の脇に、果実の断面・白い花・葉をしずる感のある見せ方で添える。
• 赤い実の枝や緑の葉を、画面の端からのぞかせる。
• 原料は正円に切り抜いた接写写真にする。
• 肌や髪の状態は、淡いピンクベージュのイメージ写真で見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 750px で中央に固定し、左右にベージュの地を見せる。
• 種類別カードは PC で 3 列横並びにする。
• ファーストビューの製品写真は横長に組み直し、価格を右側に置く。
• 仕上がりマップは PC でも正方形を保つ。

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 行書くと起動時に読み込まれる。