DESIGN.md — 空色×レモン黄の爽快モバイル決済 LP（Bright Sky Blue and Lemon Mobile Payment LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 清潔・爽やか、ポップ・元気、信頼・誠実、やさしい・柔らかい
• キーワード: 空色・レモン黄・スピード感・角丸・キャラクター・ステップ解説
• 地の質感: 白地と淡い水色・淡黄の地を基本にする。FV と導入部には、斜めに流れるぼかしグラデーション帯を散らして疾走感を出す。
• 形: 大きな角丸ブロック（約40px）、角丸カード、ピル型ボタン、円形の番号バッジ
• 温度感: 明るく軽やかで、ややクールな寒色寄り。黄色で温かみを足す

Colors

• 地は白・淡水色・淡黄を交互に切り替え、セクションの区切りを色で示す
• 強く訴えたいブロックだけ、大きな角丸のレモン黄の面にする
• 見出しは空色、ステップ見出しは濃い青、本文はダークグレーと使い分ける
• 数字の強調やタグラインには黄色のマーカー下線を引く
• ボタンは青系で統一し、文字は白にする
• 赤や暖色の強い色は使わない
• button-primary は文字 #FFFFFF × 背景 #1BA0E5 のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#147DB3、4.55:1）を使う。
• section-title-pill は文字 #FFFFFF × 背景 #03C3DD のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#028092、4.66:1）を使う。
• highlight-block は文字 #00A1E9 × 背景 #FEFF7F のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0078AE、4.61:1）を使う。
• tab-switch は文字 #FFFFFF × 背景 #03C3DD のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#028092、4.66:1）を使う。
• faq-item は文字 #00A1E9 × 背景 #FFFFFF のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0078AE、4.51:1）を使う。

Typography

• 見出しと本文は基本中央揃えにする
• 導入の本文は行間を2.0前後と広めにとる
• 数字は本文の2〜3倍の大きさで、黄色マーカーを添える
• 単位や『突破』などの語は数字より小さく付ける
• 見出しは太字のゴシックだけで構成し、明朝は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。導入リンクとキャスト紹介は 2 列
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約20pxにする
• セクション見出しの下に約24pxの余白をとる
• ステップカードは縦に並べ、間を約40pxあける
• ナビ用のリンクカードは 2 列で並べる
• FAQ は全幅のリストで、項目間に線を引く

Elevation & Depth

• 影はほとんど使わず、面の色と枠線で区切る
• スライダーの矢印は白か黄の円で、薄い影を付ける
• 下部 CTA ボタンは下側に濃い青の帯を付け、立体感を出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。人物は背景を切り抜いて配置する
• セクション境界: 直線で区切らず、大きな角丸ブロックや地の色の切り替えで区切る
• 強調ブロックは画面ほぼ全幅で、角丸40pxにする
• ステップカードはシアンの2px枠で、角丸16pxにする
• 番号は円形で、カード上辺にまたがせて配置する
• タブの選択側は吹き出しのような三角を下に付ける

Components

• ピル型主ボタン（button-primary）: 全幅の青いピル型ボタン。白い太字を載せる
• ピル型見出し帯（section-title-pill）: シアンのピル型の帯に白い見出しを載せ、下に黄色のドットを5つ並べる
• 番号付きステップカード（step-card）: 白地にシアンの枠。上端に円形の番号を置き、見出し・3点ドット・本文・画像の順に並べる
• 黄色の角丸ブロック（highlight-block）: メリットやキャスト紹介を包む大きなレモン黄の面
• 2択タブ（tab-switch）: 左がシアンの塗り、右が枠線のみ。選択側に下向きの三角を付ける
• FAQ アコーディオン（faq-item）: 青い円の Q アイコン、空色の質問文、右端の＋を並べる。下に区切り線を引く
• 画像付きリンクカード（link-card）: 上に画像、下に白地のラベルと下向きの矢印を置くカード
• 2連の吹き出し付き CTA（sticky-cta-pair）: 白いピル型の吹き出しの下に、濃い青のアイコン付きボタンを 2 つ並べる
• バナースライダー（carousel）: 角丸の画像に、左右の円形矢印とドットのインジケーターを付ける

Do's and Don'ts

Do - 空色と黄色の2色を軸に、淡いトーンの地を交互に重ねる - FV や導入部には、斜めのぼかし帯を散らしてスピード感を出す - 手順は番号付きカードで、1 ステップずつ見せる - キャラクターや人物の切り抜きで親しみを出す - 本文は中央揃えで、行間を広めにとる

Don't - 黒地や濃い暖色の面を使わない - 角張ったボックスや直線の区切りを多用しない - 本文を左揃えで詰め込まない - 装飾フォントや明朝体を混ぜない - 影を強く付けない

Page Structure

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

1. ファーストビュー（サービスの価値を一瞬で伝える）: 空色の地に白い太字のキャッチを置く。端末のモックアップ、ロゴの並び、人物2名の切り抜き、斜めの黄色いぼかし帯で構成する
2. 実績（利用者数で信頼感を出す）: 上辺が角丸の淡色グラデーション地に、巨大な数字と黄色マーカー、注釈を置く
3. サービス概要（何ができるかを説明する）: 空色の見出しと、中央揃えで行間の広い短文を数行
4. ページ内ナビ（主要セクションへ誘導する）: 2 列の画像付きリンクカード
5. メリット（使う利点を見せる）: 黄色の角丸ブロックの中に、角丸のバナースライダーとピル型ボタンを置く
6. おトク情報（特典・キャンペーンを訴求する）: 淡い水色の地に、斜線で囲んだリード文とバナーのスライダーを置く
7. 利用の流れ（始め方を手順で示す）: ピル型の見出し帯、対応機種確認のカード、2択タブ、番号付きステップカード3枚の順に並べる
8. CM 動画（広告映像で認知を補強する）: 角丸の動画サムネイルを黄色い円形矢印のスライダーで見せ、下にキャプションを置く
9. キャスト紹介（出演者で親しみを出す）: 黄色の角丸ブロックに、人物の切り抜きを 2 列で並べ、下に名前を置く
10. よくある質問（疑問を解消する）: Q アイコン付きのアコーディオンを区切り線で並べる
11. 締めの CTA（利用開始へ誘導する）: マーカー付きのタグライン、吹き出し付きの青いボタン 2 つ

Imagery

• 人物は明るい無地の背景で笑顔を撮影し、切り抜いて使う。服は青と黄に合わせる
• マスコットキャラクターの3DCGを、淡い水色の地に置く
• 端末のモックアップで画面を見せる
• 斜めに流れる黄・白のぼかし帯で、流れ星のようなスピード感を出す
• アイコンはシンプルなフラット線画にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約375px）の縦長カラムを置き、外側を淡い水色の地にする
• PC の左側には、キャラクター・アプリアイコン・QR コードの案内パネルを固定する
• PC の右側には、ページ内リンクのテキストナビを固定する
• 中のレイアウトは SP と同じ 1 カラムのままにする

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