DESIGN.md — 赤×クリームのレトロ部屋風アイスCM・キャンペーンLP（Retro Showa Living Room Ice Cream CM Campaign LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: レトロ、ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 昭和レトロ・ブラウン管テレビ・ストライプ壁紙・ダマスク柄・レシート応募・斜めストライプ帯
• 地の質感: 縦ストライプやダマスク柄の壁紙、斜めストライプの帯。家具・照明のフラットなイラストと写真を組み合わせる
• 形: 角丸の白カードとクリーム色パネル、ピル型ラベル、丸数字ステップ
• 温度感: 暖色寄り。クリームとベージュに赤を差し、ミントやネイビーで締める

Colors

• 地の色はセクションごとに変える。CMはベージュのストライプ、WEB CMはミントのダマスク、キャンペーンはクリーム。
• 赤はナビ帯・テレビ枠・主ボタン・強調文字に絞る。
• 賞品の見出しはオレンジと濃い文字で分け、日付はネイビーにする。
• サブボタンは薄いグレー面に濃い文字にして、主CTAより目立たせない。
• 商品紹介の帯は、赤系とネイビー系の2色で商品ごとに色を分ける。
• 問い合わせは黄色パネルにして、白カードと区別する。
• heart-badge は文字 #EC0000 × 背景 #FFDC64 のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C80000、4.54:1）を使う。

Typography

• 英字見出しは太いコンデンス書体にし、下に小さな和文サブを置く。
• 本文は中央揃えで、1行を短く切る。
• 数字は大きくし、単位は小さく組む。
• 強調したい語だけ赤文字にする。
• 注釈は11px程度で、グレー寄りの色にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ステップは3列、OK/NG例は2列で組む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しはすべて中央揃えにする。
• キャンペーン詳細は白い大カード1枚にまとめる。
• 項目名は枠付きピルラベルにして中央に置く。
• セクションの境目に家具イラストを置き、部屋がつながって見えるようにする。
• 商品紹介は全幅の色帯にして、人物と商品を左右に置く。

Elevation & Depth

• 基本はフラット。影はほぼ付けない。
• テレビやカードの写真にだけ、ごく薄い影を付ける。
• 白カードは影なしで、地色との差で浮かせる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 動画サムネは角丸の長方形で、中央か左下に丸い再生ボタン。人物は切り抜き
• セクション境界: 赤・ネイビー・白の斜めストライプ帯。壁紙柄の切り替えも境界に使う
• 主ボタンは角丸小の長方形にする。
• ステップ番号は細線の円に数字。
• ラベルは細線の角丸枠。
• 賞品カードは角丸大にする。

Components

• 主CTAボタン（button-primary）: 赤い面に白太字。横幅は広めに取る
• 会員別サブボタン（button-secondary）: グレー面に濃い文字の2列ボタン。上に小さな補足を入れる
• 項目ラベル（label-pill）: 白地に細いグレー枠。応募期間などの項目名に使う
• ブラウン管テレビ枠（retro-tv-frame）: 赤い筐体に動画を入れ、チャンネル切替ボタンを付ける
• チャンネル切替タブ（channel-tab）: 赤枠のピル。選択中は赤面に白文字
• 丸数字ステップ（step-number）: 細線の円に数字。下に説明と黄色のスマホイラスト
• ハート型バッジ（heart-badge）: 黄色のハートに応募条件を赤文字で書く
• 問い合わせパネル（contact-panel）: 黄色の角丸パネル。窓口名と赤いリンクを入れる
• 斜めストライプ帯（stripe-band）: 赤・ネイビー・白の斜線を並べた区切りの帯

Do's and Don'ts

Do - 部屋の世界観（壁紙・照明・家具）でセクションをつなぐ。 - 英字見出しと和文サブをセットで使う。 - 日付と当選数は大きな数字で示す。 - 応募手順は番号とイラストで3段階に分ける。 - OK例・NG例はチェックとバツのアイコンで並べる。

Don't - 寒色だけでページをまとめない。 - 赤を本文の地に広く使わない。 - 細い明朝体を見出しに使わない。 - 影や光沢を強くしない。 - 主ボタンを複数の色に増やさない。

Page Structure

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

1. ファーストビュー（人物と商品で注目を集める）: 室内の写真に人物と商品を大きく置き、左右に手書き風の大きなコピーを入れる
2. ナビ帯（ページ内の各所へ誘導する）: 赤の横帯にロゴ・2つのリンク・キャンペーン告知の枠を並べる
3. TVCM（CM動画を見てもらう）: ストライプ壁紙の上にブラウン管テレビ枠を置き、チャンネルタブと短い紹介文を付ける
4. メイキング（撮影の裏側を見せる）: クリーム色の角丸パネルに動画サムネと2行の説明を入れる
5. WEB CM（別の動画を紹介する）: ミントのダマスク柄の地に、ソファや観葉植物のイラストと動画を置く
6. キャンペーン賞品（賞品と当選数を訴求する）: 角丸の賞品画像の下に、オレンジの大見出しと太い数字、締切日のネイビー文字を置く
7. 応募期間・対象商品（応募条件を示す）: ピルラベルで項目を分け、日付と商品パッケージを並べる。ハート型バッジを添える
8. 応募方法（応募の手順を説明する）: 白カードの中に丸数字の3ステップを並べ、黄色のスマホイラストを添える
9. レシート撮影方法（不備のある応募を防ぐ）: OK例とNG例を2列にし、アイコン付きの箇条書きとレシートのイラストで示す
10. 応募フォーム（応募へ進ませる）: 赤い主ボタン、チェックボックス、グレーのサブボタン2つ、注釈の順に置く
11. 問い合わせ（問い合わせ窓口を案内する）: 黄色パネルに窓口名・リンク・受付時間を書く
12. 商品紹介（商品の魅力を伝える）: 赤帯とネイビー帯を全幅で使い、ドット・円・斜線の装飾、人物の切り抜き、商品の断面を入れる

Imagery

• 暖かい光の昭和レトロな部屋で撮った、人物の自然な笑顔の写真。
• 照明・家具・猫などは輪郭線なしのフラットなイラストで描く。
• 壁紙は縦ストライプやダマスク柄にする。
• 商品は割った断面を大きく見せ、食感が伝わるようにする。
• 商品帯の背景には、ドット・円・斜めの帯のポップなグラフィックを入れる。
• 手順の説明は黄色を基調にした簡単なスマホ・レシートのイラストで描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPC版も中央の1カラム構成。SPも同じ順番にそのまま縦に積む。
• ナビ帯はSPではロゴとハンバーガー、またはキャンペーンバナーだけにする。
• ステップの3列はSPでも3列のまま、文字を小さくする。
• OK/NG例はSPでは縦に並べる。
• サブボタンの2列は、SPでは縦に積む。

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