--- version: alpha name: Pop Yellow Home Cooking Tips LP description: 明るい黄色の水玉地に、えんじ色の太い丸ゴシックとマゼンタの手書き風文字を組み合わせた食品メーカーの販促 LP です。エプロン姿の夫婦イラスト、赤いリボン見出し、メダル型の番号、吹き出しで調理の時短テクを楽しく伝えます。後半は白地で商品カード、薄黄色地でレシピ写真を 2 列に並べます。 colors: primary: '#FFE96E' secondary: '#F4D11E' text: '#3F020B' accent-1: '#E3127F' accent-2: '#C8101E' cta: '#E40113' on-cta: '#FFFFFF' background: '#FEFEFE' background-alt: '#FFFCF2' tint-1: '#FFFFBF' dark-section: '#000000' line: '#8A4A50' accent-3: '#FED900' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em accent: fontFamily: Yusei Magic fontSize: 34px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.45 letterSpacing: 0.08em headline-md: fontFamily: Yuji Syuku fontSize: 24px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Kosugi Maru fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 6px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' nav-anchor-bar: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-sm}' height: 95px ribbon-heading: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 60px medal-badge: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 110px speech-bubble: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 170px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 145px circle-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 125px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 24px marker-underline: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 30px recipe-tile: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-2}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 150px --- # DESIGN.md — 黄色×えんじ×マゼンタの家庭料理時短 LP（Pop Yellow Home Cooking Tips LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 黄色の水玉・えんじの太字・マゼンタの手書き文字・赤いリボン・メダル番号・夫婦イラスト - **地の質感**: 大小の水玉と和紙のような生成りの地。紙の質感を少し入れて手作り感を出す - **形**: 角丸カード、角丸の吹き出し、円形バッジ、リボン帯、斜めの点線装飾 - **温度感**: 暖色寄りで明るく元気 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFE96E` | メインの地色（黄色） | 22% | 画素の実測 | | `secondary` | `#F4D11E` | 濃い黄色。吹き出しと帯 | 10% | 画素の実測 | | `text` | `#3F020B` | 見出し・本文のえんじ色 | 4% | 画素の実測 | | `accent-1` | `#E3127F` | マゼンタの強調文字・番号 | 3% | 推定 | | `accent-2` | `#C8101E` | リボン・レシピ名の赤 | 2% | 推定 | | `cta` | `#E40113` | 詳細ボタンの赤 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFEFE` | カード・商品紹介の白 | 14% | 画素の実測 | | `background-alt` | `#FFFCF2` | テク紹介の生成り地 | 10% | 画素の実測 | | `tint-1` | `#FFFFBF` | レシピ一覧の薄黄色 | 12% | 画素の実測 | | `dark-section` | `#000000` | 目次ナビの黒帯 | 2% | 画素の実測 | | `line` | `#8A4A50` | カード枠のえんじ細線 | 0% | 推定 | | `accent-3` | `#FED900` | 区切り帯の濃黄色 | 4% | 画素の実測 | - 地は黄色、生成り、白、薄黄色の順に切り替えてセクションを分ける - 文字は黒を使わずえんじ色に統一する - キーワードとリスト記号はマゼンタで強調する - 赤はリボン見出し、詳細ボタン、レシピ名に限って使う - 黒はファーストビュー直下の目次帯だけに使う - 吹き出しは濃い黄色で塗り、えんじ文字を載せる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 48px | 1.2 | 0.02em | | `accent` | キーワード（マゼンタの手書き風） | 手書き・筆 | Yusei Magic | 400 | 34px | 1.2 | 0.05em | | `headline-lg` | セクション見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.45 | 0.08em | | `headline-md` | カード見出し・テク名（筆風） | 手書き・筆 | Yuji Syuku | 400 | 24px | 1.3 | 0.05em | | `headline-sm` | カード上の小見出し・吹き出しのリスト | 丸ゴシック | Kosugi Maru | 700 | 16px | 1.6 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 13px | 1.8 | 0.02em | | `note` | 商品説明・レシピ名 | 明朝 | Noto Serif JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | 詳細ボタンの文字 | ゴシック | Noto Sans JP | 700 | 11px | 1.0 | 0.05em | - 見出しは太い丸ゴシックで、助詞を小さくして強弱をつける - キーワードだけマゼンタの手書き風にし、ルビを振る - 本文も太めにして、中央揃えで短く改行する - 見出しの左右に斜めの点線を添える - 語尾に♪や！を付けて親しみを出す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。レシピは 2 列グリッド - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - カードは横幅いっぱいにして縦に積む - イラストと吹き出しを左右交互に置く - テク紹介ブロックの間は点線で区切る - レシピ一覧は 1 マス目にリード文と商品パッケージを置く - テキストはすべて中央揃え（吹き出しの中は左揃え） ## Elevation & Depth - 影はほぼ使わずフラットにする - 商品パッケージにだけ薄いドロップシャドウを付ける - カードは細い枠線で区切る ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 料理写真は角丸 6px の長方形。道具は切り抜きにする - **セクション境界**: 直線で切り替え、濃い黄色の帯を挟む - 吹き出しは大きな角丸に三角の尾を付ける - 番号はリボン付きの円形メダルにする - 工程番号はマゼンタの丸に白数字 - 背景に大小の円を散らす ## Components - **目次ナビ帯**（`nav-anchor-bar`）: 黒地に黄色のチェック丸と白文字の項目を 2×2 で並べる - **リボン見出し**（`ribbon-heading`）: 赤いグラデーションのリボン帯に白い明朝の文字を載せ、両脇に星の光を添える - **メダル番号**（`medal-badge`）: 白黄の円にえんじの縁、赤いリボンの尾。中に赤字で番号 - **吹き出しリスト**（`speech-bubble`）: 濃い黄色の角丸吹き出しに、マゼンタの丸記号付きで 3 行並べる - **特長カード**（`feature-card`）: 白地に細い枠線。マゼンタの小見出し、筆風の見出し、本文の 3 段構成 - **円形の訴求バッジ**（`circle-badge`）: マゼンタの正円に白文字で所要時間などを 3 行で入れる - **詳細ボタン**（`button-primary`）: 赤から暗赤へのグラデーションで塗ったピル型ボタン - **筆ライン強調**（`marker-underline`）: 強調する一文の下にマゼンタの筆ストロークを引く - **レシピタイル**（`recipe-tile`）: 角丸の料理写真の下に、赤い太字のレシピ名を中央揃えで置く ## Do's and Don'ts **Do** - 文字色はえんじに統一し、強調だけマゼンタにする - キーワードには手書き風の書体とルビを組み合わせる - エプロン姿の男女の線画イラストで感情を表現する - 背景には水玉と星の光を散らして明るくする - セクションごとに地の色を切り替える **Don't** - 本文に純黒を使わない - 寒色系の色を入れない - 細い書体だけで見出しを作らない - 写真を角丸なしで裁ち落とさない - 装飾のない無地の白背景だけでページを続けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（テーマを大きく掲げ、商品群を見せる）: 黄色のグラデーション地。リボンのリード、巨大な大見出し、手書き風のキーワード、商品パッケージを 3 つ並べる 2. **目次ナビ**（各セクションへ移動させる）: 黒帯に 4 項目を 2×2 で並べる 3. **悩みの提起**（家庭の献立の悩みに共感する）: 困り顔の夫婦イラストと、括弧付きの短い台詞を 2 行 4. **特長**（料理の良さを 3 点伝える）: 斜め点線付きの見出しと、白い枠線カードを 3 枚 5. **商品ラインナップ**（商品の種類を見せる）: パッケージ写真と商品名を縦に 3 つ並べる 6. **作り方ステップ**（手軽さを示す）: 白い角丸パネルに番号丸と工程名、調理イラストを 4 段。左上にマゼンタの円バッジ 7. **ブリッジ**（時短テクの紹介へつなぐ）: 中央揃えの文章、筆ライン強調、キーワード入りの見出し、喜ぶ夫婦イラスト 8. **時短テク紹介**（テクを 3 つ説明する）: 生成り地にリボン見出し。メダル番号、道具イラスト、吹き出しリストを点線で区切って繰り返す 9. **おすすめ道具**（関連商品へ誘導する）: 白地。左に商品写真、右に商品名・説明・赤いピル型ボタンを 3 段 10. **アレンジレシピ**（活用例を見せる）: 濃い黄色の帯に筆風の見出し。薄黄色の地に、商品ごとに写真を 2 列で並べる ## Imagery - 人物は太い線画のイラストで、黄色いエプロンの男女。困り顔と喜び顔を描き分ける - 調理工程は赤いフライパンと炎のフラットなイラスト - 料理写真は真上から斜め 45° の明るい自然光。木目やストライプのクロスを敷く - 商品パッケージは正面から撮った切り抜き - 背景に大小の黄色い水玉、キラキラした星、汗マークを散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 1000px 程度の幅で、ファーストビューの大見出しを 1 行にする - 特長カードとステップは PC で横 3〜4 列にする - PC では吹き出しを横長にし、リストを 1 行に収める - PC のレシピ一覧は 3 列にし、商品画像を見出しの右に置く - PC の目次ナビは 4 項目を横 1 列に並べる ## 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-0edd032f`（元 LP の URL から採番） - **元 LP**: https://housefoods.jp/products/special/keema/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。