DESIGN.md — 金箔ベージュ×チョコ茶の限定アイス LP（Gold Sparkle Chocolate Sundae Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、力強い・インパクト、ポップ・元気
• キーワード: シャンパンゴールドのきらめき・チョコレート色・斜めの帯・多角形カード・シズル写真・傾いた英字ロゴ
• 地の質感: ボケ光と粒子が舞うゴールドの地。素材パートは全面のシズル写真
• 形: 直線を不規則に組んだ多角形と、斜めにカットした帯。円はSNSアイコンだけ
• 温度感: 暖色。ベージュ・茶・山吹で甘く濃厚な印象

Colors

• 地はゴールドベージュのきらめきで統一する。素材パートだけ全面写真に切り替える
• 山吹色はCTA・区切り帯・番号数字・擬音ロゴに限って使う
• 見出しはチョコ茶、英字装飾は明るめのキャラメル茶で書く
• 写真の上の文字は白にして、太字で読みやすくする
• 白は多角形カードとこだわり面に使い、黒文字を乗せる
• ピンクや青などの寒色は、パッケージとSNSアイコン以外には使わない
• button-primary は文字 #FFFFFF × 背景 #FEB501 のコントラスト比が 1.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9B6E01、4.54:1）を使う。
• voice-badge は文字 #FEB501 × 背景 #9F5100 のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#7E4000、4.51:1）を使う。

Typography

• 英字見出しは-8〜-10度ほど傾け、2行を左右にずらして置く
• 英字見出しの下に、日本語見出しをひと回り小さく重ねる
• 本文はほぼすべて太字にして、写真やきらめきの上でもつぶれないようにする
• リード文は中央揃えで行間を広く取り、1行を短く切る
• 素材パートの見出しと本文は左揃えにする
• 文字装飾は斜体と色だけにし、縁取りや影は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 40px（375px 幅換算）
• 素材パートは画面いっぱいの写真。文字は写真の下部に左揃えで重ねる
• セクションの境目に山吹色と白の斜め帯を挟む
• お客様の声のカードは、バッジの位置を左・右・左と交互にずらす
• チョコ片の切り抜きを、セクションをまたいで余白に散らす
• 商品パッケージは大きく中央に置き、落ち影をつける

Elevation & Depth

• パッケージとチョコ片の切り抜きに、柔らかい落ち影をつける
• カードやボタンには影をつけない。下側に色をずらした面を重ねて立体感を出す
• CTAボタンは下側に濃い山吹色を見せて段差を作る

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は全面の矩形で、端を斜めにカットする。商品は切り抜き
• セクション境界: 斜めの直線帯（山吹＋白＋茶）を重ねてジグザグに区切る
• 角丸は使わず、不規則な多角形で形を作る
• ボタンは両端を斜めに落とした横長の八角形にする
• 番号バッジは傾いた五角形にする
• 白カードの縁は鋭いトゲ状に破る

Components

• 八角形CTAボタン（button-primary）: 山吹色の横長多角形。下に濃色の段差をつけ、白太字と矢印を入れる
• 傾き英字擬音（onomatopoeia-logo）: 山吹または白の太い丸英字を2段にずらして傾ける。脇に放射状の斜線を添える
• VOICE番号バッジ（voice-badge）: 茶の五角形に山吹色の小英字と大きな数字を入れ、山吹色の影面を重ねる
• 多角形の声カード（voice-card）: 縁がトゲ状の白い不規則多角形。中央に太字の感想を2〜3行入れる
• 斜め帯区切り（slash-divider）: 山吹・白・茶の細い帯を斜めに重ねて、セクションの境目に置く
• 素材シズル写真ブロック（photo-feature）: 全面写真の下部に、白の大きな見出しと3行の説明を左揃えで置く
• こだわり白パネル（developer-panel）: 上下を斜めにカットした白い面。茶の英字見出し・黒の見出し・本文を入れる
• 右上の情報リンク（top-link）: 半透明の濃色地に白文字を入れた小さなピル型リンク

Do's and Don'ts

Do - ゴールドの地には、ボケ光と粒子のきらめきを必ず入れる - チョコ片の切り抜きを各セクションに2〜3個散らし、奥行きを出す - 素材を紹介するたびに、英字の擬音ロゴと全面写真をセットにする - 斜め帯でセクションをつなぎ、勢いのある流れを作る - 山吹色はポイントに絞り、高級感を保つ

Don't - 角丸のカードや丸いボタンは使わない - 寒色やパステル色を地に使わない - 細い文字を写真の上に置かない - フラットな白地だけのセクションを続けない - 山吹色を広い面に敷き詰めない

Page Structure

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

1. ファーストビュー（限定商品の贅沢感を一目で伝える）: ゴールド地に、斜めの手書き風コピー・器入りデザート写真・パッケージを重ね、商品名を大きく置く
2. リード文（味の魅力を短く語る）: 中央揃えの太字を短い行で7〜8行並べ、行間を広く取る
3. 素材紹介1（バニラ）（主役素材の品質を伝える）: 淡いクリーム色の全面写真に傾けた英字ロゴを乗せ、白の見出しと説明を置く
4. 素材紹介2（チップ）（食感の楽しさを伝える）: 暗いチョコ写真に山吹色の擬音英字を2段で置く
5. 素材紹介3（ソース）（とろみと風味を伝える）: 焦げ茶のベタ面からソース写真へつなぎ、白の英字ロゴを置く
6. 商品パッケージ（実物の見た目を覚えてもらう）: ゴールド地の中央に、パッケージ切り抜きを大きく置く
7. 開発者のこだわり（作り手の思いで信頼を足す）: 斜めにカットした白パネルに、茶の英字・黒の見出し・本文6行を入れる
8. お客様の声（共感と安心を与える）: 番号バッジ付きの多角形白カードを3枚、左右交互にずらして並べ、最後に注釈を置く
9. CTA・SNS（関連商品への送客と拡散）: 八角形の山吹色ボタンの下に、SNSの丸アイコンを3つ並べる

Imagery

• 素材のシズル写真はクローズアップで撮り、暗めの背景で質感と艶を強調する
• 削ったチョコの巻き片を切り抜き、角度を変えて浮遊させる
• 背景はゴールドのグラデーションに、ボケ玉と星形の光を重ねる
• 商品パッケージは正面やや上から撮り、落ち影をつけた切り抜きにする
• 人物写真は使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもSPと同じ幅約360pxの1カラムを中央に置く
• PCの左右余白には、ゴールドのボケ背景を全面に敷く
• 中央カラムの左右に濃い影をつけ、背景から浮かせる
• PCでもレイアウトや文字比率はSPと変えない

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