DESIGN.md — 黄色チェック×紺見出しの旅行キャンペーンLP（Bright Yellow Plaid Travel Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、親しみ・手作り感
• キーワード: 黄色チェック・白カード・紺の太字・期ごとの色分け・イラスト人物・キャンペーン告知
• 地の質感: 黄色のトーン違いで描いた斜めチェック柄、黄緑の方眼柄
• 形: 角丸の白カード、左側の水色ラベル帯、楕円の赤ボタン
• 温度感: 明るく暖かい

Colors

• ページの地は黄色2トーンのチェック柄にし、情報は白カードに載せる
• 数字・日付・見出しは紺の太字で強く見せる
• CTAは赤い楕円ボタンだけにし、他の要素に赤を使わない
• 応募期はピンク・水色・オレンジ・紫の4色で枠線と帯を色分けする
• 利用方法と個人情報のパートは黄緑の方眼地で区切る
• 注釈は灰色の小さい文字にし、赤は注意喚起に少しだけ使う
• headline-band は文字 #FFFFFF × 背景 #FF99B3 のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#ED003C、4.5:1）を使う。

Typography

• 数字は単位より2倍ほど大きく組み、単位は小さく添える
• 日付の曜日は丸囲みにする
• 見出しは紺の太字にして装飾は入れない
• 注釈は※から始め、本文より2〜3px小さくする
• 長い本文も13px以下にはせず、行間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC はラベル帯＋本文の2分割、期とロゴは4列グリッド）
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 16px、基本単位 8px、カード内 16px（375px 幅換算）
• 情報カードは縦に詰めて並べ、カード間は12〜16pxあける
• PCではカード左に水色ラベル帯、右に内容を置く
• 応募期4つは横並び（SPは2×2）にする
• 利用ステップは番号付きの3カラムにする（SPは縦積み）
• ロゴ一覧は白い枠のグリッド（SPは2列）にする

Elevation & Depth

• 白カードには影を薄く付け、地から浮かせる
• ボタンにも影は少しだけ付ける
• 基本はフラット

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物イラストは切り抜いて背景に散らす。ロゴは白い矩形に入れる
• セクション境界: 直線で背景を切り替える（黄チェック→黄緑方眼）
• カードは角丸8px
• ボタンは楕円か完全なピル型にし、右端に丸矢印アイコンを付ける
• 賞品の数量は×記号でつなぎ、四角枠に入れる
• 左のラベル帯はカード内で左側の角だけ丸める

Components

• 応募ボタン（button-primary）: 赤いピル型ボタン。白い太字の1行目の下に小さな補足を入れ、右に丸矢印を付ける
• リンクボタン（button-secondary）: 紺か濃緑のピル型ボタン。白文字で右に矢印を付ける
• ラベル付き情報カード（info-card）: 白カードの左側に水色のラベル帯を置き、小さい見出しと太い項目名を入れる
• 賞品の数量ボックス（prize-box）: 淡い黄の枠に金額×当選人数を大きな数字で並べる
• 応募期カード（period-card）: 期ごとの色の枠と上部の帯に期番号を入れ、日付を大きく、締切を小さく書く
• 番号ステップカード（step-card）: 黄緑地の上の白カードに大きな緑の数字、説明文、線画イラストを入れる
• 見出し帯（headline-band）: ピンクまたは緑の帯に白文字を入れ、要項や注意の始まりに置く
• 吹き出し（speech-bubble）: 白い楕円の吹き出しに紺の短いコピーを丸ゴシックで入れる
• ロゴ一覧グリッド（logo-grid）: 白い矩形にロゴと小さい会社名を入れて格子状に並べる

Do's and Don'ts

Do - 日付・金額・人数は紺の極太で大きく見せる - 情報は必ず白カードにまとめ、黄色の地の上へ直接文章を置かない - 期や区分は色分けし、凡例のように揃える - 人物イラストを余白に散らして旅行の楽しさを出す - 応募CTAはFVと要項内の両方に置く

Don't - 黄色の地に灰色の細い文字を載せない - 写真を全面に敷いて黄色チェックの印象を消さない - 赤をCTA以外で多用しない - 明朝体などで高級感に寄せない - カードの角を尖らせたり、影を濃くしたりしない

Page Structure

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

1. ファーストビュー（キャンペーン名と趣旨を伝える）: 黄チェック地の中央に淡い黄の楕円を置き、紺と赤の大タイトルを入れる。周りに旅行者のイラストを散らし、右下に応募ボタンを置く
2. 賞品の訴求（当たる金額を一目で見せる）: 紺の極太数字で横一行に置き、白い縁取りで目立たせる
3. 応募対象・賞品（条件と賞品数を示す）: ラベル付きの白カードを縦に並べ、賞品は数量ボックスに入れる
4. 対象期間・カレンダー（対象となる日を示す）: 大きな日付と、月ごとに色を変えたカレンダーを横スライドで見せる
5. 応募期（締切を区別して見せる）: 4色の期カードを横に並べる
6. 応募要項（応募方法・当選通知を詳しく伝える）: ピンクの帯見出しの白カードに丸アイコン見出しと表を入れ、中に応募ボタンを置く
7. 利用方法（クーポンの使い方を説明する）: 黄緑方眼地に緑の注意帯を置き、番号付き3ステップカードを並べる
8. 個人情報の取り扱い（規約を示す）: 箇条書きの小さい文字と、濃緑のリンクボタン
9. 問い合わせ・主催（連絡先と主催団体を示す）: 白カードに大きな電話番号を入れ、その下に団体ロゴと説明、紺のボタンを置く
10. 参加企業一覧（対象会社を見せて信頼を得る）: 白いロゴタイルのグリッド
11. フッター（協賛を表示する）: クリーム地の中央にロゴを置く

Imagery

• 旅行者・家族・自転車・車・スーツケースのフラットなイラスト。輪郭線は細くし、彩度は中くらい
• 紙飛行機や点線の軌跡で動きを出す
• ステップには線画の人物とスマホやPCのアイコンを使う
• 背景は黄色2トーンの斜めチェック柄
• 写真はほぼ使わず、イラストとロゴで構成する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは、ラベル帯をカードの上部に横帯として置く
• SPでは、期カードを2×2に並べる
• SPでは、ステップカードを縦積みにする
• SPでは、ロゴグリッドを2列にする
• SPでは、FVイラストを減らしてタイトルを画面幅の90%にする
• SPでは、カレンダーを1か月ずつ横スワイプで見せる

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