--- version: alpha name: Pop Tricolor Sauce Recipe LP description: 赤・黄・紫の3色をシリーズのテーマ色にした、元気な食品調味料LP。極太ゴシックのコピーとアメコミ風イラスト、吹き出しで勢いを出す。後半はテーマ色のグラデーション面に白いレシピカードを並べる構成。 colors: primary: '#DE2F39' secondary: '#FDDC03' accent-1: '#674599' accent-2: '#144096' cta: '#FEF301' on-cta: '#111111' background: '#FFF9E3' background-alt: '#FEF9D4' surface: '#FEFEFE' text: '#000000' dark-section: '#020202' tint-1: '#F1D6FF' marker: '#FEEB30' accent-3: '#DE2F39' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 13px fontWeight: 800 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.04em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 12px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-sub: backgroundColor: '{colors.dark-section}' textColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 38px badge-circle: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px speech-bubble: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px point-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 110px recipe-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 250px heading-slash: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 30px heading-sticker: backgroundColor: '{colors.accent-2}' textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 60px sns-button: backgroundColor: '{colors.surface}' textColor: '{colors.text}' rounded: '{rounded.full}' height: 70px --- # DESIGN.md — 赤・黄・紫の3色ポップな調味料レシピLP（Pop Tricolor Sauce Recipe LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 3色分割・極太ゴシック・吹き出し・アメコミ風イラスト・シズル写真・レシピカード - **地の質感**: ベタ塗りの原色と、ソースが垂れるシズル写真。後半はやわらかい縦グラデーション - **形**: 円形バッジ、角丸カード、丸い吹き出し、ピル型ボタン、大きな円弧のセクション境界 - **温度感**: 暖色寄りでにぎやか。クリーム色の地で熱量をやわらげる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DE2F39` | シリーズ1色目の赤（FVの帯・レシピ面） | 12% | 画素の主要色に補正 | | `secondary` | `#FDDC03` | シリーズ2色目の黄・円形バッジ | 12% | 画素の実測 | | `accent-1` | `#674599` | シリーズ3色目の紫 | 6% | 画素の実測 | | `accent-2` | `#144096` | 濃紺（円形バッジ・2色目CTA・見出し文字） | 3% | 画素の実測 | | `cta` | `#FEF301` | 製品詳細ボタンの黄 | 3% | 画素の実測 | | `on-cta` | `#111111` | CTA上の文字 | 0% | 推定 | | `background` | `#FFF9E3` | ページ地のクリーム | 15% | 画素の実測 | | `background-alt` | `#FEF9D4` | イラスト枠内の淡い黄 | 6% | 画素の実測 | | `surface` | `#FEFEFE` | カード・ポイント枠の白 | 17% | 画素の実測 | | `text` | `#000000` | 見出し・本文の黒 | 2% | 画素の実測 | | `dark-section` | `#020202` | サブボタン・ポイントラベルの黒 | 1% | 画素の実測 | | `tint-1` | `#F1D6FF` | 紫セクションの淡いラベンダー | 4% | 画素の実測 | | `marker` | `#FEEB30` | 強調語下の黄マーカー | 0% | 画素の主要色に補正 | | `accent-3` | `#DE2F39` | 吹き出し内の赤い強調文字 | 0% | 画素の主要色に補正 | - シリーズの3商品にそれぞれ赤・黄・紫を割り当てる。FV・バッジ・レシピ面で一貫させる - 地はクリームにして、原色の面を区切りとして見せる - レシピ面は上から濃いテーマ色、下へグラデーション。カードは白で浮かせる - 主CTAは黄地に黒文字。黄色面の上でだけ濃紺地に白文字へ切り替える - サブボタンとポイントラベルは黒ベタで締める - 吹き出し内の強調語だけ赤文字。本文中の強調は黄マーカーにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ・大見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.1 | 0.0em | | `headline-lg` | セクション大見出し | ゴシック | Dela Gothic One | 400 | 34px | 1.2 | 0.02em | | `headline-md` | 商品別レシピの見出し（テーマ色文字） | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.3 | 0.04em | | `headline-sm` | スラッシュで挟んだ小見出し・吹き出し | ゴシック | Zen Kaku Gothic New | 900 | 18px | 1.4 | 0.04em | | `body-md` | ポイント本文・カードタイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.04em | | `note` | 調理時間など補足 | ゴシック | Noto Sans JP | 400 | 12px | 1.5 | 0.04em | | `accent` | ポイント番号ラベル（欧文） | 欧文サンセリフ | Montserrat | 800 | 13px | 1.0 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.04em | - コピーは極太で短く2行に切り、行間を詰める - FVのコピーは白文字に濃い影をつけて写真の上でも読めるようにする - 小見出しは「＼ ／」形のスラッシュで挟む - 大見出しの一部を色帯の上に載せて、ステッカーのように組む - 本文も太字寄りにして、細い書体は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ポイントとレシピカードは 2 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算） - レシピ面は左右に約12pxの余白を取った角丸ブロック - カードの2列の間隔は約8px - ポイント4つは商品画像を中心に四隅へ配置し、点線でつなぐ - イラストと吹き出しを左右交互に配置する - 製品詳細ボタンはほぼ全幅、サブボタンは中央寄せの短い幅にする ## Elevation & Depth - レシピカードとSNSボタンにやわらかい影をつける - ポイント枠は白地に薄い影 - 商品ボトルの後ろに白い光彩をつける - それ以外はフラットにする ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: レシピ写真は角丸の長方形。商品は切り抜きにする - **セクション境界**: 白い大きな円弧で区切る。イラスト枠の下端は三角に尖らせ、レシピ面は上角を丸めたブロックにする - 円形バッジは商品色の正円にし、下向き矢印を入れる - 吹き出しは楕円に小さなしっぽをつける - ポイントラベルは黒の平行四辺形風タグにする ## Components - **製品詳細ボタン**（`button-primary`）: 全幅のピル型。文字の右に細い矢印を置く - **レシピ一覧ボタン**（`button-sub`）: 黒のピル型。白文字の右に＋を置く - **商品ナビ円形バッジ**（`badge-circle`）: 商品色の正円にキャッチ・商品名・下矢印を入れ、ページ内リンクにする - **吹き出し**（`speech-bubble`）: 黄色の楕円にしっぽをつけ、黒太字に赤の強調語を入れる - **ポイントカード**（`point-card`）: 白い枠の左上に黒の番号タグを置き、本文に黄マーカーを引く - **レシピカード**（`recipe-card`）: 上から料理名・角丸写真・調理時間と黄の矢印丸を並べる。後続のカードは半透明でフェードさせる - **スラッシュ小見出し**（`heading-slash`）: 「＼ ／」形の斜線で挟んだ太字の見出し - **帯付き大見出し**（`heading-sticker`）: 黄・紫・濃紺の色帯に文字を載せ、調理器具のイラストを添える - **SNSシェア丸ボタン**（`sns-button`）: 白い正円にロゴを置き、影をつける ## Do's and Don'ts **Do** - 3商品の色の割り当てを全セクションで統一する - コピーは短く言い切り、「！」で勢いを出す - ソースが垂れる瞬間のシズル写真をFVに使う - 白カードはテーマ色の上に置いてコントラストを確保する - イラストは太い線とベタ塗りのレトロなアメコミ調にする **Don't** - 淡いパステルだけでまとめない - 細い明朝や細字ゴシックを使わない - テーマ色以外の原色を増やさない - 長い説明文を置かない - 写真を角丸なしで余白なく並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（シリーズ3商品を一度に印象づける）: 赤・黄・紫の縦3分割。各列に極太コピー・シズル写真・ボトルを置き、下に白い影付きの横断コピーを入れる 2. **商品ナビ**（各商品の詳細へ誘導する）: スラッシュ小見出しの下に、円形バッジを3つ横に並べる 3. **利用シーンの共感**（使いたくなる気分を想起させる）: 白い円弧で始め、大見出しを置く。淡い黄の枠内にイラスト人物と吹き出しを交互に置く 4. **特長ポイント**（4つの魅力を伝える）: 中央に3本のボトル、四隅に番号タグ付きの白カードを置き、点線でつなぐ 5. **レシピ特集見出し**（レシピへの導入）: キラキラ装飾と色帯のステッカー風見出しに、調理器具のイラストを添える 6. **商品別レシピ**（使い方を提案し、製品詳細へ送る）: テーマ色グラデーションの角丸面。商品画像と見出し、2列のレシピカード、黒のサブボタン、全幅CTAを並べ、3商品分繰り返す 7. **SNSシェア**（拡散を促す）: クリーム地に小見出しと、影付きの白い丸ボタン3つを置く ## Imagery - ソースをボトルから垂らし、ナゲットやバーガーにかかる瞬間を接写する - 商品ボトルは切り抜きで正面向き。後ろに白い光彩をつける - 人物は太い黒線とベタ塗りのアメコミ調で、大げさな表情にする - レシピ写真は木のテーブルや布を背景にした明るい家庭料理の俯瞰 - キラキラや揚げ物の小物イラストを余白に散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでもFVだけは全幅の3分割にし、写真を横に大きく見せる - FV以降は約480px幅の中央カラムにSPのデザインをそのまま置く - 中央カラムの左右は白地にし、カラムに薄い影をつける - PCでもレシピカードは2列を維持する ## 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-57597b65`（元 LP の URL から採番） - **元 LP**: https://housefoods.jp/products/special/bbq-mustard-teriyaki/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。