DESIGN.md — 水色×金のボタニカル高級ボディケア LP（Gold Serif Botanical Bodycare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、清潔・爽やか、やさしい・柔らかい、ナチュラル
• キーワード: 淡い水色・金の欧文セリフ・草花の線画・ダイヤ罫線・3 ステップ・商品カルーセル
• 地の質感: 水彩のようにぼかした水色と淡ピンクのグラデーション地に、葉影がうっすら重なる。
• 形: 四隅を斜めに切った六角形のタブとボタン、角丸の写真、金の細罫線に菱形の端飾り。
• 温度感: やや涼しげ。ところどころに温かみのある生成りピンクを差す

Colors

• 地は白・淡い水色・生成りピンクを交互に置き、セクションごとに切り替える。
• 見出しと購入ボタンは金色にそろえる。
• ステップ番号と小見出しは青緑。金とは役割で分ける。
• 選択中のタブだけくすみ青で塗り、ほかのタブは生成りに金の縁取り。
• 濃い色の面は作らない。いちばん暗い色は本文のグレーまで。
• 緑は LINE ボタンにだけ使う。
• button-cart は文字 #FFFFFF × 背景 #BA9743 のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8D7233、4.58:1）を使う。
• button-more は文字 #9B8131 × 背景 #F9EAE4 のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7E6928、4.55:1）を使う。
• tab-category は文字 #9B8131 × 背景 #F3EBE5 のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7E6928、4.53:1）を使う。
• ribbon-gold は文字 #FFFFFF × 背景 #9B8131 のコントラスト比が 3.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7E6928、4.53:1）を使う。
• accordion-note は文字 #6C6C6C × 背景 #F9EAE4 のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#6B6B6B、4.55:1）を使う。

Typography

• セクション見出しは欧文セリフの金色で中央に置く。
• ステップ見出しは「STEP＋大きな斜体数字＋動詞＋製品名」を横一列に並べる。
• 和文の見出しは明朝、本文はゴシックで分ける。
• 本文は中央ぞろえ。注記だけ左ぞろえにする。
• 太字は小見出しと強調だけに使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カルーセルは 2 枚が見え、一部がはみ出す。特長は写真とテキストを左右交互に置く。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 特長とステップの間は、金のダイヤ罫線で区切る。
• 写真とテキストを左右交互に組んで、ジグザグに読ませる。
• カルーセルの下に菱形のページ送りを置く。
• 各ステップの最後に、白いピル型の一覧ボタンを中央に置く。
• セクションの上下の角に草花の線画を配置する。

Elevation & Depth

• 影はほぼ使わない。
• 白いピル型ボタンには、うっすらとした影をつける。
• キット一覧のカードは白地に細い灰色の枠と角丸をつけ、影はつけない。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物と素材の写真は角丸 12〜16px の四角。商品写真は淡い円形の背景に切り抜きで置く。
• セクション境界: 直線で地の色を切り替える。境界のそばに草花の線画を添える。
• 購入ボタンは角丸なしの金色の長方形にし、右に矢印を置く。
• タブと一覧ボタンは、両端を斜めに切った六角形かピル型にし、金の縁と両端の菱形をつける。
• 日付などのリボンは、両端が矢羽型の金帯にする。
• LINE ボタンは角丸 8px の緑。

Components

• 金のカートボタン（button-cart）: 角丸なしの金色の長方形。白文字の右に＞を置く。
• 詳細リンク（link-detail）: 下線つきのテキスト。右に丸い矢印アイコンを置く。
• 装飾ピルボタン（button-more）: 白地に金の縁、金の明朝文字。両端に菱形の飾りをつける。
• カテゴリタブ（tab-category）: 六角形のタブを 3 つ並べ、破線でつなぐ。選択中はくすみ青で塗る。
• ダイヤ罫線（divider-diamond）: 金の細い線。両端と中央に小さな菱形を置く。
• ステップ見出し（step-heading）: 斜体の STEP と大きな数字に、動詞と製品名を続ける。色は青緑。
• 商品カード（product-card）: 円形の淡い背景に商品写真を載せ、下に名前・価格・カートボタン・詳細リンクを並べる。
• キット内容ボックス（box-contents）: 淡い色の面の中に、太字の見出しと中央ぞろえの小さな箇条書きを置く。
• 金リボン（ribbon-gold）: 両端が矢羽型の金帯。白文字で日付やラベルを入れる。
• 注意事項アコーディオン（accordion-note）: 白地。上辺に金の線を引き、右に開閉の横棒を置く。

Do's and Don'ts

Do - 見出しは必ず金の欧文セリフで、中央に置く。 - 地は白・水色・生成りピンクの 3 色だけで切り替える。 - 区切りには菱形付きの金罫線を使う。 - 商品写真は切り抜きにし、淡い円形の背景を敷く。 - 余白を多めにとり、文字はセクションごとに中央でそろえる。 - 草花の線画は灰色の細線で、画面の端に寄せて置く。

Don't - 原色や蛍光色を使わない（LINE ボタンの緑だけは例外）。 - 太く重いゴシックを見出しに使わない。 - 濃い背景の面を作らない。 - ボタンの色を金以外に増やさない。 - 強いドロップシャドウや立体的な装飾を使わない。 - 文字を詰めた情報過多な訴求にしない。

Page Structure

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

1. ファーストビュー（世界観と 3 ステップの提案を伝える。）: 青空と草原の写真を背景に、小さなピル型ラベル、白い欧文セリフの大見出し、2 行のコピー、手前に商品 3 点を置く。
2. キャンペーンバナー（サンプルプレゼントへ誘導する。）: 細い枠のついた横長バナー。下部に青い帯のリンクを置く。
3. ブランドの特長（成分の価値を伝える。）: 金の明朝見出しと中央ぞろえの本文。その下で、角丸写真とテキストを左右交互に 2 段並べる。
4. 3 ステップの使い方（洗う・磨く・潤す の手順を見せる。）: 水色の地。カテゴリタブ、欧文見出し、写真、大きな薄い斜体数字のステップ 3 段を、ダイヤ罫線で区切って並べる。
5. セット商品（キットの購入を促す。）: 白地の四隅に草花の線画。欧文見出しの下に商品カルーセル、価格、金のボタン、キット内容ボックスを置く。
6. ステップ別の商品（単品の購入へ導く。）: STEP 見出しごとに、2 枚が見えるカルーセルと一覧ピルボタンを置き、3 回くり返す。
7. 全商品への誘導（商品一覧へ送る。）: 装飾枠のついた商品集合写真のバナーに、ピル型ボタンを重ねる。
8. キット一覧（セット商品を比較してもらう。）: タブと、角丸の白カードの中のカルーセルで構成する。
9. SNS 投稿（利用者の声を見せて共感を生む。）: 投稿の正方形サムネイルを横スクロールで並べ、金のボタンを置く。
10. 動画（使用イメージを伝える。）: 生成りピンクの地に、16:9 の埋め込み動画を置く。
11. キャンペーン（LINE 登録を獲得する。）: 欧文見出し、金リボンの期間表示、装飾バナー、LINE ボタン、注意事項アコーディオンの順に並べる。
12. イベント情報（店頭イベントへ送客する。）: 金リボンのラベル、明朝の見出し、会場写真、日程と場所の表、箇条書きで構成する。
13. 公式アカウントとフッター（フォローを促し、サイトの各所へつなぐ。）: 破線枠の中に LINE ボタン。その下にシェア用の白カード、リンク一覧、SNS アイコンを並べる。

Imagery

• 商品は白い背景で切り抜き、茶葉やジャスミンの花を添える。
• 風景は青空と野の花の草原。手前の石の台に商品を並べ、自然光で撮る。
• 肌のクローズアップは、泡・スクラブ・ローションの質感を明るく柔らかく写す。
• 草花の線画は灰色の細線のボタニカルイラストにし、画面の角に寄せる。
• 背景には、ぼかした葉影と水彩のようなグラデーションを薄く敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文幅を約 70% に絞り、中央に置く。
• PC では 3 ステップを横 3 列のカードにする。
• PC の商品カルーセルは 3 枚表示。各ステップを角丸の白カードで囲む。
• 特長の 2 項目は、PC では横に 2 列で並べる。
• PC のフッターは 5 列のリンク一覧と SNS アイコンにする。

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