DESIGN.md — 若草色と金茶のハーブガーデン系コスメ LP（Herbal Garden Botanical Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ナチュラル、上品・高級、やさしい・柔らかい
• キーワード: ハーブガーデン・若草色・金茶の英字見出し・紙・木目テクスチャ・ボタニカル線画・季節限定コレクション
• 地の質感: 和紙・布・白木目の写真テクスチャを背景に敷く。若草色の面にもわずかな紙の粒子がある。
• 形: ボタンは角丸なしの長方形。商品は円形の淡色背景に置く。白カードは直角で細い枠線。
• 温度感: やや暖かい自然光。緑と生成りの中間の穏やかな温度感。

Colors

• セクション地は若草色→白→生成り紙→木目と交互に切り替え、同じ地を連続させない。
• 行動を促すボタンはすべて深緑の塗りに白文字で統一する。
• 英字の大見出しは金茶、キット系の見出しのみ深緑にして章の区別をつける。
• 限定バッジは金茶の円かピンクの円で、1 カードに 1 個まで。
• 本文は純黒を避け、墨色の濃茶グレーにする。
• 鮮やかな緑はシェア帯や SNS ボタンなど最下部だけに使う。
• badge-limited は文字 #FFFFFF × 背景 #9B8950 のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#837444、4.62:1）を使う。

Typography

• 章頭は英字スラブセリフの大見出しを置き、その下に明朝の和文リードを 2 行で添える。
• 商品名・価格・ボタンはゴシックで中央揃えにする。
• 和文見出しは 1 行 14 字前後で改行し、中央揃えにする。
• 価格は「¥数字(税込)／容量」の形で商品名の下に置く。
• 注意事項は左揃えの小さいゴシックで、中黒の箇条書きにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム中央揃え。商品群は横スライダーで、左右に隣のカードを少し見せる。
• 本文ブロックの幅: 画面幅の約 76%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 各章は英字見出し→和文リード→写真→商品名・価格→ボタン→詳細リンクの順に縦に積む。
• 白カードは左右 16px 程度の余白を残し、背景の若草色を見せる。
• 章の四隅にはチェック柄の布写真を三角形に切って配置する。
• ボタン幅はコンテンツ幅の 55% 程度にし、中央に置く。
• FV 直下に特典ボックスとアンカーボタン 3 つを並べる。

Elevation & Depth

• 基本はフラット。影は使わない。
• アンカーボタンだけ、淡い緑のグラデーションにうっすら影をつける。
• 商品の切り抜き写真には接地影を残す。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: シーン写真は直角の長方形。単品商品は円形の淡色背景に切り抜きで置く。
• セクション境界: 直線で背景を切り替える。四隅に布柄の三角装飾を置く。
• 主ボタンは角丸なしの長方形で、右に「>」を付ける。
• 限定バッジは正円にする。
• 詳細リンクは下線付きの文字に、灰色の丸矢印アイコンを添える。
• 日付帯は両端を矢羽根状に切ったリボン形にする。

Components

• 予約ボタン（button-primary）: 深緑の長方形に白文字、右に山形矢印。
• 詳細リンク（link-detail）: 下線付きの小さな文字と灰色の丸矢印。主ボタンの直下に置く。
• 数量限定バッジ（badge-limited）: 金茶またはピンクの正円に、白文字 2 行。写真の右上に重ねる。
• 日付リボン帯（ribbon-date）: 深緑または金茶の帯で両端を矢羽根形にし、日付と告知を白文字で入れる。
• 予約特典ボックス（box-benefit）: 白地に緑の細枠、左に商品写真。下端に深緑の詳細帯を付ける。
• アンカーボタン 3 連（anchor-tabs）: 淡緑グラデの角丸ボタンを 3 つ横に並べ、下向き矢印を付ける。
• キット内容カード（card-kit-contents）: 白地に灰色の細枠。見出しは太字、内容は中央揃えで列挙する。
• アコーディオン（accordion）: 上下の細線で挟んだ見出しと、右端の横棒で開閉する。
• 香りピラミッド表（fragrance-pyramid）: 白地の表で、左にノート名とイラスト、右に淡色三角形の階層を置く。

Do's and Don'ts

Do - 章ごとに背景の質感（若草色・紙・木目）を変えてリズムを出す。 - 英字見出しは金茶のスラブセリフで大きく中央に置く。 - ボタンは深緑の直角長方形に統一する。 - 余白に植物の線画やハーブの小物写真を添える。 - 商品は円形の淡色背景か自然光のシーン写真で見せる。

Don't - ピル型ボタンや強いドロップシャドウを使わない。 - 赤やオレンジなど刺激の強い CTA 色を使わない。 - 純黒の太いゴシック見出しを使わない。 - 背景をベタな白だけで続けない。 - 装飾の布柄を中央に置かない（四隅だけにする）。

Page Structure

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

1. ファーストビュー（新コレクションと発売日を告知する）: 庭の植木鉢と商品を並べた写真の上に、金茶の英字タイトルと明朝の白文字キャッチを置く。下に日付リボン帯を付ける。
2. 予約特典・ナビ（特典を伝え、各章へ誘導する）: 淡いミント地に特典ボックスを置き、下に 3 連のアンカーボタンを並べる。
3. 主力キット（ギフト向けの主力セットを訴求する）: 若草色地に英字見出しと 2 行のリード、限定バッジ付きの写真、価格、ボタン、内容カードを順に置く。
4. その他キット（関連セットを比較してもらう）: 白い大カード内の横スライダーで、円形背景に商品を置き、ドットページャーを付ける。
5. 注目単品（香水などの目玉単品を見せる）: ぼかした花の写真を背景に、シーン写真と商品情報を置く。
6. 使用ステップ（使う順番に沿ってラインナップを紹介する）: 紙地に生成りのカード。薄いミント色の大きな数字と「洗う」等の明朝見出しを入れたスライダーにする。
7. その他ラインナップ（残りの単品を一覧で見せる）: ミントのグラデ地に、白い円に入れた商品を線画で囲み、スライダーで並べる。
8. 香りの解説（香調を理解してもらう）: 白木目の地にアコーディオンとピラミッド表を置き、下に香料素材の俯瞰写真を敷く。
9. キャンペーン（予約特典の条件を伝える）: 若草色地に日付と緑リボン、明朝の大きな特典名、円形背景のノベルティ写真、注意事項のアコーディオンを置く。
10. 世界観ストーリー（香りの情景で余韻を作る）: 布と木目の写真の上に金色の手描き風ロゴと明朝の文章を置き、ガーデニング写真を 4 枚横に並べる。
11. SNS 登録・シェア（公式アカウントへの登録を促す）: 紙地の二重枠カードに LINE の緑ボタンを置き、鮮緑の帯にシェアボタンを並べる。
12. フッター（サイト内を回遊させる）: 薄ベージュのリスト型メニューに右矢印を付け、SNS アイコンとコピーライトを添える。

Imagery

• 商品は庭の植木鉢やハーブと一緒に、自然光のやわらかい逆光で撮る。
• 香りの素材（ハーブ・果実・種）は麻布と白木の上に置いて俯瞰で撮り、手書き風の名札を添える。
• 背景には和紙・紙・白木目のテクスチャ写真を使う。
• 金茶や灰色の細い線で描いた植物の線画を、余白の端に配置する。
• チェック柄の布を三角に切り、章の四隅に置く。
• ガーデニングをする手元のシーン写真を正方形に近い比率で並べる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文幅を約 60% に絞って中央寄せにし、左右に植物の線画や布の装飾を広く見せる。
• PC の主力キットは写真を左、商品情報とキット内容を右に置く 2 カラムにする。
• PC ではその他キット・ラインナップを 2〜3 列で同時に表示する。
• PC のステップ紹介は写真を左、説明を右に置く横長カードにする。
• 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 行書くと起動時に読み込まれる。