--- version: alpha name: Citrus Orange Gradient Seasonal Drink LP description: 黄色からオレンジへ移るグラデーションを全面に敷いた、新作季節ドリンクの告知 LP。セクション見出しは細身の欧文セリフを大きく白抜きにし、すやり霞・市松・花型の額縁といった和の文様を重ねて正月らしさを出している。後半はクリーム色のカードと白カードに切り替えて、価格表やキャンペーン情報を読みやすく見せる。 colors: primary: '#FE8B03' secondary: '#FEC311' background: '#FCFAED' surface: '#FEFFFE' on-primary: '#FFFFFE' cta: '#FE9A01' on-cta: '#FFFFFE' text: '#5B321E' accent-1: '#6C271D' accent-2: '#5E5A1E' accent-3: '#2B7FB0' tint-1: '#FAEFDB' marker: '#E2CB64' dark-section: '#382C20' cta-accessible: '#AA6701' accent-3-accessible: '#2A7CAC' marker-accessible: '#89751A' typography: display: fontFamily: Cinzel fontSize: 58px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Playfair Display fontSize: 44px fontWeight: 800 lineHeight: 1.1 headline-md: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.06em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.06em accent: fontFamily: Montserrat fontSize: 26px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.01em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 6px md: 12px lg: 16px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 46px order-banner: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 120px section-title: textColor: '{colors.on-primary}' typography: '{typography.display}' height: 90px temp-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 30px feature-frame: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 230px price-table: backgroundColor: '{colors.surface}' textColor: '{colors.accent-3}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 110px marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 42px campaign-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 500px speech-label: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — 柚子色グラデと和の雲文様の季節ドリンク LP（Citrus Orange Gradient Seasonal Drink LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、和風、上品・高級、やさしい・柔らかい - **キーワード**: 柚子色グラデーション・白抜き欧文セリフ・すやり霞・花型フレーム・季節限定・シズル写真 - **地の質感**: うっすら紙粒子のノイズを乗せた暖色グラデーション。平面的だが温かみがある - **形**: 波形のセクション境界、花型の額縁、雲形の番号札、角丸のカード - **温度感**: 非常に暖かい。黄〜橙で冬の柑橘と新年の明るさを表現 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FE8B03` | ブランド・地のオレンジ | 20% | 画素の実測 | | `secondary` | `#FEC311` | 山吹色の地（ラインナップ・特長） | 18% | 画素の実測 | | `background` | `#FCFAED` | クリーム色カード地 | 11% | 画素の実測 | | `surface` | `#FEFFFE` | 白カード・価格表 | 8% | 画素の実測 | | `on-primary` | `#FFFFFE` | オレンジ地の白文字 | 3% | 画素の主要色に補正 | | `cta` | `#FE9A01` | 主ボタンのオレンジ | 0% | 画素の実測 | | `on-cta` | `#FFFFFE` | ボタン文字 | 0% | 画素の主要色に補正 | | `text` | `#5B321E` | 見出しの焦げ茶 | 2% | 画素の主要色に補正 | | `accent-1` | `#6C271D` | 日付・ステップの赤茶 | 0% | 画素の実測 | | `accent-2` | `#5E5A1E` | 温度帯ラベルのオリーブ | 0% | 推定 | | `accent-3` | `#2B7FB0` | ICED価格の青 | 0% | 推定 | | `tint-1` | `#FAEFDB` | 手順ボックスの淡いベージュ | 2% | 画素の実測 | | `marker` | `#E2CB64` | 見出し帯の金色 | 0% | 画素の実測 | | `dark-section` | `#382C20` | フッターの濃茶 | 2% | 画素の実測 | | `cta-accessible` | `#AA6701` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#2A7CAC` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#89751A` | AA を満たす補正値（計算） | | 計算 | - 地は黄→橙の縦グラデーションにする。セクションごとに色相をずらして変化をつける - オレンジ・黄の地では文字を白にし、焦げ茶はクリーム色や白のカードの上だけで使う - 価格表は ICED を青、HOT を赤にして、M サイズの数字を太く大きく見せる - 日付・期間限定バッジ・STEP ラベルは赤茶の文字と細い枠線で統一する - フッターだけ濃茶にしてページを締める - 金色の帯は推し文句の見出しにだけ使う - `button-primary` は文字 `#FFFFFE` × 背景 `#FE9A01` のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AA6701`、4.51:1）を使う。 - `price-table` は文字 `#2B7FB0` × 背景 `#FEFFFE` のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#2A7CAC`、4.58:1）を使う。 - `marker-heading` は文字 `#FFFFFE` × 背景 `#E2CB64` のコントラスト比が 1.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#89751A`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文見出し（白抜き） | 欧文セリフ | Cinzel | 400 | 58px | 1.1 | 0.02em | | `headline-lg` | 日付・発売開始の大見出し | 欧文セリフ | Playfair Display | 800 | 44px | 1.1 | 0.0em | | `headline-md` | 特長名など和文の見出し | 明朝 | Shippori Mincho | 800 | 28px | 1.3 | 0.06em | | `headline-sm` | 商品名・キャッチの小見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.4 | 0.04em | | `body-md` | 本文（白文字、太め） | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.9 | 0.06em | | `accent` | 英語の商品名（幾何学系サンセリフ） | 欧文サンセリフ | Montserrat | 600 | 26px | 1.2 | 0.01em | | `note` | 見出し下の和訳・注意書き | ゴシック | Noto Sans JP | 500 | 10px | 1.7 | 0.1em | | `label-button` | ボタン・ラベル文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.04em | - 欧文見出しは細めのセリフ体を画面幅いっぱいに大きく置き、下に小さな和訳を添える - 価格の数字は太いセリフ体で大きく見せる - 本文はすべて中央揃えにし、行間を広めに取る - 特長見出しは、小さな明朝のリード文と大きな明朝の名称を 2 段で組む - オレンジ地の白文字は太字にして可読性を確保する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品紹介は写真とテキストを左右交互に配置 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは、大きな欧文見出し→小さな和訳→コンテンツの順で縦に積む - 商品ラインナップは写真とテキストを左右ジグザグに並べ、ラベルと価格はテキスト側に置く - 特長は番号札・花型フレームの写真・見出し・本文の順で縦に繰り返す - 後半の情報はクリーム色・白の角丸カードにまとめて、地の色と分ける - 左右の余白は約 7% を確保する ## Elevation & Depth - 基本はフラット。影は主ボタンの下にだけ柔らかく付ける - 商品写真のカップは床に落ちる影で立体感を出す - カードは影を付けず、色の差だけで面を分ける ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 特長写真は四隅を内側に丸く抉った花型（和の額縁）で切り抜き、白の二重線で縁取る。商品は切り抜き写真にする - **セクション境界**: ゆるい波形の曲線か、和風の雲形額縁で区切る - 番号札は雲形の白い札に細いセリフの数字を入れる - 温度帯ラベルは傾けた楕円にセリフ体の白文字 - 吹き出しは白地に黒の細枠、下向きの尻尾付き - STEP ラベルは細枠の角丸長方形 ## Components - **主ボタン**（`button-primary`）: オレンジ地に白太字。角丸 12px で下に柔らかい影を付ける - **注文誘導バナー**（`order-banner`）: 黄色の角丸パネルに太い欧文ロゴ風の文字と先行日付を入れる。白い内側カードの中に日付を置く - **欧文大見出し**（`section-title`）: 白の細いセリフ体を大きく置き、下に和訳を小さく添える。背景にすやり霞を重ねる - **温度帯ラベル**（`temp-badge`）: オリーブ色の楕円を斜めに傾け、白いセリフ体で温度帯を書く - **花型写真フレーム**（`feature-frame`）: 白の二重線で囲んだ花型の額縁写真。上辺の中央に雲形の番号札を重ねる - **サイズ別価格表**（`price-table`）: 白の角丸カード。S/M/L を丸アイコンで示し、ICED は青、HOT は赤で書く - **金帯見出し**（`marker-heading`）: 金色の帯に白文字を載せ、左上に手書きの英字をあしらう - **キャンペーンカード**（`campaign-card`）: 白カードに丸い期間限定バッジと赤茶の大きな日付を置く。応募手順はベージュの箱にまとめる - **吹き出しラベル**（`speech-label`）: カード上辺に重ねる白い吹き出し。黒の細枠に小見出しを入れる ## Do's and Don'ts **Do** - 地は黄〜橙のグラデーションにし、紙のような粒子感を薄く乗せる - すやり霞・市松・柑橘の写真を見出しの周りに散らす - 欧文見出しは細いセリフ体の白で大きく置く - 特長写真は花型フレームと番号札のセットで統一する - 情報量の多い部分は角丸カードの上にまとめる **Don't** - 寒色や彩度の低いグレーを地に使わない - オレンジ地に焦げ茶の細い文字を載せない - 太いゴシックの欧文を見出しに使わない（ボタン・ロゴ風バナーは例外） - 写真を四角いままで並べない - 影の強いカードや立体ボタンを多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新作の商品写真で一目で惹きつける）: 黄色の地に、大きなカップ写真と柑橘のシズルを配置。手書き風の商品名ロゴを上に置き、白い大きな日付で発売開始を示す 2. **注文誘導**（モバイル注文での先行購入を促す）: 黄色の角丸バナーに先行発売日を入れ、下に小さなリンク文言を添える 3. **コンセプト**（商品の世界観と季節感を伝える）: オレンジ地に欧文セリフの大見出しを置き、明朝の 3 行キャッチと中央揃えの本文を続ける。素材写真を雲形額縁の中に収める 4. **ラインナップ**（温度帯別の商品と価格を見せる）: 写真とテキストを左右ジグザグに並べ、楕円ラベル・商品名・大きな価格を添える 5. **集合写真**（全商品を並べて見せる）: 上下を波形で区切った帯に、商品を横一列に並べる 6. **特長**（素材のこだわりを 4 点で説明）: 番号札付きの花型写真、明朝の 2 段見出し、白い本文の順で繰り返す 7. **おすすめ定番**（関連商品を併せて訴求）: クリーム色の大きなカードの上辺に吹き出しを重ねる。線画イラスト入りの見出しの下に商品写真・英字の商品名・価格表を並べ、最後に金帯見出しと説明文を置く 8. **キャンペーン**（SNS 参加型の施策へ誘導）: 白カードに期間・内容・STEP 手順・主ボタン・下線付きの応募要項リンクを並べる 9. **SNS フォロー**（公式 SNS への導線）: 左右に線を引いた欧文見出しの下に、白い SNS アイコンを 4 つ横並びにする 10. **注意書き・フッター**（価格や販売条件などの注記）: 白地に注記を並べ、最下部は濃茶地に白のロゴとコピーライトを置く ## Imagery - 商品は切り抜きのカップ写真にし、暖色の地の上で斜め下に柔らかな影を落とす - 柑橘の実と葉、茶葉を画面の端で見切れさせて散らし、シズル感を出す - 素材写真は暖色のボケ背景で寄りの構図にする - 装飾には、すやり霞の帯・市松模様・不定形の色面を半透明で重ねる - ところどころに茶器などを描いた線画イラストを添えて、軽い遊びを入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は 1 カラムの SP デザインを中央に置き、両脇にグラデーションの地を延長することを推奨 - PC ではコンテンツ幅を最大 480〜600px 程度に抑え、縦型の構成を維持する - PC でラインナップを横 3 列に並べる場合も、写真の影と温度帯ラベルは残す - 欧文見出しは PC でも画面幅の約 80% を目安に大きく置く ## 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-a2b9d862`（元 LP の URL から採番） - **元 LP**: https://campaign.gongcha.co.jp/yuzu-houji-2024/index.html?_gl=1*1elnmlo*_gcl_au*ODE1OTI5OTU3LjE3MDU5OTcxODE.*_ga*MTUxMzU3MTUyMi4xNzA1OTk3MTc1*_ga_F4SYD729GY*MTcwNTk5NzE4MS4xLjEuMTcwNTk5ODY4Mi4wLjAuMA..&_ga=2.200135659.455846308.1705997175-1513571522.170599 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。