--- version: alpha name: Bold Red and Charcoal Split Retort Curry LP description: 背景を左右で濃い赤と黒褐色に分け、金のグラデーション文字と極太ゴシックで濃い味を表現したレトルト食品の LP。商品特徴は番号付きのえんじ色の枠パネルで見せ、最後に金色の横長 CTA で締める。 colors: primary: '#92353A' background: '#231816' surface: '#50060A' line: '#A54C3B' accent-1: '#F7E1A0' cta: '#D9A426' on-cta: '#FFFFFF' on-dark: '#FFFFFF' accent-2: '#058332' accent-3: '#D9600E' dark-section: '#150F0E' cta-accessible: '#94701A' accent-3-accessible: '#C3560D' typography: display: fontFamily: Dela Gothic One fontSize: 72px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 900 lineHeight: 1.1 headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 900 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Playfair Display fontSize: 56px fontWeight: 900 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 52px button-variant: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px speech-bubble: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 56px feature-panel: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 360px feature-number: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 56px section-title: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 48px ribbon-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 24px product-showcase: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 480px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#92353A` | 左半分の濃い赤の地 | 30% | 画素の実測 | | `background` | `#231816` | 右半分の黒褐色の地 | 25% | 画素の主要色に補正 | | `surface` | `#50060A` | 特徴パネルのえんじ色の面 | 19% | 画素の主要色に補正 | | `line` | `#A54C3B` | パネルの赤い細枠 | 1% | 画素の主要色に補正 | | `accent-1` | `#F7E1A0` | 金色の見出し文字 | 4% | 画素の主要色に補正 | | `cta` | `#D9A426` | 金色グラデーションの主 CTA | 2% | 推定 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 0% | 推定 | | `on-dark` | `#FFFFFF` | 暗い地の上の白い本文・見出し | 3% | 推定 | | `accent-2` | `#058332` | 種類別の緑ボタン・吹き出し | 1% | 画素の実測 | | `accent-3` | `#D9600E` | 種類別のオレンジのボタン・吹き出し | 1% | 推定 | | `dark-section` | `#150F0E` | 写真まわりの最も暗い影 | 2% | 画素の主要色に補正 | | `cta-accessible` | `#94701A` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#C3560D` | AA を満たす補正値（計算） | | 計算 | - 背景は画面中央で縦に分け、左を赤、右を黒褐色にしてページ全体で通す - 大見出しと商品名は金のグラデーション文字にし、強調はすべて金に寄せる - セクション見出しと本文は白にし、暗い地の上で読みやすくする - 特徴パネルはえんじ色の面に赤い細枠を付け、分割背景の上に重ねる - 緑とオレンジは種類を見分ける色として、吹き出しとボタンだけに使う - 主 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのロゴ風大見出し | ゴシック | Dela Gothic One | 900 | 72px | 1.0 | 0.0em | | `headline-lg` | セクション見出し（白から灰へのグラデーション） | ゴシック | Dela Gothic One | 900 | 34px | 1.2 | 0.02em | | `headline-md` | 特徴パネルの縦書き金見出し | ゴシック | Zen Kaku Gothic New | 900 | 40px | 1.1 | 0.0em | | `headline-sm` | 白い極太のコピーと金の商品名 | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.4 | 0.0em | | `body-md` | 説明の本文 | ゴシック | Noto Sans JP | 700 | 15px | 1.8 | 0.03em | | `accent` | 斜体の大きな特徴番号 | 欧文セリフ | Playfair Display | 900 | 56px | 1.0 | 0.0em | | `note` | 写真に付ける注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | - 見出しはどれも極太にし、細い書体は本文にも使わない - 特徴の見出しは縦書きにし、助詞は小さく、重要な語は大きくする - コピーの中で強調したい語だけ文字を大きくする - 番号は斜体の欧文セリフで大きくし、パネルの角にはみ出させる - 金文字は上を明るく下を濃くするグラデーションにし、薄く影を付ける - 本文は中央揃えか左揃えで、太めの白文字にする - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-d6715fa3`（元 LP の URL から採番） - **元 LP**: https://housefoods.jp/products/special/noukoukeema/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（2/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。