青と水色の通勤向けモバイル決済アプリ LP

Clean Blue Commuter App LP

白〜淡い水色の地に、鮮やかな青と濃紺を重ねた清潔で信頼感のある交通系アプリ LP。角を斜めに切ったカード、ラベル付き吹き出し、点線のつなぎで利用シーンを順に見せ、後半は青い面に切り替えてポイント訴求に入る。

エンタメ・ゲーム・アプリ清潔・爽やか信頼・誠実クール・先進的情報量多め・訴求型SPPC

ダウンロード

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

COLORS

配色

前半は白〜淡い水色のグラデーション地で悩みと解決を見せる
ポイント訴求セクションから地を primary の青一色に切り替える
ボタン・Q アイコン・番号は secondary の濃い青に統一
見出し文字は青系のみで黒は使わない
上位プランはゴールドで差別化し、他では金色を使わない
強調は黄色マーカーを本文の一部だけに使う

TYPOGRAPHY

書体

displayFV の大キャッチ（斜体気味の太字）ゴシック／ Noto Sans JP 900 ／ 44px ／行間 1.2

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

headline-lgセクション大見出しゴシック／ Noto Sans JP 700 ／ 24px ／行間 1.5

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

headline-mdカードの解決文・ステップ見出しゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.6

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

headline-sm悩み吹き出し・FAQ質問ゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.6

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

body-md説明文ゴシック／ Noto Sans JP 400 ／ 12px ／行間 1.8

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

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

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

accent人数・ポイント・STEP数の大きな数字欧文セリフ／ Noto Serif JP 700 ／ 40px ／行間 1.1

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

label-buttonボタン文字・ラベルゴシック／ Noto Sans JP 700 ／ 11px ／行間 1.4

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

数字だけセリフ体で大きくし、単位は小さく添える
見出しは中央揃えで 2〜3 行に改行する
助詞や補足語は小さくして主語を大きく見せる
FV のコピーは白い帯の上に濃い青文字で置く
注釈は ※ 付きの極小文字で左揃え

PAGE STRUCTURE

セクション構成

ファーストビュー利用シーンとアプリでの完結を一目で伝えるオフィスの人物写真にアプリ画面を重ね、斜めの白帯上に青い大キャッチ
悩みと解決利用シーン別の不満をアプリが解決すると示すラベル付き悩み帯→点線→斜めカット写真カードを 5 回繰り返す
実績利用者数で信頼を示す金の月桂樹に大きな数字、下に対象層の青見出し
使い方ステップ始めやすさを伝える3 ステップのスライダー。アプリストアのボタンを並べる
CTAOS 別に申込へ誘導白カードに見出しと短文、濃い青のボタン 2 本
お得訴求提携カードでの得を数値で示す青一色の地。括弧型の見出しと、利用額を足し算で並べる水色カード
プラン比較年間ポイントをプラン別に示す青帯とゴールド帯の見出しの白カードを縦に 2 枚
ポイント説明ポイントの価値を説明白線枠の中に白パネルと水色パネルを上下に並べる
最終 CTAアプリのダウンロードを促す斜めカットの濃紺ブロックにアイコン・見出し・ストアボタン
よくある質問不安を解消淡い水色の地に Q アイコン付きアコーディオン 6 行

COMPONENTS

部品

矢印付き主ボタン button-primary濃い青の長方形。左に文字、右端に細い矢印
シーンラベル scene-label濃い青の小タグ。しっぽ付きで白い悩み帯の左上に重ねる
悩み帯 worry-bar白い横長帯に悩みを 1 行。下に点線を伸ばしてカードにつなぐ
斜めカット解決カード solution-card上に写真、境目に青いラベル、下に解決文 2〜3 行。細い青枠
月桂樹の実績表示 laurel-stat金色の月桂樹で囲み、中央にセリフ体の大きな数字
ステップスライダー step-slider左上に番号の四角、上が水色の画像面、下に説明。左右に四角い矢印
獲得ポイントカード point-card色帯の見出し、商品画像、斜めカットの枠内に大きなポイント数字
FAQ アコーディオン faq-item青枠の白い行。左に濃い青の Q 四角、右に青い＋ボタン

守ること

青系の濃淡だけで画面をまとめる
カードの角は斜めカットで統一する
数字はセリフ体で大きく、単位は小さく
悩みと解決を点線でつなぐ
注釈は必ず数字の近くに極小文字で置く

DON'T

避けること

ピル型や大きな角丸のボタンにしない
赤やオレンジの強調色を入れない
濃い影やグラデーションのボタンにしない
見出しを黒文字にしない
写真を円形に切り抜かない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 青と水色の通勤向けモバイル決済アプリ LP（Clean Blue Commuter App LP）

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

Overview

業種: エンタメ・ゲーム・アプリ／ 雰囲気: 清潔・爽やか、信頼・誠実、クール・先進的、情報量多め・訴求型
キーワード: 青のグラデーション地・斜めカットのカード・シーン別の悩みと解決・ポイント数字の強調・ビジネスパーソンの写真
地の質感: フラットな単色面と、ごく淡い水色のグラデーション。影はほぼ使わず細い青の線で枠を作る
形: 角丸なしの長方形。カードの左上と右下を斜めに切る。ラベルは小さな吹き出しのしっぽ付き
温度感: 寒色で涼しい。きちんとしたビジネス向けの温度感

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#1E8EE4`	ブランドの青。ラベル・大見出し・ポイント訴求の面	15%	画素の実測
`secondary`	`#024DB3`	濃い青。ボタン・Qアイコン・タグ	6%	画素の実測
`cta`	`#014EB1`	主CTAボタンの濃い青	2%	画素の実測
`on-cta`	`#FFFFFF`	ボタン上の白文字	0%	画素の主要色に補正
`background`	`#FFFFFF`	カードや白いセクションの地	22%	画素の実測
`background-alt`	`#E3F1FE`	淡い水色の地（シーン紹介・FAQ）	20%	画素の実測
`tint-1`	`#B8E0FA`	ステップ画像背景や比較カードの薄い青	4%	画素の実測
`tint-2`	`#4AA6E9`	青面の中のサブパネル	2%	画素の実測
`dark-section`	`#004EB0`	最終CTAの濃紺ブロック	4%	画素の実測
`text`	`#2A528B`	見出し・本文の濃い青文字	1%	画素の実測
`text-body`	`#333333`	説明文の濃グレー	0%	推定
`line`	`#246DBB`	カード枠の細い青線	0%	画素の実測
`accent-1`	`#CEAC31`	ゴールド系カード見出し・月桂樹	1%	画素の実測
`marker`	`#FEFC8C`	本文の黄色マーカー	0%	画素の実測
`on-dark`	`#EEFEFF`	青面上の白文字	1%	画素の実測

前半は白〜淡い水色のグラデーション地で悩みと解決を見せる
ポイント訴求セクションから地を primary の青一色に切り替える
ボタン・Q アイコン・番号は secondary の濃い青に統一
見出し文字は青系のみで黒は使わない
上位プランはゴールドで差別化し、他では金色を使わない
強調は黄色マーカーを本文の一部だけに使う

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV の大キャッチ（斜体気味の太字）	ゴシック	Noto Sans JP	900	44px	1.2	0.02em
`headline-lg`	セクション大見出し	ゴシック	Noto Sans JP	700	24px	1.5	0.04em
`headline-md`	カードの解決文・ステップ見出し	ゴシック	Noto Sans JP	700	17px	1.6	0.04em
`headline-sm`	悩み吹き出し・FAQ質問	ゴシック	Noto Sans JP	700	13px	1.6	0.03em
`body-md`	説明文	ゴシック	Noto Sans JP	400	12px	1.8	0.03em
`note`	※注釈	ゴシック	Noto Sans JP	400	9px	1.6	0.0em
`accent`	人数・ポイント・STEP数の大きな数字	欧文セリフ	Noto Serif JP	700	40px	1.1	0.0em
`label-button`	ボタン文字・ラベル	ゴシック	Noto Sans JP	700	11px	1.4	0.04em

数字だけセリフ体で大きくし、単位は小さく添える
見出しは中央揃えで 2〜3 行に改行する
助詞や補足語は小さくして主語を大きく見せる
FV のコピーは白い帯の上に濃い青文字で置く
注釈は ※ 付きの極小文字で左揃え
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、カードは中央寄せ
本文ブロックの幅: 画面幅の約 78%
余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
悩み吹き出し→点線→解決カードを 1 セットで縦に繰り返す
カードは画面幅の約 78% で中央に置く
青面の中に白カードを重ねて比較を見せる
ボタンは 2 本を縦に詰めて並べる
FAQ は幅いっぱいの枠付きリスト

Elevation & Depth

影はほぼ使わずフラット
悩み吹き出しの白帯にだけごく薄い影
立体感は細い青線と面の色差で出す

Shapes

角丸: 小 0px ／中 2px ／大 4px。ボタンは角丸の長方形。
写真の切り抜き: カード上部いっぱいの横長長方形。左上を斜めにカット
セクション境界: 直線で地色を切り替える。ブロックの角を斜めに落とす
カードの左上と右下を斜めに切る
ラベルは左下にしっぽのある四角い吹き出し
ボタンは角丸なしの長方形に右矢印
番号は白い四角に枠線

Components

矢印付き主ボタン（button-primary）: 濃い青の長方形。左に文字、右端に細い矢印
シーンラベル（scene-label）: 濃い青の小タグ。しっぽ付きで白い悩み帯の左上に重ねる
悩み帯（worry-bar）: 白い横長帯に悩みを 1 行。下に点線を伸ばしてカードにつなぐ
斜めカット解決カード（solution-card）: 上に写真、境目に青いラベル、下に解決文 2〜3 行。細い青枠
月桂樹の実績表示（laurel-stat）: 金色の月桂樹で囲み、中央にセリフ体の大きな数字
ステップスライダー（step-slider）: 左上に番号の四角、上が水色の画像面、下に説明。左右に四角い矢印
獲得ポイントカード（point-card）: 色帯の見出し、商品画像、斜めカットの枠内に大きなポイント数字
FAQ アコーディオン（faq-item）: 青枠の白い行。左に濃い青の Q 四角、右に青い＋ボタン

Do's and Don'ts

Do - 青系の濃淡だけで画面をまとめる - カードの角は斜めカットで統一する - 数字はセリフ体で大きく、単位は小さく - 悩みと解決を点線でつなぐ - 注釈は必ず数字の近くに極小文字で置く

Don't - ピル型や大きな角丸のボタンにしない - 赤やオレンジの強調色を入れない - 濃い影やグラデーションのボタンにしない - 見出しを黒文字にしない - 写真を円形に切り抜かない

Page Structure

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

ファーストビュー（利用シーンとアプリでの完結を一目で伝える）: オフィスの人物写真にアプリ画面を重ね、斜めの白帯上に青い大キャッチ
悩みと解決（利用シーン別の不満をアプリが解決すると示す）: ラベル付き悩み帯→点線→斜めカット写真カードを 5 回繰り返す
実績（利用者数で信頼を示す）: 金の月桂樹に大きな数字、下に対象層の青見出し
使い方ステップ（始めやすさを伝える）: 3 ステップのスライダー。アプリストアのボタンを並べる
CTA（OS 別に申込へ誘導）: 白カードに見出しと短文、濃い青のボタン 2 本
お得訴求（提携カードでの得を数値で示す）: 青一色の地。括弧型の見出しと、利用額を足し算で並べる水色カード
プラン比較（年間ポイントをプラン別に示す）: 青帯とゴールド帯の見出しの白カードを縦に 2 枚
ポイント説明（ポイントの価値を説明）: 白線枠の中に白パネルと水色パネルを上下に並べる
最終 CTA（アプリのダウンロードを促す）: 斜めカットの濃紺ブロックにアイコン・見出し・ストアボタン
よくある質問（不安を解消）: 淡い水色の地に Q アイコン付きアコーディオン 6 行

Imagery

スーツやジャケット姿の 20〜30 代が自然光の中でスマホを操作する写真
オフィス・駅・電車・店舗など利用シーンがわかる明るい背景
アプリ画面は端末モックに入れて人物写真に重ねる
カード券面やマスコットのアイコンはフラットで立体感を抑える
装飾は月桂樹・点線・斜めカット・括弧型の線に限る
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は悩みと解決カードを横 4 列のカルーセルに並べる
PC のステップは画像を左、説明を右に置く横長カード
PC のプラン比較は 2 枚を横に並べる
PC の FAQ は左に見出し、右に質問リストの 2 カラム
PC の最終 CTA はストアボタンに QR コードを付ける
PC の FV は写真を横長に広げ、コピーを左上にまとめる

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: Clean Blue Commuter App LP
description: 白〜淡い水色の地に、鮮やかな青と濃紺を重ねた清潔で信頼感のある交通系アプリ LP。角を斜めに切ったカード、ラベル付き吹き出し、点線のつなぎで利用シーンを順に見せ、後半は青い面に切り替えてポイント訴求に入る。
colors:
  primary: '#1E8EE4'
  secondary: '#024DB3'
  cta: '#014EB1'
  on-cta: '#FFFFFF'
  background: '#FFFFFF'
  background-alt: '#E3F1FE'
  tint-1: '#B8E0FA'
  tint-2: '#4AA6E9'
  dark-section: '#004EB0'
  text: '#2A528B'
  text-body: '#333333'
  line: '#246DBB'
  accent-1: '#CEAC31'
  marker: '#FEFC8C'
  on-dark: '#EEFEFF'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Noto Serif JP
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
rounded:
  sm: 0px
  md: 2px
  lg: 4px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    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}'
    height: 30px
  scene-label:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.label-button}'
    height: 20px
  worry-bar:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 44px
  solution-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 330px
  laurel-stat:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 200px
  step-slider:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 500px
  point-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 520px
  faq-item:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 54px
---

# DESIGN.md — 青と水色の通勤向けモバイル決済アプリ LP（Clean Blue Commuter App LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 清潔・爽やか、信頼・誠実、クール・先進的、情報量多め・訴求型
- **キーワード**: 青のグラデーション地・斜めカットのカード・シーン別の悩みと解決・ポイント数字の強調・ビジネスパーソンの写真
- **地の質感**: フラットな単色面と、ごく淡い水色のグラデーション。影はほぼ使わず細い青の線で枠を作る
- **形**: 角丸なしの長方形。カードの左上と右下を斜めに切る。ラベルは小さな吹き出しのしっぽ付き
- **温度感**: 寒色で涼しい。きちんとしたビジネス向けの温度感

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#1E8EE4` | ブランドの青。ラベル・大見出し・ポイント訴求の面 | 15% | 画素の実測 |
| `secondary` | `#024DB3` | 濃い青。ボタン・Qアイコン・タグ | 6% | 画素の実測 |
| `cta` | `#014EB1` | 主CTAボタンの濃い青 | 2% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `background` | `#FFFFFF` | カードや白いセクションの地 | 22% | 画素の実測 |
| `background-alt` | `#E3F1FE` | 淡い水色の地（シーン紹介・FAQ） | 20% | 画素の実測 |
| `tint-1` | `#B8E0FA` | ステップ画像背景や比較カードの薄い青 | 4% | 画素の実測 |
| `tint-2` | `#4AA6E9` | 青面の中のサブパネル | 2% | 画素の実測 |
| `dark-section` | `#004EB0` | 最終CTAの濃紺ブロック | 4% | 画素の実測 |
| `text` | `#2A528B` | 見出し・本文の濃い青文字 | 1% | 画素の実測 |
| `text-body` | `#333333` | 説明文の濃グレー | 0% | 推定 |
| `line` | `#246DBB` | カード枠の細い青線 | 0% | 画素の実測 |
| `accent-1` | `#CEAC31` | ゴールド系カード見出し・月桂樹 | 1% | 画素の実測 |
| `marker` | `#FEFC8C` | 本文の黄色マーカー | 0% | 画素の実測 |
| `on-dark` | `#EEFEFF` | 青面上の白文字 | 1% | 画素の実測 |

- 前半は白〜淡い水色のグラデーション地で悩みと解決を見せる
- ポイント訴求セクションから地を primary の青一色に切り替える
- ボタン・Q アイコン・番号は secondary の濃い青に統一
- 見出し文字は青系のみで黒は使わない
- 上位プランはゴールドで差別化し、他では金色を使わない
- 強調は黄色マーカーを本文の一部だけに使う

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の大キャッチ（斜体気味の太字） | ゴシック | Noto Sans JP | 900 | 44px | 1.2 | 0.02em |
| `headline-lg` | セクション大見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.5 | 0.04em |
| `headline-md` | カードの解決文・ステップ見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.04em |
| `headline-sm` | 悩み吹き出し・FAQ質問 | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.03em |
| `body-md` | 説明文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.03em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em |
| `accent` | 人数・ポイント・STEP数の大きな数字 | 欧文セリフ | Noto Serif JP | 700 | 40px | 1.1 | 0.0em |
| `label-button` | ボタン文字・ラベル | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.04em |

- 数字だけセリフ体で大きくし、単位は小さく添える
- 見出しは中央揃えで 2〜3 行に改行する
- 助詞や補足語は小さくして主語を大きく見せる
- FV のコピーは白い帯の上に濃い青文字で置く
- 注釈は ※ 付きの極小文字で左揃え
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、カードは中央寄せ
- **本文ブロックの幅**: 画面幅の約 78%
- **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
- 悩み吹き出し→点線→解決カードを 1 セットで縦に繰り返す
- カードは画面幅の約 78% で中央に置く
- 青面の中に白カードを重ねて比較を見せる
- ボタンは 2 本を縦に詰めて並べる
- FAQ は幅いっぱいの枠付きリスト

## Elevation & Depth

- 影はほぼ使わずフラット
- 悩み吹き出しの白帯にだけごく薄い影
- 立体感は細い青線と面の色差で出す

## Shapes

- **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
- **写真の切り抜き**: カード上部いっぱいの横長長方形。左上を斜めにカット
- **セクション境界**: 直線で地色を切り替える。ブロックの角を斜めに落とす
- カードの左上と右下を斜めに切る
- ラベルは左下にしっぽのある四角い吹き出し
- ボタンは角丸なしの長方形に右矢印
- 番号は白い四角に枠線

## Components

- **矢印付き主ボタン**（`button-primary`）: 濃い青の長方形。左に文字、右端に細い矢印
- **シーンラベル**（`scene-label`）: 濃い青の小タグ。しっぽ付きで白い悩み帯の左上に重ねる
- **悩み帯**（`worry-bar`）: 白い横長帯に悩みを 1 行。下に点線を伸ばしてカードにつなぐ
- **斜めカット解決カード**（`solution-card`）: 上に写真、境目に青いラベル、下に解決文 2〜3 行。細い青枠
- **月桂樹の実績表示**（`laurel-stat`）: 金色の月桂樹で囲み、中央にセリフ体の大きな数字
- **ステップスライダー**（`step-slider`）: 左上に番号の四角、上が水色の画像面、下に説明。左右に四角い矢印
- **獲得ポイントカード**（`point-card`）: 色帯の見出し、商品画像、斜めカットの枠内に大きなポイント数字
- **FAQ アコーディオン**（`faq-item`）: 青枠の白い行。左に濃い青の Q 四角、右に青い＋ボタン

## Do's and Don'ts

**Do**
- 青系の濃淡だけで画面をまとめる
- カードの角は斜めカットで統一する
- 数字はセリフ体で大きく、単位は小さく
- 悩みと解決を点線でつなぐ
- 注釈は必ず数字の近くに極小文字で置く

**Don't**
- ピル型や大きな角丸のボタンにしない
- 赤やオレンジの強調色を入れない
- 濃い影やグラデーションのボタンにしない
- 見出しを黒文字にしない
- 写真を円形に切り抜かない

## Page Structure

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

1. **ファーストビュー**（利用シーンとアプリでの完結を一目で伝える）: オフィスの人物写真にアプリ画面を重ね、斜めの白帯上に青い大キャッチ
2. **悩みと解決**（利用シーン別の不満をアプリが解決すると示す）: ラベル付き悩み帯→点線→斜めカット写真カードを 5 回繰り返す
3. **実績**（利用者数で信頼を示す）: 金の月桂樹に大きな数字、下に対象層の青見出し
4. **使い方ステップ**（始めやすさを伝える）: 3 ステップのスライダー。アプリストアのボタンを並べる
5. **CTA**（OS 別に申込へ誘導）: 白カードに見出しと短文、濃い青のボタン 2 本
6. **お得訴求**（提携カードでの得を数値で示す）: 青一色の地。括弧型の見出しと、利用額を足し算で並べる水色カード
7. **プラン比較**（年間ポイントをプラン別に示す）: 青帯とゴールド帯の見出しの白カードを縦に 2 枚
8. **ポイント説明**（ポイントの価値を説明）: 白線枠の中に白パネルと水色パネルを上下に並べる
9. **最終 CTA**（アプリのダウンロードを促す）: 斜めカットの濃紺ブロックにアイコン・見出し・ストアボタン
10. **よくある質問**（不安を解消）: 淡い水色の地に Q アイコン付きアコーディオン 6 行

## Imagery

- スーツやジャケット姿の 20〜30 代が自然光の中でスマホを操作する写真
- オフィス・駅・電車・店舗など利用シーンがわかる明るい背景
- アプリ画面は端末モックに入れて人物写真に重ねる
- カード券面やマスコットのアイコンはフラットで立体感を抑える
- 装飾は月桂樹・点線・斜めカット・括弧型の線に限る
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は悩みと解決カードを横 4 列のカルーセルに並べる
- PC のステップは画像を左、説明を右に置く横長カード
- PC のプラン比較は 2 枚を横に並べる
- PC の FAQ は左に見出し、右に質問リストの 2 カラム
- PC の最終 CTA はストアボタンに QR コードを付ける
- PC の FV は写真を横長に広げ、コピーを左上にまとめる

## 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-6fe0a929`（元 LP の URL から採番）
- **元 LP**: https://www.jr-odekake.net/icoca/mobile/commute-business-person/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（13/15 色を画素から実測）、書体 中、余白 中
- **生成**: 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-odekake.net/icoca/mobile/commute-business-person/（公開状況により表示できない場合があります）
この 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