DESIGN.md — 淡青灰×くすみピンクの敏感肌スキンケアLP（Misty Pastel Fermented Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 水面の揺らぎ・大理石・明朝体・くすみピンク・白カード・繰り返しオファー
• 地の質感: 水面の光、霧、墨の筆跡、大理石模様を薄く敷き、上に白カードを重ねる
• 形: 角丸は小さめ。リボン型ラベル、斜めカットのタグ、細い線の枠
• 温度感: やや寒色寄りのニュートラル。ピンクで温かみを少し足す

Colors

• 白とごく淡い青灰を主な地にし、水面や大理石の写真でセクションを切り替える
• 強調したい語だけくすみピンクにする。面に塗るのはラベル程度にとどめる
• 購入ボタンは紺グレーに白文字で統一する
• グレーの帯リボンに白文字を載せて見出しラベルにする
• 悩み提起のパートだけ暗めのグレー背景で沈ませる
• 原色やビビッドな色は使わない
• offer-card は文字 #D98A97 × 背景 #FCFEFE のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C54C60、4.53:1）を使う。
• ribbon-heading は文字 #FFFFFF × 背景 #8C8A90 のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#78757C、4.53:1）を使う。
• faq-item は文字 #FFFFFF × 背景 #8C8A90 のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#78757C、4.53:1）を使う。

Typography

• 見出しは明朝、本文と注釈はゴシックにする
• 見出しの中の強調語はピンクにし、ひと回り大きくする
• 英字の小見出しは大文字で字間を広く取り、和文見出しの上に置く
• 価格の数字は太めのセリフ体を大きく使い、ピンクにする
• 見出しの背景に筆記体の英字を薄く重ねる
• 注釈は小さいグレー文字でまとめて置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特徴・ポイントは 2〜3 列の小カード
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央揃えの見出しの下に白カードを置く
• 商品写真と文章は左右に分け、交互に入れ替える
• オファーブロック（セット内容、価格、ボタン3つ）を数セクションごとに繰り返す
• 番号付きの解説カードを縦に並べる
• 注釈は各ブロックの直下にまとめる

Elevation & Depth

• 白カードには薄く広い影（0 4px 16px rgba(0,0,0,0.08)）を付ける
• 購入ボタンには下方向に小さな影を付ける
• 商品写真は台座や水面に置き、自然な落ち影を付ける
• 背景写真の上にカードを浮かせて奥行きを出す

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の四角か円形に切り抜く。商品は切り抜いて浮かせる
• セクション境界: 直線で切り替え、水面や大理石の写真背景で区切る
• ボタンは角丸小の長方形にし、右端に矢印を付ける
• 見出しラベルは両端を切り欠いたリボン型にする
• 成分の特徴は円形バッジで3つ並べる
• お客様の声は吹き出し型の白カードにする
• 番号は角に細字の数字を置く

Components

• 購入ボタン（button-primary）: 紺グレーに白文字と右矢印。左側に肌タイプ別の説明ラベルを並べる
• セット価格カード（offer-card）: 商品3点を＋でつなぎ、ピンクの大きな価格と送料無料バッジを載せる
• リボン見出し（ribbon-heading）: グレーの帯に白の明朝文字を載せた見出し
• ピンクの導入タグ（pink-tag）: 接続語を載せた小さなピンクのラベル
• 円形特徴バッジ（circle-badge）: 淡い色の円に特徴を2〜3行で入れる
• 番号付き解説カード（numbered-card）: 白カードの角に細い番号を置き、図解イラストと説明文を入れる
• お客様の声の吹き出し（voice-bubble）: 円形アイコンとピンクの見出しに、手書き風の本文を添える
• FAQ項目（faq-item）: グレーの帯にQ見出し、その下の白地に回答を置く
• 無添加タグ（free-tag）: 斜めにカットしたグレーのタグを2〜3列で並べる

Do's and Don'ts

Do - 地は白と淡い青灰にし、写真の質感で変化を付ける - 強調語だけピンクにし、明朝で品よく見せる - オファーと購入ボタンは何度か繰り返し配置する - 注釈の※を丁寧に付け、信頼感を出す - 商品は白と木目のボトルを清潔な光で見せる

Don't - 鮮やかな赤や黄色を広い面に使わない - 丸ゴシックやポップな書体を見出しに使わない - ピル型の派手なボタンにしない - 強い影や太い枠線を使わない - 背景を濃い色で塗りつぶさない（悩みパートは例外）

Page Structure

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

1. ファーストビュー（ブランドの立ち位置と実績を伝える）: 水面背景の左に商品写真、右に明朝のコピー。上部にピンクの実績リボン、下に特徴の円形バッジと四角バッジを置く
2. オファー（お試しセットの価格を提示する）: 白カードに3商品を＋でつなぎ、ピンクの大きな価格と肌タイプ別ボタン3つを並べる
3. 監修者紹介（デザイン監修者の権威づけ）: 墨の筆跡を背景に人物写真とプロフィール、白カードでコメントを載せる
4. SNS・メディア掲載（社会的な証明）: 投稿カードを横スクロールで並べ、雑誌の表紙を横に並べる
5. 悩みの提起（共感を得る）: 暗いグレー背景に方眼のカード。円形の吹き出しで悩みを4つ並べ、逆接ラベルでつなぐ
6. 原因の解説（悩みの根本原因を教える）: 番号付きカード4枚にイラストの図解を入れ、結論を白抜きの帯で強調する
7. 解決策の提示（商品を解決策として紹介する）: ピンクの導入タグの後に明朝の大見出しと商品写真、無添加タグを並べる
8. 成分紹介（独自成分の価値を伝える）: 番号付きの成分ブロックを水面背景の上で左右交互に置く。こだわりは写真と番号で3つ並べる
9. 商品ラインナップ（肌タイプ別の選び方を示す）: 縦軸・横軸のチャートの上に3本のボトルを配置する
10. 使い方（ステップを示す）: STEPラベルと大きな漢字1文字を薄く背景に置き、2列で分岐させる
11. お客様の声（使用感を伝える）: 大理石背景に商品ごとの吹き出しカード。アイコンとピンクの見出しを付ける
12. 品質・安心（安全性を伝える）: 英字の小見出しと明朝の見出し、タグと工場写真を縦に並べる
13. 開発者コメント（想いを伝える）: 白い紙のような面に中央揃えの長文、墨の筆跡を装飾に使う
14. よくある質問（不安を解消する）: グレー帯のQと白地の回答を交互に並べる
15. まとめと最終CTA（ポイントを総括して購入を促す）: 番号付きのポイント5つ、商品写真、オファーカード、ピンクの購入帯を置く

Imagery

• 白いボトルに木目キャップの商品を、柔らかい自然光の白背景で撮る
• 背景は水面の光、霧、水滴、大理石模様を淡く彩度を落として使う
• 人物は素肌感のある女性のアップを、明るく低コントラストで撮る
• 墨の筆跡や筆記体の英字を、薄い装飾として重ねる
• 肌の断面や菌はパステル調のフラットなイラストで描く
• 原料（米、水、熟成樽）の写真は角版で並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央に約 1000px の 1 カラムで、ほぼ SP と同じ縦長の構成にする
• SP では写真と文章の左右の並びを上下の積みに変え、写真を先に置く
• オファーの3商品は SP でも横に3つ並べ、文字を小さくする
• 肌タイプ別の購入ボタンは SP で全幅、高さ 52px にする
• SNS カードは SP で横スワイプにする

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