青×黄ストライプの鉄道アプリ訴求LP

Blue Stripe Railway App Promo LP

コーポレートブルーと黄色マーカーで価格の安さとメリットを強く打ち出す、交通系アプリのダウンロード訴求LP。水色の斜めストライプ地に白カード、吹き出しQ&A、爆発型の「YES」バッジで元気に見せる。

エンタメ・ゲーム・アプリポップ・元気清潔・爽やか情報量多め・訴求型力強い・インパクトSP

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は白と水色ストライプを交互に使い、メリット部は白カードをストライプ上に浮かせる
価格・ロゴ・回答文はブランドブルーで統一
黄色はCTA帯とマーカー線、爆発バッジのみに限定
赤は最安バッジなど一点だけに使う
FAQ見出しはブルー全面帯に白文字で切り替える
質問文は濃いグレー、回答は青で色分けする

TYPOGRAPHY

書体

displayFVの大コピー・価格数字ゴシック／ Noto Sans JP 900 ／ 64px ／行間 1.15

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgメリット見出しゴシック／ Noto Sans JP 900 ／ 26px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdFAQ質問文ゴシック／ Noto Sans JP 700 ／ 23px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm吹き出し文・回答文ゴシック／ Noto Sans JP 700 ／ 19px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-md動作環境などの本文ゴシック／ Noto Sans JP 500 ／ 14px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

note※注釈ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

accentYESなどの斜体欧文装飾・ディスプレイ／ Montserrat 900 ／ 44px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

label-button詳しくはボタンゴシック／ Noto Sans JP 900 ／ 24px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

全体を極太ゴシックで統一し、細い書体は注釈のみ
価格数字は見出しの2倍以上の大きさで青
見出しは2行に分け中央揃え
強調語の下半分に黄色マーカーを斜めに敷く
ロゴ風の文字は右上がりの斜体で疾走感を出す

PAGE STRUCTURE

セクション構成

ファーストビューおトクさを一言で伝えるぼかした駅写真に白極太の大コピー、斜体ロゴ、青帯の短い説明3行
価格訴求具体的な割引額を見せる白地に区間と巨大青数字、黄マーカーの差額、赤バッジを2区間分
CTA詳細へ誘導全幅黄色帯に青太字と矢印
メリット導入メリット一覧への導入水色ストライプ地に斜体ロゴと黄マーカー付き3行見出し
メリット（繰り返し3回）利点と疑問の解消白カードに列車写真、円番号、見出し、疑問吹き出し2つ、YESバッジ
よくある質問見出しFAQへの切り替え青全面帯に白ロゴと見出し、スマホを持つ手の写真、下端は波形
よくある質問不安の解消青枠の質問箱と、黄マーカー付き青回答、注釈
CTA再度誘導黄色帯ボタン
ダウンロードアプリ取得キャラクター付きロゴ、大きなストアボタン2つ、動作環境を青文字で
フッター固定バー常時ダウンロード導線青帯にキャラと白見出し、ストアボタン横並び、上へ戻る黒丸

COMPONENTS

部品

黄色CTA帯 cta-band全幅の黄色帯に青太字と丸矢印アイコン
価格訴求ブロック price-block小見出し・区間・巨大な青数字・黄マーカー付き差額の縦積み
最安バッジ badge-burst-red赤い角丸四角に白文字2行、傾けて配置
メリット番号 number-circle小さなラベルの下に青い正円と白数字
疑問の吹き出し speech-bubble水色地の大角丸吹き出しに青太字の疑問文
YES爆発バッジ yes-burst黄色のギザギザ形に青斜体の肯定語とロゴ
FAQ質問箱 faq-item生成り地に青枠の角丸箱としっぽ、下に青太字回答と黄マーカー
ストアボタン store-button黒い角丸のアプリストアバッジ

守ること

強調語には必ず黄色マーカーを敷く
メリットは同じ型を番号付きで繰り返す
価格は巨大な青数字で見せる
質問は吹き出しで利用者の声として見せる
CTAは黄色帯で区切りごとに置く

DON'T

避けること

青と黄以外の色を面で増やさない
細い明朝や手書きを使わない
影やグラデーションでリッチにしない
吹き出しを四角にしない
注釈を大きくしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

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 独自の章。上から順に、カッコ内が各セクションの役割。

ファーストビュー（おトクさを一言で伝える）: ぼかした駅写真に白極太の大コピー、斜体ロゴ、青帯の短い説明3行
価格訴求（具体的な割引額を見せる）: 白地に区間と巨大青数字、黄マーカーの差額、赤バッジを2区間分
CTA（詳細へ誘導）: 全幅黄色帯に青太字と矢印
メリット導入（メリット一覧への導入）: 水色ストライプ地に斜体ロゴと黄マーカー付き3行見出し
メリット（繰り返し3回）（利点と疑問の解消）: 白カードに列車写真、円番号、見出し、疑問吹き出し2つ、YESバッジ
よくある質問見出し（FAQへの切り替え）: 青全面帯に白ロゴと見出し、スマホを持つ手の写真、下端は波形
よくある質問（不安の解消）: 青枠の質問箱と、黄マーカー付き青回答、注釈
CTA（再度誘導）: 黄色帯ボタン
ダウンロード（アプリ取得）: キャラクター付きロゴ、大きなストアボタン2つ、動作環境を青文字で
フッター固定バー（常時ダウンロード導線）: 青帯にキャラと白見出し、ストアボタン横並び、上へ戻る黒丸

Imagery

車両は白背景で切り抜き、カード右上にはみ出させる
FVは駅ホームを強くぼかし青系に寄せた写真
スマホを持つ手の切り抜きでアプリ画面を見せる
装飾は斜めストライプ・爆発形・マーカーなどのフラット図形
マスコットはピンク系の家型キャラを小さく添える
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCは中央にSP幅程度のコンテンツ列を置き、左右はストライプ地で埋める
価格ブロックはPCで2区間を横並びにしてもよい
固定のダウンロード帯はPCで横幅いっぱいにしボタンを横並び
文字サイズは1.2倍程度に留める

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 行書くと起動時に読み込まれる。

---
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/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://www.jr-eki.com/smart-eki/sp/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP