DESIGN.md — 白方眼×淡色パステルの美容サプリ LP（Clean Grid Beauty Supplement Lineup LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: シンプル・ミニマル、上品・高級、清潔・爽やか、やさしい・柔らかい
• キーワード: 白方眼の背景・黒のピル型ボタン・商品ごとのパステル色・カプセルの立体写真・筆記体の英字・細線の枠
• 地の質感: 白地に薄いグレーの方眼線をひき、ノートのような清潔な質感にする。
• 形: 角丸の細線カード、黒のピル型ボタン、円形の図解。
• 温度感: やや暖かいニュートラル。商品色だけ淡く色づく。

Colors

• 地は白に薄グレーの方眼をひき、全体を明るく保つ。
• ボタンは全部黒のピル型にし、ボタン以外に濃い色は使わない。
• 商品ごとにパステル色を 1 色決め、効果パネルの地色と写真の色調をそろえる。
• 強い赤や原色は使わない。強調は文字の太さで付ける。
• フッターだけ落ち着いたグレージュの面にする。

Typography

• 大見出しは英字の大文字にし、右上に筆記体の英字を斜めに重ねる。
• 日本語の見出しは中くらいの太さで中央揃えにし、2 行に収める。
• ボタンのラベルは斜体の英字にして、右側に細い矢印線を付ける。
• 本文は小さめの文字に行間を広めにとり、軽い印象にする。
• パネルの右端に英字を縦書きで添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードは 2 列のグリッドにする。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの境界は細い横線か広い余白で区切る。
• 成分紹介は文章と写真を左右に並べる。SP では縦積みにする。
• 効果パネルは角丸の大きな枠にし、中に商品写真・商品名・ボタン・線画イラストを横に並べる。
• パネルの下に、細い枠で全幅の『詳細を開く』アコーディオンを置く。
• 図解はカプセルを中心に置き、成分を放射状に配置する。

Elevation & Depth

• 影はほぼ使わず、細線の枠で面を分ける。
• 写真カードは重ねた紙のように、オフセットした枠線を後ろに付ける。
• カプセル写真には床への映り込みを付けて立体感を出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 4〜8px の長方形。カプセルや成分の素材は切り抜きで置き、円形の図解にも使う。
• セクション境界: 直線の細い横線と余白で区切る。
• カードは細いグレー線＋角丸 8px。
• 効果パネルは角丸 16px、枠は細線。
• ボタンは必ずピル型の黒にする。
• 図解では大きな円の細線を使ってよい。

Components

• 黒のピル型ボタン（button-primary）: 斜体の英字ラベルを付け、右側に細い矢印線を置く。購入やリンクに使う。
• 商品カード（product-card）: 上半分はグレーの面に商品画像を置き、下半分に商品名・英字名・ボタンを並べる。
• 英字見出し＋筆記体（section-title）: 大文字の英字見出しに、筆記体の英字を斜めに重ねる。
• 商品効果パネル（effect-panel）: パステル色の地の角丸枠。左上に筆記体のロゴ、右端に縦書きの英字を置き、商品写真とボタンを入れる。
• 詳細アコーディオン（accordion-detail）: 細線枠の全幅バーで、中央に小さな文字、右端に＋を置く。
• 成分の放射図（ingredient-diagram）: 中央にカプセルを置き、周りに成分の素材写真と英字・和名のラベルを配置する。
• 価格付き商品カード（price-card）: 商品名・価格（税込）・小さな注釈リンク・黒ボタンを順に並べる。
• 悩む女性の線画（line-illust）: 頬に手を当てる女性の細い線画。商品の横に添える。

Do's and Don'ts

Do - 地は白の方眼で統一し、余白を広くとる。 - 商品ごとのテーマ色を写真・パネル・図解でそろえる。 - ボタンは黒のピル型だけにする。 - 英字見出しと筆記体を組み合わせて、ファッション誌のような雰囲気を出す。 - 成分は写真と短い説明をセットにして図で見せる。

Don't - 原色や蛍光色を使わない。 - 太い影やグラデーションのボタンを使わない。 - 派手な割引バッジや赤字の煽りを入れない。 - 文字を詰め込んで余白をつぶさない。 - セクションの地を濃い色にしない。

Page Structure

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

1. ヘッダー（ナビとストアへの導線）: 白い帯の左にロゴ、右に英字メニューと黒のピル型ボタンを置く。
2. ファーストビュー（商品群の世界観を伝える）: 麻の上にパウチを並べ、自然光で撮った写真を全幅で見せる。
3. ラインナップ（商品の一覧）: 英字見出しの下に、商品カードを 4 列＋2 列で並べる。
4. 成分紹介（商品ごと）（悩みと成分を結びつける）: 2 行の見出し、文章＋写真、カプセルの図解の順に並べる。
5. 効果パネル（商品ごとの購入導線）: パステル色の角丸枠に、商品写真・名前・黒ボタン・線画を入れる。
6. 詳細アコーディオン（補足情報をたたんでおく）: 細線枠の全幅バーを置く。
7. オンラインストア（価格を見せて購入へ誘導する）: 価格付きの商品カードを 4 列×2 段で並べる。
8. ブランド紹介（ブランドの理念を伝える）: 4 分割した円形の写真図解の下に、中央揃えの短い文章を置く。
9. SNS ギャラリー（使っている様子を見せる）: 正方形の写真を 2 段に並べたフィード。
10. フッター（ナビゲーションと法的情報）: グレージュの地に、英字メニュー・ロゴ・SNS アイコンを置く。

Imagery

• 商品パウチは自然光で撮り、麻布や木の上に斜めに並べる。
• カプセルは白背景で切り抜き、映り込みを付けて立体的に見せる。
• 成分の素材（粉末・葉・豆）は小皿や切り抜きで並べる。
• モデルは白い服で肌がきれいに見えるよう、明るく柔らかい光で撮る。
• 悩みは細い線画の女性イラストで表す。
• SNS 写真はカフェ風の暖かい色調にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は最大幅 960px 前後で中央に寄せる。商品カードは 4 列。
• SP では商品カードを 2 列にし、ストアのカードも 2 列にする。
• 文章と写真の左右並びは、SP では写真→文章の縦積みにする。
• 効果パネルは SP では縦積みにし、縦書きの英字は省いてよい。
• 放射状の図解は 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 行書くと起動時に読み込まれる。