--- version: alpha name: Sunny Citrus Gradient Seasonal Menu LP description: オレンジ〜黄〜ピーチのやわらかなグラデーション地に、大きな波形の層を重ねた夏の季節メニュー LP。朱赤の文字と白いピル型ボタンで統一し、セクション見出しは弧を描くセリフ体の英字。商品写真は切り抜きで大きく見せる。 colors: primary: '#F53803' background: '#FCD57B' background-alt: '#FDEBAB' tint-1: '#FED2BC' tint-2: '#FEBB63' surface: '#FFFFFF' cta: '#FEA601' on-cta: '#FEFDF6' accent-1: '#D35B02' dark-section: '#010101' on-dark: '#FEFDF6' line: '#CF5919' accent-2: '#FFC861' primary-accessible: '#DE3303' cta-accessible: '#A06901' tint-2-accessible: '#AD6301' accent-1-accessible: '#C15302' typography: display: fontFamily: Playfair Display fontSize: 44px fontWeight: 500 lineHeight: 1.05 letterSpacing: 0.02em accent: fontFamily: Yuji Syuku fontSize: 64px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.02em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-lg: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 600 lineHeight: 2.6 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 24px section: 120px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' button-primary: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px button-cta-dark: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-outline: textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 40px link-underline: textColor: '{colors.primary}' typography: '{typography.note}' height: 24px speech-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 180px fruit-badge: backgroundColor: '{colors.tint-2}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 72px product-card-color: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 780px tag-outline: textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 16px arched-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 140px --- # DESIGN.md — 柑橘グラデーションの夏季限定ドリンク LP（Sunny Citrus Gradient Seasonal Menu LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: ポップ・元気、清潔・爽やか、やさしい・柔らかい - **キーワード**: 柑橘・夏・グラデーション・波形レイヤー・切り抜き写真・弧状英字見出し - **地の質感**: 細かいノイズ粒子が乗ったエアブラシ調グラデーション。波のような大きな曲線の明暗が重なる - **形**: 大きな円弧・波の曲線、角丸カード、ピル型ボタン、吹き出し - **温度感**: 暖色中心で明るく温かい。セクションごとにオレンジ→黄→ピンクへ色相が移る ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F53803` | 見出し・本文・ボタン文字の朱赤 | 3% | 画素の実測 | | `background` | `#FCD57B` | オレンジ系グラデーション地 | 30% | 画素の実測 | | `background-alt` | `#FDEBAB` | コーヒー章の淡い黄色地 | 15% | 画素の実測 | | `tint-1` | `#FED2BC` | グッズ章のピーチピンク地 | 15% | 画素の実測 | | `tint-2` | `#FEBB63` | FV下の濃いオレンジ地 | 6% | 画素の実測 | | `surface` | `#FFFFFF` | 吹き出し・白カード・白ボタン面 | 6% | 画素の実測 | | `cta` | `#FEA601` | 濃色カード内の黄色ボタン | 1% | 画素の実測 | | `on-cta` | `#FEFDF6` | 黄色ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#D35B02` | 商品カードの焼けたオレンジ面 | 3% | 画素の実測 | | `dark-section` | `#010101` | 大人向け商品の黒カード | 2% | 画素の実測 | | `on-dark` | `#FEFDF6` | 濃色カード上の白文字 | 0% | 画素の主要色に補正 | | `line` | `#CF5919` | アウトラインボタン・下線リンクの朱線 | 0% | 画素の実測 | | `accent-2` | `#FFC861` | PC 外側の山吹色背景 | | 画素の実測 | | `primary-accessible` | `#DE3303` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#A06901` | AA を満たす補正値（計算） | | 計算 | | `tint-2-accessible` | `#AD6301` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#C15302` | AA を満たす補正値（計算） | | 計算 | - 地は単色にせず、暖色の柔らかいグラデーションと波形の明暗で塗る - 章ごとに地の色相を変える：オレンジ→黄→ピーチピンク→オレンジ - 文字色は基本すべて朱赤 1 色。黒文字は使わない - 主ボタンは白地に朱赤文字。オレンジ・黒カード内だけ黄色地に白文字 - サブ導線は透明地に朱赤の細枠ピル、または朱赤下線テキスト - 濃い面（焼きオレンジ・黒）は商品カードにのみ使い白文字で反転 - `button-primary` は文字 `#F53803` × 背景 `#FFFFFF` のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DE3303`、4.58:1）を使う。 - `button-cta-dark` は文字 `#FEFDF6` × 背景 `#FEA601` のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A06901`、4.56:1）を使う。 - `speech-card` は文字 `#F53803` × 背景 `#FFFFFF` のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DE3303`、4.58:1）を使う。 - `fruit-badge` は文字 `#FEFDF6` × 背景 `#FEBB63` のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-2-accessible`（`#AD6301`、4.51:1）を使う。 - `product-card-color` は文字 `#FEFDF6` × 背景 `#D35B02` のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#C15302`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 章の英字見出し（弧状に配置） | 欧文セリフ | Playfair Display | 500 | 44px | 1.05 | 0.02em | | `accent` | FV のオノマトペ大書き・写真上の手書き風擬音 | 手書き・筆 | Yuji Syuku | 400 | 64px | 1.1 | -0.02em | | `headline-md` | 商品名 | ゴシック | Noto Sans JP | 700 | 20px | 1.45 | 0.02em | | `headline-sm` | 吹き出し内の素材名・価格 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `body-lg` | FV 下のリード文（明朝・白抜き） | 明朝 | Noto Serif JP | 600 | 15px | 2.6 | 0.08em | | `body-md` | 商品説明本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em | | `note` | ※注記・期間表記 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.04em | - 章見出しは英大文字セリフを上向きの弧に沿わせて 2〜3 行で中央配置 - 和文はゴシックで統一し、FV リードのみ明朝で情緒を出す - 価格は欧文幾何学サンセリフ風で数字をやや大きく - 本文は短い行で改行し 4 行程度に収める - 商品名・本文は左揃え、章リードは中央揃え - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。コーヒー章のみ写真とテキストを左右交互に配置 - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 120px、基本単位 8px、カード内 24px（375px 幅換算） - 商品は写真→商品名→価格→説明→注記→ボタンの縦積み - テキストブロックは写真より狭く左寄せ（左余白 80px 程度） - 章末に一覧へのアウトラインボタンと下線リンクを中央に置く - 吹き出しカードは写真と交互に左右へ寄せる - 章と章の間は波形の色変化で大きく間を取る ## Elevation & Depth - 基本はフラットで影なし - 切り抜き商品写真に自然な落ち影のみ - 白カード・吹き出しは影なしで地との色差だけで浮かせる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品は背景を抜いた切り抜き。詳細写真は大きな円形マスク、イメージ写真は角丸長方形 - **セクション境界**: 直線を使わず、大きな円弧・波形の色の層で章を切り替える - ボタンはすべて完全なピル型 - 吹き出しは角丸 8px＋小さな三角のしっぽ - 素材紹介は円形の果物断面バッジを 4 つ並べる - カードは角丸 12〜16px ## Components - **白ピル主ボタン**（`button-primary`）: 白地に朱赤太字、幅 80% 程度の商品詳細ボタン - **濃色カード内の黄ボタン**（`button-cta-dark`）: オレンジ・黒カードの中で使う黄色地白文字ピル - **アウトラインサブボタン**（`button-outline`）: 透明地に朱赤 1px 枠のピル。一覧ページへの導線 - **下線テキストリンク**（`link-underline`）: 朱赤文字＋文字幅いっぱいの下線。成分情報などの補助リンク - **素材説明の吹き出し**（`speech-card`）: 白い角丸ボックスに朱赤の太字見出しと本文、下か上にしっぽ - **果物断面の丸バッジ**（`fruit-badge`）: 柑橘断面風の円に白文字で品種名、4 つ横並び - **濃色商品カード**（`product-card-color`）: 上半分に写真、下にオレンジまたは黒の面と白文字の商品情報 - **属性タグ**（`tag-outline`）: 価格横に置く細枠の小さな角丸タグ - **弧状英字見出し**（`arched-heading`）: 朱赤セリフ英字を弧に沿わせた章タイトル ## Do's and Don'ts **Do** - 地は必ず暖色グラデーション＋粒子ノイズ＋波形の層で作る - 文字は朱赤 1 色で統一する - 商品写真は切り抜いて大きく中央に置く - 章見出しは弧を描く英字セリフにする - ボタンはピル型で白地主・枠線サブの 2 段階にする **Don't** - 真っ白や単色フラットの背景にしない - 黒や灰の本文色を使わない - 四角いボタンや直線の区切り線を使わない - 寒色を地に使わない（商品自体の色は可） - 影の強いカードや立体ボタンにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（主力ドリンクを印象的に見せる）: 果物を敷き詰めた全面写真にドリンクを大きく、白い手書き風オノマトペを斜めに重ねる 2. **リード文**（季節感と商品の魅力を伝える）: オレンジのグラデーション地に白い明朝を中央揃え・広い行間で 4 行 3. **素材の特長**（構成要素を層ごとに解説）: 円形マスク写真と白い吹き出しを左右交互に配置、丸バッジ 4 つ 4. **主力商品紹介**（商品名・価格と詳細導線）: 切り抜き写真の下に朱赤の商品名、価格、タグ、白ピルボタン 5. **関連ドリンクカード**（派生商品を並べる）: 写真付き角丸カードをオレンジ・黒の色違いで縦に積み、黄ボタン 6. **一覧導線**（カテゴリ一覧と情報ページへ誘導）: アウトラインピルと下線リンクを中央に縦並び 7. **季節スイーツ**（フード商品の紹介）: 弧状英字見出し、切り抜きケーキ写真＋左寄せテキスト＋白ボタンを繰り返す 8. **記念商品**（限定コーヒー豆とコラボを紹介）: 黄色地、角丸のイメージ写真、中央揃え説明、パッケージとアーティスト名を左右交互 9. **グッズ**（限定グッズのセット内容を示す）: ピンク地、商品を並べ「＋」記号で組み合わせを図示、長い商品名を左寄せ 10. **シリーズ特集カード**（別特集ページへ誘導）: 白い角丸カード内に弧状見出し・リンク・角丸写真 11. **カード・ギフト**（プリペイドカードと寄付の告知）: オレンジ地に券面画像、中央揃えの説明と注記、白ボタンと枠ボタン ## Imagery - ドリンクは水滴のついたグラスを正面からとらえ、果物の断面を周りに散らす - 柑橘は断面を見せて鮮やかなオレンジ・ブラッドオレンジを強調 - スイーツ・グッズは白背景で撮って切り抜き、軽い落ち影をつける - イメージカットは木のテーブルの暖かい室内光で、角丸で切る - 背景は粒子ノイズを入れたエアブラシ風の暖色グラデーションと大きな波の円弧 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC も SP と同じ 1 カラムの縦長レイアウトを中央約 45% 幅で見せる - PC の左右の余白は山吹色の単色で塗り、左上にロゴを固定する - PC でも要素の並びと比率は SP と同じまま縮小して使う - ボタンや文字サイズは列の幅に合わせて小さくし、改行位置は SP と同じにする ## 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-7232dfce`（元 LP の URL から採番） - **元 LP**: https://www.starbucks.co.jp/cafe/orange-mango/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。