DESIGN.md — 赤×古地図羊皮紙のアニメコラボ菓子 LP（Pirate Treasure Map Collab Sweets LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、レトロ
• キーワード: 宝の地図・羊皮紙・巻物リボン・コラボ限定・冒険感
• 地の質感: 古紙の染み、破れた紙の縁、かすれた地図柄の赤い地。
• 形: 破れ縁の紙パネル、巻物型の見出し、角丸の黄色ボックス、ピル型の茶色ボタン。
• 温度感: 暖色。赤・黄・茶でにぎやかで熱い。

Colors

• 外側の地は赤の地図柄。中身はすべて羊皮紙パネルの上に置く。
• 見出し・価格・ボタンは焦茶にして、紙色と同系でまとめる。
• 数量限定の特典は黄ボックスで囲み、赤ラベルを添える。
• キャンペーン告知のエリアは地を黄の地図柄に切り替える。
• マゼンタは新作バッジと末尾の公式導線だけに使う。
• 注釈は小さい茶系文字にし、赤は使わない。
• limited-box は文字 #E50113 × 背景 #FAC203 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#FFF7DC、4.51:1）を使う。
• badge-new は文字 #FFFAF0 × 背景 #F20C90 のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DC0B83、4.57:1）を使う。
• link-button は文字 #FFFAF0 × 背景 #F20C90 のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DC0B83、4.57:1）を使う。

Typography

• 見出しは極太ゴシックで 2 行に組む。
• 価格は円記号つきで巨大にし、上に細い線で囲んだサイズ名を添える。
• 注記は斜めに置き、短い斜線を添えて手描き風にする。
• 本文は 13px 前後で、1 段落 3〜4 行にする。
• 注釈は ※ で始めて行をそろえる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介の一部は文章と写真を左右に分ける
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 50px、基本単位 8px、カード内 24px（375px 幅換算）
• 羊皮紙パネルを画面の約 90% 幅で置き、両側に赤い地をのぞかせる。
• 1 パネル＝1 商品にする。順番は見出し→写真→特典→説明→価格→注釈。
• 価格欄は上下を太線で挟む。
• 写真は紙からはみ出すほど大きく見せる。
• 特典カードなどの一覧は 4 列グリッドにする。

Elevation & Depth

• 商品の切り抜き写真に白フチと薄い影をつける。
• パネルは影なし。破れた縁で立体感を出す。
• 黄ボックスはフラットにする。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 背景を抜いた商品切り抜きと、白フチのキャラクター切り抜き
• セクション境界: 破れた紙の縁を使い、地図柄の赤地へ切り替える
• 見出しは両端が巻いた巻物リボン形にする。
• 数字のバッジは円形で焦茶にする。
• 特典ボックスは角丸 12px の黄色にする。
• 吹き出しは白地に焦茶の枠をつける。

Components

• 巻物リボン見出し（scroll-heading）: 茶色の縁取りをした巻物の形の中に、商品名を 2 行で置く。
• 詳細ボタン（button-primary）: 焦茶のピル型ボタン。右端に白丸の矢印アイコンを置く。
• 限定特典ボックス（limited-box）: 黄色の角丸ボックス。上に赤い限定タブ、中に白ラベルと吹き出しを入れる。
• 価格ブロック（price-block）: 線で挟んだサイズ名と巨大な価格。下に焦茶帯の補足を置く。
• 新作丸バッジ（badge-new）: マゼンタの円に白文字で新作であることを示す。
• 手描き丸ラベル（circle-label）: 細い茶色の線の円に、カップデザインなどの短い注記を入れる。
• 予告バナー（notice-banner）: 赤の平行四辺形に白文字の日付、横に黄色の帯を並べる。
• 公式導線ボタン（link-button）: 末尾に置くマゼンタの角丸横長ボタン。右に矢印をつける。

Do's and Don'ts

Do - 地は赤の地図柄、中身は羊皮紙パネルという 2 層構造を守る。 - 商品ごとに巻物見出しで区切る。 - 価格は極太の焦茶で大きく示す。 - 限定特典は必ず黄ボックスに入れる。 - 斜めの手描き注記と矢印でにぎやかにする。

Don't - 白無地の背景だけにしない。 - 細い明朝や淡い配色を使わない。 - 価格を小さくしない。 - パネルの縁を直線のままにしない。 - マゼンタを多用しない。

Page Structure

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

1. ファーストビュー（コラボと期間を伝える）: 青空にキャラクターの集合絵。縦書きのコピーと赤い期間タグを置き、下に羊皮紙上の商品の集合写真を並べる。
2. キャンペーン予告帯（特典へ誘導する）: 黄色の帯に赤い日付と下矢印の丸を置く。
3. 新作フレーバー（主力商品を訴求する）: パネルに巻物見出し、大きな写真、新作バッジ、説明文、茶ボタンを置く。
4. 商品紹介（カップ）（限定カップを紹介する）: 写真とカップの展開図、黄色の特典ボックス、価格ブロック、注釈の順に置く。
5. 商品紹介（サンデー）（複数のサンデーを見せる）: 文章と写真を左右に分けた組み、続けて各商品の価格を示す。
6. セット商品（まとめ買いを促す）: 箱の写真と付属バッグを見せ、サイズ表と 2 段の価格を置く。
7. 購入特典キャンペーン（特典で来店を促す）: 黄色の地図柄の地に、赤い予告バナー、ステッカー画像、赤帯のプレゼント文言を置く。
8. 特典カード一覧（集めたくなる気持ちを高める）: 4 列×5 段の茶色の枠つきカードを並べる。
9. 注意事項（条件を明示する）: 赤地に白文字の※リストを置く。
10. 公式導線・SNS（店舗・アプリへ送客する）: マゼンタのボタン、ピンクと青の 2 分割のアプリ枠、丸い SNS アイコンを並べる。

Imagery

• 商品は真上から少し斜めに撮った切り抜きにし、色鮮やかに見せる。
• キャラクターは白フチの切り抜きで、紙からはみ出させる。
• 背景は古地図の線画を赤や黄の地にかすらせる。
• 羊皮紙には染みとムラ、破れた縁をつける。
• 手描きの矢印や斜線で注記を足す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅 600〜750px のカラムを置き、両側を地図柄の赤い地で埋める。
• 特典カードは PC で 5 列にしてもよい。
• サンデー紹介は PC で写真と文章を左右に交互に並べる。
• 価格の数字は PC で 56px 程度まで拡大する。

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