DESIGN.md — 漆黒×深紅×金線の高級スイーツ LP（Dark Chocolate Red Luxury Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、力強い・インパクト
• キーワード: 漆黒と深紅・金の細線・斜めカット・明朝体・スポットライト・きらめき
• 地の質感: 布目のような細かいノイズが入った赤と黒のグラデーション。光が斜めに差すような明暗がある
• 形: 平行四辺形や斜めに切ったパネル。金の 1px 線と、線の先に付けた点で商品を指す
• 温度感: 暖色。赤とチョコブラウンの濃い、こっくりした温度

Colors

• 地色は黒を基本にして、要所に深紅のセクションを斜めの境界で差し込む
• 見出し・英字ラベル・線は金色だけで強調する
• 説明文は白、または黒地・チョコ色パネル上の白の明朝体にする
• チョコ色パネルは半透明気味にして写真の上に重ねる
• CTA は赤地に金文字＋金の細枠にする
• 寒色は SNS アイコン以外では使わない
• button-primary は文字 #F0C060 × 背景 #BD1522 のコントラスト比が 3.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A6121E、4.55:1）を使う。
• ribbon-heading は文字 #D1A161 × 背景 #AA1614 のコントラスト比が 3.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• ほぼすべての文字を明朝体にして、高級感を出す
• 見出しの上に、細い英字セリフをハイフンで挟んで添える
• リード文は中央揃えにし、短く改行する
• パネル内の文は左揃えで、1 行 10〜12 文字程度にする
• 白文字には、ごく弱い光彩の影を付けてもよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とパネルを左右交互にずらして重ねる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• パネルは画面の半分〜6 割の幅で、左右どちらかに寄せる
• 商品写真とパネルは重ね、金の指示線でつなぐ
• セクション間は斜めの境界と大きな余白で区切る
• お客様の声は平行四辺形の枠を左右交互に配置する

Elevation & Depth

• 影ではなく、光（スポットライトのグラデーション）で奥行きを出す
• 商品写真には落ち影と、つやのある反射を付ける
• 要所に星形のきらめきを置く

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 背景は切り抜かずに全面に敷き、商品は切り抜いて重ねる。断面写真は円形にする
• セクション境界: 右上がりの斜めカットと金の斜線
• 角丸は使わず、斜めに切った角と平行四辺形で構成する
• 枠は金の 1px 線だけにする
• 見出し帯は斜めに切った赤いリボン形にする

Components

• 斜めカット CTA（button-primary）: 平行四辺形の赤いボタン。金の細枠を付け、金文字の後ろに矢印を置く
• チョコ色解説パネル（info-panel）: 上辺を斜めに切ったチョコ色の縦長パネル。金の細枠を付け、金の見出しと白の本文を入れる
• 金の指示線（pointer-line）: パネルから商品の断面へ伸びる、L 字の金色の細線。先端に点を付ける
• 英字ラベル付き見出し（heading-en-label）: 弧を描く細い英字の下に、金の明朝見出しを置く
• 斜めリボン見出し（ribbon-heading）: 左端から伸びる、斜めに切った赤い帯。金枠と金文字で入れる
• 平行四辺形の声カード（review-card）: 黒地に金の細枠を付けた平行四辺形。白の明朝で 2〜3 行の声を入れ、角にきらめきを置く
• 右上の情報リンク（top-label）: 右上の、角丸がごく小さい暗い茶色の小ラベルリンク
• きらめき装飾（sparkle）: 白く光る十字の星。見出しや商品の近くに 1〜2 個置く

Do's and Don'ts

Do - 黒と深紅の濃い地を保ち、明るい背景は使わない - 強調はすべて金色の線と文字で行う - パネルや帯は斜めに切って、動きを出す - シズル感のある、とろける・溶ける写真を大きく使う - 文字は明朝体で統一する

Don't - 角丸のカードやピル型ボタンを使わない - ポップな原色や寒色を差し色にしない - 太いゴシックで本文を組まない - ドロップシャドウを強く付けたフラットな UI にしない - 金の線を太くしたり、多用したりしない

Page Structure

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

1. ファーストビュー（新作であることと、世界観を一目で伝える）: 赤と黒の光差し背景に、斜めの筆致キャッチ、大きな商品カップ、スプーンのシズル写真を置く。New 表記と短い謎かけ文を添える
2. 商品名紹介（商品名を印象づける）: 小さなパッケージ写真の右に、明朝の和名と欧文名を 2 行で置く
3. リードコピー（味わいを情緒的に伝える）: 赤いグラデーション地に白の明朝で 4 行を中央揃えにし、きらめきを散らす
4. 特長（層の解説1）（1 層目の素材感を説明する）: 溶けるチョコの写真にチョコ色の斜めパネルを重ね、金の指示線で断面へつなぐ
5. 特長（層の解説2）（中心部の特長を説明する）: 生チョコのクローズアップ写真に左寄せのパネルを重ね、左右を交互にする
6. おすすめの食べ方（体験の仕方を提案する）: 英字ラベル付きの金見出し、中央揃えの白文、金の線画イラストで構成する
7. 開発者の想い（作り手のストーリーで信頼を補う）: 斜めに区切った深紅の面に赤いリボン見出しを置き、白の明朝本文の下にスプーンの写真を置く
8. お客様の声（実感の声で後押しする）: 黒地に、金枠の平行四辺形カード 3 枚を左右交互に配置し、注釈を添える
9. CTA・シェア（他商品への回遊と拡散を促す）: 溶けたチョコの背景に斜めの赤い CTA を置き、その下に SNS の丸アイコンを 3 つ並べる

Imagery

• 暗い背景に、斜めに光を当てた商品写真。つやを強調する
• とろけるソースが流れ落ちる、溶けるシズルのクローズアップ
• ココアパウダーをまとった素材の、マクロ撮影
• 断面は真上から撮って円形に切り抜く
• 手順は金色の単線イラストで描く
• 白く光る十字のきらめきを、装飾として散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は 1 カラムのまま、中央の約 45% 幅（約 430px）に SP と同じデザインを置く
• PC の左右余白は、黒〜深紅のぼかした光の背景で埋める
• パネル・写真の配置と斜めの構図は SP と同じにする
• 文字サイズは 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 行書くと起動時に読み込まれる。