DESIGN.md — ミント×ティールのTVタイアップ旅行LP（Mint Teal TV Tie-up Travel Itinerary LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型
• キーワード: ミント地・ティール帯見出し・斜めストライプ・タイムライン・吹き出しコメント・TV番組タイアップ
• 地の質感: 淡いミント地に白の斜めストライプを敷いた軽い質感。写真以外はフラット。
• 形: 角の小さい白カード、両端が切り欠きのリボン型見出し、ピン・徒歩アイコン付きの縦線。
• 温度感: 爽やかで明るい。FV のみピンクと黄で賑やか。

Colors

• 地はミント、内容は白カード、補助ボックスは淡ミントの斜めストライプ。
• セクション見出しはティールのリボン帯に白文字。
• 情報表はラベル青ベタ＋値セル淡青で統一。
• 黄色はティール面上の強調語と申込見出しのマーカーのみ。
• ピンク・黄の派手色は FV とバナーに限定する。
• button-primary は文字 #FFFFFF × 背景 #13BCBC のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#0D8484、4.52:1）を使う。
• stripe-card は文字 #289890 × 背景 #F3FCFD のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#228079、4.55:1）を使う。

Typography

• 本文はゴシック 12px 前後で密度高め。
• 見出しは太字ゴシック、帯の上は白。
• FV のみ極太ポップ体に白フチと影を付ける。
• 注釈・表は 9〜10px の小さい文字。
• 吹き出しは丸ゴシックで口語調。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、チケット・おすすめは PC で 2〜3 カラム
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算）
• 白カードは左右 3% 程度の余白で画面幅いっぱい。
• モデルコースは縦線タイムラインで駅→移動→スポットを繰り返す。
• スポット写真は幅約 65% で左寄せ。
• 情報表はラベル列幅約 40px の 2 列表。
• 見出し帯は中央寄せで上下に 24px 前後の余白。

Elevation & Depth

• 基本はフラットで影なし。
• 番組紹介内のティールボックスは白フチと薄い影で浮かせる。
• 申込ボタンは白フチ＋小さな影。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。FV の写真のみ角丸や円形切り抜き。
• セクション境界: 直線。白カードとミント地の境界のみ。
• 見出しは両端がV字に切れたリボン帯。
• 吹き出しは角丸長方形にティール線。
• ボタンは小角丸の長方形で右に「>」。
• タブは上辺直線、選択タブはティールベタ。

Components

• リボン帯見出し（ribbon-heading）: 両端V字切り欠きのティール帯に白太字。セクション冒頭中央。
• 申込ボタン（button-primary）: ティールのグラデ長方形、白フチと右矢印。2 個横並び。
• 駅ピン付きタイムライン（timeline-stop）: 青ピン＋駅名、青縦線と電車・徒歩アイコンで所要時間を表示。
• アクセス・営業時間表（info-table）: 青ベタのラベルセルと淡青の値セルの 2 列表。
• 出演者コメント吹き出し（comment-bubble）: 小さなロゴアイコン横の白い角丸吹き出しで感想 2 行。
• チケット対象バッジ（badge-ticket）: スポット名横の紺ベタ小バッジで利用可能を示す。
• コース切替タブ（course-tabs）: 2 タブ。選択中はティールベタ白文字、他は淡ミント。
• ストライプ見出しカード（stripe-card）: 淡ミント斜めストライプのタイトル帯＋白本文とリンク。
• 注意事項枠（notice-box）: ティール線の白枠、中央見出しリンクと箇条書き。

Do's and Don'ts

Do - 地はミント、内容は白カードで統一。 - 見出しは必ずティールのリボン帯にする。 - スポットは写真→名前→説明→吹き出し→表の順。 - 移動は縦線とアイコンで所要時間を書く。 - 強調色の黄はティール面上だけに使う。

Don't - ピンクを本文域の見出しやボタンに使わない。 - 影やグラデを多用しない。 - 写真に大きな角丸を付けない。 - 情報表の色分けを崩さない。 - 暗い背景のセクションを作らない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（タイアップ企画と行き先を伝える）: ミントのストライプ地に雲型白面、ピンク×黄の極太ロゴ、四隅に観光写真。
2. アンカーナビ（各セクションへ移動）: ティール帯に白文字 4 項目を縦線区切り。
3. 番組紹介（番組と放送枠を説明）: TVモニター型ロゴ図、ストライプボックスに放送日時と説明、ティールボックスで今回の企画。
4. モデルコース（旅程と観光スポットを紹介）: 凡例2行→タブ→白カード内に駅ピンのタイムライン、写真と情報表。
5. 注釈（情報時点や料金範囲を明記）: ※付き小文字の箇条。
6. 申込 CTA（プラン申込へ誘導）: ストライプボックスに黄マーカー見出しとティールボタン 2 個。
7. デジタルチケット紹介（現地で使えるチケット紹介）: リボン見出し＋サブコピー、ストライプ見出しカードを並べる。
8. キャンペーン情報（特典で後押し）: 派手なバナー画像と説明文を縦に並べる。
9. 会員登録の注意（購入条件を案内）: ティール線の白枠に箇条書き。
10. その他おすすめ（関連企画へ回遊）: バナー 3 枚を横並び。

Imagery

• 観光地・グルメの明るい晴天写真、彩度高め。
• 写真右下に小さく撮影クレジット。
• グルメは寄りで湯気や照りを見せる。
• FV 写真は円や角丸で切り抜き、星キラキラ装飾を添える。
• 電車・バス・徒歩・船の青い単色アイコン。
• キャンペーンはピンク×水色のキャラクター入りバナー。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 約 70% 幅の白カードに収める。
• PC のコースは写真左・説明と表右の 2 カラム。
• チケットカードは PC で 2 列グリッド。
• FV は PC で横長構図にし写真を左右に配置。
• おすすめバナーは両方とも 3 列。

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 行書くと起動時に読み込まれる。