--- version: alpha name: Bright Cyan Mobile Payment Service LP description: 明るいシアンを主役に、淡い水色の地とレモン黄の帯を組み合わせた、清潔で親しみやすいアプリ訴求LP。ピル型の見出し帯、シアン枠の角丸カード、「悩み→解決」の吹き出しと黄色マーカーで機能をわかりやすく並べ、マスコットの3D写真で親しみを足している。 colors: primary: '#04C3DD' on-primary: '#FFFFFF' background: '#FEFFFE' background-alt: '#E7FCFF' secondary: '#0760A7' accent-1: '#FFF57F' marker: '#FDF59B' tint-1: '#ABDDF6' tint-2: '#FEFDDF' accent-2: '#328FC2' text-body: '#555555' cta: '#020202' on-cta: '#F2F2F2' line: '#10B4DF' primary-accessible: '#038192' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 28px fontWeight: 800 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em rounded: sm: 8px md: 14px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' pill-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 44px download-panel: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 230px button-store: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 32px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 560px step-card: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 400px tab-switch: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 56px stat-ribbon: backgroundColor: '{colors.accent-1}' textColor: '{colors.secondary}' typography: '{typography.accent}' height: 70px faq-item: textColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 50px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px --- # DESIGN.md — シアン×レモン黄の交通系決済アプリ LP（Bright Cyan Mobile Payment Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 清潔・爽やか、ポップ・元気、信頼・誠実、情報量多め・訴求型 - **キーワード**: シアン・水色の地・レモン黄の帯・角丸の枠カード・悩み→解決・マスコット - **地の質感**: フラットな単色面が中心。写真部分だけ青のグラデーション背景を使う - **形**: ピル型の見出し帯、太いシアン枠の角丸カード、雲形の吹き出し、下向きの三角 - **温度感**: 爽やかで涼しい。黄色で明るさと温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#04C3DD` | ピル見出し・カードの見出し帯・枠線 | 8% | 画素の実測 | | `on-primary` | `#FFFFFF` | シアン面の上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#FEFFFE` | カード内・白セクションの地 | 33% | 画素の実測 | | `background-alt` | `#E7FCFF` | メインコンテンツの淡い水色の地 | 20% | 画素の実測 | | `secondary` | `#0760A7` | 濃い青の見出し文字・解決の文 | 3% | 画素の実測 | | `accent-1` | `#FFF57F` | DL導線を囲む帯・マーカーのレモン黄 | 4% | 画素の実測 | | `marker` | `#FDF59B` | 解決文の下に敷く黄色マーカー | 1% | 画素の主要色に補正 | | `tint-1` | `#ABDDF6` | 手順の写真の背景・悩みを書く雲形の吹き出し | 7% | 画素の実測 | | `tint-2` | `#FEFDDF` | 手順カード内のDL導線の淡いクリーム地 | 2% | 画素の実測 | | `accent-2` | `#328FC2` | ファーストビューの青いグラデーション | 4% | 画素の主要色に補正 | | `text-body` | `#555555` | 本文の灰色の文字 | 1% | 推定 | | `cta` | `#020202` | アプリストアボタンの黒 | 0% | 画素の実測 | | `on-cta` | `#F2F2F2` | 黒ボタン上の白文字 | 0% | 画素の実測 | | `line` | `#10B4DF` | FAQの区切り線 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#038192` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い水色（#E7FCFF）を交互に置き、セクションの区切りにする - 見出し帯・カードの枠・番号の丸はすべて同じシアンで揃える - 見出しや解決の文は濃い青の文字にし、本文は灰色にする - レモン黄はDL導線を囲む全幅の帯と、文字下のマーカーだけに使う - 主CTAは黒いアプリストアバッジ。ほかの色のボタンは作らない - 写真の背景はシアン〜青のグラデーションで統一する - `pill-heading` は文字 `#FFFFFF` × 背景 `#04C3DD` のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#038192`、4.61:1）を使う。 - `tab-switch` は文字 `#FFFFFF` × 背景 `#04C3DD` のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#038192`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大きな見出し・中間に置く大きな問いかけ | ゴシック | Noto Sans JP | 700 | 34px | 1.3 | 0.08em | | `headline-lg` | ピル帯のセクション見出し（白抜き） | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.08em | | `headline-md` | カードの見出し帯・解決の文（濃い青＋黄マーカー） | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.06em | | `headline-sm` | 手順のタイトル・FAQの質問 | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.03em | | `body-md` | 中央揃えの説明文 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.02em | | `note` | ※の注記・テキストリンク | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `accent` | 大きな数字・番号の丸・吹き出しの英字 | 欧文サンセリフ | Montserrat | 800 | 28px | 1.1 | 0.0em | | `label-button` | タブ・枠付きのリンクボタン | ゴシック | Noto Sans JP | 700 | 10px | 1.5 | 0.03em | - 見出しはすべて太字のゴシックにし、字間を少し広げる - 本文は中央揃えで細めの灰色にし、短い行で改行する - 解決の文は濃い青の太字にし、下半分に黄色のマーカーを敷く - ピル見出しの下には小さな黄色の点を5つ並べる - 数字は大きく、単位は小さく組んで差をつける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央寄せの 1 カラムで、メリット欄だけ左に目次・右にカードの 2 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - カードは左右に約16pxの余白をとって中央に置く - カード同士の間は約24px - セクションの始まりは全幅のピル見出し - 画像はカード内で約75%の幅にして中央に置く - DL導線の帯は数セクションごとに繰り返す ## Elevation & Depth - 影はほぼ使わない。シアンの太い枠線と面の色の差で階層を作る - おトク欄の中の白いカードだけ、角丸の白い面として浮かせる ## Shapes - **角丸**: 小 8px ／ 中 14px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 正方形に近い角なしの長方形。背景は青のグラデーション - **セクション境界**: 直線で背景色を切り替える。FVの下だけ角丸の帯が重なる - カードは約3pxのシアン枠＋角丸14px - 見出しはピル型の全幅帯 - 手順番号はシアンの丸に白い数字を入れ、枠の上辺に重ねる - 悩みは雲形の淡い水色の吹き出しに入れ、下向きの三角でつなぐ ## Components - **ピル見出し**（`pill-heading`）: 全幅のシアンのピル帯に白抜きの見出しを入れ、下に黄色の点を5つ並べる - **アプリDLパネル**（`download-panel`）: 黄色の帯の中に置く。シアンの見出し帯＋白い面に、アプリアイコンと黒いストアバッジを並べる - **ストアバッジ**（`button-store`）: 黒い角丸のアプリストアボタン。これが主CTA - **メリットカード**（`feature-card`）: シアンの見出し帯→雲形の悩み→下向きの三角→黄色マーカーの解決の文→画像、の順に並べる - **手順カード**（`step-card`）: 枠の上辺にシアンの丸番号を重ね、タイトル・説明・水色地の図解を入れる - **2択タブ**（`tab-switch`）: シアン枠の左右2分割。選んだ側はシアン面に白文字で、下に三角を付ける - **実績リボン**（`stat-ribbon`）: シアン地の上に黄色のリボン型の帯を置き、大きな数字を濃い青で入れる - **FAQ行**（`faq-item`）: 左にシアンの丸Q、太字の質問、右に＋。下にシアンの線を引く - **枠付きリンクボタン**（`button-outline`）: 白地に青の細い枠のピル型ボタン。右に＞を付ける ## Do's and Don'ts **Do** - 色はシアン・濃い青・レモン黄・白・淡い水色の5色に絞る - 機能の説明は必ず「悩み→三角→解決」の型で書く - DL導線のパネルはページ内で3回以上繰り返す - マスコットの写真や端末の写真は青のグラデーション背景で撮る - テキストは中央揃えで短く改行する **Don't** - 赤やオレンジのボタンを作らない - 影の強いカードや立体的なボタンを使わない - 明朝体や手書き風の書体を混ぜない - 本文を左揃えの長い段落にしない - 黄色を広い本文の地に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービス名と価値を一目で伝える）: シアン〜青の斜めグラデーションの上に端末の写真と白い大見出し、小さなアイコン2つとロゴを置く 2. **実績**（利用者数で信頼を示す）: シアンの帯の上に黄色のリボンを置き、大きな数字と注記を入れる 3. **アプリDL導線**（すぐにダウンロードしてもらう）: 黄色の全幅帯の中にDLパネルを置く 4. **問いかけ見出し**（興味を引く）: 白地に濃い青の特大の文字を置く。PCでは横に流れる 5. **サービス紹介**（概要を説明する）: ピル見出し＋中央揃えの本文＋マスコットとCHECKの吹き出し＋シアン枠の動画 6. **利用の流れ**（始め方を示す）: 対応機種の確認ボックス、2択タブ、番号付きの手順カード3枚 7. **メリット**（機能ごとの利点を伝える）: 悩み→解決の型のメリットカードを8枚ほど縦に並べる 8. **おトクなつかい方**（ポイントがたまる利点を伝える）: 角丸の水色の大きな箱に、白いカード2枚を＋でつないで並べる。最後に枠付きボタンと注記 9. **よくある質問**（不安をなくす）: Qの丸・＋・シアンの線のアコーディオンを10行 10. **関連キャンペーン**（ほかの施策へ案内する）: シアンから水色へのグラデーションの地に白いピル見出し、バナー、黄色のリンク帯 11. **最後のCTA**（最後にダウンロードしてもらう）: 黄色の帯の中にDLパネルを置く ## Imagery - 水色のマスコットキャラクターを3DCGの柔らかな質感で描き、ショッピングバッグなどを持たせる - スマホやスマートウォッチの画面の写真を、シアン〜青のグラデーション背景で中央に置く - 手順の図は水色の地に白いフラットなアイコン（下向きの矢印など）で描く - ポイントの説明は、手と端末を描いたシンプルな線画のイラストにする - アプリのアイコンは角丸の正方形で見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCも中央寄せで、本文の幅は約800pxに抑える - メリット欄は、PCでは左に縦並びの目次ボタン、右にカードの2カラムにする - 手順カードは、PCでは左にテキスト・右に画像の横並びにし、番号はSTEPと書いたピルにする - DLパネルは、PCではアイコン・ストアバッジ・QRコードを横一列に並べる - おトクの2カードは、PCでは＋を挟んで横に並べる ## 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-33d18a70`（元 LP の URL から採番） - **元 LP**: https://www.jr-odekake.net/icoca/applepay/about/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。