--- version: alpha name: Soft Matcha Mochi Seasonal Drink LP description: 抹茶グリーンと淡いピーチ・クリーム色のグラデーションに、ふっくらした桃色のもち雲を浮かべた新春限定ドリンクの LP。太い欧文セリフ見出しと明朝系の和文で、和モダンなやさしさと季節の華やかさを出している。中盤は SNS キャンペーンのカードが並び、角を切り欠いた和風フレームで包んでいる。 colors: primary: '#92B53A' secondary: '#87AB01' background: '#FEE6BA' background-alt: '#C2E195' surface: '#E5ECC2' cta: '#FE9B8C' on-cta: '#FFF8F1' accent-1: '#F0B0A0' accent-2: '#75A100' tint-1: '#FFC1A2' text-body: '#739021' text: '#3A2A20' surface-white: '#FFFFFF' text-body-accessible: '#5A711A' cta-accessible: '#E21F02' accent-2-accessible: '#5B7D00' typography: display: fontFamily: Playfair Display fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-lg: fontFamily: Shippori Mincho fontSize: 15px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 accent: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 6px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 60px frame-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 800px section-title: textColor: '{colors.secondary}' typography: '{typography.display}' height: 120px period-band: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 44px pill-highlight: textColor: '{colors.secondary}' typography: '{typography.body-lg}' rounded: '{rounded.full}' height: 36px step-label: textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 22px feature-number: textColor: '{colors.primary}' typography: '{typography.display}' height: 140px arc-ribbon: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-cta}' height: 60px --- # DESIGN.md — 抹茶グリーン×桃色もちの季節ドリンクLP（Soft Matcha Mochi Seasonal Drink LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: やさしい・柔らかい、和風、かわいい、ナチュラル - **キーワード**: 抹茶グリーン・桃色のもち雲・和モダン・新春限定・ふんわりグラデーション・SNSキャンペーン - **地の質感**: エアブラシで描いたような柔らかいグラデーションと、粒子感のあるマットな面 - **形**: 丸い丘、雲形のもち、角を内側に切り欠いた和風フレーム - **温度感**: 暖かく穏やか。黄緑とピーチの中間トーン ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#92B53A` | 抹茶グリーン（見出し・カードの面） | 12% | 画素の実測 | | `secondary` | `#87AB01` | 濃い抹茶色（見出し文字） | 3% | 画素の実測 | | `background` | `#FEE6BA` | クリーム黄の地 | 14% | 画素の実測 | | `background-alt` | `#C2E195` | 淡い若草色の地 | 12% | 画素の実測 | | `surface` | `#E5ECC2` | キャンペーンカードの面 | 10% | 画素の実測 | | `cta` | `#FE9B8C` | コーラルの主ボタン | 1% | 画素の実測 | | `on-cta` | `#FFF8F1` | ボタン上の文字 | 0% | 画素の実測 | | `accent-1` | `#F0B0A0` | もち雲のピーチピンク | 6% | 推定 | | `accent-2` | `#75A100` | 期間表示帯の濃いグリーン | 1% | 画素の実測 | | `tint-1` | `#FFC1A2` | ピーチオレンジの地（後半） | 6% | 画素の実測 | | `text-body` | `#739021` | カード内本文（オリーブ色） | 2% | 画素の実測 | | `text` | `#3A2A20` | 白カード内の濃い文字 | 1% | 推定 | | `surface-white` | `#FFFFFF` | 白いカード | 10% | 画素の実測 | | `text-body-accessible` | `#5A711A` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#E21F02` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#5B7D00` | AA を満たす補正値（計算） | | 計算 | - 地はクリーム黄・若草色・ピーチの淡いグラデーションをセクションごとに切り替える - 見出しと数字は濃い抹茶グリーンでそろえる - 主 CTA だけをコーラルピンクにして目立たせる - 桃色のもち雲を画面の端に重ねて、全体に季節感の差し色を入れる - 後半の別商品ブロックは白いカードで区切り、色数を絞る - 暗い色や真っ黒の面は使わない - `page` は文字 `#739021` × 背景 `#FEE6BA` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-body-accessible`（`#5A711A`、4.52:1）を使う。 - `button-primary` は文字 `#FFF8F1` × 背景 `#FE9B8C` のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E21F02`、4.5:1）を使う。 - `frame-card` は文字 `#739021` × 背景 `#E5ECC2` のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-body-accessible`（`#5A711A`、4.62:1）を使う。 - `period-band` は文字 `#FFF8F1` × 背景 `#75A100` のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#5B7D00`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字のセクション見出し・日付 | 欧文セリフ | Playfair Display | 900 | 44px | 1.1 | 0.0em | | `headline-lg` | 和文の大見出し・カードタイトル | 明朝 | Shippori Mincho | 800 | 30px | 1.3 | 0.02em | | `headline-md` | 商品名・特長の小見出し | 明朝 | Shippori Mincho | 700 | 20px | 1.4 | 0.03em | | `body-lg` | リード文（中央揃え） | 明朝 | Shippori Mincho | 700 | 15px | 2.0 | 0.08em | | `body-md` | キャンペーン本文 | ゴシック | Noto Sans JP | 700 | 13px | 1.7 | 0.03em | | `note` | 注釈 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.0em | | `accent` | 縦書きのキャッチコピー | 明朝 | Shippori Mincho | 600 | 40px | 1.3 | 0.1em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | - 英字の見出しの下に、小さな和文の読みを添える - 英字見出しの上に小さな日の出の線画を置く - キャッチコピーは縦書きの明朝で余白を大きく取る - 価格は大きなセリフ体の数字にし、単位は書かない - 本文の中で強調したい語は白いピル型の背景に乗せる - キャンペーン部分は読みやすさを優先してゴシックにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品は写真と文字を左右交互に配置 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - カードは左右に 6% の余白を取って中央に置く - 特長は大きな番号を写真の背後に重ねる - 商品写真は桃色のもち雲の上に乗せる - キャンペーンカードは同じ型を縦に繰り返す - STEP は左にラベル、右に説明の 2 列にする ## Elevation & Depth - カードは影なし、または薄い外枠線だけ - もち雲の写真に柔らかい落ち影をつける - 主ボタンの下に淡い緑のオフセット影を敷く ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜き。素材写真は丸い丘や雲の形の色面に重ねる - **セクション境界**: 大きな円弧と波線で切り替える。帯状の英字を弧に沿って流す - カードの角は内側に切り欠いた和風フレームにする - 期間を示す帯は角丸の小さい横長の帯にする - 雲・丘・円など、角のない柔らかい形を背景に使う ## Components - **コーラルの主ボタン**（`button-primary`）: ピル型。左から右へコーラルのグラデーション、下に緑のオフセット影 - **和風切り欠きフレームカード**（`frame-card`）: 角を内側に切り欠いた形で、内側に細い枠線を二重に入れる - **日の出つき英字見出し**（`section-title`）: 日の出の線画、大きなセリフ体の英字、小さな和文の読みを縦に並べる - **期間表示帯**（`period-band`）: 濃い緑のグラデーションの帯に白いセリフ体で日付を書き、曜日を小さく添える - **語句強調ピル**（`pill-highlight`）: 本文中の重要語を白から桃色のピル型の背景に乗せる - **STEP ラベル**（`step-label`）: 白い角丸の小さな四角に緑の英字で番号を入れる - **特長の大番号**（`feature-number`）: グラデーションのかかった巨大なセリフ数字を写真の背後に置く - **弧状の英字帯**（`arc-ribbon`）: 若草色の面の上端に沿って、白の英字を円弧状に流す ## Do's and Don'ts **Do** - もち雲と丘のイラストを各セクションの端に散らす - 見出しは英字のセリフ体と和文の読みをセットで使う - 緑とピーチの淡いグラデーションで、セクションの地を少しずつ変える - 価格は大きな数字で見せる - キャンペーンは期間・プレゼント・参加方法・ボタンの順で同じ型にそろえる **Don't** - 彩度の高い原色や黒い面を使わない - 角の鋭い四角いボタンを使わない - 見出しを細いゴシックにしない - 背景をフラットな単色だけにしない - 主 CTA 以外にコーラル色を多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節限定の商品を印象づける）: もち雲の上に商品を乗せる。縦書きのコピーとタイトル、大きな日付、ピル型の START ラベルを置く 2. **コンセプト**（商品の魅力を短く伝える）: 切り欠きフレームの中に円と縦書きのコピー。下に中央揃えのリード文 3. **ラインナップ**（商品の種類と価格を示す）: 写真と商品名・価格を左右交互に置き、ICED/HOT の雲形バッジをつける 4. **特長**（素材やこだわりを説明する）: 大きな番号、素材写真、強調ピルの小見出し、本文を並べる 5. **関連商品とセット**（一緒に買う商品をすすめる）: 緑の和風フレームに写真・説明・価格。セット割引は矢印で値下げを示す 6. **トピックス導入**（季節企画をまとめて紹介する）: 円弧の境界で始め、英字の大見出しと短いリード文を置く 7. **SNS キャンペーン**（投稿への参加を促す）: フレームカードにイラスト、期間帯、プレゼント、STEP、主ボタンを入れ、これを 3 回繰り返す 8. **BGM 紹介**（外部コンテンツへ誘導する）: ピーチ色の面に金色の細い枠、白いボタン 9. **別の季節メニュー**（他の商品も紹介する）: 白いカードに吹き出し、ロゴ風の見出し、サイズ別の価格表 10. **抽選キャンペーンと共有**（応募と拡散を促す）: 緑の地に白いカード、緑のボタン、SNS 共有ボタンを 2 つ並べる 11. **フッター**（SNS への誘導と注意事項を示す）: 緑の地に線つきの英字見出し、アイコン、注釈。最下部は白い地にロゴ ## Imagery - 商品は白い背景から切り抜き、表面の結露やミルクフォームの質感を見せる - 桃色のもちを雲のような形の 3D イラストにし、ぼかしを入れて手前や奥に浮かべる - 背景は丸い丘が重なる、エアブラシ風のパステル風景にする - キャンペーン部分は黄色から朱色のグラデーションを使ったフラットなイラストにする - 素材写真（粉末・果物など）は画面の端からはみ出させる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、SP の 1 カラムを幅 480〜600px で中央に置き、左右には背景のグラデーションと雲の装飾を広げる - ラインナップと特長は PC で写真と文字の 2 列にする - キャンペーンカードは最大幅 640px にとどめる - 見出しは PC で 1.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-d739b13e`（元 LP の URL から採番） - **元 LP**: https://campaign.gongcha.co.jp/first-tea-2026/index.html?_gl=1*ugnhmc*_gcl_au*MzA3NjUwNDE2LjE3NjY0ODA0MzE.*_ga*OTQ1NzE2Nzk3LjE3NTY4OTAwNzQ.*_ga_F4SYD729GY*czE3NjY0ODA0MzEkbzckZzEkdDE3NjY0ODA0MzEkajYwJGwwJGgw&_ga=2.240841283.1571882234.1766480431-945716797. - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。