DESIGN.md — 珈琲色とベージュの温かいスキンケアマスク LP（Coffee Amber Warm Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、ナチュラル、やさしい・柔らかい
• キーワード: コーヒー・琥珀色・しずく・温かみ・アーチ型カード・曲線英字
• 地の質感: 液体の波紋や透明なしずく、豆の写真によるつややかで有機的な質感。地は無地のベタ塗り。
• 形: 大きな角丸の白パネル、上部が半円のアーチ型カード、円形のしずくバッジ、不定形の茶色ブロブ。
• 温度感: 暖色。茶・キャラメル・ベージュでまとめた温かい色温度。

Colors

• 上からベージュ写真FV→こげ茶グラデ→ベージュ→キャラメル茶の順で地色を切り替える。
• 成分紹介はベージュ地に濃灰の見出し、茶系の地では白文字に統一。
• 商品情報は白の大きな角丸パネルに載せて茶地から浮かせる。
• 購入ボタンは販路ごとの色（ティール・赤）を横並びで使い、ブランド色とは分ける。
• 装飾の英字コピーは地より一段濃い茶色で曲線に沿わせる。
• 強い原色は購入ボタン以外に使わない。
• drop-badge は文字 #FFF9EA × 背景 #E5BD7F のコントラスト比が 1.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#98681F、4.61:1）を使う。

Typography

• テキストはすべて中央揃え。
• 英字の大見出しは大文字で字間 0.3em 前後に広げる。
• 商品コピーだけ明朝にして上品さを出す。
• ※番号は小さく、灰色の上付きで本文に添える。
• 説明文は 2 行程度の短文で改行を揃える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分写真は 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 70px、基本単位 8px、カード内 16px（375px 幅換算）
• 成分写真は画面端近くまで広げる正方形グリッド（余白 4〜6px）。
• 効能ごとに見出し→2行説明→写真グリッド→成分名の順を繰り返す。
• セクション境界の上部にコーヒー豆のアイコンを中央に置く。
• 無添加バッジは 3 列の円形グリッド。
• 商品ラインナップは横スクロールのカルーセルにドットを付ける。

Elevation & Depth

• 影はほぼ使わずフラットに作る。
• 白パネルは茶地とのコントラストで浮かせる。
• しずくバッジは写真の光沢で立体感を出す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分写真は角丸なしの正方形。商品写真は切り抜き。
• セクション境界: 直線で色を切り替える。白パネルは上角を大きく丸めて重ねる。
• 商品カードは上部が半円のアーチ型。
• タグはピル型の枠線ボタン。
• 購入ボタンは角丸小の長方形。
• 装飾に不定形の茶色ブロブを敷く。

Components

• 販路別購入ボタン（button-store）: 和文と英字 BUY NOW の2段表記。ティールと赤を横並びで置き、下にストアロゴを添える。
• 商品白パネル（product-panel）: 茶地の上に置く大きな角丸の白パネル。商品画像・明朝コピー・価格・ボタンをまとめる。
• 成分写真グリッド（ingredient-grid）: 正方形の写真の下に成分名と区分を2行で入れる。
• しずく型無添加バッジ（drop-badge）: 琥珀色の光沢ある円の中央に白太字で無添加項目を入れる。
• アーチ型商品カード（arch-card）: 上部が半円の白カード。弧に沿う英字・タグ・シリーズ名・黒ボタンを入れる。
• 商品を見るボタン（button-detail）: 黒地に白文字の長方形ボタン。
• 曲線英字装飾（curved-text）: セリフ体の英文を弧やS字に沿わせ、背景の上に流す。
• 効果タグ（tag-pill）: 細い枠線のピル型タグを縦に2つ並べる。

Do's and Don'ts

Do - 茶・キャラメル・ベージュの暖色だけでまとめる。 - しずく・波紋・豆の写真を装飾として散らす。 - 見出しと説明は中央揃えで余白を広くとる。 - 注釈は各ブロック直下に小さく置く。 - 購入導線は販路ボタンを横並びで繰り返す。

Don't - 寒色や蛍光色を背景に使わない。 - 強い影や立体ボタンで重くしない。 - 成分写真に角丸や枠をつけない。 - 長い本文を詰め込まない。 - 見出しを左寄せにしない。

Page Structure

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

1. ファーストビュー（商品と世界観を一目で伝える）: ベージュの液体写真の上に商品パッケージとシートを配置し、下部に商品名を白文字で重ねる。
2. コンセプト（ブランドの想いを伝える）: こげ茶の波紋写真の上に、字間を広げた英字見出し・引用符付きの太字コピー・2行説明を置く。
3. 商品紹介と購入（商品情報と購入導線）: 白い角丸パネルに商品画像・明朝コピー・価格・販路ボタンを入れる。
4. 特長（効能別成分）（効能ごとに成分の根拠を示す）: ベージュ地に見出し・説明・正方形写真グリッドを4ブロック繰り返す。曲線英字を添える。
5. イメージ写真（素材感の訴求）: 手のひらにコーヒー豆の全幅写真で区切る。
6. 低刺激処方（安心感を与える）: キャラメル茶地に白見出し、しずく型の無添加バッジを3列で並べる。
7. シートの特長（シート素材の訴求）: 茶ブロブの上にマスク写真と白文字の要点3行を重ね、弧状英字で囲む。
8. 商品ラインナップ（シリーズ商品への回遊）: アーチ型白カードの横スクロールカルーセルとドット。
9. 最終 CTA（購入へ誘導）: 販路ボタン3つを横並びにして、下にコーヒー豆の装飾を置く。

Imagery

• コーヒーのしずくと波紋を暖色ライティングで接写する。
• 焙煎豆・木のスプーン・コーヒーカップを切り抜いて余白に散らす。
• 成分は白背景か自然光の素材アップを正方形で撮る。
• 透明な琥珀色の泡やしずくを浮遊させる。
• ラインと放射線の手描き風アクセントを茶色で入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を左にコピー、右に商品のある2カラムにする。
• PC の商品パネルは横長のピル型で、画像と文字を左右に並べる。
• 成分グリッドは PC で幅を絞り、中央に4列まで並べる。
• 無添加バッジは PC で5列にする。
• ラインナップは 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 行書くと起動時に読み込まれる。