--- version: alpha name: Tropical Summer Fruit Tea Drink LP description: 鮮やかなブルーの空と、弾けるマンゴー・オレンジのシズル写真で夏らしさを出す期間限定ドリンクの LP。細めの欧文サンセリフで見出しを大きく置き、本文は白抜きの明朝系。波形の境界でセクションを区切り、円形の価格カードと黄色の CTA で商品を見せる。 colors: primary: '#216BDA' secondary: '#3DB5EC' cta: '#FCC40C' on-cta: '#FEFFFD' background: '#D9F2F9' background-alt: '#FBF4DB' surface: '#FEFEFE' accent-1: '#04ABF7' accent-2: '#B8862E' accent-3: '#FEBA29' marker: '#FED433' text: '#6B4E1E' dark-section: '#00AFFF' on-dark: '#FEFFFD' on-cta-accessible: '#316100' secondary-accessible: '#117CAD' accent-1-accessible: '#037CB3' typography: display: fontFamily: Montserrat fontSize: 48px fontWeight: 300 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Montserrat fontSize: 44px fontWeight: 300 lineHeight: 1.1 letterSpacing: 0.03em headline-md: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.15em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 600 lineHeight: 2.0 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 44px fontWeight: 300 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 24px section: 96px 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: 120px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 56px price-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 200px section-title: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 90px feature-number: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 60px marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 40px frame-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 290px share-buttons: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 60px --- # DESIGN.md — 青空ブルー×マンゴー黄の夏季限定ドリンク LP（Tropical Summer Fruit Tea Drink LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 清潔・爽やか、ポップ・元気、上品・高級 - **キーワード**: 夏季限定・シズル感・青空とフルーツ・波形の区切り・細い欧文見出し・円形の価格カード - **地の質感**: 光のボケや水しぶきが入った写真合成。黄色のセクションだけ紙のような粒子感がある - **形**: 波形・弧形のセクション境界、円形カード、角丸の白ボタン - **温度感**: 暖色の果実を寒色の青い背景で引き立てる、明るく爽やかな配色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#216BDA` | ブランドを代表する青空ブルーの地 | 15% | 画素の実測 | | `secondary` | `#3DB5EC` | 特長セクションなどに使う明るいスカイブルー | 10% | 画素の主要色に補正 | | `cta` | `#FCC40C` | モバイルオーダーなど主 CTA の黄色 | 3% | 画素の実測 | | `on-cta` | `#FEFFFD` | CTA 上の白い文字 | 0% | 画素の主要色に補正 | | `background` | `#D9F2F9` | ラインナップの淡い水色の地 | 12% | 画素の実測 | | `background-alt` | `#FBF4DB` | トッピングセクションのクリーム色の地 | 6% | 画素の実測 | | `surface` | `#FEFEFE` | 価格カード・ボタンの白い面 | 6% | 画素の実測 | | `accent-1` | `#04ABF7` | 英字見出しの水色 | 1% | 画素の実測 | | `accent-2` | `#B8862E` | 価格数字のゴールド | 0% | 推定 | | `accent-3` | `#FEBA29` | 別商品の告知に使うオレンジのグラデーション | 8% | 画素の主要色に補正 | | `marker` | `#FED433` | 見出しの下に敷く黄色マーカー・黄文字 | 1% | 画素の実測 | | `text` | `#6B4E1E` | 白地に置く茶色の文字 | 1% | 推定 | | `dark-section` | `#00AFFF` | シェア・フッターの鮮やかな青 | 7% | 画素の実測 | | `on-dark` | `#FEFFFD` | 青い地に置く白文字 | 2% | 画素の主要色に補正 | | `on-cta-accessible` | `#316100` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#117CAD` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#037CB3` | AA を満たす補正値（計算） | | 計算 | - 地は青のグラデーション（濃い→淡い）を基本にする。商品の一覧は淡い水色、トッピングはクリーム色に切り替える - 果実の黄色・オレンジは写真と CTA に集め、青との補色関係で目を引く - 青い地の上の文字は白にする。白い地のカードの文字は茶色、価格はゴールド - 英字の大見出しは水色の細い線で書き、小見出しは同じ色の和文を添える - 見出しの強調は黄色の文字と、下に敷く半透明の帯で行う - 別商品の告知はオレンジのグラデーションの地で区切る - `button-primary` は文字 `#FEFFFD` × 背景 `#FCC40C` のコントラスト比が 1.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#316100`、4.59:1）を使う。 - `button-secondary` は文字 `#3DB5EC` × 背景 `#FEFEFE` のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#117CAD`、4.62:1）を使う。 - `share-buttons` は文字 `#04ABF7` × 背景 `#FEFEFE` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#037CB3`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの英字コピー・日付 | 欧文サンセリフ | Montserrat | 300 | 48px | 1.1 | 0.02em | | `headline-lg` | セクションの英字大見出し | 欧文サンセリフ | Montserrat | 300 | 44px | 1.1 | 0.03em | | `headline-md` | キャッチコピー・特長の見出し | 明朝 | Shippori Mincho | 700 | 26px | 1.4 | 0.05em | | `headline-sm` | 英字見出しに添える和文・商品名 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.4 | 0.15em | | `body-md` | 中央揃えの本文 | 明朝 | Noto Serif JP | 600 | 14px | 2.0 | 0.05em | | `accent` | 特長の番号・価格の数字 | 欧文サンセリフ | Montserrat | 300 | 44px | 1.0 | 0.0em | | `note` | 注釈・アレルギー表記 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.08em | - 英字見出しは細い字（weight 300）を大きく置き、下に和文を小さく添える - 本文と商品名は明朝にして、品のある印象を残す - 本文は中央揃えにし、短く改行する - 番号や価格は細い欧文で大きく見せる - 注釈だけゴシックで小さく書く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品の一覧は写真と円形カードを左右交互に並べる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算） - セクションの上部に英字見出しを中央揃えで置き、余白を広く取る - 商品写真と円形の価格カードは左右交互に重ねて配置する - 特長の番号は左右に伸びる細い横線で挟む - 見出しブロックの下にも細い横線を引いて本文と分ける - 写真は全幅で使い、端で切れてもよい ## Elevation & Depth - CTA ボタンには下方向にやわらかい影をつける - 白いボタン・シェアボタンは影を薄くして浮かせる - 商品のカップ写真に落ち影をつけて立体感を出す - 円形カードは影を使わず、細いゴールドの縁取りにする ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は背景を切り抜いて置く。シズル写真は全幅で、端で切れる配置にする - **セクション境界**: ゆるい波形・弧形のカーブで区切る - 価格カードは真円にし、白地に細いゴールドの線で縁取る - ボタンは角丸 12px 程度の長方形 - 告知枠は四隅にドットのある二重線の額縁にする - トッピングのカードは上の角が四角、下の角が丸い白い面にする ## Components - **モバイルオーダー CTA**（`button-primary`）: 黄色の角丸の面。上に太い英字と LINE アイコン、下に白いパネルを入れて先行発売の日付を見せる - **白い詳細ボタン**（`button-secondary`）: 白い角丸のボタン。文字は青またはオレンジにし、薄い影をつける - **円形の価格カード**（`price-circle`）: 白い真円に細いゴールドの縁取り。シリーズ名、商品名（明朝）、サイズ、ゴールドの価格を縦に並べる - **英字の大見出し**（`section-title`）: 水色の細い英字を大きく置き、下に和文の小見出しを添える - **特長の番号**（`feature-number`）: 白い細字の数字を左右の細い横線で挟む。下に黄色の文字と帯で見出しを入れる - **マーカーの見出し**（`marker-heading`）: 黄色または茶色の明朝の見出しの下に、半透明の帯を敷く - **額縁の告知枠**（`frame-banner`）: 半透明の青い面に白い二重線と四隅のドットで額縁を作り、中に白いボタンを置く - **SNS シェアボタン**（`share-buttons`）: 青い地に白い角丸ボタンを 2 つ横に並べ、アイコンと文字を入れる。上に斜線で挟んだ見出しを置く ## Do's and Don'ts **Do** - 果実・しぶき・氷のシズル写真を大きく使い、余白を広く取る - セクションは波形の境界と地の色の切り替えでテンポよく区切る - 英字見出しは細い字にして軽さを出す - 本文は白抜きの明朝で中央揃えにする - 価格は円形カードにゴールドの数字で見せる **Don't** - 黒や濃いグレーの地を使わない - 英字見出しに太い字を使わない - セクションの境界を直線だけにしない - 価格を赤い目立つ数字にしない - 文字を詰め込みすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新商品と発売日を伝える）: 果実が舞う中にドリンクを置いた合成写真を全幅で使う。縦書きのコピー、細い英字の商品名と日付を置く 2. **先行注文の CTA**（モバイルオーダーへ誘導する）: 青い地に黄色の大きな CTA カードを置く 3. **コンセプト**（味の魅力を短い言葉で伝える）: 青いグラデーションの地に、黄色の明朝コピーと白い本文を中央揃えで置く。周りに果実が舞う。下端は弧形 4. **ラインナップ**（商品と価格の一覧）: 淡い水色の地に葉の影を入れる。カップの写真と円形の価格カードを左右交互に並べる 5. **注意事項**（アレルギー情報へのリンクと注釈）: 白い文字でリンクに下線を引き、注釈を小さく書く 6. **特長**（果実と茶葉のこだわりを伝える）: 英字の大見出しの下に、写真・番号・黄色の見出し・本文のセットを 2 つ並べる 7. **期間限定トッピング**（追加のトッピングを紹介する）: クリーム色の地に、白いカードと果肉の写真、手書き風の英字を添えた見出しを置く 8. **BGM の告知**（関連コンテンツへ誘導する）: 光のボケが入った青い地に額縁の枠を置き、中に白いボタンを入れる 9. **別商品の告知**（同時期の別シリーズを紹介する）: 粒子感のあるオレンジのグラデーションの地に、白線のロゴ、日付、商品写真、白いボタンを置く 10. **シェア・フォロー**（SNS で広めてもらう）: 鮮やかな青の地に、シェアボタン 2 つ、セリフ体の英字見出し、SNS アイコンを並べる 11. **フッター**（注釈とコピーライト）: 注釈を白い小さな文字で書き、白い地にロゴとコピーライトを置く ## Imagery - マンゴーの角切り・オレンジ・パッションフルーツが空中に舞う合成写真 - 水しぶきと氷を入れ、背景はボケた光の水色にする - カップは切り抜いて落ち影をつけ、少し傾けて置く - 淡い地には葉の影を薄く重ねる - 黄色・オレンジの地は紙のような粒子のテクスチャにする - 茶葉や葉の線画のイラストを添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はない。PC では中央 480〜600px の SP のカラムを保ち、両側を青いグラデーションで埋めることを推奨する - PC に広げる場合、ラインナップは 2〜4 列のカードにしてもよい - シズル写真は全幅で使い、高さは抑える - 英字見出しは PC で 64〜80px に拡大する ## 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-c8685d96`（元 LP の URL から採番） - **元 LP**: https://campaign.gongcha.co.jp/tropical-fruits-2026/index.html?_gl=1*mgzm83*_gcl_au*MTU1ODc5MDAzNy4xNzgzOTMxNDQw*_ga*OTQ1NzE2Nzk3LjE3NTY4OTAwNzQ.*_ga_F4SYD729GY*czE3ODQ3MDg1ODIkbzIwJGcxJHQxNzg0NzA4NTgyJGo2MCRsMCRoMA..&_ga=2.178330605.891537610.1784623617-9 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。