DESIGN.md — 金箔×チョコ茶の高級アイス新作 LP（Gold Leaf Chocolate Premium Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、力強い・インパクト
• キーワード: 金箔テクスチャ・チョコレートブラウン・明朝体・アーチ型パネル・浮遊するナッツ・シズル写真
• 地の質感: 紙の凹凸のある金箔調の地と、革のようなざらつきのある茶色地。光沢の強いゴールドグラデーションを使う。
• 形: 上が半円のアーチ型パネル、円形の写真フレーム、液だれのような波形の区切り、角丸の小さい四角ボタン。
• 温度感: 暖色一色。金と茶だけでまとめた濃厚で温かい印象。

Colors

• 地は金箔調ゴールドを基本にし、中盤の動画・SNS部分だけチョコ茶に切り替える。
• 茶色地の上の見出しは金色、本文は生成り白にする。
• 金地の上の文字は黒に近い濃茶にし、純黒は使わない。
• 情報表は白セルに濃茶罫線。該当項目だけ濃茶塗り×金文字で強調する。
• 寒色はSNSアイコン以外では使わない。
• ゴールドは平塗りにせず、紙の凹凸テクスチャや光沢グラデーションを付ける。
• allergy-grid は文字 #9A9A9A × 背景 #FFFFFE のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。

Typography

• 見出しも本文も明朝体で統一し、高級感を保つ。
• 本文は字間を広めにとり、ゆったり組む。
• Point番号は英字セリフ太字を斜めに傾けて置く。
• 注釈だけゴシック小サイズにする。
• 茶色地の見出しは金色の明朝で中央揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は写真と縦長テキストの左右交互配置。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右余白は約22pxで一定にする。
• 特長は写真を画面端にはみ出させ、反対側に細い縦長テキストを置く。
• 表は4列の等幅グリッドにする。
• 2択の情報は横2つのボックスで並べる。
• 装飾のナッツやチョコは余白に重ねて浮かせる。

Elevation & Depth

• 動画枠には濃い落ち影を付け、少し浮かせる。
• 浮遊するナッツ・スプーンは写真自体の影で立体感を出す。
• 表やボックスに影は付けず、罫線だけにする。

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 商品写真は円形に切り抜いて金の細い枠で囲む。アイスはシルエットで切り抜いて端にはみ出させる。
• セクション境界: チョコが流れるような有機的な波形で、金地と茶地を切り替える。
• 説明パネルは上が半円のアーチ型にする。
• コメント欄も上部を大きな半円にする。
• 表と情報ボックスは角丸6〜10pxにする。
• リンクボタンは白枠線のピル型にする。

Components

• アーチ型説明パネル（arch-panel）: 上が半円の縦長パネル。茶色の半透明グラデーション地に白い明朝文字をのせる。
• 斜めPoint見出し（point-label）: 英字セリフ太字の番号を約-15度傾け、スプーン写真の脇に置く。
• 円形写真フレーム（circle-photo）: アイスの寄り写真を円形に切り抜き、金の細枠で囲む。
• 対象商品ボックス（target-box）: 濃茶グラデーションの角丸四角に金の細枠。中央揃えで商品リストを並べる。
• 白帯見出し（heading-box）: 表の上に置く白い角丸帯。中央に濃茶の明朝見出し。
• アレルギー表（allergy-grid）: 4列の白セル表。該当セルだけ濃茶塗り×金文字、それ以外はグレー文字。
• アウトラインリンクボタン（button-outline）: 茶地の上の白枠ピル型ボタン。右端に白丸の矢印アイコン。
• 動画埋め込み枠（video-frame）: 濃い枠と影のある16:9の角丸動画。上に金色の見出しを置く。

Do's and Don'ts

Do - 金地には紙の凹凸のような質感を付ける。 - 見出しと本文は明朝体で統一する。 - ナッツ・チョコ片・スプーン・チョコの流れを余白に浮かべ、動きを出す。 - セクションの切り替えは液だれ風の波形にする。 - 表の強調は濃茶塗り×金文字の反転だけで表す。

Don't - 寒色や蛍光色をブランド要素に使わない。 - 丸ゴシックやポップな書体を使わない。 - ゴールドをフラットな黄色で塗らない。 - 直線だけのセクション区切りにしない。 - 強い影や派手なグラデーションボタンを多用しない。

Page Structure

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

1. ファーストビュー（新作であることと商品名を印象づける）: 金地に監修ロゴ・大きな商品ロゴ・明朝の商品名を置き、脚付きグラスの商品写真を中央に大きく見せる。右上に月の新作バッジを置く。
2. 商品コンセプト（味と素材構成を伝える）: 茶のアーチパネルにリード文と説明文を入れる。下部に断面写真と構成要素の引き出し線ラベルを付ける。
3. 特長（Point）（食感・味のこだわりを2つ示す）: 切り抜きや円形のアイス写真と縦長テキストを左右交互に並べ、斜めのPoint見出しを付ける。
4. 対象商品（購入できる商品の形態を示す）: 濃茶の角丸ボックスに中央揃えでリストを入れ、注釈を添える。
5. 監修者コメント（専門家の権威で品質を裏付ける）: 上が半円の明るいゴールドパネルに英字見出しとコメントを入れる。点線で区切り、肩書き・氏名・経歴と人物の切り抜き写真を置く。
6. 動画（CMや紹介動画で興味を深める）: 波形で茶地に切り替え、金色の明朝見出しと影付きの動画枠を2つ縦に並べる。
7. SNSシェア・導線（拡散と一覧・店舗検索への誘導）: 斜線で囲んだ呼びかけ文、丸いSNSアイコン3つ、白枠のピル型ボタン2つを横に並べる。
8. アレルギー・エネルギー情報（必要な情報を正確に示す）: 金地に白帯見出しを置き、4列のアレルギー表、コーン別の2ボックス、サイズ別カロリー表を並べる。
9. 注釈（表示上の注意を伝える）: 金地に小さなゴシックで※注記を左揃えで置く。

Imagery

• アイスは暖色の照明で凹凸のシズル感を強調し、ゴールドの皿や脚付きグラスに盛る。
• ヘーゼルナッツ・チョコキューブ・金のスプーン・チョコの流れを切り抜いて画面に散らす。
• 背景は金箔やゴールド紙の凹凸テクスチャにする。
• 人物は黒いコックコートで、白背景を抜いた切り抜き写真にする。
• 断面写真には細い白の引き出し線と小さな点で素材ラベルを付ける。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に約480〜600px幅のSPレイアウトを置き、左右は金箔テクスチャで埋めるのがよい。
• 特長の左右交互配置はPCでも保ち、写真を大きくする。
• 表は最大幅を決めて中央に寄せる。
• 動画は2本を横に並べてもよい。

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