--- version: alpha name: Crimson and Gold Japanese Noodle Product LP description: 赤い和柄のファーストビューに筆文字の縦書きコピーを置いた食品LP。中盤は生成りの市松・和紙の地に、筆で掃いた帯の見出しとシズル写真のカードを並べる。最後は白地の購入カードグリッドで締める。 colors: primary: '#B4040B' dark-section: '#B5040A' background: '#FEFEFE' background-alt: '#EEE3B5' tint-1: '#FAF6EA' accent-1: '#D6843E' secondary: '#EDC77E' text: '#732A2A' accent-2: '#B7181F' accent-3: '#1E3A6E' text-body: '#555555' line: '#927E62' surface: '#FFFFFF' accent-1-accessible: '#E0A16C' typography: display: fontFamily: Yuji Syuku fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em headline-sm: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.5 rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 12px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-brush: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 50px badge-brush-band: backgroundColor: '{colors.accent-2}' typography: '{typography.headline-sm}' height: 40px enso-logo: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 200px diagram-callout: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 180px card-lineup: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 230px card-purchase: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 290px note-asterisk: textColor: '{colors.text-body}' typography: '{typography.note}' height: 30px --- # DESIGN.md — 朱赤×金箔の和風即席麺LP（Crimson and Gold Japanese Noodle Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 和風、上品・高級、情報量多め・訴求型 - **キーワード**: 朱赤・金の渦巻き文様・筆の掃き帯・市松の生成り地・麺のシズル - **地の質感**: 赤地は織物風の布目テクスチャ。中盤は淡い金の市松と和紙のざらつきを重ねる。 - **形**: 角はほぼ直角。見出しには筆で横に掃いた帯を敷く。商品は円形カップの切り抜きで見せる。 - **温度感**: 暖色寄り。赤・橙・金・生成りで温かく、食欲をそそる。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B4040B` | FVの朱赤地 | 7% | 画素の実測 | | `dark-section` | `#B5040A` | FV下部の濃い赤 | 2% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | 33% | 画素の実測 | | `background-alt` | `#EEE3B5` | 市松の生成り地 | 12% | 画素の実測 | | `tint-1` | `#FAF6EA` | 和紙風の淡い地 | 10% | 画素の実測 | | `accent-1` | `#D6843E` | 筆の掃き帯・見出し下地の橙 | 5% | 画素の主要色に補正 | | `secondary` | `#EDC77E` | 金の装飾・渦巻き | 5% | 画素の主要色に補正 | | `text` | `#732A2A` | 見出し文字の焦茶 | 2% | 画素の主要色に補正 | | `accent-2` | `#B7181F` | 強調文字・赤帯 | 1% | 画素の実測 | | `accent-3` | `#1E3A6E` | 柚子系の紺帯 | 1% | 推定 | | `text-body` | `#555555` | 本文グレー | 1% | 推定 | | `line` | `#927E62` | カード下の茶罫・枠 | 1% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | 購入カード地 | 12% | 画素の実測 | | `accent-1-accessible` | `#E0A16C` | AA を満たす補正値（計算） | | 計算 | - FVだけを朱赤の全面地にし、金の渦巻き文様を重ねる。 - 中盤は生成りの市松か和紙の淡い地にして、白の本文ブロックと交互にする。 - 見出しは焦茶の明朝にし、下に橙〜金の筆帯を敷く。 - 味のバリエーションごとに帯色を変える（赤・橙・紺）。帯の文字は白。 - 購入エリアは白地に薄グレー枠のカードにし、装飾色は使わない。 - 本文はグレーにし、強調する一文だけ赤にする。 - `heading-brush` は文字 `#732A2A` × 背景 `#D6843E` のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E0A16C`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦書き筆文字コピー | 手書き・筆 | Yuji Syuku | 700 | 48px | 1.1 | 0.05em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 800 | 26px | 1.4 | 0.05em | | `headline-md` | 商品名・味名 | 明朝 | Shippori Mincho | 700 | 22px | 1.3 | 0.03em | | `headline-sm` | 帯の中の訴求文・色付きサブ見出し | 明朝 | Noto Serif JP | 700 | 14px | 1.4 | 0.0em | | `body-md` | 説明本文 | 明朝 | Noto Serif JP | 400 | 12px | 1.8 | 0.0em | | `note` | ※の注釈・レビュー件数 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 円形ロゴ風の太字見出し・図解ラベル | 装飾・ディスプレイ | Dela Gothic One | 400 | 30px | 1.2 | 0.0em | | `label-button` | 購入カードの商品名と価格 | ゴシック | Noto Sans JP | 500 | 13px | 1.5 | 0.0em | - 見出しと本文は明朝で統一し、老舗らしい格を出す。 - FVのコピーは縦書きの筆文字にし、一部の文字を小さくしてリズムを付ける。 - 難読語にはルビを振る。 - 購入エリアだけゴシックにし、EC風に情報を読みやすくする。 - 強調は太字と赤文字のみ。下線やマーカーは使わない。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。商品カードは写真を左寄せ、文を右に置く。購入カードは2列。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 60px、基本単位 8px、カード内 12px（375px 幅換算） - 味の紹介は商品画像と文を左右交互にジグザグ配置する。 - ラインナップカードは左端に麺の写真を断ち切りで置き、右上に商品画像をはみ出させる。 - 見出しは中央揃えにし、下に筆帯を敷く。 - 購入グリッドは余白を均等にし、カード間は約8px。 ## Elevation & Depth - ラインナップカードは白地に薄い影と下辺の茶罫を付ける。 - 商品画像は切り抜きで柔らかいドロップシャドウを付ける。 - 購入カードは影なしで、1pxの薄グレー枠のみ。 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は輪郭で切り抜く。麺の写真は円の一部や縦長に断ち切って見せる。 - **セクション境界**: 直線で背景色を切り替える。見出しには筆の掃き帯を添える。 - 訴求帯は端がかすれた筆ストロークの形にする。 - 見出しロゴは筆の円（円相）で囲む。 - カードの角は直角か極小の角丸にする。 ## Components - **筆帯見出し**（`heading-brush`）: 明朝の見出しの下に、橙〜金の筆の掃き帯を横に敷く。 - **筆ストローク訴求帯**（`badge-brush-band`）: 味ごとの色の筆帯に、白い明朝で素材の訴求を2行まで入れる。 - **円相囲みロゴ見出し**（`enso-logo`）: 金と橙の筆の円の中に、太字ディスプレイ書体の特長名を置く。 - **線画の図解**（`diagram-callout`）: 黒の線画イラストから引き出し線を伸ばし、太字ラベルと小さな説明を添える。 - **ラインナップカード**（`card-lineup`）: 左に麺のシズル写真、右に商品名・色付きサブ見出し・本文・注釈を置く。右上には商品画像をはみ出させる。 - **購入商品カード**（`card-purchase`）: 白地に薄枠。商品画像・商品名・星評価・価格を縦に並べる。 - **※注釈**（`note-asterisk`）: セクション末に小さな文字で、出典や配合の割合を書く。 ## Do's and Don'ts **Do** - FVは赤地に金の渦巻き文様と、筆の縦書きコピーで構成する。 - 見出しは必ず筆帯とセットにする。 - 麺を箸で持ち上げた写真で、シズル感を大きく見せる。 - 味ごとに帯色を変えて識別しやすくする。 - 生成りの市松や和紙の地で、和の質感を出す。 **Don't** - 寒色の背景やビビッドなグラデーションは使わない。 - 見出しを丸ゴシックやポップ体にしない。 - 角丸の大きいピル型ボタンで和の格を崩さない。 - 購入エリア以外にEC風の無機質なUIを持ち込まない。 - 装飾の金を本文色に使わない（読みにくい）。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの格と、素材へのこだわりを一目で伝える）: 朱赤の布目地に金の渦巻きを敷く。商品カップとどんぶりを大きく置き、右に筆の縦書きコピーを入れる。 2. **特長の導入**（麺の特長を説明する）: 白地に中央揃えで明朝の大見出しを置き、強調語は赤文字にする。下に本文を数行。 3. **特長ロゴと図解**（原料の仕組みを図で理解させる）: 筆の円相で囲んだロゴ見出しと、線画の断面図に引き出し線ラベルを付ける。 4. **シズル写真**（食感を想起させる）: 箸で麺を持ち上げた写真を、全幅で白背景に大きく置く。 5. **味のこだわり紹介**（主力3品の素材訴求）: 金の市松地に、カップ画像と味名・筆帯・一言をジグザグに3つ並べる。最後に※注釈。 6. **商品ラインナップ**（全商品の詳細説明）: 和紙地に、写真左・文右の白カードを縦に積む。右上には商品画像を重ねる。 7. **購入**（ECへ誘導する）: 筆帯見出しの下に、白い枠付きの商品カードを2列グリッドで並べる。価格と星評価を入れる。 ## Imagery - 料理写真は真上か斜め45度から撮り、暖色の光で湯気とつやを出す。 - 麺を箸で持ち上げた寄りのカットを、白背景の切り抜きで使う。 - 金色の渦巻き・青海波などの和文様を、線画で地に重ねる。 - 原料は黒一色の手描き風線画で図解する。 - ページの右端に、追従するキャラクターアイコンを小さく置く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央約1000pxの白ブロックに収め、左右に市松地を見せる。 - PCのFVは横長にし、左に商品、中央に縦書きコピー、右にどんぶりを置く。 - 特長の導入はPCで2カラムにし、左に文と図解、右に麺写真を置く。 - 味のこだわり紹介はPCで3列横並びにする。 - ラインナップはPCで2列、購入カードは4列にする。 ## 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-257ec9d8`（元 LP の URL から採番） - **元 LP**: https://store.nissin.com/pages/menshokunin - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。