DESIGN.md — 空色×桜色の春フェアコンビニ食品LP（Sky Blue Spring Convenience Store Fair LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型、かわいい
• キーワード: 空色・桜の花びら・黄色の特大数字・クーポンカード・点線の区切り・商品写真の一覧
• 地の質感: FVは水彩の空と雲。中盤は和紙のようなピンクのムラ地。後半はフラットな空色の単色。
• 形: 角丸カードとボタンを使い、点線の区切りを入れる。写真は角丸なしの長方形。
• 温度感: 明るく暖かい。春の行楽気分。

Colors

• 地は空色とピンク和紙の2色だけにして、セクションごとに切り替える。
• 割引の数字と告知帯は必ず黄色にする。
• クーポンはマゼンタまたは朱色の面に白と黄色の文字で作る。
• 空色の地の文字は白にし、価格と商品名も白にする。
• ボタンの色は優先度で分ける。主は黄色、サブは青、最下部は白。
• button-primary は文字 #0A6FB5 × 背景 #FEED03 のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#0A6CB0、4.58:1）を使う。
• button-secondary は文字 #EFFEFE × 背景 #0F9FD4 のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0C7BA4、4.62:1）を使う。
• discount-panel は文字 #FEF001 × 背景 #DB436B のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CA2751、4.51:1）を使う。
• product-item は文字 #EFFEFE × 背景 #00AADB のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#007CA0、4.62:1）を使う。
• dotted-heading は文字 #FFF6C8 × 背景 #00AADB のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#007CA0、4.5:1）を使う。

Typography

• 全体を太い丸ゴシックで揃える。
• 割引の数字は本文の5倍以上の大きさにして、円・%・引きは小さく添える。
• 強調したい語だけ黄色にするか、ピンクの下線を引く。
• 装飾見出しは手書き風の書体にして、字間を広めにとる。
• 価格は数字だけ大きくし、税込額は括弧書きで小さくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCは中央寄せで、クーポンと商品を2カラムにする。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• FVは画面幅いっぱいのビジュアル1枚にする。
• クーポンカードは左右に約20pxの余白をとり、カードの下にボタンを置く。
• 商品は写真、商品名、点線、右寄せの価格の順に並べる。
• 商品と商品の間は約60px空ける。
• 注意書きは最下部にまとめる。

Elevation & Depth

• 影はほとんど使わない。
• カードは地との色差で浮かせる。
• ボタンもフラットな塗りで作る。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品写真は角丸なしの長方形（約4:3）で切る。
• セクション境界: 直線で地の色を切り替え、白の点線で区切る。
• ボタンは角丸16px前後の横長にする。
• ボタンの右端に細い山形の矢印を置く。
• クーポンカードは大きめの角丸にする。
• クーポンの内側の色面も角丸にする。

Components

• 黄色の主ボタン（button-primary）: 横幅いっぱいの黄色ボタン。文字は青で、右端に山形の矢印を付ける。
• 青のサブボタン（button-secondary）: アプリや通販へ誘導する。2行の白文字にする。
• 白ボタン（button-white）: 最下部の店舗検索用。文字はローズ色。
• 黄色の告知帯（announce-band）: FV直下に置く全幅の帯。プレゼントの告知を3行で中央に揃える。
• クーポンカード（coupon-card）: 生成りのカードの中に、アイコン付きの見出し、色面の割引表示、期間を載せる。
• 割引パネル（discount-panel）: マゼンタの面。商品の切り抜き写真と黄色の特大数字を組み合わせる。
• 商品カード（product-item）: 写真、白い商品名、白の点線、右寄せの価格の順に並べる。
• 点線挟み見出し（dotted-heading）: 手書き風の見出しを上下の白い点線で挟む。

Do's and Don'ts

Do - 地は空色を基調にし、春らしさは桜の花びらで足す。 - 割引の数字は黄色の特大サイズにする。 - クーポンの利用条件と期間はカード内に濃い青で書く。 - 商品一覧は同じ型をくり返す。 - ボタンは横幅いっぱいにして、右に矢印を付ける。

Don't - 暗い色や黒い面を使わない。 - 商品写真に角丸や影を付けない。 - 割引の数字を小さくしない。 - 明朝体を使わない。 - 色をむやみに増やさない。

Page Structure

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

1. ファーストビュー（フェア名と期間を伝える）: 水彩の空に、産地の地図のシルエット、商品写真、花びらを散らす。中央に筆書き風のロゴと期間を置く。
2. 告知帯（プレゼントを告知する）: 黄色の全幅の帯に、3行の太字を中央揃えで置く。
3. SNSキャンペーン（抽選への参加を促す）: 空色の地にバナー画像を置き、その下に黄色の主ボタンを置く。
4. クーポン特典（割引を訴求する）: ピンク和紙の地に生成りのカードを3枚並べる。それぞれのカードの下にサブボタンを置く。
5. 商品紹介（対象商品と価格を見せる）: 空色の地に点線挟みの見出しを置き、写真・名前・価格のセットを縦に並べる。
6. 締めのCTA（来店を促す）: 手書き風の2行のコピーと点線の下に、白ボタンを置く。
7. 注意書き（条件を明記する）: 白の小さな文字で、※付きの箇条書きにする。

Imagery

• 商品は明るい自然光の下で、やや俯瞰から撮る。
• 背景は水色、ピンク、ギンガムチェックの布にする。
• ソフトクリームなど単品の写真は、ピンクのグラデーションの地で撮る。
• クーポンには商品の切り抜き写真を使う。
• 装飾として桜の花びらを半透明で散らす。
• アイコンは青の線画で、店舗やスマホを描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央の約950px幅の中にレイアウトする。
• PCではクーポンカードを2カラムで並べる。
• PCでは商品一覧を2カラムのグリッドにし、先頭の商品だけ大きく見せる。
• PCのFVは横長にして、商品を左右に分けて置く。
• PCのボタンは幅を約300pxまで縮め、中央に置く。
• PCではアプリへのボタンにQRコードを添える。

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