--- version: alpha name: Greige Elegant Pouch Commerce LP description: くすんだグレージュとオフホワイトを地にした、明朝体主体の上品な雑貨 EC 向け縦長 LP。冒頭だけ赤×金の受賞演出で実績を強く見せる。その後は口コミ、SNS、メディア掲載、悩み、Before/After の順で、柔らかい円や吹き出しを使って機能を伝える。 colors: primary: '#B59B8C' background: '#F7F6F2' surface: '#FDFDFC' background-alt: '#FAF9F7' tint-1: '#EEE6E4' dark-section: '#950504' accent-1: '#C9A24A' accent-2: '#E1A84C' text: '#4A4947' text-muted: '#797C74' line: '#C8C8C2' marker: '#F3E08A' accent-3: '#7BB4B5' typography: display: fontFamily: Shippori Mincho fontSize: 64px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.04em accent: fontFamily: Playfair Display fontSize: 20px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.04em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' award-medal: backgroundColor: '{colors.dark-section}' typography: '{typography.note}' rounded: '{rounded.full}' height: 110px rating-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.full}' height: 110px review-card: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 130px sns-card: backgroundColor: '{colors.background-alt}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 300px feature-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px worry-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px before-card: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 180px after-heading: textColor: '{colors.text}' typography: '{typography.accent}' height: 70px check-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 70px --- # DESIGN.md — グレージュ×金の上品な化粧ポーチ LP（Greige Elegant Pouch Commerce LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、情報量多め・訴求型 - **キーワード**: グレージュ・明朝見出し・金のメダル・吹き出し・円形フレーム・きらめき装飾 - **地の質感**: 淡いピンクグレーのグラデーションに細かな光の粒を散らす。紙のような無地の白カードも重ねる - **形**: 大きな円、角丸カード、楕円の吹き出し、角を切り欠いた額縁 - **温度感**: ややあたたかい中間色。冒頭の赤×金だけは華やかで熱量が高い ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B59B8C` | ブランドのグレージュ（見出しアクセント・枠） | 6% | 画素の主要色に補正 | | `background` | `#F7F6F2` | 基本の地色（オフホワイト） | 20% | 画素の実測 | | `surface` | `#FDFDFC` | カード・円フレームの白 | 18% | 画素の実測 | | `background-alt` | `#FAF9F7` | ピンクグレーの帯地 | 12% | 画素の実測 | | `tint-1` | `#EEE6E4` | くすみピンクのグラデ地 | 5% | 画素の実測 | | `dark-section` | `#950504` | 受賞セクションの深紅 | 5% | 画素の実測 | | `accent-1` | `#C9A24A` | メダル・装飾の金 | 2% | 推定 | | `accent-2` | `#E1A84C` | 評価の星（山吹色） | 0% | 画素の実測 | | `text` | `#4A4947` | 見出し・本文の墨色 | 3% | 画素の実測 | | `text-muted` | `#797C74` | 注釈・英字サブの灰 | 1% | 画素の主要色に補正 | | `line` | `#C8C8C2` | カード枠・区切り線 | 1% | 画素の主要色に補正 | | `marker` | `#F3E08A` | 本文強調の黄色アンダーライン | 0% | 推定 | | `accent-3` | `#7BB4B5` | Before 図のくすみ水色 | 0% | 画素の実測 | - 地はオフホワイトとピンクグレーを交互に敷き、白カードを重ねてセクションを分ける - 深紅と金は冒頭の受賞・実績ブロックだけに使い、ほかでは使わない - 評価の星は山吹色に限る。本文の強調は黄色マーカーと墨色の太字で行う - 線はすべて細い灰かグレージュの 1px - 純黒と彩度の高い色は避け、墨色を使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 受賞数などの大きな金文字 | 明朝 | Shippori Mincho | 700 | 64px | 1.1 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 600 | 22px | 1.5 | 0.08em | | `headline-md` | Point 見出し・カード見出し | 明朝 | Noto Serif JP | 600 | 18px | 1.6 | 0.06em | | `body-md` | 本文・口コミ | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.05em | | `note` | 注釈・日付 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.04em | | `accent` | 英字の小見出し・サブコピー | 欧文セリフ | Playfair Display | 600 | 20px | 1.2 | 0.04em | | `headline-sm` | 吹き出し・円バッジの短文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.5 | 0.05em | - 見出しは明朝、本文はゴシックにする - 見出しは字間を広めにとり、中央揃えにする - 英字のセリフ体を和文見出しの上下に小さく添える - 数値（評価・満足度）は明朝で大きくし、単位は小さくする - 本文は 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-90c8366b`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/kinoco/ep-01/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（8/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。