--- version: alpha name: Light Blue Gingham Snack Pairing LP description: 水色のギンガム柄を地に敷き、白いパネルの中に商品ごとの色（オレンジ・赤紫・茶）で塗ったカードを縦に並べた、コンビニの季節商品キャンペーン風 LP。紺色の極太丸ゴシックと雲形の吹き出しで、ポップで親しみやすい雰囲気にしている。 colors: background: '#AEE1EA' background-alt: '#ADE2EA' surface: '#FEFFFD' primary: '#042A78' secondary: '#0196C9' accent-1: '#FFAB31' accent-2: '#C90060' accent-3: '#7D3B2F' tint-1: '#D37E01' tint-2: '#5DC4D3' marker: '#FBDB02' on-primary: '#FBFEFB' text: '#333333' secondary-accessible: '#017DA8' accent-1-accessible: '#A96400' tint-2-accessible: '#75CDDA' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 32px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 800 lineHeight: 1.35 letterSpacing: 0.02em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.08em accent: fontFamily: Montserrat fontSize: 28px fontWeight: 800 lineHeight: 1.1 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 label-button: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 rounded: sm: 8px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px heading-slash: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 48px cloud-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 150px base-product-bar: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 86px plus-sign: backgroundColor: '{colors.tint-2}' rounded: '{rounded.sm}' height: 48px product-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 310px white-panel: backgroundColor: '{colors.surface}' rounded: '{rounded.lg}' height: 700px banner-link: backgroundColor: '{colors.tint-2}' textColor: '{colors.accent-3}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 110px note-list: textColor: '{colors.text}' typography: '{typography.note}' height: 80px --- # DESIGN.md — 水色ギンガム×食品色カードのコンビニ菓子 LP（Light Blue Gingham Snack Pairing LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、かわいい、清潔・爽やか、親しみ・手作り感 - **キーワード**: 水色ギンガム・白パネル・食品色カード・紺の極太文字・雲形吹き出し・組み合わせ提案 - **地の質感**: 淡い水色2色の格子柄。単色フラットな面で、グラデーションは使わない - **形**: 角丸の長方形カード、ピル型の白ボタン、雲形の吹き出し、斜め線で囲んだ見出し - **温度感**: 爽やかな水色と、温かいオレンジ・茶色の食品色が同居する明るいトーン ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#AEE1EA` | ギンガム地の淡い水色 | 24% | 画素の実測 | | `background-alt` | `#ADE2EA` | ギンガム格子の濃い水色 | 12% | 画素の実測 | | `surface` | `#FEFFFD` | 商品カードをまとめる白パネル | 18% | 画素の実測 | | `primary` | `#042A78` | 見出し・ボタン文字の紺 | 3% | 画素の実測 | | `secondary` | `#0196C9` | 主役商品の帯の青 | 4% | 画素の実測 | | `accent-1` | `#FFAB31` | 商品カードのオレンジ | 10% | 画素の実測 | | `accent-2` | `#C90060` | 商品カードの赤紫 | 4% | 画素の実測 | | `accent-3` | `#7D3B2F` | 商品カードのこげ茶 | 8% | 画素の実測 | | `tint-1` | `#D37E01` | 商品カードの濃いオレンジ（焼き色） | 7% | 画素の実測 | | `tint-2` | `#5DC4D3` | プラス記号の水色 | 0% | 画素の実測 | | `marker` | `#FBDB02` | 強調語の下に引く黄色マーカー | 0% | 画素の実測 | | `on-primary` | `#FBFEFB` | 色付きカード上の白文字 | 1% | 画素の実測 | | `text` | `#333333` | 注釈の濃いグレー文字 | 0% | 推定 | | `secondary-accessible` | `#017DA8` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#A96400` | AA を満たす補正値（計算） | | 計算 | | `tint-2-accessible` | `#75CDDA` | AA を満たす補正値（計算） | | 計算 | - ページ全体の地は水色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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインビジュアル上の大見出し（白） | 丸ゴシック | M PLUS Rounded 1c | 900 | 40px | 1.2 | 0.02em | | `headline-lg` | セクション見出し（紺・白フチ付き） | 丸ゴシック | M PLUS Rounded 1c | 900 | 32px | 1.3 | 0.04em | | `headline-md` | 商品カードの商品名（白） | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.35 | 0.02em | | `headline-sm` | 吹き出し内の人物名とリード文 | ゴシック | Zen Kaku Gothic New | 900 | 18px | 1.4 | 0.08em | | `accent` | 価格の数字（大きく太く） | 欧文サンセリフ | Montserrat | 800 | 28px | 1.1 | 0.0em | | `body-md` | 価格の前後のラベル・税込表記 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.0em | | `label-button` | ピル型ボタンのラベル（紺） | 丸ゴシック | M PLUS Rounded 1c | 900 | 22px | 1.2 | 0.03em | | `note` | ページ末尾の※注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | - 見出しはすべて極太の丸ゴシックで、本文調の細い書体は使わない - セクション見出しは左右を斜めの線（＼ ／）ではさむ - 価格は数字だけ大きくして、「本体価格」「円（税込…）」は小さく添える - 見出しには白い太フチを付け、ギンガム柄の上でも読めるようにする - 商品名は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 ```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-79d687e9`（元 LP の URL から採番） - **元 LP**: https://www.ministop.co.jp/syohin/sweets/softcream/hokkaido-milksoft/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。