DESIGN.md — 板チョコ柄×ポップ漫画の催事 LP（Chocolate Bar Pop Illustration Event LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、レトロ、情報量多め・訴求型
• キーワード: 板チョコ柄・溶けチョコの波線・ポップ漫画イラスト・こげ茶×クリーム黄・吹き出し・催事感
• 地の質感: 板チョコのブロックを並べた立体的な背景柄。ほかは単色のベタ塗り。キャンペーン部分だけ斜めストライプを敷く。
• 形: 角丸の写真カード、ピル寄りの角丸ボタン、雲形の吹き出し、液だれ型の境界線
• 温度感: 暖色寄り。チョコの甘さとレトロなポップさがある。

Colors

• 地色は「ダークチョコ」「板チョコ柄」「クリーム黄」の 3 種。セクションごとに入れ替える。
• 濃色地の文字は白にする。ロゴと日付だけクリーム黄にする。
• 店舗ごとに写真カードの枠色（緑・橙・朱）を変えて見分けられるようにする。
• マゼンタはキャンペーンの強調語とマーカーだけに使う。
• ボタンは濃茶の地に白文字。濃色の上に置くときは細い白線で縁取る。
• フッターは最も暗い黒茶で締める。
• store-badge は文字 #FBF2E8 × 背景 #E8553F のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#D13119、4.55:1）を使う。

Typography

• 本文は太めの丸ゴシックで中央揃えにし、行間を広く取る。
• セクションラベルには英字大文字の小見出しを字間を広げて添える。
• 吹き出しは手書き風の書体にし、字間を広く取る。
• 強調はマゼンタ文字か白マーカーで行う。
• ロゴタイトルは極太の欧文に筆記体を組み合わせる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで中央揃え。商品ピックアップだけ横スクロールのカルーセルにする。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• 店舗紹介は「ロゴ→所在地→短い線→紹介文→写真カード→吹き出し＋イラスト→ボタン」の順で統一する。
• 区切りには幅 30px ほどの短い白線を中央に置く。
• 写真カードは左右 20px の余白を取り、幅いっぱいに置く。
• イラストは右寄せにして、吹き出しと重ねる。

Elevation & Depth

• 影はほぼ使わない。色面と枠線で奥行きを出す。
• 板チョコ柄は柄自体の明暗で立体感を出す。
• カルーセル下の店舗タグだけ、わずかに浮かせる。

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形に太い色枠を付ける。SNS 紹介の写真は円形に切り抜く。
• セクション境界: 溶けたチョコのような緩い波線。液だれ型も使う。
• ボタンは角丸 10〜14px の横長にし、右端に小さな矢印を置く。
• 吹き出しは細い線で描く雲形にし、しっぽを付ける。
• 見出し用の吹き出しはチョコが垂れる形にする。
• アコーディオンは角丸の帯にし、右端に＋を置く。

Components

• 商品を見るボタン（button-primary）: 濃茶の地に白文字、細い白枠を付け、右端に矢印を置く
• 色枠の写真カード（photo-card-framed）: 商品写真を角丸で切り抜き、店舗ごとの色で 4px の枠を付ける
• 線画の吹き出し（speech-bubble-line）: 細い白線か茶線の雲形。手書き風の 2 行コメントを入れ、人物イラストと重ねる
• 液だれ吹き出しの見出し（drip-heading）: 濃茶の楕円の下からチョコが垂れる形。上に英字ラベルを添える
• 商品カルーセル（product-carousel）: 灰色の写真カードに店舗の丸バッジを付け、左右に丸い矢印ボタンを置く
• 店舗の丸バッジ（store-badge）: 朱色の円の中に白文字で店舗名を入れる
• アコーディオン帯（accordion-bar）: 濃茶の角丸帯に中央の文字と右端の＋を置く
• キャンペーンの白カード（campaign-card）: ストライプ地の上に置く白い角丸カード。マゼンタの強調見出しを入れる

Do's and Don'ts

Do - 地色をセクションごとに切り替え、境界は波線にする。 - 店舗紹介は同じ型をくり返し、枠色だけを変える。 - 人物イラストを各店舗の紹介に必ず添える。 - 文字は太めの丸ゴシックで中央揃えにする。

Don't - 寒色や純黒を主役にしない。 - 直線のセクション境界を多用しない。 - 写真を枠なしの角張った形で置かない。 - 細い明朝体で高級寄りにしすぎない。

Page Structure

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

1. ヘッダー（イベント名の表示とメニューの入口）: 板チョコ柄の細い帯。左にクリーム色の欧文ロゴ、右にハンバーガーメニューを置く。
2. ファーストビュー（催事の世界観と会期を伝える）: 上は 3×2 の色面タイルに人物とチョコのイラスト。下は濃茶の地に放射線付きのロゴタイトルと日付を置く。
3. 導入（催事の概要と会場を伝える）: 板チョコ柄の地に斜体の見出し、中央揃えの紹介文、会場名 3 件のリストを置く。
4. 会場マップ（店舗の場所を示す）: 円形に切り抜いたイラスト地図。PC では色付きの店舗タグを添える。
5. 店舗紹介 1〜3（各会場の個性を伝え、商品へ誘導する）: 濃茶とクリーム黄の地を交互に使い、波線で区切る。店舗ロゴ、色枠の写真、吹き出しとイラスト、ボタンの順に並べる。
6. 商品ピックアップ（代表的な商品を見せる）: 液だれ吹き出しの見出しの下に横スクロールのカードを並べ、最後に全ブランド一覧のアコーディオンを置く。
7. SNS 紹介（公式アカウントへ誘導する）: 灰色の雲形の面にアイコンと円形の写真 3 枚、リンク文字を置く。
8. キャンペーン（プレゼント企画で参加を促す）: 濃茶の液だれ帯の下に黄色の斜めストライプ地。マゼンタの強調見出し、景品写真 3 枚、白カード、応募規約のアコーディオンを置く。
9. 外部サービス・関連リンク（配達サービスや通販サイトへ誘導する）: 板チョコ柄の地に、線で区切ったリンク行と枠付きの横長ボタンを置く。
10. フッター（ロゴと会場リンクを再掲する）: 黒茶の地にクリーム色のロゴと会場リストを置き、各行の右に矢印を付ける。

Imagery

• 人物イラストは太い黒の主線で描くレトロな漫画風。ベタ塗りで、少ない色数（緑・黄・朱・茶）で描く。
• 人物はチョコを手にした驚き顔の上半身にする。
• 商品写真は単色の背景で真上か斜め上から撮り、柔らかい自然光にする。
• 背景に板チョコのブロック柄をくり返し敷く。
• 地図は茶系の単色で描いたアイソメ風のイラストにし、円形に切り抜く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは、左にロゴ、右にイラストタイルを並べた横長の構成にする。
• PC の店舗紹介は、テキストと写真を左右に分けた 2 カラムにする。店舗ごとに左右を入れ替える。
• PC のカルーセルは 3 枚を同時に表示する。
• PC のフッターは、左にロゴ、右に会場リストを置く 2 カラムにする。
• PC のキャンペーンは、景品を横 3 列、白カードを横長に並べる。

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