--- version: alpha name: Bold Blue Rail Discount Campaign LP description: 濃紺と水色の地に、黄色いピル型 CTA と赤い割引価格を目立たせた鉄道ポイント割引の訴求型 LP。斜体の極太ゴシック数字と白いカードで、料金の比較表を手早く読めるようにしている。 colors: primary: '#0049A7' secondary: '#00BEEB' cta: '#FFFE01' on-cta: '#123467' background: '#FEFEFE' background-alt: '#F3F5FB' accent-1: '#F40402' marker: '#FCFD03' accent-2: '#C20D6C' tint-1: '#03A5E2' surface: '#0C649C' text: '#082F7B' text-muted: '#014DA5' on-dark: '#FBFEFC' accent-1-accessible: '#E20402' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 900 lineHeight: 1.1 letterSpacing: -0.02em headline-lg: fontFamily: Montserrat fontSize: 32px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 40px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px label-pill: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 28px info-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 28px price-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 300px discount-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.marker}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px benefit-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.display}' rounded: '{rounded.md}' height: 300px outline-chip: textColor: '{colors.on-dark}' typography: '{typography.note}' height: 30px section-ribbon: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 70px --- # DESIGN.md — 青×水色×黄の鉄道割引キャンペーン LP（Bold Blue Rail Discount Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型、清潔・爽やか - **キーワード**: 濃紺×水色・斜体の極太数字・黄色ピル CTA・赤い割引価格・白カードの料金表 - **地の質感**: フラットな単色面。グラデーションはファーストビューと特典バナーにだけ使い、影はごく浅くする - **形**: 角丸のカードとピル型ボタン。区切りは直線と下向き三角 - **温度感**: 寒色ベースで爽快。黄・赤・マゼンタで熱量を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0049A7` | ブランドの濃紺。セクション地と帯見出しに使う | 20% | 画素の実測 | | `secondary` | `#00BEEB` | 料金セクションの水色地 | 12% | 画素の実測 | | `cta` | `#FFFE01` | 主 CTA ボタンの黄色 | 2% | 画素の実測 | | `on-cta` | `#123467` | CTA 上の文字色（濃紺） | 0% | 画素の実測 | | `background` | `#FEFEFE` | カードと白地の背景 | 30% | 画素の実測 | | `background-alt` | `#F3F5FB` | 概要帯と注釈エリアの薄いグレー地 | 7% | 画素の実測 | | `accent-1` | `#F40402` | 割引後の価格に使う赤 | 1% | 画素の実測 | | `marker` | `#FCFD03` | 価格の下に引く黄色マーカー | 2% | 画素の実測 | | `accent-2` | `#C20D6C` | 還元率の数字に使うマゼンタ | 1% | 画素の実測 | | `tint-1` | `#03A5E2` | ラベル用の明るい水色 | 0% | 画素の主要色に補正 | | `surface` | `#0C649C` | 特典カード見出しの中間ブルー | 6% | 画素の実測 | | `text` | `#082F7B` | 見出しと本文の濃紺文字 | 2% | 画素の実測 | | `text-muted` | `#014DA5` | 打ち消し線つきの元価格・注釈 | 0% | 画素の主要色に補正 | | `on-dark` | `#FBFEFC` | 濃紺地の上の白文字 | 2% | 画素の実測 | | `accent-1-accessible` | `#E20402` | AA を満たす補正値（計算） | | 計算 | - 地の色は濃紺→水色→白→濃紺の順に切り替え、セクションの区切りをはっきりさせる - 黄色は主 CTA と価格マーカーだけに使う - 割引後の価格は必ず赤で、元価格は濃紺に打ち消し線をつける - ポイント還元の数字はマゼンタで、料金の赤と役割を分ける - 濃紺地の上では白文字と白いピル型ラベルを使う - 白カードの補足行には薄いグレー地を敷き、主価格と分ける - `discount-badge` は文字 `#FCFD03` × 背景 `#F40402` のコントラスト比が 3.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E20402`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの割引率と大見出し | ゴシック | Dela Gothic One | 900 | 56px | 1.1 | -0.02em | | `headline-lg` | 日付・価格の斜体数字 | 欧文サンセリフ | Montserrat | 900 | 32px | 1.2 | 0.0em | | `headline-md` | 区間名やカード内の見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.02em | | `headline-sm` | 帯見出し・セクション小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.05em | | `body-md` | 本文と対象一覧 | ゴシック | Noto Sans JP | 500 | 13px | 1.7 | 0.0em | | `note` | ※から始まる注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 英字セクションタイトル（斜体） | 欧文サンセリフ | Montserrat | 900 | 40px | 1.0 | 0.02em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.3 | 0.05em | - 数字は斜体の極太にして、単位（円・ポイント・曜日）は小さく添える - 大きな割引率は日本語より数字を大きくし、メリハリを強くつける - 「最大」などの前置きは縦に 2 文字積んで数字の横に置く - 見出しの両側に斜線（＼ ／）をつけて目を引く - 注釈は 10px 前後で※を頭に揃え、ぶら下げインデントにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - カードと帯見出しは左右 5% の余白で揃える - 料金カードは「帯見出し→主価格の白地→補足行のグレー地」の 3 段で組む - CTA は情報ブロックの直後に全幅で置く - アイコンバッジはカードの右上に重ねる - 特典カードは縦に並べ、間を 24px あける ## Elevation & Depth - CTA ボタンの下に濃い黄色のベタ影を 4px つけて、押せる立体感を出す - カードはごく薄い影か、影なしのフラットにする - 割引バッジは赤いギザギザの円で、カードの角に重ねる ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸の矩形か、飛行機窓のような角丸枠で切り抜く - **セクション境界**: 基本は直線で切り替える。見出し帯の下には下向き三角をつけ、英字タイトル周りは波形の曲線にする - CTA と白ラベルは完全なピル型 - 情報ラベルは角丸の小さい矩形 - 特典カードは 10px 角丸で、細い濃紺の枠線をつける - アイコンバッジは正円 ## Components - **黄色ピル CTA**（`button-primary`）: 全幅の黄色ピルボタン。右端に濃紺の丸い矢印アイコンを置き、下に濃い黄色の影をつける - **白ピル見出しラベル**（`label-pill`）: 濃紺地の上に置く白いピル。中に項目名を濃紺文字で中央揃えする - **情報タグ**（`info-tag`）: 概要帯で使う青や水色の角丸タグ。右側に黄色マーカーつきの値を並べる - **料金比較カード**（`price-card`）: 濃紺の帯見出しの下に白地で「区間→元価格→赤の割引価格」を並べ、その下にグレー地の補足行を置く - **割引率バッジ**（`discount-badge`）: 赤いギザギザ円に黄色の数字を入れ、カードの左上に傾けて重ねる - **還元特典カード**（`benefit-card`）: 中間ブルーの見出しに白と黄の 2 行見出しを入れる。本文は白地に巨大なマゼンタの還元率を置く - **条件チップ**（`outline-chip`）: 濃紺地の上に水色枠線のチップを 3 つ横に並べる - **三角つき帯見出し**（`section-ribbon`）: 全幅の濃紺帯に白文字を入れ、下に三角の吹き出しをつける ## Do's and Don'ts **Do** - 割引後の価格は赤＋黄マーカーで最も目立たせる - 日付と価格は斜体の極太数字で揃える - CTA は料金ブロックの前後で同じデザインを繰り返す - カードの帯見出しには商品名を白抜きで入れる - 注釈は※つきで CTA の直後にまとめる **Don't** - 黄色を見出しや背景の装飾に乱用しない - 細い明朝体や手書き体を使わない - 価格表を写真の上に重ねない - 赤とマゼンタを同じ役割に混ぜない - パステルの淡い配色にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（最大割引率を一目で伝える）: 青のグラデーションに車両写真を敷き、旗形ロゴ、斜線つきの導入文、巨大な割引率を重ねる 2. **概要サマリー**（対象・価格・期間を要約する）: 薄グレー地に情報タグを 3 行並べ、値に黄色マーカーを引く 3. **販売・利用条件**（期間と条件を明示する）: 濃紺地に白ピルのラベルを置き、斜体の日付を下向き三角でつなぐ。条件チップと黄色 CTA を続ける 4. **料金一覧**（区間ごとの割引を比較させる）: 水色地に英字タイトルを置き、商品ごとの料金カードを縦に並べる。先頭に割引バッジを重ねる 5. **CTA と注釈**（詳細へ誘導し、条件を補足する）: 黄色ピル CTA の下に、白文字の小さな注釈を箇条で並べる 6. **ポイント獲得の案内**（関連カードでの貯め方を紹介する）: 三角つき帯見出しの下に白地で 2 行のリード文を置き、還元特典カードを 4 枚縦に並べる 7. **入会特典バナー**（入会を促す）: 濃紺のグラデーションに白とゴールドの大きな pt 数字とカード画像を配置する 8. **期間限定キャンペーン**（関連施策へ回遊させる）: 濃紺地に斜線つき見出し、空と列車のバナー、白ピルのサブボタンを置く ## Imagery - 車両の正面写真を青いフィルターで統一し、ファーストビューの下半分に横並びで敷く - 青空と雲を背景に乗り物と旅行かばんを置いた、明るいバナーイラスト - 観光地の写真は飛行機の窓のような角丸枠で横に並べる - 温泉・カニ・鹿など行き先を表す白線アイコンを、色つきの正円に入れる - ポイントマークなどのロゴは青い円形のフラットアイコンにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP と同じ幅約 375〜420px の 1 カラムを中央に置く - PC の左右には水色地に大きな斜体の漢字を薄い白で敷き詰めた背景パターンを置く - コンテンツ内のレイアウトと文字サイズは SP と同じにする - PC を広げる場合も、料金カードは 1 列のまま保つ ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-9299c511`（元 LP の URL から採番） - **元 LP**: https://www.jr-odekake.net/navi/westerpoint_chotokuten/ticketless_60-off/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。