DESIGN.md — 方眼地にくすみローズのオーガニック化粧品LP（Soft Grid Organic Cleansing LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、清潔・爽やか、ナチュラル、情報量多め・訴求型
• キーワード: 方眼ノート地・くすみローズ・黄色マーカー・黒ラベル・丸抜き成分・線画イラスト
• 地の質感: 白地に薄いグレーの方眼線。ノートのような軽い質感で、写真カードには柔らかい影を付ける
• 形: 角丸カード、円形の成分写真、手書き風の楕円タグ
• 温度感: やや暖かいニュートラル。肌色とローズに淡い水色を差す

Colors

• 地は白×方眼で通す。帯セクションだけ淡い水色や肌色のグラデを使う
• ローズは大見出しの数字・特長名・本文中の強調語にだけ使う
• 重要語には黄色マーカーを半分の高さで敷く
• セクションの英字ラベルは黒地に白抜きで統一する
• 悩みカード内の強調語は青で書き、ローズの強調と区別する
• 彩度の高い色は避け、くすみ寄りのトーンでまとめる

Typography

• 特長見出しは 2 行。1 行目は小さめの明朝、2 行目の主語は大きく強調する
• 主語には黄色マーカーを敷き、後ろに続く助詞は小さくする
• 字間は広め（0.08〜0.15em）にとり、ゆったり組む
• 要点は『\ ○○ /』のように斜線で挟んで強調する
• 強調語は赤枠で囲むか、ローズの文字色にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩みカード・使い方は 3 列、成分は 4 列×2 段
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 各特長は黒ラベル→2 行見出し→説明→写真カードの順に縦に積む
• 写真カードは左右に余白をとり、幅を約 85% にする
• 成分は円形サムネイルの下に名前を中央揃えで置く
• before/after は左右 2 枚を矢印でつなぐ
• 比較マップは十字の軸の 4 方向にラベルを置く

Elevation & Depth

• 口コミカードと写真カードには、ぼかしの大きい薄い影（0 4px 12px rgba(0,0,0,.08)）
• 成分の円形写真はガラス玉のような縁ハイライトと影で浮かせる
• 楕円タグは右下にずらした濃い影線で手描き風にする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形、成分写真は円形に切り抜く
• セクション境界: 多くは直線のまま方眼地が続く。共感セクションの上端だけ V 字に切る
• タグはピル型の細い線枠にする
• 吹き出しは白い角丸にしっぽを付ける
• ラベルは角のない黒い長方形にする

Components

• POINT 黒ラベル（point-label）: 手書き風の英字に番号を付けた黒い帯。特長ごとの見出しの上に中央揃えで置く
• マーカー見出し（marker-heading）: 明朝の大きな主語の下に黄色マーカーを敷く
• 口コミカード（review-card）: 星評価と本文を左に、写真を右に置く。強調語はローズの太字
• 悩みチェックカード（worry-card）: チェックアイコンと 2 行の悩み文。3 枚を横に並べる
• FV 円形バッジ（badge-circle）: 白い円の中に短い特長を 3 行で書く。3 つ並べる
• 成分の円形写真（ingredient-orb）: 円形の写真の下に成分名を置く
• 無添加タグ（free-tag）: 影線付きのピル型の線枠タグ。3 列のグリッドに並べる
• 枠囲みキーワード（boxed-keyword）: ローズの文字を細い線枠で囲む
• 使い方ステップ（step-item）: ローズの STEP 英字、線画イラスト、説明文を縦に並べる

Do's and Don'ts

Do - 地は白の方眼に統一する - 見出しは明朝とゴシックを組み合わせ、主語を大きくする - 強調語にはローズ・黄色マーカー・枠囲みのいずれかを使う - 各特長の先頭には POINT 黒ラベルを置く - イラストは細い線画に、淡いピンクや水色を差す

Don't - 原色の赤や青で大きな面を塗らない - 太くて重いディスプレイ書体を使わない - 写真を角張った長方形のまま置かない - 1 画面に強調手法を 3 種類以上重ねない - 暗い背景のセクションを入れない

Page Structure

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

1. ファーストビュー（肌の質感と商品を一目で伝える）: 顔のアップ写真に縦書き風のコピーを重ね、左上に実績の円形バッジ、下に円形の特長バッジを 3 つ並べる
2. 実績（ランキングと販売数で信頼を得る）: 淡い水色の布地背景に、ローズの明朝で大きな数字を置き、月桂樹の飾りで囲む。商品ボトルを横一列に並べる
3. お客様の声（使用感を伝える）: 斜線で挟んだ見出しの下に、写真付きの口コミカードを縦に並べる
4. 悩みの提起（商品カテゴリへの不安を示す）: チェック付きのカードを 3 枚並べる
5. 解決提示（不安への答えを示す）: V 字に切った肌色グラデの帯に、商品写真と吹き出しで強調した語を置く
6. 特長1〜5（成分・保湿・低刺激・香り・洗い上がりを順に説明する）: POINT ラベル、マーカー見出し、説明文、角丸の写真の順に並べる。before/after・成分の円形写真・肌の断面イラスト・無添加タグを挟む
7. 使い方（正しい手順を伝える）: 3 列のステップを線画で示し、下に便利な点をアイコン 3 つで並べる
8. 比較マップ（シリーズ内での位置づけを示す）: 十字の軸の上に、淡い円を背にした商品を配置する

Imagery

• 人物は肌のアップ。柔らかい自然光で、白い布やシーツを背景にする
• 商品は琥珀色のボトル。とろみや滴りを見せる
• 成分は素材のクローズアップを円形に切り抜く
• アイコンや使い方は黒の細い線画に淡いピンクや水色を差す
• 肌の断面は角丸のブロックを積んだフラットなイラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は PC 画像のみだが、スマホのような細い縦長で組まれている。SP ではほぼそのまま 1 カラムで使える
• PC は中央に幅 480〜750px の列を置き、左右は方眼地で埋める
• 3 列のカードは SP でも 3 列のまま、文字は 13px 程度にする
• 成分グリッドは SP で 4 列。狭い場合は 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 行書くと起動時に読み込まれる。