DESIGN.md — 朱橙×ターコイズのポップな菓子キャンペーンLP（Vivid Orange Pop Graphic Snack Campaign LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 朱オレンジ地・ドット円パターン・斜めストライプ・白抜き太字・半透明の大英字・動画カルーセル
• 地の質感: フラットな単色面に、ハーフトーンのドット・斜線・流体ブロブを重ねたグラフィック調
• 形: 角丸の小さい矩形カード、正円ドット、斜めの帯、雲形の吹き出し
• 温度感: 暖色が主体の高温な画面。後半だけ寒色に切り替えてリズムを作る

Colors

• 前半は朱オレンジの地で全体を塗る。装飾は同系の明るい橙・濃い朱だけで重ねる
• 動画のコラボ企画からはターコイズ地に切り替え、話題を変えたことを示す
• 色地の上の文字は原則白抜きにし、可読性のために薄い影を付ける
• 黄色はコラボ見出しのマーカー帯に限って使う
• 赤は商品パッケージとリンクの丸矢印アイコンに限定する
• 白はカード・吹き出し・フッターだけに使い、面として目立たせる
• anchor-nav は文字 #FFFFFF × 背景 #EF4400 のコントラスト比が 3.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D83D00、4.58:1）を使う。

Typography

• セクション見出しは、半透明の大英字の上に日本語の小見出しを重ねる二層構成にする
• ファーストビューのコピーは明朝体の縦書きで組む
• 本文は中央揃えで、1行12〜18字を目安に改行する
• 色地の上の白文字には、薄いドロップシャドウを付ける
• インパクト見出しは極太のディスプレイ書体に赤い縁取りを付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムの中央揃え。動画は左右の隣のスライドが少し見えるカルーセルにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは、英字の大見出し → リード文 → ビジュアル → 説明文の順に縦積みする
• 動画サムネイルは画面幅の約90%で、両端に次のスライドを覗かせる
• 紹介枠は白い細線の角丸ボックスにし、上辺の中央に英字ラベルを載せて線を切る
• ナビは英字と小さな日本語の2段ラベルを3つ並べ、上下を白線で挟む

Elevation & Depth

• パッケージ画像には、下方向に柔らかく落ちる影を付ける
• 白カードは影なしのフラットにし、背景色とのコントラストだけで浮かせる
• 見出し文字に軽いドロップシャドウを付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 動画サムネイルは角丸8pxの矩形にする。人物アイコンは正円に切り抜く
• セクション境界: 直線の境界で、オレンジ地とターコイズ地を切り替える
• 装飾は正円・ハーフトーンのドット円・角丸の斜め帯・流体ブロブで構成する
• 吹き出しは白い雲形にし、輪郭を朱色の線で縁取る
• 見出し上のラベルは白いピル型にし、文字を赤にする
• 再生ボタンは白い正円の線に、白い三角を入れる

Components

• 半透明の大英字見出し（section-title-ghost）: 白から透明へのグラデーションを付けた巨大な英字に、日本語の見出しを重ねる
• 英字ナビ（anchor-nav）: 英字と日本語の2段ラベルを3つ横に並べ、上下を白い線で挟む
• 動画カルーセル（video-carousel）: 角丸のサムネイルの中央か右下に、白線の再生ボタンを置く。タイトルはサムネイルの下に入れる
• 紹介枠（profile-frame）: 白い細線の角丸ボックスで、上辺にラベルを載せる。中には円形アイコン・名前・本文・SNSアイコンを入れる
• ピル型ラベル（pill-label）: 白いピル型に赤い太字を入れ、インパクト見出しの上に載せる
• 雲形の吹き出し（speech-cloud）: 白い雲形の中に濃い文字の説明を中央揃えで入れ、商品イラストを上から重ねる
• 黄色帯のコラボ見出し（marker-heading）: 黄色のグラデーションの英字に通し番号の白丸を添え、斜めの黄色帯に手書き風のタイトルを載せる
• 関連サイトのカード（link-card）: 白カードの上半分にバナー画像を置き、下にタイトル・赤丸の矢印・説明文を入れる
• ページトップへ戻るボタン（pagetop-button）: 白地に細いグレー枠の正円で、中にキャレットを入れる

Do's and Don'ts

Do - 背景には常にドット円・斜め帯・ブロブを散らし、画面に余白を感じさせない - 見出しは英字と日本語の二層構成にそろえる - 動画は再生ボタン付きの角丸サムネイルで統一する - 暖色地と寒色地の切り替えを1回だけ使い、話題の転換を示す - 本文は白抜きの中央揃えで短く改行する

Don't - 朱オレンジの地にグレーや黒の文字を載せない - 装飾に寒色を前半のオレンジ地へ混ぜない - 角の鋭い硬いボックスや重い影を使わない - 本文を左揃えで長く組まない（紹介枠の本文だけは例外） - 落ち着いたパステルや余白の多いミニマルな構成にしない

Page Structure

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

1. ファーストビュー（企画のコンセプトと商品を一目で伝える）: ロゴ風の白い見出しと縦書きの明朝コピーを置き、中央に商品パッケージを大きく見せる
2. ページ内ナビ（3つのコンテンツへ誘導する）: 商品ロゴの下に英字の2段ラベルを3つ並べ、白線で挟む
3. 動画紹介（仕組みを動画で見せる）: 半透明の大英字見出しの下に、白文字のリードと動画カルーセルを置く
4. デザイン紹介（パッケージの種類と楽しみ方を伝える）: 横長のパッケージ画像の下に、明朝体の中央揃えの文を置く
5. 制作者の紹介（作り手の人柄を伝える）: 白線の枠に、円形のアイコン・名前・本文・SNSアイコンを入れる
6. 保存方法の訴求（便利な使い方を伝える）: ピル型ラベルと極太見出しの下に、雲形の吹き出しと商品イラストを置く
7. コラボ動画1（話題のコンテンツとの連動を見せる）: ターコイズ地に、手書き風の見出しと黄色帯のタイトル、縦長動画のカルーセルを置く
8. コラボ動画2（クリエイターとのコラボを見せる）: 番号付きの黄色い英字見出し、説明文、縦長動画の順に置く
9. 関連サイトへの誘導（ブランドサイトや特設サイトへ送客する）: オレンジ地に、バナー画像付きの白カードを2枚縦に並べる
10. シェア・フッター（SNSでの拡散と運営者の表示）: 白地に3つのSNSアイコン、丸いページトップボタン、小さな規約リンクを置く

Imagery

• 商品パッケージは正面からの切り抜きで、柔らかい影を付ける
• 人物イラストは目を省いたフラットな似顔絵調にする
• 動画のサムネイルは、明るい自然光で撮った人物と商品の実写にする
• 背景にハーフトーンのドット円・斜線ストライプ・正円の輪・流体ブロブを散らす
• バナー画像は、割れたチョコのシズル感と大きな擬音文字で作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央のコンテンツ幅を約60%にとどめ、左右の余白にも背景の装飾を広げる
• PCのファーストビューは、縦書きのコピーを左右に振り分けて商品を中央に置く
• PCのナビは、ロゴを左・3つの英字メニューを右に置く横並びにする
• PCの動画は複数のサムネイルを横に並べ、左右に赤い丸矢印を付ける
• 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 行書くと起動時に読み込まれる。