DESIGN.md — 青×赤の雑誌表紙風 鉄道パス案内LP（Railway Blue Magazine-Style Pass Guide LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 情報量多め・訴求型、信頼・誠実、清潔・爽やか、力強い・インパクト
• キーワード: 雑誌表紙風・極太ゴシック・青と水色・赤の告知帯・STEP手順・車両の切り抜き
• 地の質感: グラデーションや質感を使わないフラットな単色面。写真は白背景の切り抜きだけ
• 形: 角を立てた四角い枠と帯を基本にする。ボタンだけはピル型で影を付ける
• 温度感: 爽やかな寒色が基調。赤を差して告知の熱を出す

Colors

• セクションごとに白地と淡い水色地を交互に切り替え、境界には水色の約4pxの横線を引く
• ファーストビューは濃い青、水色、赤の帯を縦に積み、文字は白抜きか赤にする
• 赤はファーストビューとページ末尾の告知帯だけに使い、本文では使わない
• 金額やポイント数は濃い青の帯の上に白抜き文字で強調する
• STEP番号と下向き三角は青系で統一する
• button-primary は文字 #FFFFFF × 背景 #029DD3 のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#027FAB、4.54:1）を使う。

Typography

• ファーストビューは字間を詰めた極太の見出しを、雑誌の表紙のように画面幅いっぱいに置く
• セクション見出しは字間を広げて中央に置き、下に青い太線を引く
• STEPラベルは小さい英字と大きめの数字を組み合わせ、青で表示する
• 本文は小さめでも行間を1.8にして読みやすくする
• 注釈は※から始め、本文より一段小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は STEP の文と画面画像を左右 2 列に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央に、本文は左に揃える
• STEP と STEP の間に青い下向き三角を置き、流れを見せる
• セクションの区切りに車両の切り抜き写真を区切り線にまたがせる
• 画面キャプチャは幅を約50%に縮めて中央に置く
• 表は3列で、項目名の列を細くする

Elevation & Depth

• ボタンには下方向に濃い影を付けて立体感を出す
• カードや表には影を付けず、線だけで囲む

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 車両は白背景の切り抜き。画面キャプチャは四角のまま
• セクション境界: 水色の太い直線
• カード・表・帯の角は丸めない
• 特典番号は円形のバッジを枠の左上に重ねる
• ボタンはピル型で、全幅より短く中央に置く

Components

• 上部の角丸タブナビ（nav-tabs）: 細い枠の角丸タブを6つ横に並べる
• 雑誌表紙風の帯（hero-band）: 青と水色の帯に白抜きの極太文字、その下に赤の大見出しと赤帯の日付を置く
• 購入ボタン（button-primary）: 水色のピル型ボタンに影を付け、2段で補足を入れられる
• 下線付きの見出し（section-title）: 中央揃えで字間の広い見出しの下に、青い太線を引く
• STEP手順（step-block）: 青いSTEP番号、太字のタイトル、説明、画面画像の順に並べ、間を下向き三角でつなぐ
• 特典カード（benefit-card）: 灰色の枠で囲んだ淡色のカード。左上に紺の円形番号バッジ、ポイント数は青い帯で白抜き
• 料金表（price-table）: 黒い罫線の3列表。金額は大きな太字
• FAQ項目（faq-item）: Q付きの太字の質問と、A付きの回答を罫線なしで縦に積む
• 問い合わせ枠（contact-box）: 水色の枠線で囲んだ淡水色の箱に、窓口・電話・受付時間を中央揃えで入れる

Do's and Don'ts

Do - ファーストビューは極太ゴシックの帯を積み、雑誌の表紙のような迫力を出す - 白地と淡い水色地を交互にし、境界に水色の太線を引く - 手順はSTEP番号と下向き三角で順番を明示する - 強調したい数値は青い帯の上に白抜きで示す - 注釈は省かず、※付きの小さい文字で添える

Don't - 本文の中で赤を多く使わない - グラデーションや装飾的なイラストを入れない - カードの角を大きく丸めない - セリフ体や手書き風の書体を混ぜない

Page Structure

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

1. ファーストビュー（商品名と発売日を強く告知する）: 青・水色・赤の極太文字の帯を積み、期間限定バッジを添える
2. 導入（サービスの概要を伝える）: 車両の切り抜き写真と路線図を置き、太字のリード文と本文を続ける
3. 商品概要（期間・区間・料金を示す）: 水色地に、【】付きの項目、下線付きの大きな日付、購入ボタン4つ、料金表を並べる
4. 購入方法（手順を案内する）: 白地にSTEPブロックと画面キャプチャを置き、下向き三角でつなぐ
5. 予約方法（予約の詳細な手順を示す）: 水色地に8つのSTEPを縦に並べる
6. 利用方法（乗車時の使い方を示す）: 白地に説明文と提示画面の画像を置く
7. 特典（ポイント特典で訴求する）: 番号バッジ付きの枠カードを3つ並べ、ポイント数を青帯で強調する
8. エントリー方法（アプリでの登録手順を示す）: アプリ画面のキャプチャ付きでSTEPを並べる
9. よくある質問（不安を解消する）: 水色地に質問と回答を縦に積む
10. 問い合わせ・締め（窓口を示し、最後にもう一度告知する）: 水色の枠の箱を置き、その下に赤の極太見出しと日付帯を再掲する

Imagery

• 車両は斜め前から撮り、白背景で切り抜く
• 切り抜いた車両はセクションの境界線にまたがせて配置する
• 操作手順はスマホ画面のキャプチャを小さく添える
• 路線図は横線に駅名の点を置き、駅名は縦書きにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは帯のタイトルを横に長く組み直し、高さを抑える
• PCでは導入を、写真を左・文を右の2列にする
• PCでは商品概要の右列に購入ボタンを縦に並べる
• PCではSTEPの説明を左、画面キャプチャを右に置く
• PCでは本文幅を約70%に絞って中央に置く

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