DESIGN.md — 深紅×金文字のチョコ菓子ブランドLP（Crimson Gold Classic Chocolate Brand LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 力強い・インパクト、上品・高級、レトロ
• キーワード: 深紅・金箔文字・額縁フレーム・波形区切り・斜め配置の商品・明朝体
• 地の質感: 赤地に細かい紙のようなノイズ。金文字はグラデーションとドロップシャドウで立体的に見せる
• 形: 波形のセクション境界、面取りした額縁、楕円ピルボタン、円形に回る文字
• 温度感: 暖色一辺倒で熱量が高く、祝祭感とノスタルジーがある

Colors

• ページの約7割を深紅の地にし、濃い赤の波形帯で抑揚をつける
• 赤地の文字は金か淡いクリームだけを使い、黒は使わない
• ラインナップとSNSのブロックだけクリーム地に切り替え、波形で区切る
• ボタンは栗色の地に金の縁と白文字にする。外部ブランドへの誘導だけ紺色にする
• 金色はグラデーションと影で立体感を出し、筆記体の英字見出しに限って使う
• frame-media は文字 #EAE3CC × 背景 #D80C18 のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CC0B17、4.51:1）を使う。
• anchor-pill-hero は文字 #FED096 × 背景 #D80C18 のコントラスト比が 3.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CC0B17、4.55:1）を使う。

Typography

• 和文の見出しと物語調の本文は明朝体で統一する
• 英字見出しは斜体ぎみのセリフ体を使い、金色のグラデーションと影をつける
• ストーリー本文は右寄せにして、詩のように短く改行する
• 字間は広め（0.1em以上）にして、余裕のある品格を出す
• プロフィールなど情報が多い箇所だけゴシックに切り替える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品写真は斜め20〜30度で置き、余白に食い込ませる
• 見出しは左右に振り分けて、ジグザグの流れを作る
• フレームとカードは左右16px程度の余白を残して画面幅いっぱいに置く
• セクション間は広めに取り、波形の境界で地色を切り替える

Elevation & Depth

• 額縁は内側にベベルと影をつけ、箱のような立体感を出す
• 商品画像にはドロップシャドウをつけて浮かせる
• 金文字には濃茶のドロップシャドウをつける
• カードは影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 四角い写真を赤い面取り額縁にはめ込む。人物は角丸なしの四角
• セクション境界: ゆるやかな波形カーブ
• ボタンは楕円のピル型で、金の細い縁をつける
• 額縁は四辺を面取りした赤いフレームにする
• 円形に回る英字ロゴの中に誘導文を入れる

Components

• 赤い額縁の動画枠（frame-media）: 面取りした赤いフレームに動画サムネイルと再生ボタンを入れ、下にキャプションを置く
• 金色英字見出し（heading-gold-script）: 立体的な金色の筆記体セリフで、左右に振って配置する
• 栗色ピルボタン（button-primary）: 栗色の地に白文字を載せ、金の縁で囲む
• 紺色ブランドボタン（button-external）: カード内に置く外部サイトへの誘導ボタン
• SNSリンク帯（sns-pill）: 大きなピルの左端に白い円のアイコン、右にアカウント名を置く
• 商品ラインナップカード（lineup-card）: 薄い金色のカードに、明朝の見出し・商品画像・ボタンを縦に並べる
• FV内アンカーボタン（anchor-pill-hero）: 赤いピルに金の縁と▼をつけ、ページ内リンクにする
• 円形回転テキストリンク（circle-text-link）: 英字を円形に並べ、中央に誘導文と矢印を置く

Do's and Don'ts

Do - 赤地と金文字の組み合わせを全体で貫く - 商品パッケージは斜めに大きく置く - 境界は波形で柔らかく区切る - 写真や動画は赤い額縁フレームに収める - 本文は明朝体で字間を広げ、詩のように改行する

Don't - 寒色を広い面に使わない（紺はボタン1つだけ） - 赤地に黒やグレーの文字を置かない - 直線の境界だけで区切らない - フラットな黄色を金の代わりに使わない - 角丸の大きいカードを多用してポップにしない

Page Structure

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

1. ファーストビュー（ブランドの世界観と出演者を印象づける）: 赤い額縁の中に人物写真を置き、下半分の赤地に商品とコピー、縦書きのScroll表示を置く
2. ブランドストーリー（歴史と思いを伝える）: 深紅の地に大きな明朝コピーを置き、右寄せの詩的な本文と斜めの商品を添える
3. こだわり（味の特長を伝える）: 濃い赤の波形帯に金色の明朝見出しを置き、大きな商品を斜めに配置する
4. 動画（CMを視聴させる）: 金色の英字見出しの下に、額縁付きの動画枠を縦に並べる
5. 楽曲紹介（タイアップ曲を紹介する）: 正方形の額縁にアーティスト写真を入れ、明朝の曲名と解説を続ける
6. 商品情報導線（商品ページへ誘導する）: 商品画像の横に円形の回転テキストリンクを置く
7. ラインナップ（関連商品へ誘導する）: クリーム地に切り替え、金色のカードとピルボタンを置く
8. 公式SNS（フォローを促す）: 栗色の大きなSNSピルを2本縦に並べる
9. プロフィール（出演者の情報を載せる）: 波形で赤地に戻し、左に四角い写真、右に明朝の名前と英字名、下にゴシックの本文を置く

Imagery

• 商品パッケージは切り抜いて、斜めに大きく影付きで置く
• 割った板チョコの断面を見せて質感を強調する
• 人物は明るい自然光の笑顔ショットにする
• 赤地には細かい紙のようなノイズテクスチャを敷く
• チョコが溶けて垂れるモチーフを額縁と組み合わせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは左を赤地のコピーと商品、右を人物写真にした横長の額縁にする
• PCの動画は2列で横に並べる
• PCの楽曲セクションは、左に額縁写真、右に見出しと本文の2カラムにする
• SNSボタンはPCで2列に並べる
• プロフィールはPCで写真と本文を横並びにする
• 中央のコンテンツ幅は約800pxに絞り、左右の赤地を広く見せる

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