DESIGN.md — 赤×黒の左右分割と金文字のレトルト食品 LP（Bold Red and Charcoal Split Retort Curry LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 左右2色分割・金グラデーション文字・極太ゴシック・シズル写真・番号付きパネル・濃厚
• 地の質感: かすかな煙のようなもやと暗いグラデーションをのせ、重く深い質感にする
• 形: 角は直角に近い。細い赤枠のパネルと、斜体の大きな番号を組み合わせる
• 温度感: 暖色寄りで暗め。赤・黒・金で熱さと濃さを出す

Colors

• 背景は画面中央で縦に分け、左を赤、右を黒褐色にしてページ全体で通す
• 大見出しと商品名は金のグラデーション文字にし、強調はすべて金に寄せる
• セクション見出しと本文は白にし、暗い地の上で読みやすくする
• 特徴パネルはえんじ色の面に赤い細枠を付け、分割背景の上に重ねる
• 緑とオレンジは種類を見分ける色として、吹き出しとボタンだけに使う
• 主 CTA だけを金色の面にして、ページで一番目立たせる
• button-primary は文字 #FFFFFF × 背景 #D9A426 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#94701A、4.57:1）を使う。
• speech-bubble は文字 #FFFFFF × 背景 #D9600E のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#C3560D、4.51:1）を使う。

Typography

• 見出しはどれも極太にし、細い書体は本文にも使わない
• 特徴の見出しは縦書きにし、助詞は小さく、重要な語は大きくする
• コピーの中で強調したい語だけ文字を大きくする
• 番号は斜体の欧文セリフで大きくし、パネルの角にはみ出させる
• 金文字は上を明るく下を濃くするグラデーションにし、薄く影を付ける
• 本文は中央揃えか左揃えで、太めの白文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品比較だけ 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右分割の背景は全幅で通し、その上に中身を中央に重ねる
• 特徴パネルは画面幅いっぱい近くまで広げ、縦方向に 40px ほど間隔をあける
• 番号はパネルの左上か右上に重ね、半分ほど外にはみ出させる
• 2 種類の商品は左右に並べ、背景の赤と黒の側にそろえる
• CTA は最後にコンテンツ幅いっぱいで置く

Elevation & Depth

• CTA とボタンは下側に濃い影を付けて立体的にする
• 写真の皿や商品パッケージにはやわらかい落ち影を付ける
• パネルは影を付けず、枠線だけで浮かせる

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理と素材は背景を抜いた切り抜き写真。パッケージは長方形のまま見せる
• セクション境界: 直線のみ。左右分割の色の境目は縦にまっすぐ通す
• ボタンは角丸 4px 程度の長方形にし、右端に「>」を置く
• 吹き出しは角丸の長方形で、下に三角のしっぽを付ける
• 素材写真には斜めのリボン形ラベルを重ねる

Components

• 金色の主 CTA（button-primary）: 金のグラデーションで塗った横長ボタン。白文字で、右端に矢印を置く
• 種類別の色ボタン（button-variant）: 緑とオレンジのグラデーションボタン。商品の下に左右に並べる
• 特徴の吹き出し（speech-bubble）: 2 つの特長を「×」でつないだ角丸の吹き出し。種類の色で塗る
• 番号付き特徴パネル（feature-panel）: 赤い細枠が付いたえんじ色の面に、縦書きの金見出し、写真、本文を入れる
• 斜体の番号（feature-number）: 白い斜体セリフの 01〜03。パネルの角に重ねる
• グラデーションの見出し（section-title）: 白から灰へのグラデーションの極太見出し。中央にそろえ、飾りは付けない
• リボン形ラベル（ribbon-label）: 素材写真の下に斜めに付ける、緑やオレンジのリボン形のラベル
• 商品の紹介ブロック（product-showcase）: パッケージ写真の横に素材写真をはみ出させ、下に金の商品名と白い説明を置く

Do's and Don'ts

Do - 左右 2 色の分割背景をページの最後まで続ける - 見出しは極太のゴシックにし、金か白のグラデーションをかける - 料理写真は湯気やツヤが見えるシズル感の強い切り抜きを使う - 特徴は番号付きのパネルにし、見出しは縦書きの金文字にする - CTA はページの最後に金色で 1 つだけ大きく置く

Don't - 白や淡い色の背景のセクションを入れない - 明朝や細い書体を使わない - 角丸の大きい丸いカードやピル型ボタンにしない - 種類を見分ける緑とオレンジを見出しや地の色に使わない - パステル調のイラストを入れない

Page Structure

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

1. ファーストビュー（商品の濃さと新しさを一目で伝える）: 分割背景の上に金の短いコピー、ロゴ風の大見出し、皿に盛った料理の大きな写真を重ねる
2. コンセプトのコピー（食べ方と味の特徴を 2 つの要素で示す）: 2 つの要素を「×」でつないだ白い極太見出しと、一部の語を大きくした 3 行のコピー
3. 種類の紹介（2 種類の味の違いを比べて見せる）: 色分けした吹き出し、パッケージ写真、色ボタンを 2 カラムで並べる
4. 商品の特徴（3 つの強みを説明する）: グラデーションの見出しの下に、番号付きのえんじ色パネルを 3 つ縦に並べる
5. 商品ラインナップ（各商品の味を詳しく伝える）: パッケージ写真のまわりに素材の写真を添え、金の商品名と白い説明を中央にそろえる
6. CTA（商品の詳細ページへ移動させる）: 金のグラデーションの横長ボタンを 1 つ置く

Imagery

• 料理は黒い皿に盛り、斜め上から撮ってスプーンで持ち上げた動きを見せる
• 背景を抜き、強いハイライトでツヤと照りを出す
• スパイスは木の器、チーズは白い皿に盛り、素材のアップで見せる
• 背景には薄い煙のようなもやを重ねて暗い雰囲気を出す
• 電子レンジ調理を示す、レトロな黄色系のアイコン風のイラストを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも左右分割の背景を全幅で保ち、中身は約 900px 幅で中央に置く
• PC の特徴パネルは横長にし、縦書き見出し・写真・本文を横に並べる
• コンセプトのコピーは PC では 1 行にまとめる
• PC のラインナップは 2 商品を横に並べ、CTA は幅 400px 程度にする
• 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 行書くと起動時に読み込まれる。