DESIGN.md — 金×カカオブラウンの高級チョコ菓子 LP（Gold and Cocoa Premium Chocolate LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、信頼・誠実
• キーワード: 金色・カカオブラウン・額縁・明朝体・商品断面図・セレブ起用
• 地の質感: 金箔のような微細なざらつきとグラデーションのある金地。濃茶の面は上から下へ深くなるグラデーション。
• 形: 角のない四角いカードに金の二重線フレーム。ボタンだけはピル型。
• 温度感: 暖色。金・茶・ベージュでまとめ、赤は最後の導線だけに使う。

Colors

• ページの地は金色。商品はブラウンの額縁カードにのせる。
• ブランドメッセージは濃茶のグラデーション面に金色の明朝体でのせる。
• 金地の上の英字見出しは濃茶の細い書体にする。
• 赤やえんじは下部のリンクボタンと発売日帯だけに使う。
• 金色の細い二重線でカードを縁取り、高級感を出す。
• 下部はクリーム色にして明るくし、白いフッターへつなぐ。
• framed-product-card は文字 #FFFFFF × 背景 #9D7049 のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#986C47、4.59:1）を使う。

Typography

• 和文は見出しも本文も明朝体でそろえる。
• メッセージ文は中央揃えで、行間を約2.2と広くとる。
• 英字見出しはセリフ体を大きく1語で置く。
• 字間は0.08em前後とやや広めにする。
• ゴシック体はボタンとフッターだけに使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは左右に約16pxの余白をとる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算）
• 商品カードは同じ型を縦に繰り返し、カード同士の間を約60pxあける。
• カード内は商品名→説明→パッケージ→断面図の順に並べる。
• 断面図には引き出し線と短い注釈を左右交互につける。
• セクション見出しの上下は60〜80pxとたっぷりあける。
• メッセージは段落の間を1行分あけて詩のように区切る。

Elevation & Depth

• 影はほぼ使わず、金色の枠線で立体感を出す。
• 商品パッケージの写真にだけ自然な落ち影をつける。
• 動画の再生ボタンは白い円に薄い影をつける。

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 商品やパッケージは背景を抜いた切り抜き。人物は全幅の長方形。
• セクション境界: 背景色を直線で切り替える。
• カードは角丸なしで、外側の太い茶枠と内側の細い金線の二重枠にする。
• リンクボタンはピル型で、えんじの面に金の細い縁をつける。
• 最下部の赤ボタンだけ角丸8pxの長方形にし、右に矢印を置く。
• 発売日帯は全幅の長方形で、上下に濃い赤の線を入れる。

Components

• 額縁風商品カード（framed-product-card）: 茶色の面を金の二重線で囲み、中に商品名・説明・パッケージ・断面図を入れる。
• 英字セリフ見出し（section-title-serif）: 金地の中央に濃茶の大きな英字見出しを1語だけ置く。
• 断面注釈（cross-section-callout）: 菓子の断面写真に白い点と細い線を引き出し、構成要素を短く書く。
• FVの動画誘導ボタン（hero-outline-button）: 暗い写真の上に置く、金の線のピル型ボタン。下に小さな三角を添える。
• 発売日帯（release-band）: 深紅の横帯の中央に白い明朝体で日付を書く。
• ブランドリンクボタン（button-brand-pill）: えんじのピル型に金の細い縁をつけ、白い文字をのせる。SNSボタンは左に白い円のアイコンを置く。
• 赤い外部導線ボタン（button-primary）: 全幅に近い赤い長方形。左に白い文字、右に細い矢印を置く。
• 動画サムネイル（video-thumb）: 横長のサムネイルの右端に白い丸の再生ボタンを重ね、下に明朝体のタイトルを置く。

Do's and Don'ts

Do - 金・茶・クリームの3系統で色をまとめる。 - 商品ごとに同じカードの型を繰り返し、読み比べやすくする。 - 和文はすべて明朝体にし、字間を広めにとる。 - 断面写真と注釈で味の層の違いを見せる。 - メッセージは短い行に分け、中央揃えでゆったり置く。

Don't - 丸ゴシックやポップな手書き文字を使わない。 - カードを大きく角丸にしない。 - 赤をページの上の方に使わない。 - 強いドロップシャドウや派手なグラデーションボタンを使わない。 - 寒色をデザインの色に使わない。寒色はパッケージ写真の中だけにする。

Page Structure

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

1. ファーストビュー（起用人物と商品で目を引き、高級感を一瞬で伝える）: 暖色の人物写真を全面に置き、金の細い枠で囲む。右下に白い明朝体のキャッチと動画誘導ボタンを置き、左に縦書きのScroll表示を入れる。
2. ブランドロゴ帯（ブランドを印象づける）: 金のグラデーション面の中央に、金色の立体的なロゴを大きく置く。
3. ブランドメッセージ（自分へのごほうびという価値を情緒的に語る）: 濃茶のグラデーション地に、金色の明朝体の見出しと中央揃えの詩的な段落を置く。
4. 商品ラインナップ（季節限定のフレーバーを1つずつ紹介する）: 金地の上に英字見出しを置き、その下に額縁カードを6〜7枚縦に並べる。
5. 発売日告知（発売日を目立たせる）: 深紅の全幅帯に白い明朝体で日付を書く。
6. アソート商品（詰め合わせ商品を紹介する）: 同じ額縁カードにパッケージ写真を1枚入れる。
7. 動画（CM動画を見てもらう）: 金地に英字見出しを置き、横長のサムネイルと再生ボタン、下にタイトルを入れる。
8. プロフィール（起用人物を紹介する）: 茶のグラデーション地に、白い英字見出しと名前・読み仮名・基本情報を中央揃えで並べる。
9. ブランド導線（定番商品とブランドサイトへ誘導する）: クリーム地に赤茶の明朝体コピーを置く。ベージュのカードに定番パッケージとえんじのピル型ボタンを2つ入れる。
10. SNS（公式アカウントのフォローを促す）: 金色の英字見出しの下に、アイコン付きの大きなピル型ボタンを2つ置く。
11. 外部リンク・シェア・フッター（通販とこだわりページへ誘導し、ページを締める）: 白地に赤い長方形ボタンを2つ置き、その下に丸いシェアアイコンを並べる。最後は赤いフッター帯。

Imagery

• 人物は茶色の服で、暖色の茶の背景で撮る。照明は硬めで陰影を強くし、商品を手に持たせる。
• パッケージは正面からの切り抜き写真で、茶のカードに浮かぶように置く。
• 菓子の断面は斜め上から撮り、チョコが垂れる様子・ミルクのしぶき・フルーツ片を組み合わせる。
• 背景の金は細かい粒子感のあるテクスチャにする。
• 装飾は細い金線の枠だけにし、イラストは使わない。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅約960pxのコンテンツ枠を置き、左右には金地の背景を広げる。
• PC のファーストビューは横長にして、キャッチを写真の上に重ねる。
• PC の商品カードは2カラムにし、断面図を横に並べてもよい。
• 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 行書くと起動時に読み込まれる。