DESIGN.md — 水色ギンガム×食品色カードのコンビニ菓子 LP（Light Blue Gingham Snack Pairing LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、かわいい、清潔・爽やか、親しみ・手作り感
• キーワード: 水色ギンガム・白パネル・食品色カード・紺の極太文字・雲形吹き出し・組み合わせ提案
• 地の質感: 淡い水色2色の格子柄。単色フラットな面で、グラデーションは使わない
• 形: 角丸の長方形カード、ピル型の白ボタン、雲形の吹き出し、斜め線で囲んだ見出し
• 温度感: 爽やかな水色と、温かいオレンジ・茶色の食品色が同居する明るいトーン

Colors

• ページ全体の地は水色2色のギンガム柄。セクション背景を別の色に切り替えない
• 商品カードは白パネルの中に置き、商品ごとに食品らしい色（オレンジ・赤紫・こげ茶・焼き色）で塗り分ける
• 色付きカードの上の文字は白だけにする
• 見出しとボタンの文字・枠線は紺に統一する
• 主役商品は青い帯、プラス記号は淡い水色にして、組み合わせを色で見せる
• 強調したい語の下にだけ黄色マーカーを引く
• base-product-bar は文字 #FBFEFB × 背景 #0196C9 のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#017DA8、4.59:1）を使う。
• product-card は文字 #FBFEFB × 背景 #FFAB31 のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A96400、4.58:1）を使う。
• banner-link は文字 #7D3B2F × 背景 #5DC4D3 のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-2-accessible（#75CDDA、4.53:1）を使う。

Typography

• 見出しはすべて極太の丸ゴシックで、本文調の細い書体は使わない
• セクション見出しは左右を斜めの線（＼ ／）ではさむ
• 価格は数字だけ大きくして、「本体価格」「円（税込…）」は小さく添える
• 見出しには白い太フチを付け、ギンガム柄の上でも読めるようにする
• 商品名は2行までにおさめ、カード幅いっぱいに左寄せする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC では白パネル内の商品カードを 2 列に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 白パネルは左右に約 5% の余白を取り、その内側に色付きカードを約 82% 幅で並べる
• 1 つの組み合わせは「主役の帯 → ＋ → 色付きカード」の順で縦に積む
• 白パネルの直前に、人物の切り抜きと雲形の吹き出しを置き、パネルに重ねて見せる
• カード同士の間は約 30px
• ボタンは画面幅の約 88% のピル型にして中央に置く

Elevation & Depth

• 基本はフラットで、影はほとんど使わない
• バナー画像だけに、ごく薄いドロップシャドウを付ける
• 立体感は、白パネルの上に人物の切り抜きを重ねて出す

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は白抜き（切り抜き）でカード中央に置く。人物は上半身を切り抜く。動画は角丸なしの 16:9
• セクション境界: 直線の区切りは入れず、ギンガム柄の上に白パネルを浮かせて区切る。見出しの下に、口を開けた吹き出し形の紺の曲線を置く
• 白パネルは角丸 16px
• 色付き商品カードと主役の帯は角丸 12px
• ボタンは紺の太い枠（約 4px）の白いピル型で、右端に三角の矢印を付ける
• 吹き出しは白い雲形
• カード内の名前と価格の間は、白の点線で区切る

Components

• ピル型の誘導ボタン（button-primary）: 白地に紺の太い枠を付けたピル型。紺の極太文字と、右端に三角の矢印
• 斜め線見出し（heading-slash）: 左右を紺の斜め線ではさんだ、白フチ付きの紺の見出し
• 雲形の推薦吹き出し（cloud-bubble）: 白い雲形の中に人物名と強調語を置き、強調語に黄色マーカーを引く。隣に人物の切り抜きを置く
• 主役商品の帯（base-product-bar）: 青い角丸の帯。左に主役商品の写真、右に白の太字で商品名
• プラス記号（plus-sign）: 組み合わせを表す、水色の太い＋の記号
• 色付き商品カード（product-card）: 食品色で単色に塗ったカード。上に切り抜き写真、下に白の商品名、点線、価格を並べる
• 組み合わせパネル（white-panel）: 主役の帯・＋・商品カードをまとめる、白い角丸のパネル
• 商品情報バナー（banner-link）: 水色系の画像バナー。左に茶色の商品名と「》…《」で囲んだリンク文
• 注釈リスト（note-list）: ※から始まる小さな注釈を、左寄せで並べる

Do's and Don'ts

Do - 地にはギンガム柄を敷き、内容は白パネルにまとめる - 商品カードの色は、その商品の味や色（キャラメル・芋・チョコなど）から選ぶ - 価格は数字を大きく白抜きにして、税込も添える - 人物は笑顔の切り抜きにして、雲形の吹き出しと組み合わせる - ボタンと見出しの色は紺 1 色に統一する

Don't - 細い明朝体や細身の書体は使わない - グラデーションや強い影を多用しない - カードに黒や灰色の地を使わない - 商品写真を角版でトリミングしない（切り抜きで置く） - ギンガム柄の上に長い本文を直接置かない

Page Structure

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

1. ファーストビュー（商品と出演者で、楽しさを一目で伝える）: 出演者2人が商品を持つ写真を全幅で置き、上下に白の極太キャッチと商品名を重ねる
2. CM動画（テレビCMを見てもらう）: 斜め線見出しの下に、16:9 の動画埋め込みを置く
3. 商品情報への誘導（詳しい商品ページへ移動させる）: 角丸の画像バナー1枚
4. 外部チャンネルへの誘導（動画チャンネルへ移動させる）: 斜め線ではさんだ2行のリード文と、白いピル型ボタン
5. アレンジ見出し（組み合わせ提案の始まりを示す）: 白フチ付きの紺の大きな文字に、スプーンとフォークの装飾。下に吹き出し形の曲線
6. 推薦者ごとの組み合わせ（おすすめの組み合わせを商品ごとに見せる）: 雲形吹き出しと人物の切り抜きを置き、白パネルの中に主役の帯、＋、色付きカードを並べる。推薦者を替えて3回くり返す
7. 店舗検索CTA（店舗へ足を運んでもらう）: 全幅に近い白いピル型ボタン
8. 注釈（画像や取り扱いについての注意）: ※から始まる小さな文字を左寄せで並べる

Imagery

• 商品はパッケージごと白背景で撮り、切り抜いて少し斜め上から見せる
• 人物は明るいスタジオで撮った、大きな笑顔の上半身の切り抜き
• メインビジュアルは店舗前の明るい屋外で、商品を手に持つ人物を撮る
• 装飾は紺の線画（スプーン・フォーク・矢印）と白い雲だけに絞る
• 背景はタイル状の水色ギンガム柄
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 960px のカラムを置き、外側はギンガム柄で埋める
• PC では色付き商品カードを 2 列のグリッドにする
• PC では、カード 1 枚だけの組み合わせを横長にし、写真を左、名前と価格を右に置く
• 動画・バナー・ボタンは、PC では幅を約 60% に抑えて中央に置く
• 主役の帯は、PC では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 行書くと起動時に読み込まれる。