--- version: alpha name: Blue Stripe Railway App Promo LP description: コーポレートブルーと黄色マーカーで価格の安さとメリットを強く打ち出す、交通系アプリのダウンロード訴求LP。水色の斜めストライプ地に白カード、吹き出しQ&A、爆発型の「YES」バッジで元気に見せる。 colors: primary: '#0168B7' background: '#FFFFFF' tint-1: '#CCE1ED' tint-2: '#FEFFFE' cta: '#FFF000' on-cta: '#0B669D' marker: '#FCF759' text: '#33313C' surface: '#F3F3EB' accent-1: '#E60012' dark-section: '#010101' on-dark: '#FAFEFD' line: '#0C6DB7' primary-accessible: '#0164AF' typography: display: fontFamily: Noto Sans JP fontSize: 64px fontWeight: 900 lineHeight: 1.15 headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 23px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 44px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em label-button: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 16px lg: 48px full: 999px spacing: unit: 8px card: 24px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' cta-band: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 62px price-block: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' height: 260px badge-burst-red: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 60px number-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 48px speech-bubble: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 120px yes-burst: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 200px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 110px store-button: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 100px --- # DESIGN.md — 青×黄ストライプの鉄道アプリ訴求LP（Blue Stripe Railway App Promo LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、清潔・爽やか、情報量多め・訴求型、力強い・インパクト - **キーワード**: コーポレートブルー・黄色マーカー・斜めストライプ・吹き出しQ&A・巨大価格数字・斜体ロゴ - **地の質感**: フラットな単色面と斜めストライプ。影はほぼなし - **形**: 角丸の大きい吹き出し、円形番号、ギザギザの爆発バッジ、斜めに傾いた見出し - **温度感**: 爽やかでやや涼しいが、黄色で元気さを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0168B7` | ブランドブルー（価格・見出し・帯） | 10% | 画素の実測 | | `background` | `#FFFFFF` | 基本背景・カード地 | 44% | 画素の実測 | | `tint-1` | `#CCE1ED` | 吹き出し地・ストライプ | 12% | 画素の実測 | | `tint-2` | `#FEFFFE` | ストライプの淡い地 | 3% | 画素の実測 | | `cta` | `#FFF000` | 詳しくはボタン帯の黄色 | 5% | 画素の実測 | | `on-cta` | `#0B669D` | 黄帯上の青文字 | 0% | 画素の実測 | | `marker` | `#FCF759` | 見出しの黄色マーカー | 1% | 画素の主要色に補正 | | `text` | `#33313C` | 見出し・本文の濃色 | 5% | 画素の主要色に補正 | | `surface` | `#F3F3EB` | FAQ質問ボックスの生成り地 | 7% | 画素の実測 | | `accent-1` | `#E60012` | 最安バッジの赤 | 0% | 推定 | | `dark-section` | `#010101` | ストアボタンの黒 | 2% | 画素の実測 | | `on-dark` | `#FAFEFD` | 濃色上の白文字 | 1% | 画素の実測 | | `line` | `#0C6DB7` | FAQボックスの青枠 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#0164AF` | AA を満たす補正値（計算） | | 計算 | - 地は白と水色ストライプを交互に使い、メリット部は白カードをストライプ上に浮かせる - 価格・ロゴ・回答文はブランドブルーで統一 - 黄色はCTA帯とマーカー線、爆発バッジのみに限定 - 赤は最安バッジなど一点だけに使う - FAQ見出しはブルー全面帯に白文字で切り替える - 質問文は濃いグレー、回答は青で色分けする - `speech-bubble` は文字 `#0168B7` × 背景 `#CCE1ED` のコントラスト比が 4.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0164AF`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大コピー・価格数字 | ゴシック | Noto Sans JP | 900 | 64px | 1.15 | 0.0em | | `headline-lg` | メリット見出し | ゴシック | Noto Sans JP | 900 | 26px | 1.4 | 0.02em | | `headline-md` | FAQ質問文 | ゴシック | Noto Sans JP | 700 | 23px | 1.4 | 0.02em | | `headline-sm` | 吹き出し文・回答文 | ゴシック | Noto Sans JP | 700 | 19px | 1.5 | 0.02em | | `body-md` | 動作環境などの本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.6 | 0.0em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | YESなどの斜体欧文 | 装飾・ディスプレイ | Montserrat | 900 | 44px | 1.0 | -0.02em | | `label-button` | 詳しくはボタン | ゴシック | Noto Sans JP | 900 | 24px | 1.2 | 0.04em | - 全体を極太ゴシックで統一し、細い書体は注釈のみ - 価格数字は見出しの2倍以上の大きさで青 - 見出しは2行に分け中央揃え - 強調語の下半分に黄色マーカーを斜めに敷く - ロゴ風の文字は右上がりの斜体で疾走感を出す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム中央揃え - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算） - メリットごとに白カードをストライプ地上に配置 - 円形番号→見出し→吹き出し2つ→YESバッジの順で繰り返す - 価格ブロックは区切り線とリボン形の切り欠きで分ける - CTAは全幅の黄色帯 - 注釈は右寄せまたは中央の小文字 ## Elevation & Depth - 影はほぼ使わずフラット - カードはストライプ地とのコントラストで浮かせる - ストアボタンは薄いグレー枠のみ ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 48px。ボタンは角丸の長方形。 - **写真の切り抜き**: 列車・スマホは切り抜き写真を角に重ねる - **セクション境界**: 直線の切り替えと、FAQ帯下部の波形カーブ - 吹き出しは大きな角丸に下向きの三角しっぽ - FAQ質問は青枠3px程度の角丸箱にしっぽ - 番号は青の正円 - バッジはギザギザの爆発形 ## Components - **黄色CTA帯**（`cta-band`）: 全幅の黄色帯に青太字と丸矢印アイコン - **価格訴求ブロック**（`price-block`）: 小見出し・区間・巨大な青数字・黄マーカー付き差額の縦積み - **最安バッジ**（`badge-burst-red`）: 赤い角丸四角に白文字2行、傾けて配置 - **メリット番号**（`number-circle`）: 小さなラベルの下に青い正円と白数字 - **疑問の吹き出し**（`speech-bubble`）: 水色地の大角丸吹き出しに青太字の疑問文 - **YES爆発バッジ**（`yes-burst`）: 黄色のギザギザ形に青斜体の肯定語とロゴ - **FAQ質問箱**（`faq-item`）: 生成り地に青枠の角丸箱としっぽ、下に青太字回答と黄マーカー - **ストアボタン**（`store-button`）: 黒い角丸のアプリストアバッジ ## Do's and Don'ts **Do** - 強調語には必ず黄色マーカーを敷く - メリットは同じ型を番号付きで繰り返す - 価格は巨大な青数字で見せる - 質問は吹き出しで利用者の声として見せる - CTAは黄色帯で区切りごとに置く **Don't** - 青と黄以外の色を面で増やさない - 細い明朝や手書きを使わない - 影やグラデーションでリッチにしない - 吹き出しを四角にしない - 注釈を大きくしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（おトクさを一言で伝える）: ぼかした駅写真に白極太の大コピー、斜体ロゴ、青帯の短い説明3行 2. **価格訴求**（具体的な割引額を見せる）: 白地に区間と巨大青数字、黄マーカーの差額、赤バッジを2区間分 3. **CTA**（詳細へ誘導）: 全幅黄色帯に青太字と矢印 4. **メリット導入**（メリット一覧への導入）: 水色ストライプ地に斜体ロゴと黄マーカー付き3行見出し 5. **メリット（繰り返し3回）**（利点と疑問の解消）: 白カードに列車写真、円番号、見出し、疑問吹き出し2つ、YESバッジ 6. **よくある質問見出し**（FAQへの切り替え）: 青全面帯に白ロゴと見出し、スマホを持つ手の写真、下端は波形 7. **よくある質問**（不安の解消）: 青枠の質問箱と、黄マーカー付き青回答、注釈 8. **CTA**（再度誘導）: 黄色帯ボタン 9. **ダウンロード**（アプリ取得）: キャラクター付きロゴ、大きなストアボタン2つ、動作環境を青文字で 10. **フッター固定バー**（常時ダウンロード導線）: 青帯にキャラと白見出し、ストアボタン横並び、上へ戻る黒丸 ## Imagery - 車両は白背景で切り抜き、カード右上にはみ出させる - FVは駅ホームを強くぼかし青系に寄せた写真 - スマホを持つ手の切り抜きでアプリ画面を見せる - 装飾は斜めストライプ・爆発形・マーカーなどのフラット図形 - マスコットはピンク系の家型キャラを小さく添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央にSP幅程度のコンテンツ列を置き、左右はストライプ地で埋める - 価格ブロックはPCで2区間を横並びにしてもよい - 固定のダウンロード帯はPCで横幅いっぱいにしボタンを横並び - 文字サイズは1.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-cd626970`（元 LP の URL から採番） - **元 LP**: https://www.jr-eki.com/smart-eki/sp/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。