--- version: alpha name: Taiwanese Floral Turquoise Drink Launch LP description: ターコイズの地に台湾の花柄（牡丹）と金の中華枠をあしらい、エンジ色と生成りの明朝で華やかに見せる新作ドリンク告知LP。後半は赤いカーテンのキャンペーン、生成りグラデの参加方法、白カードの季節メニューへと地の色が切り替わる。 colors: primary: '#74D2D4' secondary: '#C20131' background: '#FEFEFE' background-alt: '#F1FBFC' tint-1: '#F3E1BD' surface: '#F8F4EB' cta: '#C10130' on-cta: '#FFFFFF' accent-1: '#BD9040' accent-2: '#FE8CB3' marker: '#FDF37C' on-primary: '#FEEFE8' text: '#3A2A26' accent-3: '#C4E364' accent-2-accessible: '#EA0251' typography: display: fontFamily: Playfair Display fontSize: 56px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Playfair Display fontSize: 44px fontWeight: 700 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.7 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 32px full: 999px spacing: unit: 8px card: 24px 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: 52px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 56px line-order-banner: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 120px award-card: backgroundColor: '{colors.secondary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 480px tier-card: backgroundColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 120px step-label: textColor: '{colors.secondary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 24px heading-slash: textColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 32px price-table: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 140px share-button: textColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 76px --- # DESIGN.md — ターコイズ×台湾花柄の新作ドリンクLP（Taiwanese Floral Turquoise Drink Launch LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: かわいい、上品・高級、ポップ・元気、情報量多め・訴求型 - **キーワード**: ターコイズ・台湾花柄・金の中華枠・エンジ・明朝体・シズル写真 - **地の質感**: 平塗りのターコイズに、ぼかした花柄写真を重ねる。金線の中華格子や菱形模様を装飾に使う - **形**: 角丸カード、中華風アーチ型の窓、菱形の連続ライン、ウェーブ境界 - **温度感**: 明るく甘い暖寒ミックス。ターコイズの涼しさとピンク・エンジの温かさ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#74D2D4` | ブランド地色ターコイズ | 30% | 画素の実測 | | `secondary` | `#C20131` | エンジ（受賞枠・見出し） | 8% | 画素の実測 | | `background` | `#FEFEFE` | 白カード地 | 13% | 画素の実測 | | `background-alt` | `#F1FBFC` | 特長パネルの淡ミント地 | 9% | 画素の実測 | | `tint-1` | `#F3E1BD` | キャンペーン詳細の生成りグラデ地 | 9% | 画素の実測 | | `surface` | `#F8F4EB` | 参加方法ボックス地 | 3% | 画素の実測 | | `cta` | `#C10130` | 主CTA（エンジ） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#BD9040` | 金の中華枠・英字見出し | 1% | 画素の実測 | | `accent-2` | `#FE8CB3` | LINE誘導ピンク | 1% | 画素の実測 | | `marker` | `#FDF37C` | 強調の黄色数字 | 0% | 画素の実測 | | `on-primary` | `#FEEFE8` | ターコイズ上の生成り大見出し | 1% | 画素の実測 | | `text` | `#3A2A26` | 本文の濃茶 | 2% | 推定 | | `accent-3` | `#C4E364` | 季節メニューの若草 | 1% | 画素の実測 | | `accent-2-accessible` | `#EA0251` | AA を満たす補正値（計算） | | 計算 | - 地色はターコイズを基本にし、セクションごとに淡ミント・生成り・赤に切り替える - エンジは受賞・見出し・主CTAに限り、面で使うのは要所だけにする - ターコイズの上の大見出しは生成り色の明朝で入れる - 金色は中華格子の枠、英字ラベル、区切り線に使う - 黄色はターコイズや赤の上で強調する数字や語句にだけ使う - 季節メニュー枠は生成りから若草へのグラデで別世界観にする - `line-order-banner` は文字 `#FFFFFF` × 背景 `#FE8CB3` のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#EA0251`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字セクション大見出し | 欧文セリフ | Playfair Display | 400 | 56px | 1.1 | 0.0em | | `headline-lg` | コンセプト・特長の和文見出し | 明朝 | Shippori Mincho | 800 | 28px | 1.4 | 0.05em | | `headline-md` | 商品名・小見出し | 明朝 | Noto Serif JP | 700 | 20px | 1.4 | 0.03em | | `headline-sm` | キャンペーン小見出し（斜線つき） | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.4 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 14px | 1.9 | 0.03em | | `accent` | 価格・日付の数字 | 欧文セリフ | Playfair Display | 700 | 44px | 1.1 | 0.0em | | `note` | 注釈 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | - 見出しは明朝体で入れ、生成り色かエンジ色にする - 英字の大見出しの下に、和文の小さな訳を中央揃えで添える - コンセプト文は縦書きにし、キーワードを黄色で強調する - 数字は欧文セリフで大きく、曜日は小さく添える - 小見出しの左右に斜線を2本ずつ置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（ラインナップは写真と文字を左右交互に配置） - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 中央揃えを基本にする - カードは左右約7%の余白を取って置く - セクション見出しの上に花柄写真を半分はみ出させる - 商品写真は左右交互に置き、下に菱形の台座線を敷く - 段階プレゼントは横長カードを縦に並べ、▼でつなぐ ## Elevation & Depth - 白・ターコイズのカードに柔らかいドロップシャドウ（0 4px 12px 程度、薄め） - CTAボタンの下に濃色の影を落とす - 受賞枠はフラットにし、白の二重線で縁取る ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 32px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は切り抜き。食感写真は中華風アーチ窓の形に切り抜き、金の縁を付ける - **セクション境界**: 中華アーチ型の上辺、菱形の連続模様の帯、ゆるいウェーブ - ボタンは角丸12px前後の長方形 - 特長パネルは上下を中華アーチ型にする - 金の中華格子コーナーで囲う額縁をコンセプト部分に使う - 日付ラベルなどの小ラベルは円形バッジにする ## Components - **エンジCTA**（`button-primary`）: 公式SNSなどへの主ボタン。幅広の角丸で影付き - **白サブボタン**（`button-secondary`）: ターコイズ地の上に置く白ボタン。文字はエンジで、外部リンクアイコン付き - **LINE注文バナー**（`line-order-banner`）: ピンクの角丸面の中に白い先行発売日の帯を入れたバナー - **受賞カード**（`award-card`）: エンジの角丸面に白線の飾り枠。リボンのエンブレムと月桂樹付きの順位を入れる - **段階プレゼントカード**（`tier-card`）: ターコイズの横長カード。左に黄色の大きな数字、縦線の右に特典名と写真 - **STEPラベル**（`step-label`）: 細い枠線の小さな角丸ラベルで手順番号を示す - **斜線つき小見出し**（`heading-slash`）: 見出し語の左右に二重斜線を置く - **サイズ価格表**（`price-table`）: 淡グレーの枠にS/M/Lの丸アイコン。ICEDは青、HOTは赤で示し、Mを大きく太くする - **シェアボタン**（`share-button`）: 淡ピンクの角丸ボタン。アイコン付きで2つ横に並べる ## Do's and Don'ts **Do** - ターコイズ地に、ぼかした牡丹の花柄写真を画面端に散らす - 大見出しは英字セリフと和文訳の2段で組む - 台湾らしさは金の中華格子・菱形模様で出す - 商品はシズル感のある切り抜き写真で大きく見せる - キャンペーン部はセクションの地色を赤や生成りに切り替え、メリハリを付ける **Don't** - エンジを広い面に多用しない（受賞・キャンペーン以外） - 見出しをゴシックだけで組まない - 黒や濃紺の重い地色を使わない - 装飾の金を太く派手にしない - 花柄を本文の背後に重ねて可読性を落とさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新商品と発売日を印象づける）: ターコイズと花柄の背景に商品写真を大きく置く。明朝ロゴ、縦書きコピー、セリフ体の発売日を添える 2. **先行注文誘導**（LINEからの先行注文を促す）: ピンクの角丸バナーに白帯で日付を入れ、下に小さな案内文を置く 3. **コンセプト**（商品の世界観を伝える）: 金の中華格子の額縁に菱形の英字ラベルを付け、縦書き本文とシズル写真を入れる 4. **受賞実績**（人気投票1位で信頼を示す）: エンジの受賞カードの下に説明文と白サブボタンを置く 5. **ラインナップ**（商品と価格を見せる）: 英字大見出しの下に、切り抜き写真と黒楕円ラベル・商品名・大きい価格を左右交互に並べる 6. **特長**（構成と食感を説明する）: 中華アーチ型の淡ミントパネルに、層構造のイラストと引き出し線を入れる。食感写真2枚はアーチ窓で見せる 7. **SNSキャンペーン**（SNS投稿の参加を促す）: 赤いカーテン・スポットライト・紙吹雪の背景に、手書き風の白見出しと黄色の説明文を置く 8. **特典と参加方法**（特典と手順を示す）: 生成りグラデ地に実施日バッジ、段階カード、注釈、STEP付きボックス、エンジCTAを並べる 9. **季節のおすすめ**（他の商品で回遊させる）: 若草グラデ地の白カードに吹き出しラベル・線画ロゴ・価格表・Check見出しを入れる 10. **第2キャンペーン**（期間限定の抽選を告知する）: ターコイズ地の白カードに期間バッジ、STEPボックス、ターコイズのCTAを置く 11. **シェア・フォロー・注釈**（拡散と締めくくり）: シェアボタン2つ、罫線つきの英字見出し、SNSアイコン、白文字の注釈を置き、白地のフッターで終える ## Imagery - 商品はやや俯瞰の切り抜きにし、トッピングの層が見える明るいライティングで撮る - 台湾の伝統的な牡丹・花柄の布や陶器を背景に、浅い被写界深度でぼかす - 食材（豆花・パール）は寄りのシズル写真で艶を強調する - 構成説明はフラットなイラストに細い引き出し線を付ける - キャンペーンは赤いカーテン・スポットライト・金の紙吹雪で祝祭感を出す - 季節メニューは黒の細い線画イラストと水彩風の花を添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に最大 480〜600px 幅の SP レイアウトを置き、左右はターコイズと花柄の背景で埋める - ラインナップと段階カードは PC で 2〜3 カラムにしてよい - 英字の大見出しは PC で 80px 前後まで拡大する - 縦書きのコンセプト文は 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-ee3b33dd`（元 LP の URL から採番） - **元 LP**: https://campaign.gongcha.co.jp/taiwan-toufa-pearl-2025/index.html?_gl=1*4htyhc*_gcl_au*MTQwNzY0ODE0My4xNzU2ODkwMDc0*_ga*OTQ1NzE2Nzk3LjE3NTY4OTAwNzQ.*_ga_F4SYD729GY*czE3NjIyNDU1MzEkbzUkZzEkdDE3NjIyNDU1MzEkajYwJGwwJGgw&_ga=2.186118377.197493.1762245532-94571 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。