DESIGN.md — グレージュ×金の上品な化粧ポーチ LP（Greige Elegant Pouch Commerce LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、情報量多め・訴求型
• キーワード: グレージュ・明朝見出し・金のメダル・吹き出し・円形フレーム・きらめき装飾
• 地の質感: 淡いピンクグレーのグラデーションに細かな光の粒を散らす。紙のような無地の白カードも重ねる
• 形: 大きな円、角丸カード、楕円の吹き出し、角を切り欠いた額縁
• 温度感: ややあたたかい中間色。冒頭の赤×金だけは華やかで熱量が高い

Colors

• 地はオフホワイトとピンクグレーを交互に敷き、白カードを重ねてセクションを分ける
• 深紅と金は冒頭の受賞・実績ブロックだけに使い、ほかでは使わない
• 評価の星は山吹色に限る。本文の強調は黄色マーカーと墨色の太字で行う
• 線はすべて細い灰かグレージュの 1px
• 純黒と彩度の高い色は避け、墨色を使う

Typography

• 見出しは明朝、本文はゴシックにする
• 見出しは字間を広めにとり、中央揃えにする
• 英字のセリフ体を和文見出しの上下に小さく添える
• 数値（評価・満足度）は明朝で大きくし、単位は小さくする
• 本文は 1 行を短く切り、行間を広くとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能バッジは 3 列、SNS 投稿は 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 大きな写真は全幅で置き、テキストは中央寄せの白カードに入れる
• 写真と文を左右交互にずらして配置する
• セクションの頭に小さな英字・アイコン・矢印を置く
• Before/After は角丸カードを縦に積む

Elevation & Depth

• カードの影はごく薄い（0 2px 8px rgba(0,0,0,.06)）
• 円バッジは白地にわずかな影をつける
• 基本は影よりも細い線とグラデ地で奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 大きな円形や片側を大きく丸めた角丸で切り抜く。商品写真は背景を抜いて置く
• セクション境界: 巨大な円弧や額縁の枠で区切る。直線の場合は地色を切り替える
• 吹き出しは楕円や角丸の白地にし、細い線のしっぽをつける
• 機能バッジは白い正円
• 額縁は四隅を内側に切り欠いた細い枠線
• 口コミの見出しタグはピル型でカードの角に重ねる

Components

• 受賞メダル（award-medal）: 金の円形メダルを 5 個、ジグザグに配置し、下に部門名を小さく添える
• 評価数値バッジ（rating-badge）: 白い円の中に、評価値と星を明朝で大きく入れる
• 口コミカード（review-card）: 細い枠の白カード。星 5 つと日付を置き、右上にピル型の見出しタグを重ねる
• SNS 投稿カード（sns-card）: アイコン・ユーザー名・正方形写真・短文・ハートを並べた 2 列カード
• 機能円バッジ（feature-circle）: 白い正円に機能名を 2 行で入れ、3×2 で並べる
• 悩み吹き出し（worry-bubble）: 商品写真を囲んで、白い楕円の吹き出しを 6 つ散らす
• Before カード（before-card）: 大きな角丸の白カード。左に箇条書き、右にイラストを置く
• After 番号見出し（after-heading）: 斜線で挟んだ英字と、大きな 2 桁の番号を明朝で中央に置く
• CHECK 吹き出し（check-bubble）: 写真の上に白い円を重ね、小さな英字ラベルと短文を入れる

Do's and Don'ts

Do - 見出しは明朝で、中央揃え・広い字間にする - 地色は白、オフホワイト、ピンクグレーの 3 段階で切り替える - 実績は冒頭にまとめ、赤×金で一気に見せる - 機能はアイコンではなく、円や吹き出しの短い言葉で見せる - 金の小さな四芒星を余白に散らす

Don't - 赤×金を中盤以降に持ち込まない - 太いゴシックで大見出しを組まない - 角ばった濃い色のボタンや純黒の面を使わない - 1 つの画面に文字を詰め込みすぎない - 彩度の高いポップな色を加えない

Page Structure

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

1. ファーストビュー（商品とサイズ展開を印象づける）: 明るい石目調の地に商品写真を大きく置く。右下に欧文セリフのタイトルと 1 位メダル
2. 受賞実績（ランキング実績で信頼を得る）: 赤いカーテン調の地に、金の大きな数字とメダル 5 個、ランキング画面のキャプチャ
3. 受賞履歴（店舗としての信頼を示す）: 白カードに月桂樹で囲んだロゴを 2 列で並べる
4. レビュー評価（高評価を数値で示す）: きらめくグレージュの地に円バッジ 2 つ、口コミカードを縦に積む
5. SNS の声（実際の使用シーンを見せる）: 方眼の地に、投稿カードを 2 列の石積み状に並べる
6. エコ実績（環境配慮を伝える）: 切り欠きのある額縁に風景写真を透かし、紙吹雪を散らす
7. メディア掲載（第三者の評価を示す）: 二重線の額縁の中に誌面写真と誌名ラベル
8. サイズ紹介（2 サイズを比較する）: 商品写真に寸法線を添え、円形ラベルでサイズ名を示す
9. 商品特長（機能を一覧で見せる）: 大きな商品写真と、白い円バッジを 3×2 で並べる
10. コンセプト（使用シーンと開発意図を伝える）: 左寄せの明朝見出しと、円形にトリミングした人物写真を交互に置く
11. 悩みの提起（共感を得る）: 商品写真の周りに、悩みの吹き出しを 6 つ散らす
12. 解決の提示（機能で悩みを解消できることを示す）: 巨大な白い円の中に、写真と機能の吹き出しを配置する
13. Before/After（ポイントごとに解決策を示す）: Before カード、After 番号見出し、写真に CHECK 吹き出しの順で繰り返す

Imagery

• 商品写真は明るいグレーの石目や白い布の上で、真上または斜め上から撮る
• 化粧品を周りに散らし、自然光で柔らかい影を出す
• 人物はモノトーンの服装で、顔の一部が切れる構図にする
• 内部の写真は手を入れたアップで、素材感を見せる
• Before は、くすみ水色やベージュの淡いフラットなイラストで描く
• 装飾は金の四芒星、紙吹雪、月桂樹、細い斜線
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は PC でも 952px の縦長 1 枚画像で、SP とほぼ同じ構成
• SP では本文幅 88%、見出しは 22px 前後にする
• PC では中央 750px 程度の幅に収め、左右に地色を伸ばす
• SNS カードは SP で 2 列、PC で 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 行書くと起動時に読み込まれる。