DESIGN.md — 赤×チョコ茶のポップなアイス菓子 LP（Bold Red Chocolate Ice Cream Brand LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感
• キーワード: 鮮烈な赤・チョコのシズル・砕けたかけら・吹き出し見出し・漫画風・帯の切り替え
• 地の質感: 地はフラットな単色の面。チョコの光沢・とろける質感は写真と3Dレンダーで加える
• 形: 角丸は小さめ(4〜8px)のカード。CTAはピル型。セクション下端に下向き三角の切り欠きを入れる
• 温度感: 暖色寄りで高温。赤と茶の濃い色を、クリーム色と白で和らげる

Colors

• 地の色は白→赤→白→クリーム→赤→白の順に帯で切り替え、場面転換を示す
• 赤は帯セクション・CTA・セクション見出し文字に限定。主役の色として広い面で使う
• 茶色はチョコ写真とナビ帯で使う。テキスト用の色にはしない
• 赤地の上は白文字のみ。白い札やカードを重ねてコントラストを保つ
• 黄色はキラキラ線や漫画の文字など、ごく小さな強調だけに使う
• button-primary-pill は文字 #FFFFFF × 背景 #EC1A01 のコントラスト比が 4.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E91A01、4.55:1）を使う。
• carousel-card は文字 #FEF6F1 × 背景 #EB1B01 のコントラスト比が 4.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E11A01、4.52:1）を使う。

Typography

• 見出しはすべて極太ゴシックにし、細い書体は使わない
• セクション見出しは赤文字で中央に置き、両脇にチョコ片の画像を添える
• 本文は中央揃えで短く改行する。1行は20字前後に収める
• 吹き出し見出しは小さな前置き行（黒）と大きな主行（赤）の2段で組む
• 擬音語はカタカナを大きく扱い、食感を文字で表現する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長エリアは左にテキスト、右に大きな商品画像を重ねる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの区切りは背景色の帯で表す
• カードは画面幅の約92%で中央に置く
• 赤帯の下端には中央に下向き三角を付け、次の内容へ視線を誘導する
• カルーセルは左右に次のカードを少しはみ出させ、丸い矢印ボタンとドットを付ける
• 見出しの上下は40〜56px あける

Elevation & Depth

• カード・吹き出し見出しにはごく薄い影（0 2px 6px rgba(0,0,0,.15)）
• CTA ボタンの下側に濃い赤の影を付け、押せる立体感を出す
• カルーセルの矢印は白丸に軽い影
• チョコ片の画像は立体レンダーで奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: カード上部いっぱいに角丸の長方形で配置。商品のパッケージやチョコは切り抜きで配置する
• セクション境界: 基本は直線の色帯。商品紹介の赤帯だけ下端中央に三角の切り欠き
• 主要な詳細 CTA はピル型、カード内のボタンは角丸小のフル幅
• 吹き出し見出しは白い角丸の箱に下向きのしっぽを付ける
• 特長の説明は、赤い細線の吹き出し（L 字の枠としっぽ）で囲む
• 漫画パネルはギザギザの爆発型吹き出しで描く

Components

• ピル型の詳細 CTA（button-primary-pill）: 赤のピル型。上に小さな前置き文字、下に大きなラベルの2段組み。右端に「>」を置く
• ピックアップカード（card-pickup）: 上にバナー画像、中に太字2行の説明、下に赤いフル幅ボタンを並べる
• チョコ片付きの見出し（heading-chocolate）: 赤の極太見出しの左右に、砕けたチョコ片を散らす
• 吹き出し見出し（heading-balloon）: 白い角丸箱に影としっぽを付け、黒の前置き行と赤の主行を入れる。右上に黄色のキラキラ線
• 特長の吹き出し（feature-callout）: 左上に黄色のキラキラ線、赤い太字の小見出し、下に赤い細線の吹き出し枠と本文
• ひみつカルーセルカード（carousel-card）: 上に写真、下に赤い本文エリア。境目に番号の丸バッジを置き、白文字の見出しと中央揃えの本文を入れる
• 白い商品名札（label-plate）: 赤帯の上に置く横長の白い角丸札。濃い赤茶の太字を入れる
• チョコ色ナビ（nav-bar）: FV 直下の濃い茶色の帯。白文字のメニュー3つに下向き矢印を付け、上端はチョコが垂れる形にする

Do's and Don'ts

Do - チョコ片やとろけるチョコの画像を見出しや FV に必ず散らす - 赤帯・クリーム帯・白帯を交互に使い、リズムを作る - 食感の擬音をカタカナの大きな文字で見せる - CTA は赤で統一し、下に影を付けて立体的にする - 見出しは吹き出しやキラキラ線で賑やかに飾る

Don't - 寒色やくすんだ色を主要な色にしない - 細い明朝体や繊細な書体を使わない - 赤地の上に茶色や黒の文字を直接置かない - 余白を詰めすぎて写真のシズル感を損なわない - 大きな角丸や柔らかすぎる形にしない

Page Structure

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

1. ファーストビュー（食感と商品を一目で伝える）: 斜めに分割した黄と赤の背景。割れたチョコの写真、とろけるチョコ、擬音のタイポ、商品パッケージを重ねる
2. ナビゲーション（ページ内の主要セクションへ誘導する）: 濃い茶色の帯に白文字のメニュー3つと下向き矢印
3. ピックアップ（キャンペーン・特設サイトへ送客する）: 白地に、バナー画像・説明・赤いボタンのカードを縦に2枚並べる
4. 商品情報（商品の概要を伝える）: 赤帯の上に白い商品名札、パッケージ画像、白文字の説明。下端は三角の切り欠き
5. 特長（3つの魅力を伝える）: 左に吹き出し型の特長を3つ、右に大きな割れチョコ。下にピル型 CTA
6. こだわり（カルーセル）（おいしさの理由を深く伝える）: クリーム地。写真と赤い本文エリアのカードを番号バッジ付きでスライド表示
7. 動画紹介（第三者のコンテンツで興味を高める）: 吹き出し見出し、中央揃えの本文、埋め込み動画
8. 漫画ストーリー（ブランドの歴史を親しみやすく伝える）: 赤い漫画パネルに爆発型の吹き出しと黄色い極太文字。下に赤い読むボタン
9. CM 情報（広告とタレントを訴求する）: 赤帯に白い見出し、角丸の写真、白文字のキャプション
10. シェア・フッター（SNS 拡散と企業情報）: 白地に赤い見出しと丸い SNS アイコン3つ。下に細線と小さな規約リンク・コピーライト

Imagery

• チョコは光沢のある濃い茶色で、割れ目やかじり跡を見せた寄りの写真か3Dレンダーにする
• とろけるチョコとミルクの渦をうねる液体として背景に流す
• 砕けたチョコ片の切り抜きを、見出しの周りに角度を変えて2〜4個散らす
• 人物写真は明るい空色や水色の背景で、商品を手に持たせる
• 漫画パートは赤のスクリーントーンと黒い線画、爆発型の吹き出しで描く
• 黄色のキラキラ線（3本の放射線）を強調の記号として使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 70% 幅のコンテナに収め、帯の背景は全幅にする
• PC ではピックアップカードを2列に並べる
• PC の商品情報は、パッケージ画像（左）と説明（右）の横並び
• PC のカルーセルは3枚同時に表示する
• PC の FV は横長にし、ナビにロゴとメニューを横一列で並べる
• 漫画パネルと動画は PC で幅約 70% に広げる

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