DESIGN.md — 生成り×くすみ水色の柑橘オリーブ系スキンケア LP（Botanical Citrus Olive Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ナチュラル、上品・高級、やさしい・柔らかい、清潔・爽やか
• キーワード: 生成り・水彩グラデ・柑橘とオリーブ・縦書き・広い字間・色分けライン
• 地の質感: マットな生成りの地に、空や水を思わせるにじんだ水彩グラデの帯を挟む。紙のような柔らかな質感。
• 形: 角丸小さめの白カード、円形の特長バッジ、ピル型 CTA。写真は角なしで画面端まで裁ち落としたり、ずらして重ねたりする。
• 温度感: やや暖かいニュートラル。爽やかな寒色を差し色に使う

Colors

• 地は生成りを基本にし、ブランド紹介・ラインナップ・価格はくすみ水色の水彩グラデ帯に切り替える。
• 商品ごとにテーマ色を 1 色決め、英字名・円形バッジ・ピル見出し・価格に統一して使う。
• 購入 CTA は商品色に関係なく、全部同じティールにそろえる。
• 文字は墨色を基本にする。純黒は使わない。
• ポイント帯は商品色をくすませた濃い色の帯にし、白抜き文字を置く。
• 強調はテーマ色のマーカー帯か下線だけにとどめる。
• button-primary は文字 #FFFFFF × 背景 #43A4B4 のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#34808D、4.55:1）を使う。
• feature-circle は文字 #FFFFFF × 背景 #ECB393 のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BD5921、4.55:1）を使う。
• pill-label は文字 #ECB393 × 背景 #FFFFFF のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BD5921、4.55:1）を使う。

Typography

• 字間は 0.1em 前後と広めにとり、静かな印象を保つ。
• 本文は中央揃えで、行間を 2.0 前後と広めにする。
• 使い方の説明やブランド文は縦書きにし、写真と並べる。
• 大きな英字を白・薄色で写真の背景に敷く（HOW TO USE など）。
• 価格は欧文の大きな数字をテーマ色で入れ、税込表記は小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップと価格の一覧だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約 7% の余白をとって置く。
• 写真はカードから画面端まで裁ち落とし、左右交互にずらして重ねる。
• 特長バッジは商品写真の四隅に円形で 4 つ配置する。
• 商品ごとのブロックは同じ構成をくり返す。
• Q&A は全幅の白い帯を縦に積む。

Elevation & Depth

• 影はほぼ使わず、平面で仕上げる。
• CTA ボタンだけ下に濃いティールの厚みを付け、少し浮かせる。
• カードは白か半透明の白で、地の上に影なしで重ねる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。画面端の裁ち落としとずらし重ね。商品は白い台座に置いた切り抜き
• セクション境界: 直線で背景色を切り替える。水彩グラデの帯を挟む
• 特長バッジは正円で塗りつぶす。
• 商品の訴求ラベルは白地の角丸 20px のピル型にする。
• カード角に斜線を 1 本入れる装飾を使う。

Components

• 購入ピル CTA（button-primary）: ティールのピル型ボタン。2 行の文字と右向きの細い矢印を入れる
• ラインナップ横長カード（lineup-card）: 左に商品写真、右に短い説明・テーマ色の英字名・和名・小さな詳細リンクを置く
• 円形特長バッジ（feature-circle）: テーマ色で塗った正円に、白文字で 2〜3 行の特長と注釈番号を入れる
• 訴求ピルラベル（pill-label）: 白の角丸ラベル。テーマ色の太字で、2 つ横に並べる
• アイテム番号丸（item-badge）: 黒い正円に白の英字で番号を入れ、商品ブロックの上端に重ねる
• ポイント帯見出し（point-header）: カード上部の色帯に白抜きで番号ラベルを入れ、その下に下線付きの太字見出しを置く
• 価格カード（price-card）: 半透明の白カード。英字名・罫線・商品写真・内容量のピル・大きな価格・CTA を並べる
• Q&A アコーディオン（faq-row）: 全幅の白い帯。左に Q.、右に＋アイコンを置く
• 縦線付き小見出し（timeline-heading）: 左に細い縦線とドットを置く。固有名はかぎ括弧で囲み、緑の下線を付ける

Do's and Don'ts

Do - 商品ごとにテーマ色を 1 色決め、全要素で統一する。 - 余白と字間をたっぷりとる。 - 縦書きと写真を組み合わせ、使い方を見せる。 - CTA は全部同じティールのピル型にそろえる。 - 水彩グラデの帯でセクションの切り替えを演出する。

Don't - 原色や蛍光色は使わない。 - 強いドロップシャドウを付けない。 - 本文を太字や大きな文字で詰め込まない。 - 商品色を CTA に使わない。 - 背景は真っ白一色にしない（生成りを基本にする）。

Page Structure

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

1. ファーストビュー（世界観と全商品を一度に見せる）: 縦書きの大きなキャッチの左右に、商品写真を互い違いに配置。ロゴ・短いタグラインを置き、最後に横長の集合写真
2. ラインナップ（4 商品を一覧する）: 英字見出しの下に、横長の白カードを縦に 4 枚並べる
3. ブランドコンセプト（成り立ちと想いを伝える）: 水彩グラデ帯の上に白カードを置き、本文を中央揃えにする。写真をずらして重ねる
4. メッセージ（ターゲットの悩みに共感する）: ロゴと縦書きコピーを置き、生活シーンの写真を段違いに重ねる
5. 生産者・原料ストーリー（産地の信頼感を伝える）: 左に縦線を通したタイムライン風の構成。農園写真と本文を交互に置く
6. 3 つのポイント（効能の根拠を示す）: 写真の上に英字の大見出し。色帯付きのカードを 3 枚並べ、図解と罫線付きの本文を入れる
7. ブランド総括とラインナップ再掲（世界観を再確認する）: 商品写真 4 分割とロゴを置き、水彩帯に 2×2 の商品グリッドを配置する
8. 商品詳細（×4）（各商品を訴求する）: 番号丸・商品写真・名称カード・ピルラベル 2 つ・円形バッジ 4 つ・縦書きの使い方・CTA を同じ順でくり返す
9. ブランドイメージ（情緒的な余韻を残す）: アート調の写真にロゴを白抜きで重ねる
10. 価格・オファー（購入を促す）: 水彩帯の上に、商品別の価格カードと CTA を縦に並べる
11. よくある質問（不安を解消する）: 写真の上に白カードで見出しを置き、その下に白帯のアコーディオンを並べる
12. 商品情報・全成分（詳細仕様を開示する）: 商品写真の下に、テーマ色の項目名・罫線・成分の小さな文字を並べる

Imagery

• 商品はグレーの背景にアクリル台座や鏡を置き、柔らかい自然光で撮る。
• 柑橘・オリーブオイル・グラス・葉を組み合わせた、木の台の上のシズル写真。
• 泡・オイルの雫・透明ジェルの円形テクスチャを、商品の背後に敷く。
• 洗顔・シャワー・ドライヤーなど、生活シーンの人物写真。彩度は控えめにする。
• 背景には空や水を思わせる、水色と緑の水彩にじみを使う。
• 産地の農園を俯瞰した写真や集合写真で、作り手の顔を見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため推奨案。コンテンツ幅を 960px 前後に固定し、背景帯は全幅にする。
• ラインナップと価格カードは PC で 2〜4 カラムに並べる。
• 商品詳細は写真と本文を左右 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 行書くと起動時に読み込まれる。