--- version: alpha name: Navy and Mustard Pop Retro Food LP description: 濃紺とクリーム、からし色の 3 色で作るポップでレトロな食品 LP。極太のディスプレイ書体、集中線の背景、漫画風の吹き出し、オフセット影付きの白カードで、元気でインパクトのある印象にしている。 colors: primary: '#161F3E' background: '#FFEDBA' background-alt: '#FFEEBA' surface: '#FFFFFF' secondary: '#E0C05D' text: '#10162E' cta: '#161F3E' on-cta: '#FDFEFF' line: '#DFD1A8' accent-1: '#EC6263' accent-2: '#6465EC' dark-section: '#161F3E' on-dark: '#FFFFFF' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 21px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: Bebas Neue fontSize: 16px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.05em headline-sm: fontFamily: Klee One fontSize: 17px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.5 rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 60px 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: 56px number-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 80px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 900px label-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 42px definition-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 150px heading-line-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 50px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 130px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px --- # DESIGN.md — 紺×からし色のポップレトロ食品 LP（Navy and Mustard Pop Retro Food LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、レトロ、力強い・インパクト - **キーワード**: 濃紺×クリーム・からし色アクセント・極太ディスプレイ書体・集中線・漫画風吹き出し・オフセット影カード - **地の質感**: フラットな塗り。背景に放射状の集中線と、巨大な英字の透かしを薄く敷く - **形**: 角丸の白カード。右下に紺のずらし影。番号はとがった多角形の吹き出し - **温度感**: あたたかい。クリームの地に紺を締め色として使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#161F3E` | ブランドの濃紺（FV左半分・番号バッジ・CTA・最後のセクション） | 20% | 画素の実測 | | `background` | `#FFEDBA` | クリームのページ地 | 25% | 画素の実測 | | `background-alt` | `#FFEEBA` | 集中線の淡いクリーム | 8% | 画素の実測 | | `surface` | `#FFFFFF` | 特徴カードの白い面 | 35% | 画素の実測 | | `secondary` | `#E0C05D` | からし色のラベルピル・装飾英字 | 4% | 画素の実測 | | `text` | `#10162E` | 見出し・本文の紺色文字 | 3% | 画素の実測 | | `cta` | `#161F3E` | 主ボタンの紺 | 1% | 画素の主要色に補正 | | `on-cta` | `#FDFEFF` | ボタン上の白文字 | 0% | 画素の実測 | | `line` | `#DFD1A8` | 枠線・カード輪郭の金茶色の細線 | 2% | 画素の主要色に補正 | | `accent-1` | `#EC6263` | イラストの赤（肉の立方体・器） | 1% | 画素の実測 | | `accent-2` | `#6465EC` | イラストの青紫の丸 | 0% | 画素の実測 | | `dark-section` | `#161F3E` | お客様の声セクションの紺地 | 16% | 画素の実測 | | `on-dark` | `#FFFFFF` | 紺地上の白文字 | 2% | 画素の実測 | - 地はクリーム、カードは白、締めと最後のセクションは濃紺の 3 層で構成する - からし色はラベルピル・装飾英字・ロゴモチーフに限って使う - 文字はほぼ紺の 1 色。紺地の上だけ白にする - 主ボタンは紺の塗りに白文字 - イラストは赤・青紫・黄色のポップな配色で、紺の太い輪郭線を付ける - ページの外周に金茶色の細い枠線を通す ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ブランドロゴ風の大見出し・カギカッコ付きの強調 | 装飾・ディスプレイ | Dela Gothic One | 400 | 44px | 1.2 | 0.02em | | `headline-lg` | セクションの和文見出し | ゴシック | Zen Kaku Gothic New | 900 | 32px | 1.3 | 0.05em | | `headline-md` | カード内の見出し | ゴシック | Zen Kaku Gothic New | 900 | 21px | 1.5 | 0.03em | | `accent` | 見出し上の英字ラベル・番号 | 欧文サンセリフ | Bebas Neue | 400 | 16px | 1.2 | 0.05em | | `body-md` | 本文・説明 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.8 | 0.05em | | `headline-sm` | 吹き出し内の手書き風の声 | 手書き・筆 | Klee One | 600 | 17px | 1.5 | 0.05em | | `label-button` | ボタン・ラベルピル | ゴシック | Zen Kaku Gothic New | 900 | 17px | 1.2 | 0.05em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 500 | 10px | 1.5 | 0.0em | - 本文も太字（700）で、全体を力強く見せる - キャッチは極太のディスプレイ書体にして、カギカッコで囲む - 和文見出しの上に小さな英字ラベルを添える - 番号は太い縦長の欧文数字にする - お客様の声だけ手書き風の書体にして、少し傾ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内の比較は縦積みにする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算） - 白カードは左右に約 6% の余白をとって配置する - 番号バッジはカードの上辺にかかるように重ねる - カード同士は 50px 前後の間隔で縦に並べる - 背景に巨大な英字を薄く敷き、セクションに奥行きを出す - 工程は図と下向き矢印で縦に流す ## Elevation & Depth - 白カードは右下に 6px ずらした紺のベタ影を付け、ぼかしは使わない - 番号バッジにはからし色のずらし影を付ける - 商品写真には淡いドロップシャドウだけを付ける ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 料理と商品は切り抜きで白地やクリーム地に置く。角版は使わない - **セクション境界**: FV は縦に紺と白で 2 分割。紺セクションの手前は PC で山型のカーブにする - ボタンとラベルはピル型 - 見出し枠は細線の角丸ピルの左右に罫線を伸ばす - 吹き出しはギザギザ・雲形・多角形の漫画風 - 番号は五角形のとがった吹き出し形 ## Components - **主 CTA ボタン**（`button-primary`）: 紺のピル型ボタンに白い太字。右端に矢印アイコンを置く - **番号バッジ**（`number-badge`）: 紺の多角形の吹き出しに白い太字の番号。からし色のずらし影を付ける - **特徴カード**（`feature-card`）: 白の角丸カード。細い紺の輪郭と紺のずらし影を付ける - **からし色ラベル**（`label-pill`）: 種類名を入れるからし色のピル - **用語説明ボックス**（`definition-box`）: 細線の角丸枠の上辺にからし色のピル見出しを重ねる - **罫線付き見出し**（`heading-line-pill`）: 白地に細線のピル枠。左右に水平線を伸ばす - **漫画風吹き出し**（`speech-bubble`）: 白地に紺の輪郭線のギザギザ・雲形の吹き出し。傾けて重ねて配置する - **英字ラベル付き見出し**（`section-heading`）: 小さな英字ラベルの下に極太の和文見出しを中央揃えで置く ## Do's and Don'ts **Do** - 色は紺・クリーム・白・からし色の 4 色に絞る - カードには必ず紺のベタずらし影を付ける - 背景に集中線や巨大な英字を薄く敷いて、にぎやかさを出す - キャッチはディスプレイ書体とカギカッコで目立たせる - イラストは太い輪郭線のポップな絵柄に統一する **Don't** - ぼかしの強い柔らかい影を使わない - 細い明朝体や淡いパステル調を使わない - からし色を本文の文字色にしない - 写真を角版の四角で並べない - 装飾英字を本文が読めないほど濃くしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドと 2 種類の商品を一目で伝える）: 縦に紺と白で 2 分割。ロゴ風の大見出し、左右にからし色の動物アイコン、2 つの商品パッケージを並べる 2. **シズル訴求**（具材のおいしさを印象づける）: クリームの集中線の背景に、具材をのせたスプーンを左右から配置。英字入りの吹き出しで種類を示す 3. **コンセプト**（商品の価値を宣言する）: 擬音語入りのディスプレイ見出しとカギカッコの強調。その下に短い本文を置く 4. **特長 01**（独自の製法を説明する）: 番号バッジ付きの白カード。用語説明ボックスと、イラスト＋矢印の工程図を入れる 5. **特長 02**（種類ごとの味の違いを示す）: 皿に盛った料理の切り抜き写真と、からし色のラベル、説明を種類ごとに縦に並べる 6. **特長 03・商品ラインアップ**（手軽さと商品の一覧を見せる）: 調理アイコンを添えた説明、罫線付きの見出し、パッケージ写真とラベルを並べる 7. **CTA**（商品詳細ページへ誘導する）: カードの最下部に紺のピル型ボタンを置く 8. **お客様の声**（開発の背景になった声を示す）: 紺地に白い漫画風の吹き出しを 3 つ重ね、白のディスプレイ見出しで締める。下に出典の注釈を置く 9. **フッター**（SNS で共有してもらう）: 紺地に白丸の SNS アイコンを 2 つ並べる ## Imagery - 料理は真上ではなく斜めから撮り、ソースのツヤを強調して切り抜く - スプーンにひと口分を盛ったシズルカットを左右から差し込む - 工程は太い紺の輪郭線で、赤・青紫・黄色の星や丸のポップなイラストにする - からし色の動物シルエットを、ロゴのモチーフとして左右に置く - 背景には放射状の集中線と、アウトラインや塗りの巨大な英字を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 85% 幅のカードを置き、背景の英字の帯を左右いっぱいに見せる - PC では工程図を横 3 列にして、矢印で横に流す - PC では種類の比較・商品ラインアップを 2 カラムにする - PC の FV は中央に巨大なロゴモチーフを置き、商品を左右に配置する - PC では紺セクションの上端を山型のカーブにする ## 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-abd3f033`（元 LP の URL から採番） - **元 LP**: https://housefoods.jp/products/special/nikuru/index.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。