--- version: alpha name: Romantic Pink Mincho Liqueur LP description: 淡い桜色の地と深い紅色の帯セクションを交互に置き、明朝体と金色の文字で上品さとロマンチックさを出す限定酒の抽選販売 LP。写真を大きく使い、紅色の帯ラベル見出しを写真の端に重ねるエディトリアル調の構成。 colors: background: '#FED2D1' primary: '#B72049' text: '#A13149' text-body: '#BD6E7C' accent-1: '#FFCD9F' on-dark: '#F7F1F4' background-alt: '#F7F1F4' secondary: '#F6A4A3' tint-1: '#F7BCC2' line: '#B72048' text-muted: '#FADDDC' text-body-accessible: '#9B4655' primary-accessible: '#B31F47' typography: display: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.1em headline-lg: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.04em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' label-ribbon-heading: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 36px section-title: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 40px product-summary: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 200px status-notice: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 140px award-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px spec-table: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 40px header-bar: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 56px --- # DESIGN.md — 桜色×深紅の明朝体で魅せる果実酒 LP（Romantic Pink Mincho Liqueur LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 上品・高級、かわいい、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: 桜色・深紅・明朝体・金文字・写真主体・余白多め - **地の質感**: フラットな単色面に、柔らかい自然光の商品写真と半透明の写真オーバーレイを重ねる - **形**: 角丸なしの矩形。写真は画面端まで裁ち落とすか、片側だけ寄せて非対称に置く - **温度感**: 暖かく甘い。ピンク系の同系色でまとめる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FED2D1` | ページ全体の淡い桜色の地 | 38% | 画素の実測 | | `primary` | `#B72049` | 深紅の帯セクション・見出しラベルの地 | 15% | 画素の実測 | | `text` | `#A13149` | 桜色地の見出し・本文の紅色文字 | 3% | 画素の実測 | | `text-body` | `#BD6E7C` | 長文本文のくすみローズ文字 | 3% | 画素の実測 | | `accent-1` | `#FFCD9F` | 紅色地の上の金色見出し・ラベル文字 | 1% | 画素の実測 | | `on-dark` | `#F7F1F4` | 紅色地の上の白文字 | 2% | 画素の主要色に補正 | | `background-alt` | `#F7F1F4` | 写真の下地となる淡いピンクグレー | 9% | 画素の主要色に補正 | | `secondary` | `#F6A4A3` | グラデーション帯のコーラルピンク | 7% | 画素の実測 | | `tint-1` | `#F7BCC2` | ヘッダーやフッターの濃いめの桜色 | 2% | 画素の実測 | | `line` | `#B72048` | 受賞リスト・仕様表の区切り線 | 0% | 画素の主要色に補正 | | `text-muted` | `#FADDDC` | 受付終了表示などの淡い文字 | 0% | 画素の主要色に補正 | | `text-body-accessible` | `#9B4655` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#B31F47` | AA を満たす補正値（計算） | | 計算 | - 地は淡い桜色を基本とし、購入方法や商品仕様は深紅の全幅帯に切り替える - 桜色地では文字を紅色、紅色地では白と金色を使う - 金色は紅色地の見出しと日付など要点だけに使う - 黒や純粋なグレーの文字は使わず、全てピンク〜紅の同系色でまとめる - コンセプト帯は写真に紅色の半透明グラデーションを重ね白文字を載せる - 区切り線は細い 1px で背景と反対の色にする - `page` は文字 `#BD6E7C` × 背景 `#FED2D1` のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-body-accessible`（`#9B4655`、4.51:1）を使う。 - `label-ribbon-heading` は文字 `#FFCD9F` × 背景 `#B72049` のコントラスト比が 4.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B31F47`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦書きキャッチ | 明朝 | Shippori Mincho | 600 | 24px | 1.5 | 0.1em | | `headline-lg` | 商品名・セット名 | 明朝 | Noto Serif JP | 400 | 24px | 1.5 | 0.02em | | `headline-md` | セクション見出し（欧文または和文） | 明朝 | Noto Serif JP | 400 | 24px | 1.4 | 0.05em | | `headline-sm` | 帯ラベル見出し・リード | 明朝 | Noto Serif JP | 500 | 15px | 1.7 | 0.05em | | `body-md` | 本文の長文 | 明朝 | Noto Serif JP | 400 | 14px | 2.1 | 0.04em | | `note` | 注意書き・期間表記 | 明朝 | Noto Serif JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 仕様表の項目と値 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | - 見出しも本文も明朝体を基本にし、太字は使わない - FV のキャッチは縦書きで右側に置く - 本文の行間は 2 倍前後と広めにする - 見出しは中央揃え、長文本文は左揃えにする - セクション見出しは小さめで、上下の余白を大きく取る - 仕様表だけゴシック小サイズで情報らしさを出す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は写真とテキストの 2 カラムを左右交互に置く - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算） - 写真は全幅か、片側の端に寄せて反対側に余白を残す - 帯ラベル見出しは写真の下端に重ね、画面端から始める - 本文の前後に 60〜80px の余白を取る - セクション見出しは上下に 80px 以上の余白で区切る - 仕様表は左に項目、右に値の 2 列で下線で区切る ## Elevation & Depth - 影は使わず、すべてフラットな面で構成する - 奥行きは写真自体の自然な影と半透明オーバーレイで出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。全幅か、片側を裁ち落として非対称に置く - **セクション境界**: 背景色の直線切り替え。一部はグラデーションでなじませる - 角丸は使わない - 受賞アイコンだけ円形の月桂冠モチーフにする - 見出しラベルは紅色の矩形帯を 2 段ずらして積む ## Components - **帯ラベル見出し**（`label-ribbon-heading`）: 紅色の矩形に金色の明朝文字を載せ、2 行を段違いに積んで写真の端に重ねる - **セクション見出し**（`section-title`）: 欧文大文字または和文を中央に置くだけの静かな見出し。装飾なし - **商品サマリーブロック**（`product-summary`）: 小見出し・短い横線・商品名・価格を中央に縦に並べる - **受付状況表示と注記**（`status-notice`）: 受付状況を中サイズで示し、その下に期間と注意書きを小さく中央揃えで置く - **受賞リスト**（`award-list`）: 左に円形の月桂冠アイコン、右に受賞名を置き、下に細い紅色の線を引く - **商品仕様表**（`spec-table`）: 紅色地に白文字で項目と値を 2 列に並べ、行ごとに白い細線を引く - **ヘッダー**（`header-bar`）: 桜色の細い帯に、縦線で挟んだ申込リンクとハンバーガーメニューを右寄せで置く ## Do's and Don'ts **Do** - 地色はピンク系の単色にして同系色でまとめる - 書体は明朝体を細めのウェイトで使い、行間を広く取る - 写真を大きく使い、テキストは短い段落に分ける - 紅色帯で購入情報と仕様を明確に区切る - 金色は紅色地の上の要点だけに使う **Don't** - 太いゴシックや派手な原色ボタンを使わない - 角丸カードやドロップシャドウを使わない - 黒い文字やグレーの背景を入れない - 金色を桜色の地の上で使わない - 余白を詰めて情報を詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の色と世界観を一目で伝える）: 淡いピンク背景の商品写真を全幅に置き、右上に明朝の縦書きキャッチ、左上に手書き風ロゴ線を入れる 2. **商品サマリー**（販売形式・商品名・価格・期間を伝える）: 桜色地に中央揃えで小見出し、短い横線、紅色の商品名、価格、受付状況、注記を縦に並べる 3. **コンセプト**（味と香りの魅力を情緒的に語る）: グラスの写真に紅色の半透明グラデーションを重ね、白い明朝文字を中央揃えで行間広く置く 4. **イメージ写真**（素材と商品の質感を見せる）: 大理石の上の果実とボトルの写真を全幅で 2 枚続ける 5. **ストーリー・こだわり**（原料や製法の価値を説明する）: 欧文見出しの後、片側寄せの写真に帯ラベル見出しを重ね、左揃えの長文を続ける。これを 3 回繰り返す 6. **購入方法**（抽選の流れと受付期間を案内する）: 紅色の全幅帯に金色の見出し、白い本文、金色の期間表記と注記を置く 7. **造り手紹介**（作り手の信頼性を示す）: 和文見出し、全幅の風景写真、紅色文字の長文本文を順に置く 8. **受賞実績**（品質の裏付けを示す）: 月桂冠アイコンと受賞名の行を下線で区切って縦に並べる 9. **商品詳細・仕様**（商品情報をまとめて示し購入を後押しする）: 商品写真の下に紅色帯を置き、金色の商品名、価格、商品ごとの仕様表を並べる 10. **フッター**（ガイドや会社情報への導線）: 商品写真を背景に白いリンクを並べ、桜色の半透明帯を重ねる ## Imagery - 淡いピンクの背景と白い大理石の台で、自然光のやわらかい商品写真を撮る - 透明感のある液体のボトルとワイングラスを並べ、色の違いを見せる - 凍らせた果実を散らした真上からの写真で、強い影を落とす - 写真に紅色の半透明グラデーションを重ね、文字を載せる背景にする - ロゴ風の細い手書き曲線を装飾として使う - 受賞は月桂冠とボトルの単色アイコンで描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも色・書体・帯の構成は同じにする - PC のストーリーは写真とテキストを 2 カラムにして左右交互に置く - PC の FV はキャッチを横書きにして右側に置く - PC の受賞リストは 2 列のグリッドにする - PC の商品詳細は左に写真、右に仕様表と購入案内を置く - PC のヘッダーはテキストリンクを横並びにする ## 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-3960417a`（元 LP の URL から採番） - **元 LP**: https://kurand.jp/pages/mume-therich-set - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。