DESIGN.md — ターコイズ×台湾花柄の新作ドリンクLP（Taiwanese Floral Turquoise Drink Launch LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 食品・飲料 ／ 雰囲気: かわいい、上品・高級、ポップ・元気、情報量多め・訴求型
• キーワード: ターコイズ・台湾花柄・金の中華枠・エンジ・明朝体・シズル写真
• 地の質感: 平塗りのターコイズに、ぼかした花柄写真を重ねる。金線の中華格子や菱形模様を装飾に使う
• 形: 角丸カード、中華風アーチ型の窓、菱形の連続ライン、ウェーブ境界
• 温度感: 明るく甘い暖寒ミックス。ターコイズの涼しさとピンク・エンジの温かさ

Colors

• 地色はターコイズを基本にし、セクションごとに淡ミント・生成り・赤に切り替える
• エンジは受賞・見出し・主CTAに限り、面で使うのは要所だけにする
• ターコイズの上の大見出しは生成り色の明朝で入れる
• 金色は中華格子の枠、英字ラベル、区切り線に使う
• 黄色はターコイズや赤の上で強調する数字や語句にだけ使う
• 季節メニュー枠は生成りから若草へのグラデで別世界観にする
• line-order-banner は文字 #FFFFFF × 背景 #FE8CB3 のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#EA0251、4.54:1）を使う。

Typography

• 見出しは明朝体で入れ、生成り色かエンジ色にする
• 英字の大見出しの下に、和文の小さな訳を中央揃えで添える
• コンセプト文は縦書きにし、キーワードを黄色で強調する
• 数字は欧文セリフで大きく、曜日は小さく添える
• 小見出しの左右に斜線を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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。