DESIGN.md — 金箔とカカオ色の高級チョコ LP（Gold and Cocoa Premium Chocolate LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、力強い・インパクト
• キーワード: 金箔・カカオブラウン・明朝体・額縁・とろける質感・ご褒美
• 地の質感: 金地に細かいザラつきのある紙・箔の質感。ダーク部はうっすらグラデーション
• 形: 四角い額縁カードと細い金の二重線。ボタンだけは丸いピル型
• 温度感: 暖色。茶と金の濃淡だけで作り、温かく重厚

Colors

• 地は濃い茶→金→クリーム→白の順に明るくし、ストーリーの流れを作る
• 金地の上には茶色カード＋金の額縁を置き、カード内の文字は白
• 濃い茶の地の上の文字はすべて淡い金色にする
• 赤は発売日バッジと外部リンクボタンにだけ使う
• 青・緑など寒色は商品パッケージ写真の中だけに限る

Typography

• 見出しも本文も明朝体を基本にする。ゴシックはボタンとフッターだけ
• 英字見出しは細いセリフ体の大文字にし、下に細い下線を引く
• コンセプト文は 1 行ずつ改行して中央揃え、行間を 2 以上にする
• 商品名の下にサブ名を山括弧で囲んで添える
• 商品説明は左揃えにし、字間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（動画のサムネだけ 2 列）。PC は商品カードを 2 列に並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 30px（375px 幅換算）
• 商品カードは左右 16px ほど空けて置き、カード同士は 40px 空ける
• セクション見出しの上下に 50px 以上の余白をとる
• カード内は商品名→説明→パッケージ写真→断面図の順に並べる
• 断面図のラベルは細い線と小さな丸で引き出して示す

Elevation & Depth

• 影はほぼ使わない。奥行きは額縁の二重線とグラデーションで出す
• パッケージ写真にだけ柔らかい落ち影をつける
• 動画の再生ボタンは白い丸に薄い影をつける

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は四角いまま。チョコは切り抜いて地の上に浮かせる
• セクション境界: 直線で切り替える。チョコの写真を境界にまたがせて置く
• 商品カードは角丸なしにし、内側に細い金線の額縁を入れる
• ボタンはピル型にし、細い金の縁をつける
• 外部リンクのボタンは角丸 12px の長方形にし、右に矢印線を置く

Components

• 額縁付き商品カード（product-frame-card）: 茶色のグラデーションの面に金の二重線の額縁をつけ、商品名・説明・写真をまとめる
• 英字のセクション見出し（section-title-en）: 細いセリフ体の大文字に、同じ幅の下線を引く
• 発売日バッジ（release-badge）: カードの上辺にかかる赤い帯に、白い明朝体で発売日を入れる
• 金縁のピル型ボタン（button-outline-gold）: ファーストビューの写真の上に置く、半透明の黒地に金の縁と金文字のボタン
• えんじ色のサブボタン（button-sub）: えんじ色の地に金の細い縁と白文字。SNS 用は左に白丸のアイコンを置く
• 赤い外部リンクボタン（button-primary）: 赤い面に白文字と右向きの矢印線。外部サイトへ送る
• 味わい変化グラフ（taste-chart）: 白い角丸の枠に、食べ始めから終わりまでの味の変化を折れ線とイラストで示す
• 動画サムネイル（video-thumb）: 四角い写真の右下に白い丸の再生ボタン、下に明朝体のキャプション

Do's and Don'ts

Do - 地の色は茶と金の濃淡でまとめ、明るさを段階的に変える - 見出しと本文は明朝体にし、字間を広くとる - チョコは光沢がわかる切り抜き写真にし、セクションの境目にまたがせる - 商品はすべて同じ型の額縁カードに入れて統一感を出す

Don't - ポップな丸ゴシックや原色の装飾を使わない - 赤をバッジとボタン以外に広げない - カードを角丸にしたり、強い影をつけたりしない - コンセプト文を左揃えの長い段落にしない

Page Structure

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

1. ファーストビュー（著名人と商品で注目を集める）: 暖色の人物写真に金の細い額縁を重ね、右下に明朝の大きなコピー2行と金縁ボタン、左下に商品パッケージを置く
2. ブランドロゴと商品一覧（シリーズ全体を見せる）: 金のグラデーションの帯にロゴを置き、下に小さなパッケージを6つ横に並べ、発売日を添える
3. コンセプト（自分へのご褒美という価値を語る）: 濃い茶の地に、とろけるチョコの大きな写真と、淡い金色の明朝体を中央揃えで行ごとに改行して並べる
4. ラインナップ（商品ごとの特徴を説明する）: 金地に英字見出しを置き、額縁付きの茶色カードを縦に並べる。断面図と味わいグラフを入れる
5. 新商品（新発売を目立たせる）: 同じカードの上辺に赤い発売日バッジをかける
6. 動画（テレビCM・WEB CMへ誘導する）: 大きな横長の動画1本と縦長の動画を2列で並べ、白丸の再生ボタンとキャプションをつける
7. プロフィール（出演者を紹介する）: 茶色のグラデーションの帯に、英字見出し・名前・データを中央揃えの白文字で並べる
8. ブランドへの誘導（親ブランドと詳しい情報へ送る）: クリーム地に赤茶の明朝コピー、ベージュの囲みにパッケージと赤いボタン、その下にえんじ色のボタン2つ
9. 公式SNS（フォローを促す）: 細いセリフ体の見出しと、アイコン付きの大きなえんじ色ピル型ボタン
10. 外部リンクとフッター（通販サイトへ送り、シェアを促す）: 白地に矢印付きの赤いボタン2つ、丸いシェアアイコン、赤いフッター帯

Imagery

• 人物は茶系の衣装で、暖色のスタジオ照明を当てたシネマ風のポートレート
• チョコは光沢を強く出した 3D 調の切り抜き。とろけて流れる様子を大きく見せる
• 断面図は半分に割った粒に引き出し線を添え、中身を説明する
• 原料は茶色の細い線画イラストで添える
• 金地にはうっすら紙や箔のノイズの質感を入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは横長の写真にし、コピーを左上、ロゴと商品を左下に置く
• PC のコンセプトは文章を左、チョコの写真を右に置く 2 カラム
• PC の商品カードは 1 枚目だけ横長にし、残りは 2 列に並べる
• PC の WEB CM は 4 列に並べ、プロフィールは見出しを左、情報を右に置く
• 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 行書くと起動時に読み込まれる。