DESIGN.md — ティール×白のアニメコラボ鉄道周遊キャンペーンLP（Teal Railway Anime Collaboration Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 情報量多め・訴求型、清潔・爽やか、信頼・誠実
• キーワード: ティール帯見出し・白地・キャラ立ち絵・路線図・マップ・STEP図解・賞品枠カード
• 地の質感: フラットな単色の面と細い枠線。グラデーションや影はほとんど使わない
• 形: 角丸の大きい帯見出し、ピル型ラベル、五角形の矢印型STEPパネル、直角の枠カード
• 温度感: ややクール。ティールと白の爽やかさに、黄色の期間ラベルとオレンジの駅マーカーで温かみを足す

Colors

• 地は白で統一し、企画ごとの帯見出しだけをくすみティールで塗る
• 重要な語は濃いティールの太字にして本文の黒と区別する
• 期間ラベルは黄色の地に黒文字で、日付と組み合わせる
• 駅やスポットはオレンジのリング型マーカーで示す
• 番外の企画は水色、お知らせはオレンジと、帯色を変えて区切る
• 注意事項の見出しは黒地に白文字にする
• button-primary は文字 #FFFFFF × 背景 #2FA89E のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#24827A、4.62:1）を使う。

Typography

• 見出しはすべて太いゴシックで、中央揃えにする
• 強調語はひと回り大きくし、ティールで塗る
• キャラ名などの難読語にはルビを振る
• 注釈は小さな文字で※から始め、左揃えにする
• 日付は数字だけを大きな明朝にして目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。STEP図と路線図は縦に並べ直す。賞品カードの中は2分割まで
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 企画ごとに帯見出し、説明、図解、ボタンの順で組む
• キャラ立ち絵は見出しや説明の左右に添える
• 賞品カードは細い枠と上部の見出し帯でそろえる
• 期間ラベルは各企画の最初か最後に置く
• 本文は中央揃えにし、注釈だけ左揃えにする

Elevation & Depth

• 影は基本的に使わず、枠線と面の色で階層をつける
• スマホのモックアップだけ黒い縁で立体感を出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: キャラは背景を抜いた全身や半身の立ち絵。ポスターやアプリ画面は長方形のまま載せる
• セクション境界: 直線で区切り、角丸の帯見出しで切り替える
• 企画番号は白いピル型にする
• STEPは五角形の矢印型パネルで流れを示す
• 手順番号はティールの丸に白い数字
• サブボタンは細い枠の長方形に▶を付ける

Components

• 企画帯見出し（campaign-band）: 角丸のティール帯。上に白いピルで企画番号、下に白文字の企画名、右端に横線の飾り
• リボン見出し（ribbon-heading）: 左右に伸びる横線と、中央の濃いティールの太字見出しの帯
• 実施期間ラベル（period-label）: 黄色の地に「期間」の文字、右側を枠で囲んで日付を入れる
• STEPパネル（step-panel）: 淡いティール地の五角形矢印。STEP番号と手順を短く入れる
• 賞品カード（prize-card）: ティールの細い枠と淡色の見出し帯。条件、下向き矢印、獲得ラベルとキャラ絵を入れる
• ピル型リンクボタン（button-primary）: ティールのピル型で、白文字の詳細リンクを入れる
• 枠線ボタン（button-outline）: 白地に細い黒枠の長方形で、▶付きの文字を入れる
• 番号付き手順（step-number）: ティールの丸に白い数字。その下に手順名とスマホ画面のイラスト
• 注意事項ボックス（notice-box）: 黒い見出し帯と、スクロールする枠内に小さな箇条書きを入れる

Do's and Don'ts

Do - 企画は番号付きの帯見出しで明確に区切る - 参加の流れはSTEP図、路線図、矢印で図解する - 強調語だけをティールの太字にする - 期間・注釈・リンクは企画ごとに必ず添える - キャラ立ち絵を余白に配置し、にぎやかさを出す

Don't - 強い影やグラデーションを入れない - ティール以外の色を広い面に使わない（番外企画の帯は除く） - 本文を左右いっぱいに詰め込まない - 見出し書体を混ぜすぎない

Page Structure

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

1. ファーストビュー（コラボの内容と開催期間を一目で伝える）: 色分けした縦帯にキャラを並べ、下にロゴ、企画名、大きな日付を置く
2. 企画1 説明（ラッピング車両を紹介する）: 帯見出しの下に、キャラ立ち絵、説明文、路線図を並べる。車両の横長イラストとピルボタンを添える
3. 企画2 参加手順（アプリでの参加方法を示す）: 番号付きの4手順と、スマホのモックアップを横に並べる
4. 参加方法・ルート（周遊ルートと達成条件を示す）: 中央に縦の路線図と駅マーカー、左右にSTEPパネルを置く
5. 賞品引換（賞品と引換場所を案内する）: ティール枠のボックスに2列の店舗情報、ボタン、賞品写真を入れる
6. 企画3 エリアマップ（対象駅と担当キャラを示す）: 地図の周りに、エリアごとの駅一覧表を配置する
7. 賞の一覧（達成条件ごとの賞を見せる）: 賞品カードを縦に積み、カードの間に中見出しを挟む
8. 注意事項（規約を伝える）: 黒い見出し帯とスクロールする枠に箇条書きを入れる
9. 特別企画（展示物の設置駅を案内する）: 水色のリボン見出しとカード、青いボタン、駅リンクを並べる
10. インフォメーション（関連する放送情報を告知する）: オレンジの帯見出しの下に、ビジュアルと中央揃えの情報を置く
11. フッター（共有と権利表記）: SNSアイコンを並べ、緑の細い帯にコピーライトを入れる

Imagery

• アニメ調のキャラ全身立ち絵を背景透過で使う
• 日本地図と路線は、淡いグレーの線とティールの路線、オレンジの丸で描く
• スマホ画面はフラットなモックアップで描き、画面例を入れる
• 賞品は正面から撮った実物写真か画像で見せる
• アイコンは単色のフラットなものにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央約900px幅に1カラムで組み、両端は淡いグレー地にする
• SPではSTEPパネルと路線図を縦に並べる
• SPでは横並びの4手順を2×2に組み直す
• キャラ立ち絵はSPでは小さくするか、見出しの上に移す
• 賞品カード内の2分割は、SPでは縦積みにする

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