DESIGN.md — 鮮やか緑×白の鉄道ネット予約訴求 LP（Bright Green Railway Net Booking Promo LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型、信頼・誠実
• キーワード: 鮮やか緑・白い角丸カード・太字イタリック見出し・線画アイコン・POINT番号・斜めのセクション境界
• 地の質感: フラットな単色面。淡い緑の円形の面と細い線画イラストで軽さを出す
• 形: 大きな角丸カード、ピル型ボタン、ゆるい波・斜めのセクション境界、円弧で囲むPOINTラベル
• 温度感: 明るく快活で、ややカジュアル。公共交通らしい誠実さも残す

Colors

• 白地セクションと緑地セクションを交互に置き、境界は斜めか波形にする
• 緑地の上には白い角丸カード・白ボタンを載せて情報を読ませる
• 割引率など数字の訴求だけ赤の太字イタリックにする
• 重要な告知はマゼンタの帯1か所に限定する
• 強調文は緑文字＋淡い黄色の下線マーカー
• 緑の線画アイコンは単色で塗りを最小にする
• button-register は文字 #37A128 × 背景 #FFFFFF のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#2F8822、4.5:1）を使う。
• notice-bar は文字 #F9FAFA × 背景 #E52E8A のコントラスト比が 3.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D91B7B、4.57:1）を使う。
• ribbon-heading は文字 #37A128 × 背景 #ECBB44 のコントラスト比が 1.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 大見出しは極太ゴシックを斜体にして勢いを出す
• 数字は本文より大きくし、％やOFFは小さめに添える
• 本文は緑文字を多用し、注釈のみグレーで小さく
• POINT番号は欧文太字で、その下に短い2〜3行の要約を中央揃え
• 見出しは白抜き縁取りや立体シャドウでロゴ風に加工してよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は写真とPOINTラベルを左右に配置
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 特長ブロックは写真とPOINT円弧ラベルを左右交互に置く
• 本文の右側に線画アイコンを添える
• ステップは縦積みカード＋下向き三角で接続
• 緑地セクション内はカードを左右16px程度の余白で配置
• バナー画像は幅いっぱいで縦に並べる

Elevation & Depth

• ボタンは右下に薄グレーのずらし影（ぼかしなし）
• 白ピルボタンは緑地上で濃緑のずらし影
• カード類は影なしでフラット
• 見出しロゴは立体風の押し出し影

Shapes

• 角丸: 小 4px ／ 中 20px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 人物は切り抜きで背景なし、バナーと動画は角なしの長方形
• セクション境界: FV下はゆるい波形、緑セクションの上下は斜めカット
• ステップカードは黒線2pxの角丸20px
• 白カードは大きめ角丸で緑地に浮かせる
• POINTラベルは細い緑線の円弧で囲む
• 装飾に淡緑の大きな円を背景に敷く

Components

• 影付き濃グレーピルボタン（button-primary）: 詳細誘導用。右下にずらし影
• 白い会員登録ピル（button-register）: 緑地上の大型白ボタン。小見出し＋ロゴ＋赤い無料バッジ
• POINTラベル（point-label）: 円弧線で囲みPOINT.番号と要約を中央揃え、黄の放射線を添える
• 赤丸バッジ（badge-free）: 無料など特典を白文字で示す赤い正円
• 手順カード（step-card）: 白地に黒線の角丸カード、間に黒い下向き三角。最終段は黄色塗り
• 告知帯（notice-bar）: マゼンタの全幅帯に白太字3行
• 割引率リスト（discount-table）: 左に商品名の緑文字、右に赤イタリック数字、緑の横線で区切る
• 枠線付き情報行（info-box）: 細い緑線の長方形で時間などを囲む
• ロゴ風見出し＋リボン（ribbon-heading）: 白縁の太字ロゴ見出しの下に金黄のリボン

Do's and Don'ts

Do - 緑と白の交互配置で全体のリズムを作る - 人物写真は切り抜きで、ポーズを特長ごとに変える - アイコンは緑単色の線画でまとめる - 数字訴求は赤の斜体太字で大きく - ボタンにはずらし影をつけ押せる感を出す

Don't - 緑以外の色をセクションの地に多用しない - グラデーションや強いぼかし影を使わない - 細い明朝体を使わない - 赤やマゼンタを本文に広げない - 写真に角丸や枠をつけて重くしない

Page Structure

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

1. ファーストビュー（起用人物とサービスの印象づけ）: 緑背景に切り抜き人物と車両、白い極太の手書き風コピーを重ねる
2. 主訴求帯（おトクさを数字で示す）: 明るい緑地に白い斜体2行、下に白角丸カードで割引率を赤で強調、下端は波形
3. 告知（重要なお知らせへ誘導）: マゼンタの全幅帯に白太字
4. 特長（POINT 1〜5）（便利な点を順に説明）: ロゴ風見出し＋リボン、写真とPOINT円弧ラベルを左右交互、本文と線画アイコン
5. 割引商品一覧（割引率の比較）: ロゴ見出しと緑線区切りの表、赤い数字
6. 関連バナー（キャンペーン誘導）: 緑斜体見出しの下に横長バナーを縦に並べる
7. 会員登録方法（登録手順を案内）: 斜めカットの緑地、立体ロゴ見出し＋赤丸バッジ、動画、白角丸の手順カードと三角
8. 利用の流れ（予約から乗車までを説明）: 緑地上の大きな白カード内に黒線ステップを縦積み、最終段は黄色
9. CTA（会員登録へ誘導）: 白い大型ピルボタンと補助ピルを縦に並べる
10. 特別動画（起用人物の動画で興味を深める）: 白地に緑の斜体見出しと16:9動画
11. フッター（問い合わせ・注釈・著作権）: 明るい緑地に白ピル、白文字の注釈、ロゴ

Imagery

• スーツの人物を白背景で切り抜き、笑顔やガッツポーズで元気さを出す
• 人物の周囲にきらめきや集中線の小さな線画を添える
• アイコンはPC・券売機・カレンダーなどを太めの緑の線画で描く
• FVは列車の先頭部を左右に配置し、中央に人物を置く
• 手順にはやや立体感のあるフラットイラストを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せの約70%幅で、要素はSPと同じ順番
• FVは横長にし、コピーを人物の左右に配置
• POINTは写真・アイコン・ラベルを横に並べて左右交互にする
• 会員登録手順はPCで円形4つを横並び＋矢印にする
• 手順カードは横長にして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 行書くと起動時に読み込まれる。