DESIGN.md — コーラル×ベージュのやさしいマタニティ化粧品LP（Soft Coral and Beige Maternity Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、信頼・誠実、情報量多め・訴求型、ナチュラル
• キーワード: コーラルピンク・くすみベージュ・受賞バッジ・丸い写真・細い明朝風の番号・成分カード
• 地の質感: フラットな淡色の面に、ゴールドのグラデーションや水面テクスチャを部分的に敷く
• 形: 斜めのセクション境界、大きな円形の写真切り抜き、角丸カード、円形の成分写真
• 温度感: 暖色寄り。あたたかく穏やかな印象

Colors

• セクションごとに地色を切り替える。白、ライトグレー、コーラル、ベージュ、モーブの順に並べ、同じ色を続けない
• コーラルは見出しのキーワード、番号見出し、数値の強調に使う
• 実績・受賞のセクションはゴールドベージュのグラデーションにして特別感を出す
• 本文で強調したい箇所は黄色の半透明マーカーにとどめる
• 濃い色は見出しの帯と文字だけに使い、面全体は淡いトーンを保つ
• keyword-highlight-heading は文字 #FFFFFF × 背景 #ED9685 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D83E20、4.54:1）を使う。
• additive-free-circle は文字 #FFFFFF × 背景 #9BC2CC のコントラスト比が 1.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#477E8C、4.53:1）を使う。
• ingredient-tile は文字 #FFFFFF × 背景 #D67266 のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CB4B3C、4.55:1）を使う。

Typography

• 大見出しはキーワードだけコーラルの四角に白抜き文字で強調する
• 数値は欧文サンセリフで極端に大きくし、単位は小さく添える
• 特長には細い番号（01〜04）と縦書きの短いラベルを画像の右上に置く
• 見出しは 2 行に分けて中央揃えにする
• 字間はやや広めにして、やわらかい印象を保つ
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分カードは 2〜3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の色面で区切る
• 見出しの下に点線を引いて本文と分ける
• 成分写真は円形にして 3 列で並べ、名前をその下に置く
• レビューは番号の丸を右上に置いた角丸カードを縦に並べる
• 比較表は 2 列で並べ、差額を下に赤い帯で強調する

Elevation & Depth

• 基本は影なしのフラットデザイン
• SNS 写真は白いフチと薄い影でポラロイド風にする
• 商品ボトルは台座の写真に重ねて立体感を出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物は大きな円形か角丸の長方形で切り抜く。成分写真は正円にする
• セクション境界: 斜めのライン、またはまっすぐな色面の切り替え
• 補足のラベルはピル型の線枠で囲む
• 数値を入れたバッジは正円にして写真に重ねる
• 成分名ラベルは角の小さい帯を画像の下端に重ねる

Components

• キーワード白抜き見出し（keyword-highlight-heading）: 見出しのキーワードだけをコーラルの四角に白文字で入れる
• 濃いグレーの帯見出し（dark-band-label）: セクションの導入に置く、全幅に近い濃いグレーの帯
• レビューカード（review-card）: 番号の丸と星評価を添えた角丸カード。タイトルはコーラル、本文にはマーカーを引く
• 無添加の円バッジ（additive-free-circle）: くすみブルーの円の中に白文字で項目名を入れ、5 列×2 段で並べる
• 番号＋縦書きのラベル（number-vertical-label）: 細い数字の下に、縦書きの 2〜4 文字を添える
• 成分タイル（ingredient-tile）: 正方形の質感写真の下端に、濃いコーラルの帯で成分名を入れる
• POINT ボックス（point-box）: 左側に濃いコーラルのラベル、右側に白地の説明を横に並べる
• ピル型の線枠タグ（pill-outline-tag）: 見出しの下に置く、補足の一文を囲むピル型の枠
• 価格比較表（price-compare-table）: 単品とセットを比べる表。差額を赤い帯の大きな数字で示す

Do's and Don'ts

Do - 淡い地色を交互に使い、セクションのまとまりをはっきりさせる - 受賞・ランキング・販売数は大きな数値と月桂樹の飾りで見せる - 人物写真は妊婦がお腹に触れる穏やかなシーンにする - 成分は円形の写真と短い名前で、視覚的に並べる - 見出しはキーワードだけを強調し、ほかは控えめにする

Don't - 原色の赤や青を広い面に使わない - 黒い背景で重い印象にしない - 角張った太い枠線を多用しない - 本文を詰めて行間を狭くしない - コーラルを本文の長い文章に使わない

Page Structure

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

1. ファーストビュー（商品の価値と安心感を一目で伝える）: 上部にコーラルの帯。ライトグレー地にキーワード強調の見出し、受賞バッジ、斜めに切り抜いた妊婦の写真、商品ボトル、特徴タグを配置
2. 受賞実績（第三者の評価で信頼を得る）: ピンクベージュ地に月桂樹の飾りの見出し。商品は石の台座の上に置く
3. まとめ買い訴求（セット購入を促す）: ゴールドの帯見出しと、3 本の商品、価格比較表を並べる
4. 雑誌の評価詳細（評価の内容を具体的に示す）: 誌面風のレイアウトにグラフとアイコンを添える
5. 処方の特長と無添加（妊娠中の肌のための処方であることを伝える）: コーラル地に斜めの境界。円の吹き出しで悩みを示し、無添加の円バッジを並べる
6. 販売実績・メディア掲載・SNS（人気と話題性を示す）: ゴールドのグラデーション地に大きな数値。雑誌の表紙と SNS 写真を 3 列のグリッドで並べる
7. お客様の声（使い心地への共感を得る）: グレー地に大きな評価点。番号付きのレビューカードを 3 枚並べる
8. 悩みの提起（肌トラブルの原因を自分ごとにしてもらう）: モーブ地に白いカード。チェックリスト、肌の断面図のイラスト、キーワード強調の結論を置く
9. 解決策の提示（保湿＋弾力・柔軟が必要だと伝える）: 白地に大きく薄いロゴ文字。円形の人物写真に数値のバッジと使い方の吹き出しを添える
10. 特長 01〜04（成分ごとの効果を説明する）: 地色を切り替えながら、番号＋縦書きのラベル、角丸の写真、点線付きの見出し、成分の円写真またはタイルを並べる

Imagery

• 人物は柔らかい自然光で撮った、白やパステルの服の妊婦・女性
• 商品は白いボトルを中心に、白い背景か石の台座の上に置く
• 成分は植物・果実・オイルのクローズアップを円形に切り抜く
• 水面や水滴、葉などの質感写真をタイルや背景に使う
• 肌の断面図はコーラルとベージュの細胞を描いたフラットなイラストにする
• 手書き風の文字や、きらめきの線画を小さく添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も中央 720px 幅の 1 カラムで、SP と同じ構成にする
• SP では見出しを 22〜26px にし、2 行で中央揃えにする
• 無添加の円バッジは SP で 4〜5 列、直径 56px 程度にする
• 雑誌・SNS のグリッドは SP でも 3 列を保つ
• 比較表は横スクロールさせず、文字を縮めて収める

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