濃紺×レモン黄の鉄道系カード特典 LP

Blue Railway Credit Card Campaign LP

濃い青の地に白カードを縦に積み、レモン黄のピル型ボタンと特典帯でポイント額を目立たせるクレジットカード入会キャンペーン LP。PC では中央に SP 幅のカラムを置き、左右に固定ナビとバナーを配置する。

金融・保険信頼・誠実清潔・爽やか情報量多め・訴求型PC

ダウンロード

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

COLORS

配色

地は濃紺・水色・白の 3 種でセクションを切り替える
紺地の上には白カードを重ねて読ませる
主 CTA と特典額の帯はレモン黄で統一する
赤は追加特典の強調だけに限定する
ポイント数字は紺の太字で大きく置く
注釈は灰色の小さな文字でまとめる

TYPOGRAPHY

書体

displayファーストビューのポイント数字ゴシック／ Noto Sans JP 900 ／ 44px ／行間 1.1

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

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

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

headline-mdカード見出し・特長タイトルゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.4

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

accent還元率などの大きな%数字欧文サンセリフ／ Montserrat 800 ／ 40px ／行間 1.0

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

body-md本文ゴシック／ Noto Sans JP 400 ／ 14px ／行間 1.7

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

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

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

label-buttonボタン文字ゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.3

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

数字は本文の 3 倍以上に大きくし、単位の pt や % は小さくする
見出しは太字のゴシック体で中央揃え、下に短い線を引く
STEP 番号は小さな英字と数字で左上に置く
注釈は ※ 付きでカードの下にまとめる

PAGE STRUCTURE

セクション構成

ファーストビュー合計特典額を伝える青のグラデ地にロゴ・大きな pt 数字・カード券面・黄色 CTA
上位カード訴求バナー上位券種の特典を知らせる紺地に金のカードと大きな数字の横長バナー
特典内訳入会特典と利用特典を示すタブ見出し付き黄色ボックス 2 つと注釈
獲得ステップ手順を説明する紺地に白い STEP カード 4 枚と各 CTA
特長還元のメリットを伝える水色地に番号付き紺帯カード 4 枚と大きな % 数字
ポイントの使い道使い道を見せる灰色ボックスにバナー画像 3 つと白枠ボタン
券種紹介カードの種類を比べるタブ切替とスライダーで券面と説明を表示
選び方タイプ別におすすめする紺ラベル付きカードのカルーセルとアイコンリスト
概要・注意事項条件と期間を示す紺地に白カード、見出し・表・スクロール枠
問い合わせ窓口を案内する白地にテキストと灰色の受付時間ボックス

COMPONENTS

部品

黄色ピル CTA button-primary紺文字に右矢印付きのレモン黄ピル型ボタン
白枠ピルボタン button-outline白地に紺枠と紺丸矢印のサブボタン
特典ボックス benefit-box上に白い見出しタブ、黄色面に大きなポイント数字
STEP カード step-card白カードに STEP 番号・見出し・右上アイコン・説明・CTA を並べる
番号付き特長見出し feature-label紺帯に白枠の 2 桁番号と白文字のタイトル
さらにバッジ badge-extra赤い丸に白文字の追加特典バッジ
券種タブ tab-switch選択中は紺、未選択はグレーの 2 タブ
注釈 note-text※付きの小さな灰色文字

守ること

特典額は黄色面に大きな紺数字で見せる
濃紺と水色の地を交互にしてリズムを作る
手順は番号付きカードで縦に並べる
条件と注意は概要カードと表で細かく整理する
PC は中央カラムと固定サイドナビにする

DON'T

避けること

黄色を CTA と特典以外に多用しない
暖色の写真背景を入れない
数字を細い書体にしない
角ばったボタンを混ぜない
注釈を本文と同じ大きさにしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 濃紺×レモン黄の鉄道系カード特典 LP（Blue Railway Credit Card Campaign LP）

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

Overview

業種: 金融・保険／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
キーワード: 濃紺・レモン黄・白カード・大きなポイント数字・ステップ・注釈多め
地の質感: フラットな単色面。グラデーションはファーストビューの青だけに控えめに使う
形: 角丸カードとピル型ボタン。四角い番号ラベル
温度感: クールな青が基調。黄色で明るさと親しみを足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#004A9F`	ブランド濃紺・セクション地	18%	画素の実測
`background`	`#C9DEF9`	ページ外側の淡い青	35%	画素の実測
`surface`	`#FEFEFE`	カード・白セクション	14%	画素の実測
`background-alt`	`#E4F6FE`	特長セクションの水色地	10%	画素の実測
`cta`	`#FEFE9B`	主ボタン・特典帯のレモン黄	3%	画素の実測
`on-cta`	`#0C4F9D`	黄ボタン上の紺文字	0%	画素の主要色に補正
`text`	`#1A2A4A`	見出し・本文の濃紺文字	2%	推定
`on-dark`	`#FFFFFF`	紺地上の白文字	1%	画素の主要色に補正
`accent-1`	`#F06464`	「さらに」バッジ・強調数字の赤	0%	推定
`tint-1`	`#FEF3F3`	追加特典ボックスの淡いピンク	0%	画素の実測
`line`	`#D2DDE3`	表・区切り線のグレー	0%	画素の主要色に補正
`text-muted`	`#6B7280`	注釈の灰色文字	1%	推定
`secondary`	`#4C82BC`	見出しラベル・タブの中間青	0%	画素の実測
`accent-1-accessible`	`#E91C1C`	AA を満たす補正値（計算）		計算

地は濃紺・水色・白の 3 種でセクションを切り替える
紺地の上には白カードを重ねて読ませる
主 CTA と特典額の帯はレモン黄で統一する
赤は追加特典の強調だけに限定する
ポイント数字は紺の太字で大きく置く
注釈は灰色の小さな文字でまとめる
badge-extra は文字 #FFFFFF × 背景 #F06464 のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E91C1C、4.52:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ファーストビューのポイント数字	ゴシック	Noto Sans JP	900	44px	1.1	0.0em
`headline-lg`	セクション見出し	ゴシック	Noto Sans JP	700	22px	1.4	0.03em
`headline-md`	カード見出し・特長タイトル	ゴシック	Noto Sans JP	700	17px	1.4	0.02em
`accent`	還元率などの大きな%数字	欧文サンセリフ	Montserrat	800	40px	1.0	0.0em
`body-md`	本文	ゴシック	Noto Sans JP	400	14px	1.7	0.02em
`note`	※注釈	ゴシック	Noto Sans JP	400	11px	1.6	0.0em
`label-button`	ボタン文字	ゴシック	Noto Sans JP	700	15px	1.3	0.03em

数字は本文の 3 倍以上に大きくし、単位の pt や % は小さくする
見出しは太字のゴシック体で中央揃え、下に短い線を引く
STEP 番号は小さな英字と数字で左上に置く
注釈は ※ 付きでカードの下にまとめる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。PC も中央に約 375px 幅のカラムを置く
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
カードは左右 16px の余白をとって縦に積む
各カードの末尾に CTA を置く
特長は番号ラベルとアイコン、数字の 3 段で組む
表は 2 列のシンプルな枠線表にする

Elevation & Depth

カードは影なしの白面にする
主 CTA だけ薄い影をつけてもよい
PC の左右バナーはフラットにする

Shapes

角丸: 小 4px ／中 8px ／大 12px。ボタンはピル型。
写真の切り抜き: カード券面は角丸の長方形のまま斜めに重ねて置く
セクション境界: 直線で地の色を切り替える
ボタンはすべてピル型
番号ラベルは角丸なしの紺の四角
特典ボックスは角丸 8px の黄色面
タブは上の角だけ丸める

Components

黄色ピル CTA（button-primary）: 紺文字に右矢印付きのレモン黄ピル型ボタン
白枠ピルボタン（button-outline）: 白地に紺枠と紺丸矢印のサブボタン
特典ボックス（benefit-box）: 上に白い見出しタブ、黄色面に大きなポイント数字
STEP カード（step-card）: 白カードに STEP 番号・見出し・右上アイコン・説明・CTA を並べる
番号付き特長見出し（feature-label）: 紺帯に白枠の 2 桁番号と白文字のタイトル
さらにバッジ（badge-extra）: 赤い丸に白文字の追加特典バッジ
券種タブ（tab-switch）: 選択中は紺、未選択はグレーの 2 タブ
注釈（note-text）: ※付きの小さな灰色文字

Do's and Don'ts

Do - 特典額は黄色面に大きな紺数字で見せる - 濃紺と水色の地を交互にしてリズムを作る - 手順は番号付きカードで縦に並べる - 条件と注意は概要カードと表で細かく整理する - PC は中央カラムと固定サイドナビにする

Don't - 黄色を CTA と特典以外に多用しない - 暖色の写真背景を入れない - 数字を細い書体にしない - 角ばったボタンを混ぜない - 注釈を本文と同じ大きさにしない

Page Structure

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

ファーストビュー（合計特典額を伝える）: 青のグラデ地にロゴ・大きな pt 数字・カード券面・黄色 CTA
上位カード訴求バナー（上位券種の特典を知らせる）: 紺地に金のカードと大きな数字の横長バナー
特典内訳（入会特典と利用特典を示す）: タブ見出し付き黄色ボックス 2 つと注釈
獲得ステップ（手順を説明する）: 紺地に白い STEP カード 4 枚と各 CTA
特長（還元のメリットを伝える）: 水色地に番号付き紺帯カード 4 枚と大きな % 数字
ポイントの使い道（使い道を見せる）: 灰色ボックスにバナー画像 3 つと白枠ボタン
券種紹介（カードの種類を比べる）: タブ切替とスライダーで券面と説明を表示
選び方（タイプ別におすすめする）: 紺ラベル付きカードのカルーセルとアイコンリスト
概要・注意事項（条件と期間を示す）: 紺地に白カード、見出し・表・スクロール枠
問い合わせ（窓口を案内する）: 白地にテキストと灰色の受付時間ボックス

Imagery

カード券面は実物風の 3D に近いフラット画像を斜めに重ねる
アイコンは紺の線画か小さなフラットアイコンにする
使い道は横長の青系バナーで見せる
人物写真は使わずに数字と図で訴求する
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は中央に SP 幅のカラムを固定し、外側を淡い青で埋める
PC 左側にはアンカーナビと丸い申込ボタンを固定表示する
PC 右側には他キャンペーンのバナーと白枠ボタンを置く
SP ではサイドを省いて本文カラムを全幅にする

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 Railway Credit Card Campaign LP
description: 濃い青の地に白カードを縦に積み、レモン黄のピル型ボタンと特典帯でポイント額を目立たせるクレジットカード入会キャンペーン LP。PC では中央に SP 幅のカラムを置き、左右に固定ナビとバナーを配置する。
colors:
  primary: '#004A9F'
  background: '#C9DEF9'
  surface: '#FEFEFE'
  background-alt: '#E4F6FE'
  cta: '#FEFE9B'
  on-cta: '#0C4F9D'
  text: '#1A2A4A'
  on-dark: '#FFFFFF'
  accent-1: '#F06464'
  tint-1: '#FEF3F3'
  line: '#D2DDE3'
  text-muted: '#6B7280'
  secondary: '#4C82BC'
  accent-1-accessible: '#E91C1C'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.1
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.03em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  accent:
    fontFamily: Montserrat
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.0
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.03em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 56px
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: 48px
  button-outline:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 44px
  benefit-box:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.text}'
    typography: '{typography.display}'
    rounded: '{rounded.md}'
    height: 120px
  step-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 220px
  feature-label:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 56px
  badge-extra:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  tab-switch:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 36px
  note-text:
    textColor: '{colors.text-muted}'
    typography: '{typography.note}'
---

# DESIGN.md — 濃紺×レモン黄の鉄道系カード特典 LP（Blue Railway Credit Card Campaign LP）

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

## Overview

- **業種**: 金融・保険 ／ **雰囲気**: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
- **キーワード**: 濃紺・レモン黄・白カード・大きなポイント数字・ステップ・注釈多め
- **地の質感**: フラットな単色面。グラデーションはファーストビューの青だけに控えめに使う
- **形**: 角丸カードとピル型ボタン。四角い番号ラベル
- **温度感**: クールな青が基調。黄色で明るさと親しみを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#004A9F` | ブランド濃紺・セクション地 | 18% | 画素の実測 |
| `background` | `#C9DEF9` | ページ外側の淡い青 | 35% | 画素の実測 |
| `surface` | `#FEFEFE` | カード・白セクション | 14% | 画素の実測 |
| `background-alt` | `#E4F6FE` | 特長セクションの水色地 | 10% | 画素の実測 |
| `cta` | `#FEFE9B` | 主ボタン・特典帯のレモン黄 | 3% | 画素の実測 |
| `on-cta` | `#0C4F9D` | 黄ボタン上の紺文字 | 0% | 画素の主要色に補正 |
| `text` | `#1A2A4A` | 見出し・本文の濃紺文字 | 2% | 推定 |
| `on-dark` | `#FFFFFF` | 紺地上の白文字 | 1% | 画素の主要色に補正 |
| `accent-1` | `#F06464` | 「さらに」バッジ・強調数字の赤 | 0% | 推定 |
| `tint-1` | `#FEF3F3` | 追加特典ボックスの淡いピンク | 0% | 画素の実測 |
| `line` | `#D2DDE3` | 表・区切り線のグレー | 0% | 画素の主要色に補正 |
| `text-muted` | `#6B7280` | 注釈の灰色文字 | 1% | 推定 |
| `secondary` | `#4C82BC` | 見出しラベル・タブの中間青 | 0% | 画素の実測 |
| `accent-1-accessible` | `#E91C1C` | AA を満たす補正値（計算） |  | 計算 |

- 地は濃紺・水色・白の 3 種でセクションを切り替える
- 紺地の上には白カードを重ねて読ませる
- 主 CTA と特典額の帯はレモン黄で統一する
- 赤は追加特典の強調だけに限定する
- ポイント数字は紺の太字で大きく置く
- 注釈は灰色の小さな文字でまとめる
- `badge-extra` は文字 `#FFFFFF` × 背景 `#F06464` のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E91C1C`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのポイント数字 | ゴシック | Noto Sans JP | 900 | 44px | 1.1 | 0.0em |
| `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.03em |
| `headline-md` | カード見出し・特長タイトル | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.02em |
| `accent` | 還元率などの大きな%数字 | 欧文サンセリフ | Montserrat | 800 | 40px | 1.0 | 0.0em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.03em |

- 数字は本文の 3 倍以上に大きくし、単位の pt や % は小さくする
- 見出しは太字のゴシック体で中央揃え、下に短い線を引く
- STEP 番号は小さな英字と数字で左上に置く
- 注釈は ※ 付きでカードの下にまとめる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC も中央に約 375px 幅のカラムを置く
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
- カードは左右 16px の余白をとって縦に積む
- 各カードの末尾に CTA を置く
- 特長は番号ラベルとアイコン、数字の 3 段で組む
- 表は 2 列のシンプルな枠線表にする

## Elevation & Depth

- カードは影なしの白面にする
- 主 CTA だけ薄い影をつけてもよい
- PC の左右バナーはフラットにする

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
- **写真の切り抜き**: カード券面は角丸の長方形のまま斜めに重ねて置く
- **セクション境界**: 直線で地の色を切り替える
- ボタンはすべてピル型
- 番号ラベルは角丸なしの紺の四角
- 特典ボックスは角丸 8px の黄色面
- タブは上の角だけ丸める

## Components

- **黄色ピル CTA**（`button-primary`）: 紺文字に右矢印付きのレモン黄ピル型ボタン
- **白枠ピルボタン**（`button-outline`）: 白地に紺枠と紺丸矢印のサブボタン
- **特典ボックス**（`benefit-box`）: 上に白い見出しタブ、黄色面に大きなポイント数字
- **STEP カード**（`step-card`）: 白カードに STEP 番号・見出し・右上アイコン・説明・CTA を並べる
- **番号付き特長見出し**（`feature-label`）: 紺帯に白枠の 2 桁番号と白文字のタイトル
- **さらにバッジ**（`badge-extra`）: 赤い丸に白文字の追加特典バッジ
- **券種タブ**（`tab-switch`）: 選択中は紺、未選択はグレーの 2 タブ
- **注釈**（`note-text`）: ※付きの小さな灰色文字

## Do's and Don'ts

**Do**
- 特典額は黄色面に大きな紺数字で見せる
- 濃紺と水色の地を交互にしてリズムを作る
- 手順は番号付きカードで縦に並べる
- 条件と注意は概要カードと表で細かく整理する
- PC は中央カラムと固定サイドナビにする

**Don't**
- 黄色を CTA と特典以外に多用しない
- 暖色の写真背景を入れない
- 数字を細い書体にしない
- 角ばったボタンを混ぜない
- 注釈を本文と同じ大きさにしない

## Page Structure

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

1. **ファーストビュー**（合計特典額を伝える）: 青のグラデ地にロゴ・大きな pt 数字・カード券面・黄色 CTA
2. **上位カード訴求バナー**（上位券種の特典を知らせる）: 紺地に金のカードと大きな数字の横長バナー
3. **特典内訳**（入会特典と利用特典を示す）: タブ見出し付き黄色ボックス 2 つと注釈
4. **獲得ステップ**（手順を説明する）: 紺地に白い STEP カード 4 枚と各 CTA
5. **特長**（還元のメリットを伝える）: 水色地に番号付き紺帯カード 4 枚と大きな % 数字
6. **ポイントの使い道**（使い道を見せる）: 灰色ボックスにバナー画像 3 つと白枠ボタン
7. **券種紹介**（カードの種類を比べる）: タブ切替とスライダーで券面と説明を表示
8. **選び方**（タイプ別におすすめする）: 紺ラベル付きカードのカルーセルとアイコンリスト
9. **概要・注意事項**（条件と期間を示す）: 紺地に白カード、見出し・表・スクロール枠
10. **問い合わせ**（窓口を案内する）: 白地にテキストと灰色の受付時間ボックス

## Imagery

- カード券面は実物風の 3D に近いフラット画像を斜めに重ねる
- アイコンは紺の線画か小さなフラットアイコンにする
- 使い道は横長の青系バナーで見せる
- 人物写真は使わずに数字と図で訴求する
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に SP 幅のカラムを固定し、外側を淡い青で埋める
- PC 左側にはアンカーナビと丸い申込ボタンを固定表示する
- PC 右側には他キャンペーンのバナーと白枠ボタンを置く
- SP ではサイドを省いて本文カラムを全幅にする

## 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-47521460`（元 LP の URL から採番）
- **元 LP**: https://wester.jr-odekake.net/j-west/card/202412entry_use_point
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（7/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://wester.jr-odekake.net/j-west/card/202412entry_use_point（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

金融・保険白×鮮青のグレー線画系不動産投資 LPClean Blue Gray Fintech Investment LP 金融・保険桜ピンク×藤紫のやさしいペット保険 LPSoft Pink Pet Insurance LP 金融・保険青×黄の斜め切替が躍動する銀行アプリLPBold Blue Diagonal Banking App LP 金融・保険パステル方眼×ラベンダーのカード入会LPPastel Grid Cosmetic Credit Card Campaign LP 金融・保険ミント×深緑の春色ネット銀行キャンペーンLPFresh Mint Spring Cashback Bank Campaign LP 金融・保険蛍光ピンク×黒線のアンケート図解通信LPHot Pink Infographic Survey Report LP