--- version: alpha name: Vivid Yellow Red Family Noodle LP description: 濃い黄色と赤を交互に地色に使う、にぎやかな食品 LP です。英字の太い見出しの下に波線を入れて章を区切ります。丸く切り抜いたシズル写真、リボン見出し、黒いピル型ボタンで親しみと食欲を出します。商品一覧はピンクの布目テクスチャのパネルにまとめます。 colors: primary: '#FFCD01' secondary: '#E50014' background: '#FFFFFE' background-alt: '#FDEDB2' tint-1: '#F4CADE' text: '#51271A' cta: '#673415' on-cta: '#FFFFFF' dark-section: '#020102' accent-1: '#F69412' accent-2: '#019401' surface: '#FDFDFD' on-dark: '#FFFFFF' accent-1-accessible: '#AB6406' typography: display: fontFamily: Kanit fontSize: 40px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em accent: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-secret: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px button-product: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 46px button-recipe: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px ribbon-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 48px section-title: textColor: '{colors.primary}' typography: '{typography.display}' height: 90px anchor-tabs: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 54px product-panel: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 1900px badge-quantity: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 52px recipe-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 430px --- # DESIGN.md — 黄×赤の元気な鍋ラーメン食品 LP（Vivid Yellow Red Family Noodle LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 黄と赤の帯・丸切り抜き写真・リボン見出し・波線装飾・布目テクスチャ・家族の団らん - **地の質感**: 基本はフラットな単色の面。商品パネルはピンクの布目、レシピ欄は淡い黄色のストライプで温かみを出す - **形**: 円形の写真、ピル型ボタン、リボン帯、吹き出し型の番号バッジ - **温度感**: 暖色中心で温かい。食卓のにぎわいを感じさせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFCD01` | ブランドの黄。FV下と商品詳細の地色 | 15% | 画素の実測 | | `secondary` | `#E50014` | 赤。こだわりセクションの地色とリボン | 17% | 画素の主要色に補正 | | `background` | `#FFFFFE` | 基本の白地 | 20% | 画素の実測 | | `background-alt` | `#FDEDB2` | レシピ欄の淡い黄色の地 | 8% | 画素の実測 | | `tint-1` | `#F4CADE` | 商品パネルのピンクの布目 | 13% | 画素の実測 | | `text` | `#51271A` | こげ茶の見出し・本文 | 3% | 画素の主要色に補正 | | `cta` | `#673415` | 商品情報ボタンのこげ茶 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#020102` | 黒いピルボタン・数量タグ | 1% | 画素の実測 | | `accent-1` | `#F69412` | レシピのオレンジボタン | 1% | 画素の実測 | | `accent-2` | `#019401` | 2番目のリボンの緑 | 1% | 画素の実測 | | `surface` | `#FDFDFD` | パネル内のラベル地 | 1% | 画素の実測 | | `on-dark` | `#FFFFFF` | 赤地の上の白文字 | 1% | 画素の主要色に補正 | | `accent-1-accessible` | `#AB6406` | AA を満たす補正値（計算） | | 計算 | - 地色は「黄→白→赤→白→黄→淡黄」の順で、全幅の帯として切り替える - 赤地の上では英字見出しを黄、本文を白にする - 白地の上の英字見出しは黄か赤にする - 本文と和文見出しは黒ではなくこげ茶にする - 小さなボタンは黒、商品ボタンはこげ茶、レシピボタンはオレンジ、と用途で分ける - 番号リボンは赤・緑・黄の3色で順に変える - `button-recipe` は文字 `#FFFFFF` × 背景 `#F69412` のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#AB6406`、4.61:1）を使う。 - `recipe-card` は文字 `#F69412` × 背景 `#FFFFFE` のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#AB6406`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 章の英字見出し | 欧文サンセリフ | Kanit | 700 | 40px | 1.1 | 0.02em | | `headline-lg` | リード見出し・商品名の大見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.6 | 0.04em | | `headline-md` | 英字見出しの下に置く和文の小見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.05em | | `headline-sm` | リボン内の見出し・味の名前 | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.3 | 0.04em | | `body-md` | 中央揃えの本文 | ゴシック | Noto Sans JP | 500 | 13px | 2.0 | 0.04em | | `note` | 調理例などの注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.04em | | `accent` | NEW の手書き風ラベル・番号 | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.0 | 0.02em | - 章の頭は太い英字の大見出し、その下に波線、さらに下に和文の小見出しを置く - 本文は中央揃えにし、行間を2.0前後と広めにとる - 赤地のセクションの本文だけは左揃えにする - 見出しはすべて太字にし、細い書体は使わない - 数字やNEWは丸ゴシックで、ポップに見せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品とレシピは縦積みまたはカルーセル - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの上下に48〜64pxの余白をとる - 丸写真は幅の約75%で中央に置く - 商品パネルは左右に約20pxの余白を残して角丸で囲む - レシピは両隣のカードを少し見せるカルーセルにする - FVは黄色の枠の中に写真2枚とロゴの円形バッジを重ねる ## Elevation & Depth - 影はほぼ使わず、フラットな色面で仕上げる - タブボタンには薄い影をつけ、下向きの三角を添える - 鍋の写真は切り抜いてパネルの上に浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: シズル写真は円形に切り抜く。団らん写真は円形を重ね、料理は切り抜き、レシピは角丸の矩形にする - **セクション境界**: 全幅の地色を直線で切り替える - ボタンはすべてピル型にし、右端に「>」をつける - 番号は吹き出し型の円で示す - 見出しは両端に切れ込みのある燕尾リボンにする - 英字見出しの下に黄色の波線を2本重ねる ## Components - **黒ピル小ボタン**（`button-secret`）: 各特長の下に置く詳細リンク。右端に矢印をつける - **商品情報ボタン**（`button-product`）: こげ茶のワイドなピル。文字は中央、矢印は右端に置く - **レシピボタン**（`button-recipe`）: オレンジのピル。カード内に小さいもの、セクション末に全幅のものを置く - **番号付きリボン見出し**（`ribbon-heading`）: 燕尾リボンの見出しで、右上に「その○」の吹き出しを重ねる。色は赤・緑・黄で順に変える - **英字見出しと波線**（`section-title`）: 太い英字の見出しの下に黄色の波線を置き、その下に和文の小見出しを続ける - **アンカータブ**（`anchor-tabs`）: 白いカード3つを横に並べ、選択中のものだけ赤にする。下に三角を添える - **商品パネル**（`product-panel`）: ピンクの布目テクスチャの角丸パネル。味の名前は淡い色のラベルにのせる - **数量タグ**（`badge-quantity`）: 黒地に白文字の角丸タグ。2つを×でつないで量を示す - **レシピカード**（`recipe-card`）: 白い角丸カード。上に写真、その下にオレンジの料理名とボタンを置く ## Do's and Don'ts **Do** - 黄・赤・白の帯を交互に切り替え、リズムをつける - 章の頭は英字見出しと波線のセットで統一する - シズル写真は大きな円形で見せる - 本文はこげ茶で中央揃えにする - イラストは輪郭のはっきりしたフラットなタッチにする **Don't** - 寒色を地色に使わない - 細い明朝体や繊細な書体を使わない - 角張った四角いボタンにしない - 写真に強いドロップシャドウをつけない - 文字色に純黒を多用しない（ボタンは例外） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（団らんの楽しさと商品を一目で伝える）: 黄色の枠の中に、上に人物写真、下に鍋写真を置く。中央に白い円形のロゴバッジを重ね、下に商品パッケージを並べる 2. **アンカーナビ**（主要なコンテンツへ誘導する）: 黄色の地に3つのタブを置き、中央のものを赤で強調する 3. **コンセプト**（誰かと食べる価値を伝える）: 黄色の地にこげ茶の大見出しと中央揃えの本文を置き、その下に円形の団らん写真3枚を散らす 4. **おいしさの特長**（おいしさの理由を3つ示す）: 白地。番号付きのリボン、円形写真、黒ピルボタンのセットを3回繰り返す 5. **素材のこだわり**（原料と製法で信頼を得る）: 赤地に黄色の英字見出しを置く。白文字の本文と、地図・職人・麦穂のフラットなイラストを交互に並べる 6. **商品ラインナップ**（味のバリエーションを見せる）: 白地の中にピンクの布目パネルを置く。味ラベル、切り抜きの鍋写真とパッケージ、こげ茶ボタンを1組として4つ並べる 7. **商品詳細**（中身と量を説明する）: 黄色の地。赤枠のラベル、赤の見出し、「麺＋ソース」の図解、黒の数量タグ、説明文の順に置く 8. **アレンジレシピ**（食べ方を広げ、別ページへ誘導する）: 淡い黄色のストライプ地。赤の英字見出し、白カードのカルーセル、オレンジの全幅ボタンを置く ## Imagery - 湯気の出そうな鍋料理を真上か斜め上から撮り、明るく彩度高めに仕上げる - 麺を箸で持ち上げる瞬間で、シズル感を出す - 白い部屋で笑顔の家族やカップルが食卓を囲む自然光の写真を使う - 製法の説明は、太い輪郭の素朴なフラットイラストにする - 商品パッケージは料理写真の手前に斜めに重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では特長の丸写真3つを横に並べ、中央の1つだけ下にずらす - PC ではこだわりのイラストと本文を左右交互の2カラムにする - PC では商品パネル内を2×2のグリッドにする - PC ではレシピカードを3枚横に並べ、カルーセルをやめる - PC では FV を人物写真と鍋写真の左右分割にし、中央にロゴバッジを置く ## 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-d4d01cd1`（元 LP の URL から採番） - **元 LP**: https://www.nagatanien.co.jp/brand/nikomiramen/ - **解析に使った画像**: 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/）からご連絡ください。