DESIGN.md — ネオン×ロイヤルブルーの海外旅行キャンペーンLP（Neon Night Market Travel Campaign LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: ネオン看板・夜市・ロイヤルブルー・ピンク帯・中華風額縁・切り抜き人物
• 地の質感: FVは暗い夜景とネオン発光のコラージュ。以降はフラットな単色面に写真と細線の額縁を乗せる
• 形: ピル型の見出し帯、黒い正円バッジ、角丸の写真カード、角が欠けた中華風細線フレーム
• 温度感: 高彩度でにぎやか。青の冷たさをピンクと紫のグラデで温める

Colors

• 青地→白地→ピンク地を交互に切り替えてセクションを区切る
• 青地の上の本文は白の太字で中央揃え
• 見出し帯は紫→青の横グラデーションに白文字
• ネオン感は暗色背景の上だけでピンク・水色の発光で表現
• 表の見出し色は往路を水色、復路をミントで色分けする
• キャンペーン枠は紫→青のグラデ地で締める
• number-circle は文字 #396DF9 × 背景 #FFFFFF のコントラスト比が 4.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#376BF9、4.53:1）を使う。
• campaign-banner は文字 #FFFFFF × 背景 #396DF9 のコントラスト比が 4.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#376BF9、4.53:1）を使う。

Typography

• 本文は短い行で改行し全て中央揃え
• 本文は細字を使わず太字中心
• ロゴ見出しはネオン縁取りの画像で表現しテキストと分ける
• 数字の強調（所要時間など）は大きく青色にする
• 字間はやや広めで軽快に
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、特長の入口のみ 3 列の丸バッジ
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 12px（375px 幅換算）
• 各セクションはロゴ見出し＋番号丸＋見出し帯の3段で始める
• 人物切り抜きを見出し横に重ねて区切りをまたがせる
• 動画は縦長サムネを中央に置き額縁ラベルと縦線でつなぐ
• 写真は2×2のコラージュを1枚の角丸カードにまとめる
• ロゴ一覧は白い矩形タイルを2〜3列で並べる

Elevation & Depth

• 影はほぼ使わずフラットに構成
• ネオン部分のみ外側グローで発光感
• ロゴタイル・表は影なしの白面

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は切り抜き、風景・料理は角丸矩形コラージュ
• セクション境界: 直線で地色を切り替え、人物写真が境界をまたぐ
• 見出し帯は両端に装飾点のあるピル型
• 特長入口は黒い正円に白縁
• 額縁は四隅が中華風に欠けた細線
• 写真カード中央に白い円形CHECKリング

Components

• ネオン看板見出し（neon-logo-heading）: 暗色の装飾額に入ったピンク・水色発光の見出し画像
• 中華風額縁ラベル（chinese-frame-label）: 四隅が欠けた細線枠に小見出しを入れ下に吹き出しの尖り
• 黒丸特長バッジ（circle-badge）: 黒い正円に小ロゴ・番号・2行の特長を入れ3つ並べ下に点線矢印
• グラデ見出し帯（gradient-pill-band）: 紫→青のピル帯に白太字、下に小さな三角
• 番号丸（number-circle）: 青線の小さな円に数字
• コラージュ写真カード（photo-collage-card）: 4枚の写真を角丸カードにまとめ中央にCHECKリングボタン
• フライト表（schedule-table）: 色帯の路線見出し＋会社ロゴ・便名・時刻・矢印・曜日の行
• ロゴタイル（logo-tile）: 白い矩形にリンク先ロゴを中央配置
• キャンペーンバナー（campaign-banner）: 角丸の大型バナーに白ピルの詳しくはボタン

Do's and Don'ts

Do - 地色を青・白・ピンクで交互に切り替える - 人物モデルの切り抜きを各セクションに配置する - ネオン表現は暗色背景の上に限定する - 本文は短く改行して中央揃えの太字にする - 実用情報は白いカードと表で読みやすく整える

Don't - 淡いくすみ色やモノトーンで落ち着かせない - 明朝体や細字で上品に寄せない - 写真に強い影や立体枠を付けない - 見出し装飾を省きプレーンな見出しにしない - 表を色分けせず一色にしない

Page Structure

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

1. ファーストビュー（旅先の高揚感を一目で伝える）: 夜景・料理・ネオン看板のコラージュに民族衣装の人物とネオン見出し
2. 動画紹介（短尺動画で魅力を伝える）: 青地に額縁ラベルと縦長動画サムネを縦に並べ再生リング
3. 導入メッセージ（旅に出る理由を提案）: 白太字の短文を中央揃えし再度ネオン見出し、両脇に人物
4. 特長の目次（3つの魅力を予告）: 黒丸バッジ3つを横並び、下に点線矢印
5. 特長1 アクセス（近さを数字で示す）: ピンク地に地図イラスト、飛行機と点線ルート、白吹き出しの所要時間
6. 特長2 見どころ（観光の楽しさを伝える）: 見出し帯＋短文＋観光写真コラージュカード
7. 特長3 グルメ（食の魅力を訴求）: 見出し帯＋短文＋料理写真コラージュカード
8. フライトスケジュール（具体的な便を確認させる）: 飛行機柄の青地に白い表、期間タブと色分け路線見出し
9. 航空券・ツアーリンク（予約先へ送客）: 雲柄の淡水色地に白いロゴタイルを並べる
10. キャンペーン（特典で行動を後押し）: 紫→青グラデ地にピンク帯見出しと大型バナー群
11. フッター（運営情報とSNS導線）: 濃紺地に白ロゴとSNSアイコン

Imagery

• 民族衣装の女性モデルが笑顔やポーズを取る切り抜き写真
• 夜市や街並みの夜景、ネオン看板の高彩度写真
• 料理・スイーツの寄り写真
• 白い簡略地図と飛行機イラスト、点線ルート
• 中華風の雲、額縁、飛行機を地紋として散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せの約900px幅で、地色は全幅
• PCのFVは横長で、見出しを左・人物を右に配置
• 動画サムネはPCで2本横並び
• 本文の改行が減り1行が長くなる
• キャンペーンバナーはPCで下段2列

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