DESIGN.md — 深紅×小麦金の和風高級麺食品LP（Crimson and Wheat Gold Premium Noodle LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 和風、上品・高級、力強い・インパクト
• キーワード: 深紅・小麦色グラデーション・明朝体・縦書き・湯気とシズル・金の粒子
• 地の質感: 赤地の放射グラデーションに光沢感、金色背景に細かな光の粒子（ボケ）
• 形: 角のない全幅帯の積み重ね。装飾は鉤括弧型の枠線と筆の下線程度
• 温度感: 暖色。熱々の料理を思わせる赤と黄金色

Colors

• 深紅の帯とクリーム〜金の帯を交互に並べて、ページにリズムをつける
• 赤地には放射グラデーションを入れ、中央を明るく、縁を暗くする
• クリーム地では見出しを赤、本文を黒にする
• 強調したい語句だけを赤にする。1見出しにつき1フレーズまで
• 金色は枠線と粒子装飾に限る。面を塗るのには使わない
• 青や緑は商品パッケージと具材の写真にしか出さない

Typography

• 見出しは太い明朝体を基本にして、老舗感を出す
• こだわりの項目は縦書きにし、右から左へ読ませる
• 写真の上の文字は白抜きにし、薄い影をつけて読めるようにする
• 技術訴求の見出しは3段で組む（前置き→赤の主張→締めの一言）
• 本文も明朝体の太字にする。細いゴシックは使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップだけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは全幅の帯で、背景を切り替えて区切る
• 写真は端まで全幅で裁ち落とし、上に見出しを重ねる
• 本文ブロックは左右に約20pxの余白をとる
• 縦書きの3項目は横に等間隔で並べる

Elevation & Depth

• 影はほぼ使わない。奥行きはグラデーションと写真で出す
• 商品パッケージにだけ、ごく薄い落ち影をつける
• 図解パネルは影なしの平らな面にする

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の矩形で裁ち落とし。商品は切り抜きのパッケージ画像
• セクション境界: 直線で背景を切り替える（グラデーションの帯）
• 見出しは鉤括弧型の金の細線枠で囲む
• 見出しの下に筆で引いたような赤い下線を入れる
• 図解の注記は赤枠の四角い吹き出しにする

Components

• 赤地白抜きの角型ロゴ（hero-logo-badge）: 白縁つきの赤い四角に太い文字を置き、ファーストビューの上部中央に配置
• 筆の下線つき見出し（heading-brush-underline）: 赤い明朝の見出しの下に、かすれた赤の線を引く
• 鉤括弧枠の見出し（heading-bracket-frame）: 赤地の上に金の細線で鉤括弧を組み、中に金文字の見出しを置く
• 縦書きのこだわり列（vertical-point-column）: 一の字を頭に置いた縦書きの項目名と補足文。3列を横に並べる
• 3段の主張見出し（three-line-claim）: 黒の前置き、大きな赤の主張、黒の締めを縦に重ね、下に本文を続ける
• 図解パネル（diagram-panel）: 淡いクリームの面に線画の図と赤枠の注記吹き出しを置く
• 商品パッケージカード（product-card）: 赤地の上に切り抜きのパッケージ画像を置き、下に白い明朝の商品名を添える

Do's and Don'ts

Do - 赤とクリーム〜金の帯を交互に置く - 麺や湯気をアップで撮った写真を全幅で大きく使う - 見出しは太い明朝体にし、要所は縦書きにする - 強調は赤文字だけで行う - 金色の光の粒子をうっすらと散らす

Don't - 寒色を背景やUIに使わない - 丸ゴシックやポップな装飾を入れない - 角丸カードや影の強いボタンを多用しない - 1つの見出しで赤の強調を複数入れない - 白一色の無機質な背景にしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（ブランドと商品群を一目で見せる）: 赤い放射グラデーションの上に角型ロゴを置き、どんぶりの写真と4種のパッケージを並べる
2. メインコピー（素材の特長を印象づける）: 麺をすくい上げる湯気の写真を全幅で使い、上部に白抜きの大きな明朝キャッチを置く
3. 素材の解説（原料の価値を説明する）: クリーム地に赤い見出しと筆の下線、中央揃えの本文、茶色の線画の図解を置く
4. こだわり（3つのこだわりを格調高く伝える）: 赤地に鉤括弧枠の見出しを置き、縦書きの3列を並べる
5. 技術訴求（開発期間と独自製法を示す）: 麺の写真の上に見出しを重ね、金色の地に3段の主張見出しと本文を2ブロック続ける
6. 調理の仕組み（調理法の利点を図で見せる）: クリームのパネルにレンジのイラストと赤枠の注記を置く
7. ラインナップ（商品の種類を紹介する）: 赤いグラデーションの地に白の見出しと説明を置き、2列×2段で商品パッケージと名前を並べる

Imagery

• 湯気の立つ麺類を斜め上や真横からアップで撮る。暖色の照明で撮る
• 箸で麺をすくい上げる瞬間をとらえ、背景はぼかす
• ザルに盛った麺を俯瞰で撮り、質感を見せる
• 図解は茶色や黒の単線で描くシンプルな線画にする
• 背景には金色の光のボケや粒子を薄く散らす
• 商品はパッケージを正面から撮った切り抜きにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央にコンテンツ幅をとり、背景の帯は全幅のまま伸ばす
• PC のメインコピーは左に文字、右に写真の2分割にする
• PC の素材解説は左に図解、右に文章の横並びにする
• PC の技術訴求は左に文章、右にザルの麺の写真を置く
• PC のラインナップは4商品を1行で横に並べる

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 行書くと起動時に読み込まれる。