DESIGN.md — パステル色分けの美容サプリ紹介LP（Pastel Color-Coded Beauty Supplement Lineup LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、かわいい、上品・高級
• キーワード: パステル色分け・透明感・グロッシーなカプセル・ピル型ラベル・丸バッジ・繰り返す型
• 地の質感: 白い光と水滴・泡のボケ。面は単色のフラットなパステルで、パッケージ写真は軽い影つき
• 形: ピル型の帯ラベル、正円の成分バッジ、角丸が小さめの白カード
• 温度感: やや涼しげで明るい。ピンクやピーチで温かみも足す

Colors

• 商品ごとにパステルの地色を 1 色決め、そのセクションを全幅で塗る
• 見出しラベルとバッジの色は成分の色にそろえる（ビタミンC＝黄、ナイアシンアミド＝ローズなど）
• おすすめカードは必ず白の面に濃いグレーの文字
• 導入とブランドの説明は白〜ごく薄い青の地に、光のボケを重ねる
• 原色は使わない。彩度はやや抑えたパステルにそろえる
• 数値バッジは色の面に白文字で載せる
• label-pill は文字 #FFF7F9 × 背景 #DD9FB7 のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BE4876、4.55:1）を使う。

Typography

• 本文は中央揃えで、1 行は 20 字前後にする
• 情緒的な大見出しは明朝、商品のラベルはゴシック太字と使い分ける
• 数値は大きく、単位は小さくして、成分量を強く見せる
• 注釈記号（※1）は上付きの小さな文字にする
• 斜線ではさんだ「大注目！」型の小見出しを使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分バッジは 2〜5 個を横に並べる
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各商品セクションは同じ順に組む：ラベル→パッケージ→数値バッジ→おすすめカード→成分の丸バッジ
• パッケージ写真は中央に大きく置き、数値バッジを左の端に重ねる
• おすすめカードは幅 86% で中央に置く
• 成分の丸は「A × B」の形で横 2 つに並べる
• セクションの上下に 56〜72px の余白をとる

Elevation & Depth

• パッケージ写真には柔らかいドロップシャドウをつける
• 白カードはごく薄い影か影なしでフラットに
• 丸い成分バッジは光沢と内側の影で球体のように見せる
• 導入カードは半透明の白（不透明度 80% 程度）を背景に重ねる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 成分写真は正円、イメージ写真は角丸の長方形、パッケージは切り抜き
• セクション境界: 直線で地色を切り替える（波や斜めは使わない）
• 見出しラベルは完全なピル型にする
• 数値バッジと成分バッジは正円にする
• カードの角丸は 4〜8px と控えめにする
• チェックボックスは角丸の小さな正方形にする

Components

• 商品名のピル型ラベル（label-pill）: 全幅に近いピル型に商品名を白抜きの太字で入れる。2 成分のときは「＋」でつなぐ
• ブランドロゴのボタン（brand-button）: 紺のピル型に欧文のロゴと丸いアイコンを入れる
• 成分量の数値バッジ（badge-amount）: 直径 110px 前後の円。成分名、大きな数値、小さな注記を縦に積む
• おすすめカード（card-recommend）: 白いカードに見出しと、チェック付きの 3 行の悩みを並べる
• 成分の丸バッジ（ingredient-orb）: 光沢のある円形の写真に成分名を白文字で重ね、上に弧状の小さなコピーを添える
• 配合成分の白丸チップ（chip-ingredient）: 直径 56px の白い円に、成分名を小さく 2 行で入れる
• 斜線ではさむ小見出し（heading-slash）: 白い太字の「大注目！」型の文字を、左右の斜線ではさむ
• 特長の写真カード（card-feature）: 白カードの中に明朝の見出し、色付きのサブ見出し、写真、本文を順に積む

Do's and Don'ts

Do - 商品ごとに地色を変えつつ、部品の型は毎回同じにする - 成分の色をラベル・バッジ・写真で一貫させる - 数値は大きな欧文で、ひと目でわかるように見せる - 光や水滴のボケで透明感を出す - 注釈は小さく、該当する部品の右下に置く

Don't - 濃い原色や黒い地を使わない - おすすめカードを色の面にしない（白を保つ） - 本文を左揃えの長文にしない - 角の尖ったボタンにしない - 1 セクションに地色を 2 色以上混ぜない

Page Structure

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

1. ファーストビュー（特長と商品群を一度に伝える）: 水色の光の背景に、3 つの特長を丸アイコンで×でつなぐ。中央にカプセルの写真と大見出し、下にロゴボタンとパッケージを横一列に並べる
2. コンセプト（ブランドの世界観を語る）: 明朝の大見出しと、半透明カード内の中央揃えの文章。カプセル 3 本の写真とモデル写真を添える
3. ラインナップ一覧（商品を一覧で見せる）: パッケージをグリッドに並べ、各商品の下に成分名のピルを置く
4. 注目商品の紹介（主力商品を訴求する）: ミントの地に斜線の小見出し、ピルラベル、パッケージ、数値バッジ、おすすめカードを順に置く
5. 特長の詳細（素材とカプセルを説明する）: 白カード 2 枚に、明朝の見出し、写真、本文を入れる
6. 仕組みの説明（技術の裏付けを伝える）: 青白い光の背景に、明朝の大見出しと中央揃えの文章。モデルとカプセルの写真を添える
7. 商品別の紹介（繰り返し）（各商品の成分と悩みへの効き目を示す）: 藤紫・ラベンダー・青・ピンク・ピーチ・オリーブと地色を変え、同じ部品構成をくり返す

Imagery

• グロッシーで半透明なカプセルと、中のビーズのマクロ写真
• 白い光のボケ、水滴、泡が浮かぶ明るい背景
• 白い服のモデルが、自然な表情で頬に手を添えるなどしたソフトな写真
• 成分は球体のように切り抜いた金・ピンク・青の液体や素材の写真
• パッケージは正面から撮り、切り抜いて柔らかい影をつける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元の LP は狭い 1 カラムの縦長構成なので、SP でもほぼ同じ構成で組む
• PC では本文を最大 750px 程度で中央に置き、地色は全幅に塗る
• PC では数値バッジとパッケージの重なりを広めにとる
• SP では成分チップを 1 行 3〜5 個にし、はみ出す分は折り返す

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