DESIGN.md — 黄ストライプ×緑の元気なコンビニアプリ LP（Pop Yellow Stripe Retail App Promo LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 黄色ストライプ・濃緑の極太文字・白フチ見出し・吹き出しカード・スマホモック・ステップ番号
• 地の質感: フラットなベタ塗り。黄色2トーンの太い縦ストライプが賑やかさを出す
• 形: 太い緑枠の角丸カード、円形の番号バッジ、ピル型ボタン、斜線で挟む見出し
• 温度感: 明るく暖かい。黄と緑の補色寄りでコンビニらしい活気

Colors

• 上半分の訴求部は淡黄と濃黄の太い縦ストライプ地にする
• ダウンロード帯だけ緑ベタで区切り、白文字を載せる
• 手順・FAQ部は白地に淡灰の斜め帯を敷いて落ち着かせる
• 見出しは緑文字＋白フチ、または緑文字＋黄マーカー下線
• 主要アクションは緑、補助リンク的ボタンは黄緑でトーンを分ける
• 黒はアプリストアボタンのみに限定
• button-primary は文字 #F8FEF8 × 背景 #1D8E22 のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1B8620、4.58:1）を使う。
• button-cta は文字 #F8FEF8 × 背景 #AACB01 のコントラスト比が 1.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#687C01、4.59:1）を使う。
• benefit-badge は文字 #1D8E22 × 背景 #FFFFFF のコントラスト比が 4.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1B8620、4.57:1）を使う。
• benefit-card は文字 #1D8E22 × 背景 #FDFADA のコントラスト比が 4.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1B8620、4.61:1）を使う。

Typography

• 見出しは極太ゴシックで、FVは白フチ＋薄い影を付ける
• 特典カード見出しはカード幅いっぱいの特大サイズ
• 本文も緑の太字で短い文を3〜4行にまとめる
• セクション見出しは左右に斜線「＼ ／」を置き、下に黄マーカー
• 注釈は※付き小さい灰文字
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC は特典を 3 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 特典カードは番号バッジ→カードを縦に連結
• カード内は左テキスト右スマホモックの2分割
• 手順はステップを左右交互にジグザグ配置
• ボタンは横幅80%前後で中央寄せ
• FAQ導線は見出し→ボタン→質問例の順

Elevation & Depth

• 影はほぼ使わずフラット
• FV見出しのみ白フチ＋軽い影
• スマホモックは黒フレームで立体感を出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: アプリ画面はスマホ端末フレームに収める。キャラは切り抜き
• セクション境界: 直線で色面を切り替え。白地には斜めの淡灰帯
• 特典カードは太さ5px程度の緑枠角丸＋下に吹き出しの尻尾
• 番号バッジは白地に太い緑枠の正円
• ステップ番号は白円＋緑枠、横に緑のピル型ラベル
• ボタンはすべてピル型で右に三角矢印

Components

• 緑ピルボタン（button-primary）: 白太字＋下向き三角、ページ内リンク用
• 黄緑ピルボタン（button-cta）: 外部遷移用、白太字＋右三角
• アプリストアボタン（store-badge）: 黒地角丸のストアバッジを2つ並べ、上に小見出し
• 特典番号バッジ（benefit-badge）: 白い正円に緑枠、上に小さい文字、下に大きな数字
• 吹き出し特典カード（benefit-card）: 緑枠クリーム地、特大見出し＋本文＋スマホモック、下に尻尾
• ステップラベル（step-label）: 白円の番号と緑ピルの説明文を横に連結
• 斜線見出し（section-heading）: 緑太字の左右に斜線、下に黄マーカー
• 質問例リスト（faq-examples）: 縦書きラベル枠＋黒丸の箇条書き

Do's and Don'ts

Do - 黄色の縦ストライプを訴求エリアの地に必ず使う - 見出し・枠・ボタンを同じ緑で統一する - 手順はスマホ画面モック＋タップする手のアイコンで示す - キャラクターで親しみと掛け合いを出す - 数字やステップは円バッジで目立たせる

Don't - 細い明朝や繊細な書体を使わない - グラデーションや強い影で重くしない - 緑以外の主要色を増やさない - 特典カードの枠を細くしない - 白地部分にストライプを延長しない

Page Structure

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

1. ヘッダー（運営元とナビの提示）: 白地にロゴとSNSアイコン、3分割のタブナビ
2. ファーストビュー（アプリの楽しさを一目で伝える）: 黄ストライプ地に白フチ大見出し、スマホを挟む2体のキャラ、緑線で挟んだサブコピー
3. ダウンロード（即インストールを促す）: 緑ベタ帯に斜線見出しとストアボタン2つ
4. 特長（特典3つ）（メリットを順に訴求）: 番号バッジ＋吹き出しカードを縦に3連、最後にページ内リンクボタン2つ
5. 会員登録手順（登録方法の説明）: 白地に斜線見出し、ステップ3つをジグザグ配置のスマホモックで
6. カード登録手順（ICカード連携の説明）: 同じステップ形式を繰り返す
7. よくある質問導線（疑問をチャットへ誘導）: 黄マーカー見出し、黄緑ボタン、質問例リスト
8. 注釈（商標表記）: ※付き小文字を左揃え
9. 関連ストア・フッター（他サービスへの回遊）: 灰色帯に白ロゴカードのグリッド、下に白地フッター

Imagery

• 動物キャラの漫画調イラストを切り抜きで配置
• アプリ画面は黒フレームのスマホモックに入れる
• 操作箇所に線画の手アイコンと動き線を添える
• 手書き風の斜め吹き出しコピーを添える
• 写真は使わずイラストと画面キャプチャ中心
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは特典カードを3カラム横並びにする
• PCのダウンロード帯はQRコードをストアボタン横に追加
• PCのページ内リンクボタンは横並び2つ
• ステップのジグザグ配置はPCでも維持し幅を広げる
• 関連ストアはPCで5列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 行書くと起動時に読み込まれる。