DESIGN.md — 赤×黄の集中線ポップなお正月スイーツ LP（Festive Pop Character Collab Ice Cream LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、かわいい、情報量多め・訴求型
• キーワード: 集中線・紙吹雪・看板ラベル・太字価格・季節限定・キャラクターコラボ
• 地の質感: 放射状の集中線、紙吹雪、星、雪の結晶、ダイヤ柄の装飾が全面にあるにぎやかな質感
• 形: 左右にノッチのある看板型ラベル、ギザギザのバッジ、ピル型の価格帯
• 温度感: とても暖かい。赤と黄が主役で、青を締め色に使う

Colors

• 前半は赤の集中線、後半は黄色のダイヤ柄で、セクションの地色をはっきり変える
• 商品名は黄色の看板ラベルに赤や黒の太字で載せる
• 赤地では価格を白い太字にし、黄地では価格をこげ茶にする
• サイズのバッジ（丸）と個数ラベルは、商品ごとに橙・青・ピンク・緑で色を変える
• 注意書きと見出し帯は青で締め、赤と黄の派手さを引き締める
• おトク・限定の訴求には赤いギザギザバッジを使う
• sign-label は文字 #E83E47 × 背景 #FDF202 のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D21923、4.58:1）を使う。
• size-badge は文字 #FDFCFA × 背景 #E8559A のコントラスト比が 3.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DD1E78、4.52:1）を使う。
• pill-banner は文字 #E83E47 × 背景 #FEFDFE のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D21923、4.56:1）を使う。
• count-label は文字 #712A02 × 背景 #1E9A6A のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#26C386、4.54:1）を使う。

Typography

• 見出しは超太字にして、白や黒の縁取りや影をつける
• 大見出しの一部の文字は、上下にずらしたり大きくしたりして弾ませる
• 価格は「¥」と数字を同じ大きさの超太字で大きく見せる
• 本文の長文は使わない。注意書きだけを小さな通常の太さで書く
• 商品名は 2〜3 行で中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品画像と看板ラベルを左右に重ねてずらす
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品写真は画面幅いっぱい近くまで大きく置く
• 看板ラベルは写真の端に重ねて配置する
• 価格はサイズ違いの 2 つを横に並べる
• 箱入り商品の区切りには破線の横線を使う
• 注意書きは各セクションの末尾にまとめる

Elevation & Depth

• 切り抜いた商品写真には床に落ちる影をつけて浮かせる
• 看板ラベルには濃い色の縁取りとオフセット影をつける
• 白いピル帯は影なしのフラットにする

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き写真。トランプなどの付属品は角丸の四角に入れる
• セクション境界: 直線で地色を切り替える。境目に看板型のタイトル帯をかぶせる
• 看板ラベルは左右がノッチ状に欠けた形にする
• 限定・おトクのバッジはギザギザの円か星形にする
• サイズ表示は塗りの正円バッジにする
• 案内帯とボタンは完全なピル型にする

Components

• 看板型商品名ラベル（sign-label）: 黄色地に赤い縁取り。左右がノッチ状に欠けた形で、中に商品名を 2〜3 行で入れる
• ギザギザ限定バッジ（burst-badge）: ギザギザの円形に、数量限定やおトク量を 2 行で入れる
• サイズ丸バッジ（size-badge）: 小さな正円にサイズ名を入れ、価格の左に添える
• 大価格表示（price-display）: サイズバッジと超太字の価格を 2 つ横に並べる
• 白ピル案内帯（pill-banner）: 白いピル型の帯。選び方の案内を太字で入れる
• モバイル注文ボタン（button-primary）: 紺のピル型ボタン。左にスマホのアイコン、右に矢印をつける
• 個数ラベル（count-label）: 色付きの角丸枠に、白地で「〇個の値段で△個入」と入れる
• 紺の吹き出し（speech-bubble）: 紺の吹き出しに、デザインのポイントを白と黄の文字で書く
• 青の見出し帯（section-title-band）: 青の全幅帯に、縁取りつきの白文字キャッチを 2 行で入れる。星を散らす

Do's and Don'ts

Do - 赤の地には集中線と紙吹雪を必ず重ねる - 価格は画面の中で最も大きい要素の一つとして扱う - 商品ごとにラベルとバッジの色を変えて区別する - おトク量は具体的な数字で、バッジに入れて示す - 切り抜き写真とラベルを重ね、動きを出す

Don't - 余白の多いミニマルなレイアウトにしない - 細い明朝体や淡い色を使わない - 長い説明文の段落を入れない - 価格を小さく、または本文と同じ太さにしない - 寒色だけでセクションを組まない

Page Structure

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

1. ファーストビュー（季節とコラボを一目で伝える）: 赤の集中線を背景に、縁取りつきの見出しと商品写真を寄せ集めて配置し、看板ラベルを添える
2. 見出し帯（楽しさを訴える）: 青の全幅帯に白の太字コピーを 2 行で入れ、星を散らす
3. 主力セット紹介（限定セットを大きく見せる）: 看板ラベルと限定バッジの下に、箱を大きく見せる写真とカップを並べ、吹き出しでポイントを添える
4. 付属品紹介（おまけの価値を見せる）: トランプなどの付属品をタイル状に 4 列で並べ、吹き出しを添える
5. 価格（おトク感と価格を伝える）: 斜線で挟んだ見出しにピルを重ね、2 サイズの価格を白の太字で示し、白いピル帯と注意書きを続ける
6. サブ商品紹介（単品商品を紹介する）: 濃い赤の地に、商品写真 2 点を左右互い違いに配置し、看板ラベルを重ね、白い価格ボックスを置く
7. コピーライト帯（権利表記を示す）: 青の帯に白の小さな文字で書く
8. 別シリーズ大見出し（後半の商品群へ切り替える）: 黄色のダイヤ柄の地に、ピンクの大きな題字を置き、限定パッケージの説明を吹き出しで添える
9. CTA（モバイル注文へ誘導する）: 淡い黄の帯に、▼で挟んだ案内文と紺のピル型ボタンを置く
10. 個数別商品一覧（個数ごとの価格を比べさせる）: 箱の写真、おトクバッジ、色違いの個数ラベル、2 サイズの価格を 1 セットにし、破線で区切って繰り返す
11. 注意事項（条件を明示する）: 青の地に、白の※付きの箇条書きで並べる

Imagery

• 商品は真上から斜めに見下ろす角度で撮り、背景を抜いた切り抜きにする
• アイスは色とりどりのフレーバーが見えるよう、箱に詰めた状態で撮る
• 背景装飾は集中線、紙吹雪、星、雪の結晶をフラットなイラストで描く
• 後半の背景は、黄色の濃淡によるダイヤ（アーガイル）柄にする
• 季節感を出すため、雪だるまや手袋などの小さなイラストを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に 480〜600px 程度の幅で SP と同じレイアウトを置き、左右には背景柄を延長する
• 価格や個数別の一覧は、PC で 2 カラムのグリッドにしてもよい
• 集中線の背景は全幅に広げ、中心を見出しに合わせる
• 文字サイズは PC で 1.2 倍程度に拡大する

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