DESIGN.md — 赤×古紙ベージュの漫画コラボ菓子 LP（Bold Red Manga Collab Ice Cream LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、レトロ、親しみ・手作り感
• キーワード: 鮮烈な赤・古紙テクスチャ・手配書風フレーム・黄色マーカー・傾けた写真・コラボ感
• 地の質感: 赤はベタ塗り。ベージュ面は紙のしわ・汚れのある古紙テクスチャに、手描き風の二重枠線。
• 形: 写真は少し傾けた紙フレームに入れる。ボタンはピル型と円形。表は細い黒線の格子。
• 温度感: 暖色中心で熱量が高い。紫の商品色と黄色がアクセント。

Colors

• 赤地とベージュ古紙地を大きなブロックで交互に切り替える。
• 赤地の文字は白、紙地の文字はこげ茶〜黒にする。
• キャッチの強調語は黄色マーカーを敷き、黒文字にする。
• 表の該当セルだけ赤で塗り、白文字で目立たせる。
• ピンクと青は末尾のアプリ・注文バナーだけに使う。
• 商品の紫は写真とイラストで出し、UIには使わない。
• allergy-grid は文字 #A8A8A8 × 背景 #FFFFFF のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。
• app-tile は文字 #FBFBF9 × 背景 #F54B95 のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#E20D69、4.51:1）を使う。

Typography

• 見出しは極太ゴシックで、細い書体は使わない。
• キャッチは 3 行に分け、各行の強調語だけにマーカーを敷く。
• 欧文の見出しは丸みのある太いサンセリフにする。
• 本文も太めにして、赤地でもつぶれないようにする。
• 見出しの左右に唐草風の波線飾りを入れる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は写真と文を左右に交互に置く。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 特長は写真を画面端に少しはみ出させ、文は反対側に置く。
• 紙地のセクションは画面幅より少し内側に二重枠線を引く。
• 動画は角丸の白枠カードに入れて縦に並べる。
• 末尾のアプリ訴求は 2 列の色ベタタイルにする。
• 情報表は 4 列の格子にする。

Elevation & Depth

• 基本は影なしのフラットにする。
• 傾けた紙フレーム写真にだけ薄いドロップシャドウを付ける。
• 動画カードは白い縁取りだけで浮かせる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き。特長写真は古紙フレームに入れて 3〜5 度傾ける。
• セクション境界: 赤と紙地は直線で切り替える。紙地の縁は手描き風のギザギザ線にする。
• 主ボタンは白いピル型で、右端にこげ茶の丸矢印を付ける。
• 詳細リンクはこげ茶の円形ボタンにする。
• 名前ラベルは巻物のリボン形にする。
• 表は角丸を小さくし、黒線で区切る。

Components

• マーカー見出し（marker-headline）: 黄色の帯を語の背後に敷いた太字キャッチ。
• 手配書風フレーム（wanted-frame）: 古紙の枠に商品写真を入れ、少し傾けて置く。
• Point 見出し（point-label）: 波線の飾りではさんだ欧文の番号見出し。
• リボン見出し（ribbon-banner）: 黄色の巻物リボンに太い欧文を弧状に入れる。
• ピル型ボタン（button-primary）: 白地にこげ茶の太字、右端に丸い矢印。2 つ横に並べる。
• 円形詳細ボタン（button-circle）: こげ茶の円に白い 2 行の文字と矢印。
• 情報見出し帯（info-header）: こげ茶の角丸帯に白い太字を中央に置く。
• 該当表（allergy-grid）: 4 列の白セル格子。該当セルは赤地に白文字。
• 動画カード（video-card）: 白縁の角丸枠に入れた動画の埋め込み。
• アプリ訴求タイル（app-tile）: ピンクと青の 2 列タイル。端末アイコンとストアボタンを置く。

Do's and Don'ts

Do - 赤とベージュ古紙の 2 つの地をはっきり交互に使う。 - 商品写真は大きく切り抜き、紙フレームやキャラクターと重ねる。 - 見出しには波線飾りやリボンでコラボの世界観を出す。 - 情報表は白と赤だけで、ひと目でわかるようにする。 - 本文は太めのゴシックで短く区切る。

Don't - 赤地に細い文字や明るい色の文字を置かない。 - グラデーションや光沢の表現を使わない。 - 紙地をフラットな無地ベージュにしない。 - ピンクや青をメインのセクションで使わない。 - 写真をすべてまっすぐに並べない。

Page Structure

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

1. ファーストビュー（新作とコラボを一目で伝える）: 赤地の上部にロゴと新作バッジ。斜めの黄帯の上に手配書風の商品写真とキャラクターを置く。
2. キャッチと紹介文（味と世界観を伝える）: マーカー付きの 3 行キャッチのあと、白文字の本文を続ける。
3. 構成図解（中身の要素を説明する）: 紙フレームの断面写真に、引き出し線と短いラベルを 3 つ付ける。
4. 特長（こだわりを 2 点で伝える）: 傾けた写真と Point 見出し付きの文を左右交互に置く。
5. 開発秘話（親しみと物語を足す）: 波線の飾り罫で上下をはさみ、白文字の本文を置く。
6. 組み合わせ提案（まとめ買いを促す）: 古紙地にリボン見出し。コーン写真とリボン名、円形詳細ボタンをジグザグに並べる。
7. 動画（CM と紹介動画を見せる）: 赤地に白見出しと白縁の動画カードを 2 つ置く。
8. SNS シェアと CTA（拡散と来店につなげる）: スラッシュ飾りの見出し、円形 SNS アイコン、白いピル型ボタン 2 つ。
9. 成分・栄養情報（必要な情報を示す）: 古紙地にこげ茶の見出し帯。格子の表と注釈を置く。
10. アプリ訴求（アプリと注文に誘導する）: ピンクと青の 2 列タイル。
11. フッター（公式 SNS へ誘導する）: 薄グレー地に短い文と円形 SNS アイコンを 4 つ並べる。

Imagery

• 商品は真上やや斜めから撮り、背景を抜いて大きく見せる。
• 断面のアップ写真で質感と具材を見せる。
• 手配書のような古紙とセピアの手描き文字を額縁に使う。
• 漫画調のキャラクターや果実のイラストを写真に重ねる。
• 唐草風の波線、手描きの二重枠、キラキラの星を飾りに使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に SP 幅の列（約 480〜750px）を置き、左右は赤地を延ばす。
• PC の特長は写真と文の左右配置を保ち、余白だけ広げる。
• PC の動画カードは 2 列に並べてもよい。
• PC のアプリタイルは 2 列のまま幅を制限する。
• 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 行書くと起動時に読み込まれる。