--- version: alpha name: Peach Gradient Seasonal Drink Campaign LP description: 濃いローズピンクから桃色・アプリコットへ移るグラデーションの地に、切り抜き商品写真と果実・水しぶきを浮かせた季節限定カフェ商品の LP。白い極太欧文タイポを斜めに置き、白いピル型ボタンで商品詳細へ誘導する。 colors: primary: '#F2526D' background: '#FE9AA6' background-alt: '#F9D49A' secondary: '#F9AA85' cta: '#FEFDFD' on-cta: '#C55160' on-primary: '#FEFAF7' text: '#D8345A' tint-1: '#FDCCD2' accent-1: '#FEF0F0' marker: '#FE9DA5' background-accessible: '#FFFCFD' on-cta-accessible: '#C44D5D' text-accessible: '#B42344' typography: display: fontFamily: Montserrat fontSize: 72px fontWeight: 900 lineHeight: 0.9 letterSpacing: -0.02em accent: fontFamily: Montserrat fontSize: 36px fontWeight: 800 lineHeight: 1.1 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Montserrat fontSize: 20px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 999px full: 999px spacing: unit: 8px card: 0px section: 120px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px button-outline: textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px link-underline: textColor: '{colors.on-primary}' typography: '{typography.note}' height: 24px display-tilted: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 220px ingredient-callout: textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 100px bubble-blob: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 300px tag-outline: textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 22px bg-watermark: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 120px --- # DESIGN.md — 桃色グラデの季節限定ドリンク LP（Peach Gradient Seasonal Drink Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、かわいい、やさしい・柔らかい、清潔・爽やか - **キーワード**: 桃色グラデーション・浮遊する果実・斜めの極太欧文・白ピルボタン・季節限定 - **地の質感**: ほぼフラットなグラデーション地。欧文見出しにかすれたノイズ質感を足す - **形**: ピル型ボタン、斜めに切ったセクション境界、有機的な円形の吹き出し - **温度感**: 暖色寄り。甘くみずみずしい夏の印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F2526D` | FV と特長セクションの濃いローズピンク地 | 10% | 画素の実測 | | `background` | `#FE9AA6` | スイーツ・グッズ紹介の桃色地 | 30% | 画素の実測 | | `background-alt` | `#F9D49A` | グラデーション終端のアプリコット色 | 10% | 画素の実測 | | `secondary` | `#F9AA85` | グラデーション中間のサーモン色 | 10% | 画素の実測 | | `cta` | `#FEFDFD` | 商品詳細ボタンの白い面 | 2% | 画素の実測 | | `on-cta` | `#C55160` | 白ボタン上の濃ピンク文字 | 0% | 画素の実測 | | `on-primary` | `#FEFAF7` | ピンク地に置く白文字・アウトラインボタン | 2% | 画素の実測 | | `text` | `#D8345A` | 淡色地に置くリード文の濃ピンク文字 | 0% | 推定 | | `tint-1` | `#FDCCD2` | 特長説明の円形吹き出しの淡ピンク面 | 2% | 画素の実測 | | `accent-1` | `#FEF0F0` | 斜め配置の欧文見出しの白っぽいピンク | 3% | 画素の実測 | | `marker` | `#FE9DA5` | 成分ラベルの下に引く淡ピンクのマーカー線 | 0% | 画素の主要色に補正 | | `background-accessible` | `#FFFCFD` | AA を満たす補正値（計算） | | 計算 | | `on-cta-accessible` | `#C44D5D` | AA を満たす補正値（計算） | | 計算 | | `text-accessible` | `#B42344` | AA を満たす補正値（計算） | | 計算 | - 上から濃ローズピンク→アプリコット→桃色へ縦グラデーションでつなぎ、セクションごとに色温度を変える - 文字はほぼ白。淡いアプリコット地の上だけ濃ピンク文字を使う - 主ボタンは白塗りに濃ピンク文字、一覧へのサブボタンは白線の透明ボタン - 背景の巨大な欧文は地色より少し明るい半透明の白で重ねる - 寒色・黒は商品写真の中だけにし、UI には使わない - `page` は文字 `#D8345A` × 背景 `#FE9AA6` のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#FFFCFD`、4.52:1）を使う。 - `button-primary` は文字 `#C55160` × 背景 `#FEFDFD` のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#C44D5D`、4.53:1）を使う。 - `bubble-blob` は文字 `#D8345A` × 背景 `#FDCCD2` のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#B42344`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV やセクション冒頭の斜めの極太欧文タイトル | 欧文サンセリフ | Montserrat | 900 | 72px | 0.9 | -0.02em | | `accent` | 欧文タイトルに添える小さめの白い欧文サブ見出し | 欧文サンセリフ | Montserrat | 800 | 36px | 1.1 | 0.0em | | `headline-lg` | 商品名 | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.03em | | `headline-md` | 価格表示 | 欧文サンセリフ | Montserrat | 600 | 20px | 1.3 | 0.02em | | `headline-sm` | 成分の吹き出しラベル・リード文 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.7 | 0.05em | | `body-md` | 商品説明文 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.03em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.0 | 0.05em | | `note` | 注記タグ・アレルゲンリンク | ゴシック | Noto Sans JP | 500 | 11px | 1.4 | 0.05em | - 欧文の大見出しは -8〜-12° 傾け、2 段を詰めて重ねる - 和文はすべて太めのゴシック。明朝は使わない - FV のリード文は 1 行ずつ少し右上がりに傾けて並べる - 価格は欧文の数字で、商品名のすぐ下に置く - 成分ラベルは 3 行の小さな説明＋太字の名前＋マーカー線の構成にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品ブロックは写真とテキストを左右交互にずらして置く - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 120px、基本単位 8px、カード内 0px（375px 幅換算） - カードは使わず、切り抜き写真とテキストを地の上に直接置く - 商品ブロックは写真→商品名→価格→説明→ボタンの順 - 商品ごとにテキストの左右位置を変えてリズムを作る - 各カテゴリの末尾に一覧ボタンと下線リンクを中央に置く - 背景の欧文を商品の後ろに大きくはみ出させる ## Elevation & Depth - 商品写真は地色を濃くしたピンクのソフトなドロップシャドウで浮かせる - ボタンに影は付けずフラットにする - 果実・水滴の写真は前後に重ねて奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 背景を抜いた切り抜き写真。斜めに傾けて画面端から少しはみ出させる - **セクション境界**: 右上がりの斜めカットで地色を切り替える - ボタンはすべて完全なピル型 - 注記タグは角丸小の白線の枠 - 説明用の吹き出しは歪んだ円形の淡ピンク面 - 矢印は手描き風の白い曲線 ## Components - **商品詳細ボタン**（`button-primary`）: 白塗りのピル型に濃ピンクの太字 - **一覧ボタン**（`button-outline`）: 透明地に白 1px 線のピル型。カテゴリ末尾の中央に置く - **情報リンク**（`link-underline`）: 白文字に白い下線のテキストリンク - **斜め欧文見出し**（`display-tilted`）: かすれ質感の白い極太欧文を傾けて重ね、下に小さな欧文の問いかけを添える - **成分の注釈ラベル**（`ingredient-callout`）: 小さな説明＋太字の成分名＋マーカー線。手描き矢印で写真の部位を指す - **円形の吹き出し**（`bubble-blob`）: 淡ピンクの有機的な円に、濃ピンクの見出しと説明文を入れる - **注記タグ**（`tag-outline`）: 白線の角丸小の枠に白い小文字 - **背景の欧文透かし**（`bg-watermark`）: カテゴリ名の欧文を半透明の白で巨大に斜めに配置 ## Do's and Don'ts **Do** - 地はピンク系グラデーションでつなぎ、セクションの間に白地を挟まない - 商品は必ず切り抜き写真にし、傾けて浮遊感を出す - 果実・水しぶき・水滴を周囲に散らす - 主ボタンは白ピル型、サブボタンは白線ピル型に統一する - 欧文の大見出しは斜めにし、かすれ質感を入れる **Don't** - 四角い枠付きのカードやボックスで商品を囲まない - 黒や寒色を UI の色に使わない - 明朝体や細い書体を使わない - 水平・均等なグリッドで商品を並べない - ボタンに濃い影やグラデーションを付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節限定商品の世界観を一目で伝える）: 濃ピンク地に斜めの極太欧文タイトル、商品と果実・水しぶきを浮かせる 2. **リード文**（季節の到来と商品の魅力を短く語る）: アプリコット地に濃ピンク太字を 5 行、少し傾けて並べる 3. **商品の構造説明**（層ごとの素材を説明する）: 商品写真の周りに注釈ラベル 3 つを置き、手描き矢印で指す 4. **こだわり**（味づくりの狙いを伝える）: 淡ピンクの円形吹き出しに見出しと説明文を入れる 5. **主商品の価格と CTA**（商品詳細へ誘導する）: 商品名・サイズと価格・注記タグ・白ピルボタン・一覧ボタン・情報リンク 6. **関連スイーツ紹介**（合わせ買いを提案する）: 斜めカットの境界に欧文見出し。商品 3 点を左右交互に配置する 7. **コーヒー豆紹介**（季節のコーヒーを提案する）: 斜めカット＋欧文見出し、パッケージ写真を中央に置き説明とボタン 8. **グッズ紹介**（季節のグッズを見せる）: 欧文の透かしを背景に、ボトル・タンブラー 3 点を左右交互に配置する 9. **特集への誘導**（グッズ特集ページへ送る）: アプリコット地の中央に白線のピルボタン ## Imagery - 商品と果実は背景を抜いて切り抜き、明るく柔らかい光で撮る - 果実のカット・丸ごと・かじった跡を組み合わせ、傾けて散らす - 水しぶきや水滴を写真の周囲に重ね、みずみずしさを出す - ハート型サングラスのような遊び心のある小物で季節のテーマを演出する - 商品の下に地色を濃くしたピンクの柔らかい影を落とす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC も中央寄せの細い 1 カラムで、SP の構成をほぼそのまま縮小して使う - PC では背景グラデーションを全幅に広げ、写真を少し小さめにする - 斜めカットの境界は 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-5cffc18f`（元 LP の URL から採番） - **元 LP**: https://www.starbucks.co.jp/cafe/loveandpeach/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。