DESIGN.md — ピンク×紺のポップな周遊旅行キャンペーンLP（Pop Pink Multi-City Travel Campaign LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、情報量多め・訴求型、かわいい
• キーワード: ピンク地・白抜き丸ゴシック・紙吹雪・波形区切り・エリア別色分け・カルーセル
• 地の質感: フラットな単色面に、紙吹雪・ガーランド・きらめきのイラストを散らす
• 形: 角丸の白カード、円形アイコン、リボン型見出し、波形のセクション下端
• 温度感: 暖かく華やか。ピンクの熱量を紺で引き締める

Colors

• キャンペーン本体はピンク地。見出しは白抜き、補足は白カードに入れる
• 締めの帯・CTA・番号は紺で統一し、ピンクの甘さを抑える
• 店舗紹介はエリアごとに薄地とボタン色を変える（緑・紫・水色）
• 金額・ポイントの数字は紺かピンクの極太にし、下に黄色マーカーを引く
• 導入文やエリア見出しの間に白地を挟んで、にぎやかさを休ませる
• button-area は文字 #FFFFFF × 背景 #AB61A2 のコントラスト比が 4.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#A75A9E、4.57:1）を使う。
• shop-card は文字 #AB61A2 × 背景 #FEFEFE のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#A75A9E、4.53:1）を使う。

Typography

• タイトルは丸ゴシックの極太。一部をカタカナ風の装飾書体に変えて跳ねさせる
• 数字は本文の2〜3倍に拡大し、単位は小さくする
• エリア名は大きな英字。上に吹き出し型のキャッチ、下に筆記体ではない英字の補足を置く
• 注釈は9px前後で、セクション末尾にまとめる
• 日付は欧文ボールドで、曜日を小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、店舗紹介のみ横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションは全幅の色面で区切る
• 本文ブロックは左右に約16pxの余白を取る
• 手順は大きな番号＋見出し＋右側のイラストの横並び
• カルーセルは中央のカードを大きく見せ、両端を少しはみ出させる
• 各セクションの下端に注釈を左寄せで置く

Elevation & Depth

• 影はほぼ使わず、フラットな色面で階層を作る
• 白カードはピンク地の上に置くだけで浮かせる
• カルーセルの矢印は半透明の白で写真に重ねる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: カード内では角丸なしの横長矩形。ファーストビューは3等分の縦長の切り抜き
• セクション境界: ピンク面の下端を細かい波形にする。その他は直線で切り替える
• ボタンは角丸4〜6pxの横長の長方形
• プランの要素は円形アイコンを＋でつなぐ
• 見出しにはリボン型や吹き出し型を使う

Components

• 詳しくはこちらボタン（button-detail）: 紺の全幅バーの中央に白文字、右端に＋
• エリア色ボタン（button-area）: カード下部に置くエリアカラーのボタン。文字の後に＋
• 特典ポイントカード（point-card）: 白い角丸カードに極太の数字と黄色マーカー。斜めの『もらえる』を添える
• プラン構成アイコン（plan-icons）: 白縁の円アイコンを3つ、＋でつなぐ。下にラベルの帯
• リボン見出し（ribbon-heading）: 薄紫のリボン型帯に、紺の英字ラベルを入れる
• 手順番号（step-number）: 紺の大きな2桁数字の横に白い見出しを並べる
• エリア見出し（area-title）: 吹き出し線付きのキャッチ、大きな英字のエリア名、英字の補足を縦に重ねる
• 店舗カード（shop-card）: 白カードに写真、エリア色の店名、ボタンを縦に並べる
• 紺の告知帯（navy-band）: 全幅の紺帯に白文字2行を中央寄せ
• 注意書きボックス（note-box）: 白い箱に注釈とQRコード。ピンクの小文字の案内を添える

Do's and Don'ts

Do - ピンク地には紙吹雪・ガーランド・きらめきを四隅に散らす - 数字の特典は最大級の文字にしてマーカーを引く - エリアごとに配色を固定し、地・見出し・ボタンを揃える - 手順は番号・見出し・イラストの3点で示す - 注釈はセクション末尾にまとめる

Don't - 写真に濃い影や角丸を付けすぎない - ピンクと紺以外の強い色を本体のセクションに足さない - 明朝体を使わない（ポップさが崩れる） - エリアの色を混ぜて使わない - 装飾を本文の上に重ねて読みにくくしない

Page Structure

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

1. ファーストビュー写真（行き先の魅力を一目で伝える）: 3都市の夜景写真を3等分で並べ、中央に英字の都市名を重ねる
2. キャンペーンタイトル（名称と期間を示す）: ピンク地に白抜きの極太タイトル、電車のイラスト、日付。下端は波形
3. プラン構成（セット内容を示す）: リボン見出しの下に、円アイコン3つを＋でつなぐ
4. 導入コピー（情緒的に旅へ誘う）: 白地に紺の2行コピーと短い説明を中央寄せ
5. 特典ポイント（申込み特典を訴求する）: 紙吹雪のピンク地に白カード。数字は極太。対象期間と紺ボタンを続ける
6. クーポン案内（クーポンの内容を伝える）: ガーランド装飾の上に、カギ括弧付きの大見出しと丸いバッジ
7. 受け取り・利用方法（手順を説明する）: 番号付きの手順、配布場所のリスト、スマホのイラスト、QR付き注意書き箱
8. エリア別店舗（3エリア）（使える店舗を紹介する）: エリア色の薄地、大きな英字見出し、カード型のカルーセル
9. 乗車券案内（関連商品を紹介する）: 紺帯の告知、ピンク見出し、料金表、路線図
10. 注釈（申込みの条件を示す）: 白地に小さい文字で箇条書き

Imagery

• 都市の夜景はブルーモーメントや灯りの写る写真を使い、彩度を高めにする
• 店舗写真は料理・店内を明るく正面から撮った横長写真
• アイコンは紺の線の太いフラットなイラスト（電車・建物・ギフト）
• 紙吹雪・三角旗・きらめきは紺・水色・黄・白のパステル調
• 手順のイラストは手に持ったスマホを灰色の線画で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約1000px幅の内容を置き、色面は全幅のまま
• FV は写真を横長にし、タイトル・日付・プランアイコンを1行の横並びに詰める
• 導入コピーは1行にまとめる
• クーポン手順は左に縦書きラベル、右に内容の2カラム
• カルーセルは同時に4枚見せる

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