DESIGN.md — 赤×黒ハートの鉄道フリーパス旅行 LP（Red Heart Rail Travel Pass LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、信頼・誠実
• キーワード: 赤×黒×白・ハート切り抜き・路線図タイムライン・太ゴシック・白カード・おトク訴求
• 地の質感: 白地にごく薄いグレーの縦ストライプや小さなハート柄を敷く。平面的で、影はほとんど使わない
• 形: ハート型の写真、ピル型ボタン、黒いL字の角飾りが付いた白カード、細線の四角い枠
• 温度感: 温かく元気。赤で熱量を出し、黒とグレーで公共交通らしい落ち着きを足す

Colors

• 地は白が基本。セクションごとにグレーのストライプ、クリーム、赤の帯へ切り替える
• 赤は CTA ボタン、強調タブ、見出しバー、金額の数字に使う
• 黒は 2 番目のタブ、見出しバー、STEP ラベル、ハート型のナビに使い、赤と交互に置く
• 大事な数字や語は本文の中で赤文字にする。マーカーは使わない
• 緑は企業フッターだけに使い、LP の本体には持ち込まない
• 注釈は黒の小さな文字。警告だけ赤の小さな文字にする

Typography

• 見出しはすべて太いゴシック（700〜900）にし、明朝は使わない
• 大見出しの上に赤い小さな英字ラベルを置く
• 金額は数字だけを大きくして赤くし、単位は小さく黒のままにする
• コースのタイトルは先頭の 1 文字を赤にしてアクセントにする
• 注釈には ※ を付け、11px 前後で本文の下にまとめる
• 見出しバーの文字は白で中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。概要の項目やスポットの写真と文は SP では縦に積む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面幅の 92% ほどにし、背景の柄を左右に少し見せる
• モデルコースは左に縦の路線図タイムライン、右にスポットのカードを並べる
• 概要は小さな黒ラベルと値の組を縦に並べる
• CTA はセクションの終わりごとに中央へ置く
• 表は左右 2 列の比較で、見出しを黒と赤で色分けする

Elevation & Depth

• 影はほとんど使わない。カードは細い黒線か白い面だけで区切る
• 白カードの対角の 2 隅に太い黒の L 字の角飾りを付けて立体感を出す
• ボタンは塗りだけで、影も枠も付けない

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: ファーストビューとナビはハート型。本文中の写真は角丸なしの長方形
• セクション境界: 直線で背景色を切り替える。境界に波や斜めは使わない
• CTA は必ずピル型にし、右端に白い三角の矢印を付ける
• ページ内ナビは黒いハートを並べ、最後の 1 つだけ赤にする
• 情報カードは角丸 8〜16px の白カードにする
• タブは上の角だけ少し丸める
• 吹き出しは黒の細線で手描き風にし、尾を付ける

Components

• 赤いピル型 CTA（button-primary）: 赤地に白い太字。右端に白い三角の矢印またはファイルのアイコンを付ける
• 白いピル型ボタン（button-secondary）: 赤い帯の上に置く白地のボタン。文字と矢印は黒
• ハート型のページ内ナビ（heart-nav）: 黒いハートに白文字と下向きの三角。最後の購入リンクだけ赤いハートにする
• 小さな黒ラベル（label-tag）: 概要の項目名に付ける黒い四角のラベル。文字は白
• 帯状の見出しバー（heading-bar）: 幅いっぱいの黒または赤の帯に白文字を中央揃え。左右にハート記号を添えることもある
• 日程タブ（course-tabs）: 1 日目は赤、2 日目は黒のタブにする。中身は赤い細線で囲む
• 路線図風タイムライン（route-timeline）: 黒い縦の二重線に、駅名を細線の四角で置く。列車のアイコンと時刻を添え、右のスポットのカードへ三角で指す
• おトク額の吹き出し（speech-bubble）: 黒の細線の吹き出しの中に、赤い大きな数字で節約額を書く
• STEP アコーディオン（step-accordion）: 左の黒地に STEP 番号、右の白地に手順名、右端に＋を置き、黒の細線で囲む
• 番号付きポイントカード（point-card）: 赤い小さな五角形のバッジに番号を入れ、その下に見出しと説明。3 列を縦線で区切る

Do's and Don'ts

Do - 赤・黒・白の 3 色を主役にし、ハートの形を繰り返し使う - 金額や日数などの数字は大きな赤い文字で目立たせる - コースの説明は路線図風のタイムラインで旅程が見えるようにする - セクションの終わりごとに赤いピル型 CTA を置く - カードの角には黒い L 字の飾りを付ける - 利用条件は小さな黒ラベルと短い文に分けて整理する

Don't - パステルカラーやグラデーションを主役にしない - 明朝体や細い書体を見出しに使わない - ボタンを四角や枠線だけのデザインにしない - 強い影やぼかしを多用しない - フッターの緑を LP の本体に使わない - 写真をハート以外の凝った形で切り抜かない

Page Structure

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

1. ファーストビュー（商品名と「乗り放題」の価値をひと目で伝える）: 白地に、赤や白のハートで切り抜いた名物や列車の写真を散らす。中央に太いロゴ風のタイトルと赤い短いコピーを置く
2. 事前登録の案内（購入に必要な会員登録へ誘導する）: 白地の左に大きな黒文字の案内、右に赤いピル型ボタンを置く
3. ページ内ナビ（各セクションへのジャンプ）: グレー地に黒いハートを 5 つ並べ、最後の購入だけ赤にする
4. 商品概要（価格・期間・利用条件を整理して見せる）: 赤い帯の上に大きな白カードを置く。英字ラベル、見出し、日数のピル型タグの下に、黒ラベル付きの項目を 2 列で並べる
5. キャンペーンバナー（関連する特典へ誘導する）: 赤地に、白ボタンと横長のバナー画像を中央に置く
6. モデルコース（具体的な旅程でおトクさを実感させる）: ストライプのグレー地に角飾り付きの白カードを複数並べる。タブ、路線図タイムライン、スポットのカード、比較表、CTA の順に置く
7. 地域の訴求バナー（コースの合間に別の旅先を提案する）: イラスト入りの横長バナーをカードとカードの間に挟む
8. 買い方・使い方（利用時の注意と乗り継ぎ方法を説明する）: クリーム地に赤い見出しバーと番号付きの 3 列ポイントを置く。続けて黒い見出しバーと人物・改札のピクトグラム図解を並べる
9. 申し込み方法（購入の手順を示す）: 赤い見出しバーの下に STEP のアコーディオンを 3 段重ねる
10. 購入特典（購入後の特典で後押しする）: 小さなハート柄の地に角飾り付きの白カードを置き、短い説明と赤いボタンを入れる
11. 関連バナー・CTA（関連サービスへ送客し、購入を最後に促す）: クリーム地にバナーを縦に 3 枚並べ、その上に購入ボタンを置く
12. フッター（SNS での共有と企業サイトへの導線）: 赤い帯に SNS アイコンを並べ、その下に緑地の大きなサイトマップと黒いコピーライト帯を置く

Imagery

• 名物料理・列車・名所の写真を背景なしで切り抜くか、ハート型に切り抜いて散らす
• スポットの写真は昼間の明るい色で撮り、4:3 の長方形に収める
• 列車・バス・人物は黒一色のシンプルなピクトグラムで描く
• 乗り継ぎの説明はフラットな図解にし、禁止の箇所を赤い×で示す
• 背景には薄いグレーの縦ストライプや、小さな白いハート柄を敷く
• バナーはイラストと太い文字を組み合わせた賑やかな広告調にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文の幅を約 880px にして中央に置く。SP は幅いっぱいのカードにする
• 概要の 2 列の項目は、SP では 1 列に積む
• PC のタイムラインとスポットのカードの横並びは、SP ではタイムラインを細くするか、スポットのカードを下に積む
• ハート型のナビは PC で 5 つを横 1 列、SP では 3＋2 の 2 段にする
• 番号付きの 3 列ポイントは SP では縦に積む
• ヘッダーのグローバルナビは 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 行書くと起動時に読み込まれる。