DESIGN.md — 朱赤×金箔の和風即席麺LP（Crimson and Gold Japanese Noodle Product LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 食品・飲料 ／ 雰囲気: 和風、上品・高級、情報量多め・訴求型
• キーワード: 朱赤・金の渦巻き文様・筆の掃き帯・市松の生成り地・麺のシズル
• 地の質感: 赤地は織物風の布目テクスチャ。中盤は淡い金の市松と和紙のざらつきを重ねる。
• 形: 角はほぼ直角。見出しには筆で横に掃いた帯を敷く。商品は円形カップの切り抜きで見せる。
• 温度感: 暖色寄り。赤・橙・金・生成りで温かく、食欲をそそる。

Colors

• FVだけを朱赤の全面地にし、金の渦巻き文様を重ねる。
• 中盤は生成りの市松か和紙の淡い地にして、白の本文ブロックと交互にする。
• 見出しは焦茶の明朝にし、下に橙〜金の筆帯を敷く。
• 味のバリエーションごとに帯色を変える（赤・橙・紺）。帯の文字は白。
• 購入エリアは白地に薄グレー枠のカードにし、装飾色は使わない。
• 本文はグレーにし、強調する一文だけ赤にする。
• heading-brush は文字 #732A2A × 背景 #D6843E のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E0A16C、4.53:1）を使う。

Typography

• 見出しと本文は明朝で統一し、老舗らしい格を出す。
• 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。