DESIGN.md — 生成り×モカブラウンの上品ヘアケア LP（Ivory and Mocha Organic Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、ナチュラル、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 生成り・モカブラウン・明朝体・月桂冠・ボタニカル線画・余白
• 地の質感: マットで柔らかな紙のような生成り地。うっすらボタニカルの影を重ねる
• 形: 角は直線ベース。小さなカードに軽い影、バッジは正円、ラベルは小さめの角丸
• 温度感: 暖色寄り（クリーム〜ベージュ〜ブラウン）

Colors

• 地は生成り（#FEFBF4）を基本に、実績エリアだけ一段濃いベージュで帯を作る
• モカブラウンはバッジ・ラベル・手順ヘッダーなど小面積の面にのみ使う
• ゴールドは月桂冠と実績数字に限定し、他で使わない
• 見出しは黒ではなく濃いブラウングレーで柔らかく
• 強調語には淡いピンクの下半分マーカーを引く
• 彩度の高い色は植物イラストの中だけに留める
• recommend-circle は文字 #FFFFFF × 背景 #96715E のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#916D5B、4.62:1）を使う。
• step-label は文字 #FFFFFF × 背景 #96715E のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#916D5B、4.62:1）を使う。
• product-name-label は文字 #FFFFFF × 背景 #96715E のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#916D5B、4.62:1）を使う。

Typography

• 見出しは明朝で字間を広め（0.1em 前後）に取る
• 本文・リストはゴシック細めで情緒を邪魔しない
• 英字見出しはセリフ体、補助の英字はイタリック風小文字で添える
• 数字は明朝で大きく、単位は一回り小さく
• 太字は多用せず、大きさと字間で階層を作る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。バッジ・手順・商品は 3 列、特長は画像左＋リスト右の 2 分割
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算）
• セクション間は広めの余白で静かなリズムを作る
• POINT 見出しは左に番号ブロック、縦線で区切り右に 2 行見出し
• 写真は全幅で挟み、文字セクションと交互に配置
• 3 列要素は等幅・等間隔で中央揃え
• 注釈は中央揃えで極小サイズにまとめる

Elevation & Depth

• 白カードにごく薄い影（0 2px 6px rgba(0,0,0,0.08)）
• 商品ボトル画像に落ち影を付けて浮かせる
• それ以外はフラットに保つ

Shapes

• 角丸: 小 3px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物・シーン写真は全幅の長方形、商品は切り抜き
• セクション境界: 直線で切り替え。手順カード上部は斜めカットのブラウン帯
• おすすめバッジは正円
• ラベルは角丸 3px 程度の小さな長方形
• カードは角丸ほぼなし〜6px
• 斜め・波などの派手な区切りは避ける

Components

• 月桂冠実績表示（laurel-badge）: ゴールドの月桂冠で数字と受賞を挟み、下に注釈を添える
• POINT 番号見出し（point-heading）: 小さな POINT と大きな番号を下線付きで置き、縦線の右に明朝 2 行見出し
• おすすめ丸バッジ（recommend-circle）: モカブラウンの正円にチェックアイコンと 2 行の白文字、3 つ並べる
• チェックリストカード（check-card）: 白カードに☑付きの短い特長を 1 行ずつ縦に積む
• step ラベル（step-label）: ブラウンの小ラベルに step 番号、右に工程名
• 使い方手順カード（howto-card）: ブラウン帯ヘッダーに STEP 番号、線画イラストと説明文。矢印で 3 枚を繋ぐ
• マーカー強調見出し（marker-heading）: 明朝見出しの強調語に淡いピンクの帯を敷き、上下に細線
• 商品名ラベル（product-name-label）: 商品切り抜きの下にブラウンの横長ラベルで名称

Do's and Don'ts

Do - 生成り地と広い余白で上品な静けさを保つ - 見出しは明朝＋広い字間で統一する - ブラウンは小さな面で繰り返しリズムを作る - 実績はゴールドの月桂冠で権威付けする - 手描き風の植物線画を余白の隅に添える

Don't - 原色や蛍光色の CTA を置かない - 純黒の太字ゴシックで見出しを作らない - 角丸の大きいポップなボタンにしない - 背景に濃いグラデーションや柄を入れない - 情報を詰め込みすぎて余白を潰さない

Page Structure

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

1. ファーストビュー（髪を労わる世界観と商品を一目で伝える）: 明るい自然光の女性写真に左上の明朝キャッチ、手前に商品ボトル切り抜き
2. 実績（販売数・受賞・評価で信頼を示す）: ベージュ地にゴールドの月桂冠 3 つ、モンステラの淡い影、下に極小注釈
3. 特長 1（補修処方を訴求する）: POINT 見出し＋ヘアアイロンの全幅写真
4. おすすめの対象（ターゲットの悩みを自分ごと化）: 下線付き小見出しとブラウン丸バッジ 3 つ
5. 共感と解決（悩みと願いを提示し解決策へ繋ぐ）: マーカー強調の明朝見出し、商品大写真＋チェックリストカード 5 段
6. 特長 2（2 ステップの補修を説明）: 白カード 2 枚に商品切り抜き左、step ラベルとチェック項目右
7. 特長 3（香りによる癒しを訴求）: 夜の暗い全幅写真、英字イタリックの副題、精油 3 種の水彩イラスト
8. 使い方（正しい使用手順を示す）: 英字セリフ見出し、ブラウン帯ヘッダー付き 3 列カードと矢印
9. ラインナップ（シリーズ併用を促す）: 植物線画を添え、商品切り抜き 3 つにブラウンの名称ラベル

Imagery

• 人物写真は明るい自然光、ベージュ系の室内で柔らかいトーン
• 商品は白背景切り抜きで落ち影付き
• 香りは夜のキャンドルやディフューザーの暗く落ち着いた写真
• 植物は淡いモノクロ線画や水彩で余白の隅に配置
• 手順イラストは細い線画の女性、髪だけ淡い色付け
• 背景にモンステラなど葉の淡いシルエットを薄く重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後のカラムに SP デザインを据え、左右は生成り地で埋める
• FV は写真を横長にし、キャッチを左、人物を右に配置
• 3 列要素はそのまま、余白と文字サイズを 1.2 倍程度に拡大
• 特長の画像＋リストは PC でも左右 2 分割を維持

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