DESIGN.md — 原色カラーブロックの漫画調レトルト食品 LP（Pop Manga Color-Block Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、レトロ
• キーワード: カラーブロック・4コマ漫画・濃紺の線画・波形境界・マーカー強調・レトロポップ
• 地の質感: 格子・方眼パターンや粒子ノイズを薄く敷いた平面塗り。グラデーションは朱色セクションのみ控えめ。
• 形: 波線・大きなうねりのセクション境界、上部アーチ型の商品カード、ピル型ボタン、ギザギザ枠の写真。
• 温度感: 暖色主体（朱・ピンク・黄）に寒色の青セクションを挟み、温度差でリズムを作る。

Colors

• セクションごとに背景色を丸ごと切り替える。黄→朱→サーモン→青→水色→朱→ピンク→黄緑→クリームの順。
• 文字と線画は濃紺 1 色で統一し、黒は使わない。
• 朱・青など濃い地では本文を白にする。
• 見出し強調はピンクや黄色の帯（マーカー）を文字下に敷く。
• 赤は主 CTA だけに使う。
• 黄緑はラインアップ帯と写真の波枠に使う。
• button-primary は文字 #FFF4F5 × 背景 #E50112 のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E20112、4.59:1）を使う。
• menu-bar は文字 #FFFFFF × 背景 #00A650 のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#008741、4.62:1）を使う。

Typography

• 見出しは極太ディスプレイ書体を濃紺で書く。
• 特長見出しは朱色の文字に白の太い縁取りを付け、大きな番号とスラッシュを先頭に置く。
• 本文も太字にして中央揃えにする。
• 重要語句は一段大きくして黄やピンクのマーカーを引く。
• 英字見出しは黄緑やオレンジに影を付ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はテキストと漫画の 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 漫画はほぼ全幅の白い縦長パネルにして、コマを縦に積む。
• セクションの頭に見出しと短い本文を左揃えで置き、漫画へつなげる。
• 特長は番号見出し→中央揃え本文→図解アイコンの順にする。
• 商品カードは縦に 1 枚ずつ積む。
• 区切りに斜めのハッシュタグ帯を入れる。

Elevation & Depth

• 影はほぼ使わず平面で見せる。
• CTA には下方向に濃い赤のベタ影を付けて立体感を出す。
• メニューバーには薄いドロップシャドウを付ける。

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真はギザギザの波枠（黄緑）で囲む。商品は上がアーチ型のカード。図解は円形にする。
• セクション境界: 細かい波線や大きなうねりの曲線。斜めのハッシュタグ帯も使う
• 直線の境界は避け、波やうねりでつなぐ。
• 漫画のコマは濃紺の太線で四角く囲む。
• ボタンと商品カードは角を大きく丸める。

Components

• 主 CTA ボタン（button-primary）: 赤のピル型ボタン。白の太字と右向き矢印を入れ、下にベタ影を付ける
• メニューバー（menu-bar）: 緑のピル型の全幅バー。中央に英字、右端に＋を置く開閉式
• 帯付き見出し（heading-band）: 見出しを 1 行ずつピンクや黄色の帯に乗せる
• 4コマ漫画パネル（manga-panel）: 白地に濃紺の太線でコマを区切る。吹き出しは縦書き
• 番号付き特長見出し（numbered-feature）: 大きな数字とスラッシュに見出しを続ける。朱色文字に白縁取り
• 手順円アイコン（step-circle）: 水色の円の中に線画を描き、三角矢印で 3 つ並べる
• 商品アーチカード（product-arch-card）: クリーム地で上がアーチのカード。商品写真の下に商品名と一言を置く
• ハッシュタグ帯（hashtag-ribbon）: 英字ハッシュタグを繰り返し、斜めに流す区切り帯
• 波枠写真（wavy-photo-frame）: 黄緑のギザギザ枠でモノクロ写真を囲む

Do's and Don'ts

Do - セクションごとに鮮やかな単色地を切り替える。 - 線画・見出し・本文は濃紺で統一する。 - 利用シーンは漫画で物語的に見せる。 - 重要な数字や語句はマーカーで強調する。 - 余白には小物の線画イラストを散らす。

Don't - 黒文字やグレー中心の落ち着いた配色にしない。 - 細い明朝体を使わない。 - セクション境界を直線で区切らない。 - 赤を CTA 以外で多用しない。 - リアルな写真で埋め尽くさない。

Page Structure

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

1. ファーストビュー（商品とキャラクターを一目で見せる）: 黄色の格子地に人物イラスト・ロゴ・商品 2 種を中央に縦に配置し、下にメニューバーを置く
2. 共感ストーリー1（忙しい日常の悩みと解決を描く）: 朱色地に帯付き見出しと白本文を置き、白パネルの4コマ漫画を続ける
3. 共感ストーリー2（別の悩み（後片付け）を描く）: 青紫地に黄色帯の見出しを置き、水色地へ移って4コマ漫画を見せる
4. タイアップ動画（CM 動画で話題性を出す）: 波形境界の朱色グラデ地に黄色の見出しを置き、動画を 2 本縦に並べる
5. キャラクター紹介（起用人物の紹介）: 英字の大見出しを置き、黄緑の波枠のモノクロ写真と白本文を続ける
6. 特長（商品の 3 つの利点を説明）: ピンク方眼地に番号付き見出し・マーカー本文・手順円アイコン・イラストを置く
7. 商品ラインアップ（商品の種類を紹介し、カタログへ誘導）: 黄緑地にアーチカードを縦に積み、最後に赤の CTA を置く
8. 販売場所（どこで買えるかを伝える）: クリーム地に見出しと店名マーカー本文を置き、下端に街並みの線画を敷く

Imagery

• 人物は濃紺の主線とフラットな塗りの漫画イラストにする（パステル緑・ピンク・黄）。
• 吹き出しは縦書きの手書き風。集中線や汗などの漫符も使う。
• 余白にハイヒール・バッグ・メガネ・時計など日用品の線画を散らす。
• 商品パッケージは切り抜きで正面から見せる。
• 人物写真はモノクロにしてポップな枠で囲む。
• ページ下端に街並みの線画を横に並べる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では漫画をコマ 4 つの 2×2 グリッドにし、左に見出しと本文を置く 2 カラムにする。
• PC のメニューはピル型ボタンを横に 5 つ並べる。
• PC の商品カードは横 2 列にする。
• PC のキャラクター紹介は写真を左、テキストを右に置く。
• 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 行書くと起動時に読み込まれる。