--- version: alpha name: Bold Red Yellow Blue Railway Service LP description: 鮮やかな赤の地に白いカードを重ねた、公共交通のネット予約サービス案内 LP。サービスごとに地の色を赤と黄で切り替え、黄の区間では青のボタンと線を使う。太いゴシック体、太い線の角丸カード、ピル型ボタンで、情報量が多くても見やすく並べている。 colors: primary: '#E70012' background: '#FFFFFF' background-alt: '#FBE5E7' secondary: '#014DA3' accent-1: '#EEF12D' cta: '#E50113' on-cta: '#FFEEEF' text: '#1E1D1F' surface: '#ECEDEF' accent-2: '#216F83' line: '#ECEDEF' text-muted: '#6F707A' cta-accessible: '#DD0112' primary-accessible: '#D50011' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.45 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px 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: 52px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px card-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 180px white-panel: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' label-band: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 32px icon-feature-grid: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 180px step-box: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 96px selector-form: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 260px price-row: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 36px link-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 68px --- # DESIGN.md — 赤×黄×青の鉄道ネット予約案内 LP（Bold Red Yellow Blue Railway Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: ポップ・元気、信頼・誠実、情報量多め・訴求型、力強い・インパクト - **キーワード**: 赤ベタ地・白カード・太枠の角丸・ピル型ボタン・サービス別の色分け・アイコン説明 - **地の質感**: グラデーションをほぼ使わないフラットなベタ塗り。白カードには薄い影を付ける - **形**: 3〜4px の太い線で囲んだ角丸カード、ピル型ボタン、ラベル帯 - **温度感**: 赤と黄で熱量が高く、青で落ち着きと信頼感を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E70012` | ブランド赤（地・枠・見出し） | 22% | 画素の実測 | | `background` | `#FFFFFF` | カードと本文の白地 | 40% | 画素の主要色に補正 | | `background-alt` | `#FBE5E7` | 淡いピンクの区切り地 | 7% | 画素の実測 | | `secondary` | `#014DA3` | 別サービス用の青（ボタン・枠・文字） | 6% | 画素の実測 | | `accent-1` | `#EEF12D` | 別サービス区間の黄色地 | 9% | 画素の実測 | | `cta` | `#E50113` | 主 CTA のピル型ボタン | 2% | 画素の実測 | | `on-cta` | `#FFEEEF` | ボタン上の白文字 | 0% | 画素の実測 | | `text` | `#1E1D1F` | 本文の黒 | 3% | 画素の実測 | | `surface` | `#ECEDEF` | フォーム・地図まわりの淡いグレー | 4% | 画素の主要色に補正 | | `accent-2` | `#216F83` | SNS 連携用の深い青緑ボタン | 0% | 画素の実測 | | `line` | `#ECEDEF` | サムネイル枠の薄いグレー線 | 0% | 画素の主要色に補正 | | `text-muted` | `#6F707A` | 注釈の灰色 | 1% | 画素の主要色に補正 | | `cta-accessible` | `#DD0112` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#D50011` | AA を満たす補正値（計算） | | 計算 | - サービスごとに地の色を切り替える。赤サービスは赤地、別サービスは黄地にする。 - 地の上には必ず白のカードを置き、文字は白カードの中に入れる。 - 黄地の区間では、枠・見出し・ボタンをすべて青で統一する。 - 強調したい語句は、本文の黒の中で赤（青区間では青）の文字にする。 - 淡いピンクは、セクションの区切りや囲みボックスの地に使う。 - 注釈は赤の小さい文字か灰色で書く。 - `button-primary` は文字 `#FFEEEF` × 背景 `#E50113` のコントラスト比が 4.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DD0112`、4.58:1）を使う。 - `price-row` は文字 `#E70012` × 背景 `#FBE5E7` のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D50011`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | サービス価値を短く言うキャッチ（手書き風） | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.2 | 0.02em | | `headline-lg` | セクションの見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.45 | 0.05em | | `headline-md` | カード内の見出し | ゴシック | Noto Sans JP | 700 | 19px | 1.5 | 0.04em | | `headline-sm` | 小見出し・ラベル帯 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 14px | 1.75 | 0.02em | | `note` | 注釈（※） | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.1em | - 本文も含めて太字を基本にし、細い字は注釈だけに使う。 - 見出しは中央揃えで、2 行に分けて後半を赤（または青）にする。 - キャッチは手書き風の太いディスプレイ書体を使い、1 字だけ大きくする。 - ボタンの文字は字間を広めに取る。 - 注釈は ※ を付け、ぶら下げインデントで揃える。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。アイコンの特長やロゴのグリッドは 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 色地の上に左右 5% の余白を残して白カードを置く。 - カードの中に、さらに太い線で囲んだ子カードを入れ子にする。 - 手順は縦に並べ、▼ でつなぐ。 - ボタンはカード幅の 80% ほどで中央に置く。 - セクションの境目は色地の切り替えだけで、直線で区切る。 ## Elevation & Depth - 白カードには薄くぼかした影（0 4px 12px rgba(0,0,0,.12)）を付ける。 - ピル型ボタンにも軽いドロップシャドウを付ける。 - 線で囲んだ子カードには影を付けない。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの長方形。人物写真は切り抜いてカードの端からはみ出させる - **セクション境界**: 直線で背景色を切り替える - カードの枠線は 3〜4px の太さ。 - ボタンは完全なピル型にし、右端に ＞ か → を付ける。 - ラベル帯は角丸 4px の長方形。 - 見出しの前に、円形アイコンと帯を組み合わせたバッジを付けることがある。 ## Components - **赤いピル型 CTA**（`button-primary`）: 白の太字に右矢印を付け、影を付ける - **青いピル型ボタン**（`button-secondary`）: 黄地の区間で使う登録・詳細ボタン - **太枠のリンクカード**（`card-outline`）: 白地を赤または青の太い線で囲み、ロゴ・説明・「詳細」リンクを入れる - **色地の上の白パネル**（`white-panel`）: セクション全体を包む大きな白カード - **見出しラベル帯**（`label-band`）: 色地の上に置く白い帯、または白地の上に置く色の帯。短い条件文を入れる - **アイコン特長グリッド**（`icon-feature-grid`）: 2 列の枠付きカードに、線画アイコンと短い特長文を入れる - **手順ボックス**（`step-box`）: 青の地にアイコンと手順の説明を入れ、▼ でつなぐ - **診断フォーム**（`selector-form`）: 赤い見出し帯の下にセレクトボックスを 2 つ並べ、送信ボタンを置く - **割引価格の行**（`price-row`）: 淡いピンクの行に区間・旧価格→新価格を並べ、赤のお得バッジを付ける - **ガイドのリンク一覧**（`link-list`）: 赤い線で区切った行の右端に ▶ を付ける ## Do's and Don'ts **Do** - サービスごとに地の色を変え、ボタンや枠の色もその地の色に合わせて統一する。 - 情報はすべて白カードに入れ、色地の上に直接本文を置かない。 - 特長は線画アイコンと短い文の組み合わせで見せる。 - 主な導線ではボタンを大きいピル型にする。 - 注釈は小さい文字で各ブロックの下にまとめる。 **Don't** - 赤の区間に青のボタンを混ぜない（逆も同じ）。 - 細い線や細い書体で上品に寄せない。 - グラデーションや写真を背景に多用しない（ファーストビューは除く）。 - 枠線のないフラットなカードだけで構成しない。 - パステル調の色に置き換えない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（広告ビジュアルでサービスを印象づける）: 放射状の光を背景に、人物と動物の合成写真を置く。白抜きの太いロゴを重ねる 2. **サービス選択リンク**（利用目的別に各サービスへ振り分ける）: 淡いピンク地に、赤と青の太枠カードを縦に並べる 3. **新着情報**（最新のお知らせを伝える）: 赤地に白パネルを置き、赤の日付と赤い線の区切りで並べる 4. **アプリのダウンロード**（アプリの入手を促す）: 赤の太枠カードに、ストアのバッジと QR コードを 2 列で並べる 5. **おすすめ診断**（区間を選ばせて、合うサービスを案内する）: 円形アイコンのバッジ付き見出しの下にフォームを置く。ロゴのグリッドと路線図を添える 6. **サービス紹介 A（動画）**（チケットレス乗車を説明する）: 赤地の上に白パネルを置き、動画埋め込みを縦に並べる 7. **サービス紹介 B**（別サービスの登録と使い方を説明する）: 黄地に白パネルを置く。青のログインカード、手順、アイコン特長を並べる 8. **ID 連携とポイント**（会員連携をすすめる）: 青の手順ボックスを ▼ でつなぎ、淡いピンクの補足囲みを入れる 9. **料金・商品の詳細**（お得な商品と価格を示す）: 青い帯の見出しを付けた情報ボックスと、価格の表を置く 10. **ネット予約のメリット**（速さ・安さ・便利さを訴求する）: 赤地に白パネルを置き、手書き風のキャッチ・価格の行・2 列のアイコングリッドを並べる 11. **利用ガイド**（詳しい情報へのリンクを集める）: 赤い枠のリンク一覧と、ポイント特典のアイコンを置く 12. **アプリ訴求と注釈**（最後にアプリの入手を促す）: スマホのモックアップとストアのバッジを置き、その下に灰色の注釈を並べる ## Imagery - ファーストビューは、派手な衣装の人物をコミカルに合成した写真。背景はオレンジの放射状の光にする。 - アイコンは、単色（赤または青）で太い線のピクトグラム。 - 人物の切り抜き写真をカードの角に小さく添える。 - デフォルメしたマスコットキャラクターを、ポイント訴求で使う。 - 路線図は淡いピンクの地形の上に、色分けした線を引いて描く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 750px 幅の白パネルを置き、左右に色地を広く見せる。 - PC ではサービス選択カードを 3 列に横並びにする。 - PC では、アイコン特長は 4 列、手順は 3 列で横並びにする。 - PC では、診断のロゴを左に縦に並べ、路線図を右に置く 2 列構成にする。 - PC ではリンク一覧を 2 列にする。 ## 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-52e31035`（元 LP の URL から採番） - **元 LP**: https://www.jrkyushu.co.jp/yoyaku/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。