DESIGN.md — グレージュ×水彩イラストの骨格診断インナー LP（Greige Watercolor Body Type Diagnosis Lingerie LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、ナチュラル
• キーワード: グレージュ・水彩イラスト・細い欧文セリフ・手書きスクリプト・診断コンテンツ・余白多め
• 地の質感: マットで平滑な面。写真はハイキーで白っぽく、ファッションアイテムは水彩のにじみで描く
• 形: 細線の角丸枠、楕円のラベル、円形の商品背景、白い大きめ角丸カード
• 温度感: やや暖かいニュートラル。ピンクを少し含んだベージュ寄り

Colors

• 地色は生成り（background）とグレージュ（background-alt）を交互に使い、セクションを分ける
• 文字は純黒にしない。ココアブラウン系の濃淡だけで階層をつける
• 濃い面に使うのはボタンと POINT ラベルの primary だけ
• ピンク・水色・若草色は 3 タイプの識別色にする。イラストと点線の中だけで使う
• 白は商品カードと吹き出しラベルに限る。地色から浮かせて見せる
• 写真はハイキーなグレージュ調にし、彩度を上げない

Typography

• 欧文セリフの見出しの右下に、手書きスクリプトを斜めに重ねる
• 和文は細めのゴシックを使い、字間を広く、行間を 2.0 前後とる
• 本文は中央揃えを基本にする。タイプ解説の本文だけ左揃え
• 太字はほぼ使わず、サイズと色の濃さで階層をつける
• 英語の小見出し（KEYWORD・DRESS など）は大文字のセリフ体で小さく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。タイプ解説はイラストと文章の 2 列、アイテム紹介は 2〜3 列の自由配置
• 本文ブロックの幅: 画面幅の約 78%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの上下に大きな余白をとり、ゆったり見せる
• 設問カードは同じ形で縦に 6 つ連ね、間を 36px ほどあける
• タイプ解説は「見出し → 人物イラスト＋本文 → アイテムイラスト＋POINT」の順で毎回そろえる
• 商品カードは画面幅の約 82% にし、中では左に円形画像、右に情報を置く
• 各タイプの後ろに、おすすめ商品のセクションを必ず続ける

Elevation & Depth

• 商品カードと監修者カードに、広くぼかした薄い影をつける（0 6px 16px rgba(0,0,0,0.08)）
• 設問カードは影をつけず、細線の枠だけで区切る
• ボタンはフラットにする

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は薄いグレーの正円の上に切り抜いて置く。監修者も円形。FV は細枠で囲んだ長方形写真
• セクション境界: 直線で地色を切り替える
• 設問カードは角丸 16px の細線枠。上辺の中央を空けて、そこに見出しを載せる
• カテゴリラベルは淡い色の楕円にする
• タイプ見出しは両側の横線と斜線で挟む
• ボタンは角丸ほぼ 0 の長方形にし、右矢印をつける
• 吹き出しラベル（「〇〇のあなたは」）は白のピル形にする

Components

• 一覧ボタン（button-primary）: ココアブラウンの長方形。大文字英語と長い右矢印を入れ、中央に置く
• 商品カード内のボタン（button-small）: カード右側の情報欄の幅いっぱいに置く細いボタン
• 設問カード（question-card）: 細線の角丸枠。上辺に設問番号をセリフ体で載せる。楕円ラベルの横に手書きの英語を添え、◎記号つきの選択肢を 3 つ並べる
• 楕円カテゴリラベル（pill-label）: 淡いグレージュの楕円に、短い和文を入れる
• タイプ見出し（type-heading）: 大文字セリフ体の英語を横線と斜線で挟み、右下に手書きの英語を重ねる
• POINT ラベル（point-badge）: 濃色の角丸ラベルに番号つきの英語を入れ、下に短い説明を 2〜3 行置く
• 商品カード（product-card）: 白い大きめの角丸カード。上にキャッチ 2 行、左に円形の商品画像、右にコード・価格・サイズ・カラーチップ・ボタンを置く
• 結果の吹き出しラベル（speech-label）: 白いピル形に「〇〇のあなたは」型の短文を入れる
• 監修者カード（supervisor-card）: 白い角丸カード。左に円形写真と SNS 表記、右に肩書・名前・枠つきの小バッジ・プロフィールを置く

Do's and Don'ts

Do - 地色は生成りとグレージュの 2 色に絞り、交互に切り替える - 欧文の見出しには必ず手書きスクリプトを添える - 服とボディのイラストは淡い水彩で描き、白地に輪郭線を残す - 文字はブラウン系の灰色にし、字間を広く、行間を大きくとる - 3 タイプは識別色と構成をそろえて繰り返す

Don't - 純黒の文字や、彩度の高い CTA 色は使わない - 太いゴシックの見出しや、大きな価格訴求の装飾は入れない - グラデーションやドロップシャドウの強いボタンは使わない - 写真の上に派手な帯やバッジを重ねない - 余白を詰めて情報を詰め込まない

Page Structure

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

1. ファーストビュー（診断コンテンツであることと世界観を伝える）: ハイキーな人物写真を細枠で囲む。右上に円形のバッジ、下部に楕円ラベル・欧文タイトル・手書きスクリプト・サブコピーを重ねる
2. 診断の説明（骨格診断の概要と 3 タイプを示す）: 欧文タイトルの下に中央揃えの説明を 5 行置く。3 体のボディイラストを横に並べ、タイプ名と下向きの三角を添える
3. セルフチェック（設問に答えて自分のタイプを知ってもらう）: 手書きの見出しの下に、細線枠の設問カードを 6 つ縦に並べる
4. タイプ解説（1 つ目）（結果タイプの特徴を説明する）: グレージュの地色にする。線つきのタイプ見出し、人物イラストと吹き出し、キーワード、本文を置き、アイテムイラストと POINT を 2 つ並べる。左端に縦書きの小さな欧文を添える
5. おすすめ商品（タイプに合う商品へ誘導する）: 生成りの地色にする。弧状に並べた欧文見出しの下に商品カードを 2 枚置き、一覧ボタンで締める
6. タイプ解説（2 つ目）＋おすすめ商品（別タイプにも同じ構成で対応する）: 1 つ目と同じレイアウトにし、識別色だけを変える
7. タイプ解説（3 つ目）＋おすすめ商品（最後のタイプを紹介する）: 同じ構成を繰り返す
8. 監修者（専門家の監修で信頼性を補う）: 白っぽい背景の上に、白い角丸の監修者カードを置く
9. クロージング（余韻を残して締める）: 中央揃えのコピーを 2 行置き、手書きの英語の一言を添える。最下部にくつろいだ人物の横長写真を置く

Imagery

• 人物写真は白とグレージュを基調にした室内で撮る。自然光のハイキーで、柔らかいニット素材を合わせる
• ボディ図は細い線画の女性に、下着を淡い水彩で塗る。体型の形はピンクの点線で示す
• 服と靴は水彩のにじみで描いたイラストにし、白背景に切り抜いて英語のラベルを添える
• 商品写真は白背景で切り抜き、淡いグレーの正円の上に置く
• 装飾は手書きスクリプトと細線だけにし、模様は使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を 960px ほどで中央に固定し、左右を地色で埋める
• 設問カードは PC で 2〜3 列のグリッドにできる
• タイプ解説はイラストと文章の比率を 4:6 にし、アイテムイラストは 4 列に広げる
• 商品カードは PC で 2 枚を横に並べる
• FV 写真は横長に再トリミングし、テキストを左右どちらかに寄せる

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