DESIGN.md — 金縁×ショコラ茶の高級チョコレート LP（Gold Frame Premium Chocolate LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、信頼・誠実
• キーワード: 金色の額縁・ミルクチョコ色・明朝体・商品断面図・季節限定
• 地の質感: 金地にうっすら紙のようなざらつき。カードは上から下へ濃くなるブラウンのグラデーションで、ツヤ感がある
• 形: 四角いカードに金の二重線フレーム。角丸は使わない。リンクボタンだけピル型か角丸にする
• 温度感: 暖色だけで組む。金・茶・深紅で温かく濃厚な印象

Colors

• ページの地は金色で通し、商品は茶色の額縁カードにのせる
• ブランドメッセージは黒に近い濃茶の地に金文字で組む
• カードの中の本文は白、商品名だけ太字にする
• 深紅は発売日の帯とリンクボタンだけに使う
• 下部はクリーム地に切り替えて、ブランド全体への導線と分ける
• 寒色は商品パッケージの写真以外では使わない
• card-product-frame は文字 #FFFFFF × 背景 #9D7049 のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#986C47、4.59:1）を使う。

Typography

• 見出しも本文も明朝体で統一し、ゴシックはボタンとフッターだけに使う
• メッセージ本文は中央揃えにして、行間を広めに取る
• 商品カードの本文は左揃えで、字間を少し広げる
• 英字見出しは細いセリフ体の大文字にして、ゆったり置く
• 注釈は※で始めて本文より小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は商品カードを 2 列に並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 32px（375px 幅換算）
• 商品カードは画面幅の約 92% にし、縦に 50px ほど間を空けて積む
• カードの中は商品名→副題→説明→注釈→パッケージ写真→断面図の順に並べる
• 断面図には細い白の引き出し線でラベルを付ける
• 英字見出しの上下に 60px 以上の余白を取る
• 発売日の帯はカードと同じ幅で横いっぱいに置く

Elevation & Depth

• カードには金の外枠と内側の細い金線を重ねて二重の額縁にし、影は付けない
• 商品写真だけに柔らかい落ち影を付ける
• 動画の再生ボタンは白い円にほんのり影を付ける

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き写真。人物は四角く切り、金の細枠を重ねる
• セクション境界: 直線で切り替える。ファーストビューは金の帯で区切る
• カード・帯は角を立てた長方形にする
• サブリンクとSNSはピル型にし、金の細い縁を付ける
• 外部サイト誘導ボタンは角丸 12px の長方形にし、右に矢印線を置く

Components

• 金縁の商品カード（card-product-frame）: 茶色のグラデーション地に金の二重線フレーム。商品名・説明・写真・断面図をまとめる
• 英字セリフ見出し（heading-serif-en）: 金地の中央に焦げ茶の大文字セリフ体を置く
• 金枠のゴーストボタン（button-ghost-gold）: ファーストビューの動画への導線。透明地に金の縁と金文字、下向き三角を付ける
• 発売日帯（band-release）: 深紅のグラデーション帯の上下に金線を引き、中央に明朝の白文字を置く
• 断面図の引き出しラベル（callout-line）: 白い点と細線から伸びる小さなラベル
• 赤茶のピル型リンク（button-pill-brown）: 金の縁が付いた赤茶のピル型。SNS用は左に白い円のアイコンを置く
• 深紅の外部誘導ボタン（button-primary）: 白地の上に深紅の角丸長方形、右に白い矢印線を置く
• 動画サムネイル（video-card）: 横長のサムネイルに白い円の再生ボタン、下に明朝のタイトル

Do's and Don'ts

Do - 金・茶・深紅の 3 系統だけで組む - 商品ごとに同じ構成のカードを繰り返して統一感を出す - 明朝体で中央揃えの語りかけ文を置き、余韻を作る - 断面図は細い線のラベルで素材を説明する - 季節限定などの訴求はパッケージ写真に任せ、地のデザインは控えめにする

Don't - ポップなゴシック体や手書き風の書体を使わない - 寒色やビビッドな色を地やボタンに使わない - カードに大きな角丸や強い影を付けない - 赤をカードの中で強調に使わない - 装飾アイコンやイラストを増やしすぎない

Page Structure

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

1. ファーストビュー（起用タレントと短いキャッチで高級感を伝える）: 人物写真の全面に金の細枠を重ね、右下に明朝体の白いキャッチと金枠ボタン。縦書きの Scroll 表示を添える
2. ロゴ帯（ブランドを印象づける）: 茶金のグラデーション地の中央に金の箔押し風ロゴ
3. ブランドメッセージ（自分へのご褒美という価値を語る）: 黒茶から茶へのグラデーション地に、金の明朝体で中央揃えの短い文を段落ごとに並べる
4. 商品ラインナップ（新商品を一つずつ紹介する）: 金地に英字見出し、金縁の茶色カードを縦に並べる。カードの中にパッケージ写真と断面図を入れる
5. 発売日告知（発売日を目立たせる）: 深紅に金線の帯を一本置く
6. 追加商品（アソートの商品を紹介する）: 同じ構成のカードを1枚置く
7. 動画（CM を見せる）: 金地に英字見出し、横長のサムネイルに再生ボタン、下にタイトル
8. プロフィール（起用タレントを紹介する）: 茶金のグラデーション帯に、白の明朝体で名前・ふりがな・英字名・基本情報を中央に並べる
9. ブランド誘導（定番商品・公式 SNS へ誘導する）: クリーム地に赤茶の明朝見出し、ベージュの箱の中に商品写真と赤茶のピル型ボタン。SNS ボタンはアイコン付きの大きなピル型
10. 外部リンク・フッター（公式サイトや通販、シェアへ導く）: 白地に深紅の角丸ボタンを 2 つ、丸いシェアアイコン、赤い帯のフッター

Imagery

• 人物は茶色の服で、暖色の背景光の前から正面を見つめる構図。商品を指でつまんで見せる
• 商品パッケージは正面から撮り、切り抜いて柔らかい影を付ける
• チョコの断面は斜め上から立体的に撮る。とろけるチョコやミルクのしぶき、素材を飛ばしてシズル感を出す
• 背景は金色の紙のような細かい質感か、茶金のグラデーション
• 金の装飾は細い線とフレームだけに抑える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを横長にし、キャッチとロゴを左、人物を右に置く
• PC は商品カードを 2 列のグリッドにし、全体の幅は約 70% に収める
• PC のプロフィールは英字見出しを左、情報を右に並べる
• PC のピル型ボタンとリンクボタンは横に 2 つ並べる
• PC のブランドメッセージは 1 行を長くして行数を減らす

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