DESIGN.md — ティール×ピンク×チョコ色のポップな菓子特集 LP（Pop Retro Chocolate Teal Pink LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、レトロ、情報量多め・訴求型
• キーワード: ティール地・ピンク太字見出し・チョコ色の太縁・板チョコ型パーツ・ドット列区切り・スプリンクル装飾
• 地の質感: フラットな塗りに濃いチョコ色の太いアウトライン。グラデーションや影はほぼ使わず、ステッカー風の少しずれた影を付ける。
• 形: 角丸の白カード、ピル型ボタン、板チョコの四角形、丸いドットが連なるボーダー。
• 温度感: 明るく甘い暖色と爽やかなティールの対比で、にぎやかで温かい印象。

Colors

• 地はティールを基本とし、セクション毎にチョコ色・ベージュ・ピンク・黄の地へ切り替える。
• 欧文大見出しはピンク塗り＋チョコ色の太い縁取り。
• 全ての線・縁・文字はほぼ黒でなく濃いチョコ色を使う。
• 商品は必ず白カードに載せ、カード縁もチョコ色。
• 差し色の黄・ミント・ピンクはスプリンクルやドットだけに使う。
• CTAはピンク地＋チョコ色文字で統一。
• card-tab-header は文字 #593B3D × 背景 #EE8A9B のコントラスト比が 4.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#F095A5、4.51:1）を使う。

Typography

• セクション見出しは英字大文字の太いディスプレイ書体で、その下に日本語の小見出しを添える。
• 日本語は太ゴシックで中央揃えが基本。
• 価格は太字、税込表記は小さくする。
• 装飾見出しはピンク塗り＋チョコ色の縁で立体感を出す。
• 本文は短く改行し 3〜4 行にまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビとブランド一覧は 2 カラムのグリッド。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品カードは左右 5% 余白で中央に置く。
• カード毎にCHECKボタンを中央に置く。
• セクション境界にドット列を入れる。
• ナビは板チョコ型タイルを 2×3 で並べる。
• 見出し背景に板チョコやスプリンクルの柄を敷く。

Elevation & Depth

• 影はぼかさず、チョコ色のずれ影（下に 3〜4px）でステッカー風にする。
• カードは 2〜3px のチョコ色の縁でフラットに見せる。
• ソフトなドロップシャドウは使わない。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き画像を白カードに載せる。FVだけは平置き写真を全面に使う。
• セクション境界: 色違いの丸いドットを横一列に並べたボーダーで直線的に区切る。
• カード・ボタンには必ずチョコ色の太い縁を付ける。
• 板チョコは段差のある四角形で描く。
• 見出しの帯は上側だけ角丸のタブ状にする。
• 価格バッジは円形にする。

Components

• CHECKボタン（button-check）: ピンクのピル型、チョコ色の太縁とずれ影、太い欧文ラベル。
• 板チョコ型ナビ（nav-chocolate-tile）: ミルク/ダークのチョコ板を交互に並べ、白文字ラベルと▼、スプリンクル装飾。
• 欧文大見出し（heading-display）: ピンク塗り＋チョコ縁の太い大文字。下に日本語サブ。
• 商品カード（card-product）: 白地・チョコ縁の角丸カードに切り抜き商品、ブランド名、商品名、価格、説明。
• タブ見出し付きカード（card-tab-header）: 上部にピンク帯の見出し、本体は白。キャンペーンや限定品に。
• ドット区切り（dot-divider）: 茶・ピンク・黄・ティール・白の丸を連ねた帯。
• 円形バッジ（badge-circle）: FREEや価格を示すピンク/チョコ色の円バッジをカード角に重ねる。
• ブランドタイル（card-brand）: 上が白地の商品写真、下がピンク帯に▶付きブランド名の 2 列タイル。
• ドット縁取り枠（dotted-frame）: 白地の周囲をカラフルな小さな丸で囲む試食紹介枠。

Do's and Don'ts

Do - 線と文字は濃いチョコ色で統一する。 - セクションの地色を切り替えてリズムを出す。 - 見出しは欧文の大見出し＋日本語の小見出しの 2 段にする。 - 空白にはスプリンクルやお菓子のイラストを散らす。 - 商品毎にCHECKボタンを置き回遊させる。

Don't - 純黒の文字や細い線を使わない。 - ぼかし影やグラデーションを使わない。 - 明朝体や細いフォントで高級感を出さない。 - くすんだ色を使わない。終了告知だけは例外。 - カードを縁なしで置かない。

Page Structure

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

1. ファーストビュー（特集の世界観を一目で伝える）: ティール地にお菓子の平置き写真、左上にピンクの欧文大タイトルと小さな英文サブ。
2. 導入文（特集の趣旨を伝える）: 白地に中央揃えの短文を 5 行、行間を広く取る。
3. 目次ナビ（各セクションへ誘導）: 板チョコ型タイル 2×3、欧文ラベルと▼。
4. プレゼントキャンペーン（購入特典を訴求）: ティール地にタブ見出しカード、日付帯、特典写真、対象商品、注釈、CHECKボタン。
5. 試食案内（店頭イベントを紹介）: 欧文見出し＋日本語サブ、ドット縁の白枠に商品と説明を左右交互に置く。
6. オンライン限定品（EC商品へ誘導）: ピンクのタブ見出しカードに商品写真と価格リスト。
7. ピックアップ（注目商品を個別に紹介）: チョコ柄の地に大見出しとリード、白カードの商品、下半分は黄/ティール/ピンク地に切替。
8. ランキング（スタッフ人気TOP3を紹介）: ティール地に白抜きリード、白カードを縦に並べ、キャンディ等のイラストを添える。
9. ブランド一覧（取扱ブランドへ誘導）: ベージュ地に 2 列のブランドタイル、最後にALL ITEMSボタン。
10. 限定サービス（ラッピングや袋を案内）: チョコ柄地に白カード、右上に円形バッジ。
11. キャンペーン（ポイント施策を告知）: ティール地に白の角丸バナー、日付リボンと円形スタンプ。
12. クイズ誘導（体験コンテンツへ誘導）: ピンク地にティールの欧文大見出し、ドット列、黄色のSTARTボタン、下端にお菓子イラスト。
13. 注釈（販売条件を補足）: 白地に小さい注釈を 2 行。

Imagery

• 商品はすべて切り抜き写真で、白カードに浮かせて置く。
• FVはティール地にお菓子を俯瞰で散らした平置き写真。
• イラストは太いチョコ色の線のフラット画（板チョコ、クマ、テントウムシ、ハート、キャンディ）。
• スプリンクルは丸と細長い角丸を黄・ピンク・ティールで散らす。
• 見出し背景に板チョコの柄を大きく敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央の 750px 前後にSPのレイアウトを置き、左右はティール地を広げる。
• ナビ・ブランドタイルは PC で 3〜6 列にしてもよい。
• 商品カードは PC で 2 列にできる。
• 見出しサイズは PC で 1.5 倍を目安にする。

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