DESIGN.md — 朱色×山吹の漫画風ご当地菓子 LP（Pop Comic Osaka Souvenir Sweets LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
• キーワード: 集中線・漫画の吹き出し・ドット柄・黒シルエットキャラ・関西弁・暖色ベタ塗り
• 地の質感: ベタ塗りの暖色面に、ドット柄・放射状の集中線・筆で塗ったような見出し帯を重ねる。立体感は出さず平面的に作る
• 形: 雲形・爆発形の吹き出し、太い黒枠の漫画コマ、角丸なしの四角いカードとボタン
• 温度感: とても暖かい。オレンジ系の色だけで構成する

Colors

• 地の色は朱色、山吹、黄色、白をセクションごとに切り替え、隣り合うセクションに同じ色を置かない
• 強調にはオレンジ系だけを使う。青・緑は写真やイラストにしか出さない
• 文字は黒か白のどちらか。黄色や山吹の地では黒、朱色の地では白
• 吹き出しは白地に黒の太い輪郭で描く
• 見出し帯はオレンジを筆で塗ったような形にし、その上に白文字を置く
• 購入ボタンはオレンジのベタ塗りに白文字と白い三角を置く
• button-cart は文字 #FFFFFF × 背景 #F28202 のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B36001、4.57:1）を使う。
• heading-brush は文字 #FEF5E9 × 背景 #F58B0F のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A95E07、4.53:1）を使う。
• accordion-store は文字 #FEF5E9 × 背景 #EA5711 のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C4490E、4.52:1）を使う。

Typography

• コピーは関西弁の話し言葉で、短く改行する
• 吹き出しの中は中央か左揃えで 2〜4 行にする
• 見出しは字間を広く取り、筆塗り風の帯にのせる
• 番号は斜めのオレンジの数字にして文の左に置く
• 長い本文ブロックは作らない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅のベタ塗りで区切り、境界は直線にする
• 見出し帯はセクションの上部中央に置く
• 成分図解は写真を中央に置き、引き出し線でラベルを左右に散らす
• ストーリーは黒枠のコマを縦に 4 つ並べる
• 商品カードは黄色の地の中に中央揃えで並べる

Elevation & Depth

• 影は使わずフラットにする
• 立体感は黒い太線と色のコントラストで出す
• 吹き出しは輪郭線だけで浮かせる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品写真は背景を切り抜くか、四角のまま置く。FV の写真は爆発形の吹き出しで切り抜く
• セクション境界: 直線のベタ塗りで切り替える
• ボタンとカードは角丸なしの四角
• 吹き出しは雲形かギザギザの爆発形にする
• 漫画のコマは 3〜4px の黒枠で囲む
• 見出し帯は端がかすれた筆塗り形にする

Components

• カート追加ボタン（button-cart）: オレンジの四角ボタン。白文字の右に白い三角を置く
• FV の購入導線ボタン（button-fv）: 木札風の焦げ茶の縁取りに丸アイコンと文字を入れたボタン。左右に 2 つ並べる
• 筆塗り帯の見出し（heading-brush）: オレンジのかすれた帯の上に、字間を広げた白文字を置く
• 雲形の吹き出し（speech-cloud）: 白地に黒の太い輪郭の雲形。番号と関西弁のコピーを入れ、しっぽをキャラクターに向ける
• 漫画コマ（comic-panel）: 黒枠の横長コマ。イラストと短いセリフを入れる。集中線やドット柄のコマを混ぜる
• 成分ラベル（label-marker）: 黄色マーカーの上に黒い太字。細い黒の引き出し線で写真とつなぐ
• 店舗アコーディオン（accordion-store）: 朱色の全幅の行に、白文字の店舗名と下向き山形の矢印を置く。行は白線で区切る
• 商品カード（product-card）: 黄色の四角に商品写真、入数、税込価格、数量の入力欄、カートボタンを縦に並べる
• 金メダル風の実績バッジ（badge-rank）: 金の月桂樹メダルと赤いリボンで売上順位を示す。FV の右上に置く

Do's and Don'ts

Do - 吹き出し・集中線・ドット柄で漫画のノリを常に出す - セクションの地の色を暖色の中で交互に切り替える - 黒シルエットのキャラクターを繰り返し登場させ、語り手にする - コピーは方言の話し言葉で、短く改行する - ボタンとカードは角丸なしの四角にする

Don't - 寒色の地や面を使わない - ドロップシャドウやグラデーションのボタンを使わない - 明朝体や細い書体を使わない - 長い説明文を段落で並べない - ピル型や大きな角丸を使わない

Page Structure

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

1. ファーストビュー（ご当地感と商品の魅力を一目で伝える）: 朱色の集中線の地に、爆発形で切り抜いた商品写真、ロゴ、吹き出しコピー、金メダルのバッジを重ね、下に購入ボタンを 2 つ置く
2. トピックス（お知らせ・コラボ情報）: 朱色の地に見出し帯と横長のバナー画像を 1 枚置く
3. 人気の理由（選ばれる理由を 3 つ示す）: 山吹にドット柄の地。番号つきの雲形吹き出しを 3 つ並べ、キャラクターが話す形にする
4. 素材のこだわり（原材料の特徴を図解する）: 白い地の中央に商品写真を置き、引き出し線で黄色マーカーのラベルと素材のイラストを配置する
5. 誕生ストーリー（開発の経緯を楽しく伝える）: 黄色の地に黒枠の漫画コマを 4 つ縦に並べる
6. キャラクター紹介（親しみとSNSへの誘導）: 山吹の地に大きなキャラクターと名前、吹き出しの紹介文を置く
7. 店舗情報（販売店舗を探してもらう）: 朱色の全幅アコーディオンを白線で区切って縦に並べる
8. ラインナップ（通販で購入してもらう）: 山吹の地に黄色の商品カードを縦に並べ、最後に送料の注記を置く
9. お問い合わせ・フッター（会社情報と連絡先）: 朱色の地に白文字で社名、住所、フリーダイヤル、ロゴ、規約リンクを中央揃えで並べる

Imagery

• 商品写真は寄りで撮り、ソースや具材のシズル感を強く出す
• キャラクターは黒シルエットに白い目とコック帽を描き、単純な線で描く
• 素材のイラストは太い輪郭のフラットなカートゥーン調にする
• 背景には放射状の集中線、ドット柄、WOW などの擬音文字を使う
• パッケージ写真は白抜きにして黄色の地にのせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではコンテンツを中央に約 60% 幅でまとめ、背景色は全幅に広げる
• PC の FV は横長にし、写真・ロゴ・バッジを横に広げて配置する
• PC の人気の理由は、吹き出しをキャラクターの周りに散らして配置する
• PC の商品カードは 4 列の横並びにする
• 店舗アコーディオンは PC でも全幅のまま、行の高さを低くする

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