DESIGN.md — ココア茶×金の劇場風お菓子LP（Theatrical Cocoa Brown Snack LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 力強い・インパクト、上品・高級、親しみ・手作り感
• キーワード: チョコレート・マジックショー・金文字・手描きキャラ・シズル写真・縦書きコピー
• 地の質感: ココアパウダーの粉っぽい質感、溶けたチョコの艶、木目テーブル、金のきらめき
• 形: 角のない全面写真ブロックの積み重ね。囲み枠は直角か小さめの角丸。シリーズ紹介だけピンクのリボン帯
• 温度感: 暖色寄り。焦げ茶と金で温かく濃厚

Colors

• 地の色は焦げ茶と黒が中心。生成りは最後の企業紹介にだけ使う
• 見出しは金のグラデーションで光沢を出し、暗い背景の上に置く
• 赤はカーテン・帯・バッジに絞って使い、華やかさを足す
• 甘い・しょっぱいなど対になる要素は茶と紺で色分けする
• 別商品のシリーズ紹介にだけピンクを使う
• 白文字は暗い写真の上の本文と小見出しに使う
• series-ribbon は文字 #F08E92 × 背景 #F0D8D8 のコントラスト比が 1.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#C11A20、4.52:1）を使う。

Typography

• キャッチは明朝の縦書きで、写真の左右の余白に置く
• 見出しは金のグラデーションに薄い影をつけて立体感を出す
• 当て字の読みは小さなルビで添える
• 本文は白か濃い茶のゴシックで、2〜4行の短い段落にする
• 小見出しの頭には国旗などの小さなアイコンを付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の上に文字を重ねる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 0px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの間は空けず、全面写真をすき間なく積む
• 1セクションの高さは画面1〜1.5枚分
• キャラ・文字・写真を重ねてレイヤー状に組む
• 構造の説明は断面写真から引き出し線を伸ばして項目を配置する
• シリーズ紹介は4分割の縦長パネルを並べる

Elevation & Depth

• 影は文字のドロップシャドウと商品の自然な影だけ
• カードに浮かせる影はつけない
• 金文字には暗い縁取りや影で写真から浮かせる

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の長方形。シリーズ紹介は縦長に分割
• セクション境界: 直線で切り替える。写真どうしを直接つなぐ
• 説明ボックスは半透明の茶の角形にする
• ラベルは赤や紺の角形帯にする
• 円は断面写真と循環矢印の図だけに使う

Components

• 金グラデーション見出し（gold-headline）: 明朝の大文字に金のグラデーションと影をつけた見出し
• 縦書きキャッチ（vertical-catch）: 写真の端に置く2行の縦書き明朝。カギ括弧の囲みもある
• 手描きマスコット（mascot）: 太い線で描いたとぼけた豆キャラ。ポーズを変えて各セクションに置く
• 国旗付き小見出し（flag-label）: 国旗アイコンと白い明朝の項目名、その下に小さな説明を置く
• 半透明の説明ボックス（translucent-box）: 写真の上に重ねる焦げ茶の半透明パネル。見出しと本文を入れる
• 循環矢印の図（loop-diagram）: 茶と紺の矢印で2つの味が巡る様子を示し、中央に赤い帯ラベルを置く
• シリーズ紹介リボン（series-ribbon）: ピンクの極太ロゴ文字と、淡いピンクに文字柄を敷いた帯

Do's and Don'ts

Do - 商品は大きく寄って撮り、ココアの粉の質感まで見せる - 暗い背景に金の見出しを置いて重厚に見せる - どのセクションにもマスコットを入れてユーモアを出す - マジックや劇場をモチーフに演出をそろえる - 縦書きの明朝で余韻を残す

Don't - 白地に情報を並べるだけの平たい構成にしない - 寒色を大きな面に使わない - 丸ゴシックのやさしすぎる見出しにしない - 写真を小さく切り出してカード型に並べない - 装飾の色を増やしすぎない

Page Structure

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

1. ファーストビュー（商品の見た目と世界観を一目で伝える）: 皿に山盛りの商品を真上から撮り、左右に縦書きキャッチ、中央下にロゴを置く
2. 商品紹介（どんな商品かを説明する）: 赤いカーテンの劇場背景に金の見出しを置き、マジック風のキャラと短い本文を添える
3. 素材の掛け合わせ（2つの主素材の魅力を伝える）: 左右で素材写真を分け、大きな明朝で「A×B」の形に組む
4. 味の特長（やみつきになる理由を見せる）: 商品写真に循環矢印の図を重ね、下に金の2行見出しを置く
5. 構造の説明（層の作りを見せる）: 暗い背景に断面写真を置き、引き出し線で4つの項目を配置する
6. 食べる場面（食べる場面を想像させる）: 木目テーブルの生活写真に縦書きコピーと半透明の説明ボックスを重ねる
7. 締めのキャッチ（印象を強く残す）: 黒地の上で商品と金の光の筋を見せ、縦書きの大コピーとキャラを置く
8. シリーズ紹介（関連商品へ誘導する）: 4つの縦長パネルに各商品とキャラを入れ、ピンクのリボンで見出しをつける
9. 企業紹介（作り手の姿勢を伝える）: 生成り地に開発風景の丸い写真、手書き風のロゴ、パッケージの並びを置く

Imagery

• 暖色の照明で、陰影を深くつけたシズル写真
• ココアの粉・塩の結晶・ナッツを周りに散らして素材感を出す
• 溶けたチョコのとろみやきらめく光の筋を合成する
• マスコットは太い黒線のフラットな茶色塗りで、表情をおおげさにする
• 劇場のカーテン・シルクハット・国旗を小道具として使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は1カラムのまま、画像を画面幅いっぱいに縮める
• 縦書きキャッチは SP では文字サイズを28〜36pxに抑える
• 構造説明の4項目は SP では断面写真の上下に2つずつ分ける
• シリーズの4パネルは SP では2×2にする
• PC は中央寄せで幅1076px程度の固定幅にする

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