DESIGN.md — 和紙地と焦茶×朱の和風カレー食品 LP（Warm Washi Japanese Spice Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 和風、ナチュラル、親しみ・手作り感、上品・高級
• キーワード: 和紙テクスチャ・焦茶の太明朝・朱色アクセント・市松模様・水彩食材イラスト・青海波と雲
• 地の質感: 繊維の入った和紙風ベージュ地、市松の格子柄、水彩タッチの食材イラスト
• 形: 角切りの和風ピルボタン、円形の番号メダル、角丸の料理写真、雲・青海波の境界装飾
• 温度感: 暖色寄り。生成り・ベージュ・焦茶・朱で香ばしい温かさ

Colors

• 地は和紙ベージュ→市松枠＋生成りパネル→ベージュ→淡黄とセクションごとに切り替える
• 見出しは焦茶、セクションタイトルと強調語のみ朱にする
• 本文中の重要フレーズは朱文字で 1〜2 行だけ強調
• 主 CTA は濃い朱のベタ面に白文字、他の色のボタンは作らない
• 番号数字は淡金の大きな数字で背景に溶かす
• 白は料理写真カードの地とレシピ枠内にのみ使う
• button-primary は文字 #FFF0E5 × 背景 #D33B09 のコントラスト比が 4.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CC3909、4.53:1）を使う。
• button-anchor は文字 #FFF0E5 × 背景 #DB5B34 のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BF4722、4.55:1）を使う。
• speech-bubble は文字 #FFF0E5 × 背景 #DB5B34 のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BF4722、4.55:1）を使う。

Typography

• 見出しは太い和風明朝で字間を広めに取る
• 本文はすべて中央揃え、1 行 20 字前後で改行
• 強調は太字＋朱色で、下線や蛍光マーカーは使わない
• レシピの小ラベルは手書き風丸文字（Klee One 等）で朱色
• 注記は本文下に小さく中央配置
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、レシピも縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 秘密セクションは市松枠の中に生成りパネルを 90% 幅で置く
• 番号メダルは上 1 個・下 2 個の三角配置
• 各特長は大きな番号→見出し→イラスト→本文の順
• CTA は横幅 90% のバー型
• レシピは白カード内に小ラベル→写真→料理名を繰り返す

Elevation & Depth

• 影はほぼ使わずフラット
• 商品パッケージ写真のみ薄い落ち影
• 立体感は和紙テクスチャと市松柄で出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 料理写真は角丸 20px の横長、食材は切り抜き水彩
• セクション境界: 直線切替＋雲と青海波の装飾帯
• ナビボタンは角を切った和風カルトゥーシュ形に二重線
• 番号メダルは放射線入りの円
• 吹き出しは角丸 12px の朱ベタに小さな尻尾
• レシピ見出しは上辺が膨らんだ朱の札形
• CTA ボタンは角丸 2〜4px の長方形

Components

• 商品詳細ボタン（button-primary）: 朱ベタに白文字、右端に小さな矢印
• 和風アンカーボタン（button-anchor）: 角切り形で内側に白二重線、2+1 個配置
• 番号メダル（number-medallion）: 放射線の円に金スプーンと番号、特長名を焦茶で
• 大型番号（big-number）: 淡金のセリフ数字を見出し上に配置
• 特長吹き出し（speech-bubble）: 朱ベタ白文字の短文吹き出しを 2 つ横並び
• 市松枠パネル（pattern-frame）: 市松柄の地に生成りパネルを載せたセクション
• レシピカード（recipe-card）: 朱細線の白枠、上に札形見出し、内に写真と料理名
• 斜線ラベル（slash-label）: 左右に点線斜線を添えた朱の手書き風小見出し

Do's and Don'ts

Do - 地には和紙の繊維テクスチャを薄く敷く - 食材は水彩タッチの切り抜きで見出し周りに散らす - 見出しは焦茶と朱の 2 色に限定する - 比較グラフは朱の斜線ストライプ棒で表す - 注記を写真・イラストの直下に小さく添える

Don't - 寒色やビビッドな原色を面に使わない - 細いゴシックだけの見出しにしない - 強い影やグラデーションボタンを使わない - 写真を角張った正方形のまま並べない - 本文を左揃えの長文にしない

Page Structure

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

1. ファーストビュー（食感の価値と商品ロゴを提示）: 和紙地に焦茶キャッチ 3 行、白枠ロゴ、商品パッケージ 2 種
2. ページ内ナビ（主要セクションへ誘導）: 朱の和風ボタンを 2+1 で配置
3. コンセプト導入（従来品との違いを宣言）: 太明朝見出し＋中央本文、周囲に食材水彩、下に料理イラスト
4. 特長の要約（3 つの強みを一覧化）: 市松枠内に番号メダルを三角配置
5. 特長詳細（各強みを根拠付きで説明）: 大型番号→見出し→イラスト/グラフ/ロゴ図→朱強調本文→吹き出し
6. 商品ラインアップ（味違いを比較して選ばせる）: パッケージ写真、商品名、説明、食材イラスト、朱バー CTA を縦に反復
7. アレンジレシピ（使い方を広げ購買後も想起）: 雲装飾で区切った淡黄地、札形見出しの白カードに料理写真
8. SNS シェア（拡散導線）: 公式色の丸アイコンを横並び、下に雲と青海波装飾

Imagery

• スパイス・乾物・薬味を水彩画風に描き切り抜きで配置
• 料理写真は木目テーブル、和陶器、箸やスプーンを添えた暖色光の斜め俯瞰
• パッケージは正面撮影で軽い影
• 装飾は市松・青海波・雲など和柄を黄土と朱で
• 比較図は朱の斜線ストライプ棒グラフ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 900px 前後に収め、背景テクスチャは全幅
• FV はロゴ中央、商品パッケージを左右に配置
• 特長詳細は図と本文の 2 カラム、番号を左右交互に
• ラインアップは写真左・説明右の横並び
• レシピカードは 3 カラムグリッド
• ナビボタンは横一列 3 個

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