--- version: alpha name: Dark Ramen Shop Brush Food LP description: 黒と深いえんじ茶の地に、金黄色の筆文字見出しと湯気の立つシズル写真を組み合わせた、ラーメン店の熱気を感じる食品 LP。中盤だけ生成りの和紙調の面にして、こだわり訴求を明朝の読み物として見せる。 colors: background: '#000000' primary: '#611900' background-alt: '#F3EADB' accent-1: '#F8D171' secondary: '#911D03' text: '#3D2F26' on-dark: '#F7F7F7' accent-2: '#E40101' line: '#C9A13A' cta: '#DBBC01' on-cta: '#1C0E00' surface: '#FAF5EF' dark-section: '#000000' background-accessible: '#999999' typography: display: fontFamily: Yuji Syuku fontSize: 34px fontWeight: 700 lineHeight: 1.2 headline-lg: fontFamily: Yuji Boku fontSize: 44px fontWeight: 700 lineHeight: 1.2 headline-md: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Shippori Mincho B1 fontSize: 21px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.02em note: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 700 lineHeight: 1.5 label-button: fontFamily: Shippori Mincho B1 fontSize: 13px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' brush-heading: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 60px gold-section-title: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 80px red-circle-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px outlined-claim: textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' height: 90px gold-frame-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 480px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 34px product-tile: textColor: '{colors.on-dark}' typography: '{typography.note}' height: 150px lined-subtitle: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 30px --- # DESIGN.md — 黒×えんじ×金の力強いラーメン食品 LP（Dark Ramen Shop Brush Food LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 力強い・インパクト、和風、ラグジュアリー・ダーク、情報量多め・訴求型 - **キーワード**: ラーメン店の熱気・筆文字・黒とえんじのグラデーション・金の枠・湯気のシズル・商品パッケージ一覧 - **地の質感**: 黒〜えんじの縦グラデーションと生成りの和紙調の面。写真は湯気と照りを強めに見せる。 - **形**: 角丸なしの矩形が基本。金の細い二重枠、赤い丸バッジ、白い縁取りの太字見出し。 - **温度感**: 暖色。焦げ茶・えんじ・金で温かい湯気と熱気を出す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | メインの黒地 | 28% | 画素の実測 | | `primary` | `#611900` | えんじ茶の帯・ラインアップの地 | 22% | 画素の主要色に補正 | | `background-alt` | `#F3EADB` | こだわり説明の生成り地 | 12% | 画素の実測 | | `accent-1` | `#F8D171` | 金黄色の見出し文字 | 3% | 画素の主要色に補正 | | `secondary` | `#911D03` | こだわり見出しの赤茶 | 2% | 画素の実測 | | `text` | `#3D2F26` | 生成り地の見出し・本文 | 3% | 画素の主要色に補正 | | `on-dark` | `#F7F7F7` | 暗い地の白文字 | 3% | 画素の実測 | | `accent-2` | `#E40101` | 赤い丸バッジ・訴求文字 | 1% | 画素の実測 | | `line` | `#C9A13A` | 期間限定ボックスの金の枠 | 1% | 推定 | | `cta` | `#DBBC01` | 記事リンク・動画ラベルの金黄帯 | 1% | 画素の実測 | | `on-cta` | `#1C0E00` | 金黄帯の上の文字 | 0% | 画素の実測 | | `surface` | `#FAF5EF` | 紹介カードの白地 | 2% | 画素の主要色に補正 | | `dark-section` | `#000000` | 帯セクション上部の焦げ黒 | 9% | 画素の実測 | | `background-accessible` | `#999999` | AA を満たす補正値（計算） | | 計算 | - 地は黒を基本にして、商品の一覧部分は黒→えんじ茶→黒と縦グラデーションで包む。 - こだわりの読み物だけ生成り地にして、明るい面で切り替える。 - 暗い地の見出しは金黄色、補足のコピーは白にする。 - 生成り地の大見出しは赤茶の筆文字にして、助詞だけ小さくする。 - 赤は丸バッジと数字の強調だけに絞り、白の縁取りを付ける。 - ボタン・ラベルは金黄の面に黒文字。 - `page` は文字 `#3D2F26` × 背景 `#000000` のコントラスト比が 1.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#999999`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のロゴ風タイトル（白・筆文字） | 手書き・筆 | Yuji Syuku | 700 | 34px | 1.2 | 0.0em | | `headline-lg` | こだわり見出し（大小混ぜた筆文字） | 手書き・筆 | Yuji Boku | 700 | 44px | 1.2 | 0.0em | | `headline-md` | 金黄色のセクション見出し | 手書き・筆 | Dela Gothic One | 400 | 30px | 1.3 | 0.02em | | `headline-sm` | サブコピー（太明朝 2 行） | 明朝 | Shippori Mincho B1 | 800 | 21px | 1.5 | 0.03em | | `body-md` | こだわりの本文 | 明朝 | Noto Serif JP | 500 | 12px | 1.9 | 0.02em | | `note` | 商品名キャプション | 明朝 | Noto Serif JP | 700 | 12px | 1.5 | 0.0em | | `label-button` | 金黄帯のボタン・ラベル | 明朝 | Shippori Mincho B1 | 800 | 13px | 1.4 | 0.05em | - 見出しは筆文字か極太で、ラーメン店の看板のような勢いを出す。 - 見出しのキーワードは大きく、助詞は 6 割くらいの大きさにする。 - 訴求見出しには白の太い縁取りと影を付ける。 - 本文とキャプションは明朝でそろえる。 - 本文は 12px 前後の左揃えにして、見出しとの大きさの差を大きく取る。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品一覧は 2 カラム（最後の 1 個は中央）。PC は 3〜4 カラム。 - **本文ブロックの幅**: 画面幅の約 80% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は全幅で使い、文字は左右 12% ほど内側に置く。 - セクションは地の色の切り替えで区切り、余白は大きめに取る。 - 商品パッケージの下に商品名を中央揃えで 1 行置く。 - 期間限定ボックスは金の枠で囲み、枠の上辺に見出しを重ねる。 - サブシリーズは左右に線を引いた中央見出しで区切る。 ## Elevation & Depth - 基本はフラットで、影はパッケージ画像のドロップシャドウだけにする。 - 訴求文字は白の縁取りと薄い影で浮かせる。 - 写真の下端は生成り地へグラデーションで溶かす。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は全幅の矩形。パッケージは切り抜きにし、丸いルーペ風の拡大を重ねる。 - **セクション境界**: 直線で色を切り替えるか、縦グラデーションでなじませる。 - 角丸は使わない。 - 強調は赤い正円バッジにする。 - 枠は金の細い二重線で作る。 - ボタンは角のある金黄帯に右向き三角を付ける。 ## Components - **筆文字の大見出し**（`brush-heading`）: キーワードを大きく、助詞を小さくした赤茶または金黄の筆文字。 - **金黄のセクション見出し**（`gold-section-title`）: 暗い地の中央に置く金黄の見出しと、その下の白いサブコピー。 - **赤丸バッジ**（`red-circle-badge`）: 赤い正円の中に白文字 2 行。白い縁取りを付け、パッケージの横に重ねる。 - **縁取りの訴求コピー**（`outlined-claim`）: 赤文字に白の太い縁取りを付け、数字だけ特大にした訴求。 - **期間限定の金の枠ボックス**（`gold-frame-box`）: 金の二重線で囲んだ箱。上辺に見出しを重ね、中に商品と白い紹介カードを入れる。 - **金黄帯のリンクボタン**（`button-primary`）: 角のある金黄の帯に、黒い明朝文字と右向きの三角。 - **商品パッケージのタイル**（`product-tile`）: 切り抜いたパッケージの下に、白い明朝で商品名を置く。 - **左右に線を引いた小見出し**（`lined-subtitle`）: 白文字の左右に細い横線を引いた中央見出し。 ## Do's and Don'ts **Do** - 湯気と照りのあるシズル写真を大きく全幅で使う。 - 見出しは筆文字で大小の差を付ける。 - 黒とえんじのグラデーションで温かくて重い空気を作る。 - 金はアクセントだけに使い、品よくまとめる。 - 商品一覧は同じ大きさのパッケージを規則正しく並べる。 **Don't** - ゴシックの細字で見出しを作らない。 - 寒色系の背景にしない。 - 角丸やピル型のボタンを使わない。 - 赤を広い面に使わない。 - 白背景だけの軽い構成にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観とシリーズ全体を見せる）: 黒地の上部に白い筆文字のタイトル、中央に丼の写真、その下に白の明朝コピーと商品 3 点を横に並べる。 2. **麺のこだわり**（品質の根拠を伝える）: 麺を持ち上げた全幅写真を生成り地に溶かし、赤茶の筆見出し・太明朝の 2 行・本文を置く。 3. **スープのこだわり**（味の信頼性を伝える）: 同じ生成り地で、同じ見出しの型を繰り返す。 4. **保存性の訴求**（買い置きの便利さを伝える）: 黒からえんじの帯に金黄の見出しを置き、パッケージ・赤丸バッジ・縁取りの数字訴求を重ねる。 5. **ラインアップ**（商品の全種類を見せる）: 黒地に金黄の見出しと白いサブコピー。期間限定の金の枠ボックスの下に、商品を 2 列で並べる。 6. **サブシリーズ**（別のシリーズを紹介する）: 線付きの小見出しの下に、縦長のパッケージと 2 行の商品名を並べる。 7. **作り方動画**（調理の簡単さを見せる）: 黒地に金黄の見出し、金黄帯のラベル、16:9 の埋め込み動画。 ## Imagery - 丼を斜め上から撮り、照りと湯気を強調した暖色の写真にする。 - 麺を箸で持ち上げた寄りのカットで、躍動感を出す。 - 背景は暗い木目や黒で、丼に光を当てる。 - パッケージは切り抜きにし、軽い影を付ける。 - 写真の端はグラデーションで背景に溶かす。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅をおよそ 960px で中央に置き、背景は全幅に広げる。 - こだわりの 2 ブロックは、PC では写真を背景にして左側に文字を重ねる。 - 保存性の訴求は、PC では横並びで帯を低くする。 - 商品一覧は PC で 3〜4 列にする。 - 見出しのコピーは PC では 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-9ff58c43`（元 LP の URL から採番） - **元 LP**: https://www.nissin.com/jp/product/brands/gyoretsu/special/1/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。