DESIGN.md — 朱赤×生成りの和漢スープ通販LP（Warm Japanese Fermented Soup LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 和風、ナチュラル、親しみ・手作り感、情報量多め・訴求型
• キーワード: 和紙調・朱赤・金メダル・手描き食材・明朝見出し・ひし形写真
• 地の質感: 麻の葉や青海波の薄い和柄地紋、和紙のような生成り地
• 形: 円形メダル・円形バッジ・ひし形の写真切り抜き・角丸の食材カード
• 温度感: 暖色寄り。生成り・ベージュに朱赤と金茶

Colors

• 地は生成り・くすみピンク・白を章ごとに切り替える
• 朱赤は帯見出し・タグ・本文中の強調文に限定
• 金茶はメダルとこだわり番号の装飾に使う
• 商品一覧は白地にして写真と食材イラストを見せる
• 効能タグは朱赤・からし・淡オリーブで分類
• rank-medal は文字 #463928 × 背景 #BD8C67 のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C69C7C、4.5:1）を使う。

Typography

• 見出しは明朝、本文はゴシックで分ける
• 強調文は朱赤の太字にする
• 実績の大数字は太ゴシックの赤
• 手書き書体は吹き出しだけに使う
• 見出しは中央揃え、本文は左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。食材カードは 3 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• こだわりは番号メダル→小見出し→大見出し→本文→写真の順
• 写真は片側の画面端まで裁ち落とす
• 商品は左に丸写真、右に名前・タグ・説明
• 食材は角丸枠の3列カードで並べる
• 商品間は細い横線で区切る

Elevation & Depth

• 基本はフラットで影なし
• 声カードは白地に薄い影を敷く
• メダルは金のグラデーションで立体的に見せる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は円形、こだわり写真はひし形か片側角丸の裁ち落とし
• セクション境界: 大きな弧と直線の色面切替
• こだわり番号は花形枠の円メダル
• 無添加項目は細線の円で3つ並べる
• 内容量・カロリーは写真に重ねる小さな円バッジ
• タグは角丸小の長方形

Components

• 朱赤帯見出し（ribbon-headline）: 画面幅いっぱいの朱赤帯に白い明朝の2行見出し
• 金メダル（rank-medal）: 月桂樹と金メダルにNo.1、赤リボンで部門名
• お客様の声カード（voice-card）: 左に線画の顔アイコンと年代、右に本文。一部は朱赤で強調
• こだわり番号メダル（point-number）: リボン付きの白い花形円に小見出しと大きな番号
• 写真上ラベル（photo-label）: 写真の左上に白地の明朝見出しを2段で重ねる
• 効能タグ（benefit-tag）: 商品名の下に並ぶ小さな色付きタグ
• 食材カード（ingredient-card）: 角丸線枠の中に手描き食材イラストと名称
• カロリーバッジ（kcal-badge）: 写真に重ねる白円のkcalと朱赤円の内容量
• 手書き吹き出し（handwritten-bubble）: 写真上に手書き文字の白い丸吹き出し

Do's and Don'ts

Do - 和柄の薄い地紋を生成り地に敷く - 見出しは明朝で字間を広めにとる - 食材は水彩風の手描きイラストで見せる - 朱赤は帯・タグ・強調文に絞る - 湯気の立つ器のアップ写真を大きく置く

Don't - 原色の青や緑を使わない - ポップな丸ゴシックで見出しを組まない - ゴシックの大見出しを多用しない - 白地だけで和紙感をなくさない - 強いドロップシャドウを付けない

Page Structure

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

1. ファーストビュー（商品の魅力と実績を一目で伝える）: 具だくさんの器アップに明朝の大キャッチ、上部に金の円バッジ3つ、下部は赤い立体文字
2. ランキング実績（信頼感を出す）: 和柄の生成り地に赤の大数字と金メダル2つ
3. お客様の声（共感と安心）: 朱赤リボン見出しの下に顔アイコン付き白カードを3枚
4. おいしさの提起（味へのこだわり導入）: 斜線の装飾と明朝の大見出し、周りを手描きスパイスが囲む器写真
5. こだわり01 手作り（製法の訴求）: 番号メダルとひし形写真コラージュ、写真上ラベル
6. こだわり02 地元食材（素材の訴求）: 右に丸ざる写真、下に風景と生産者の写真グリッド
7. 急速冷凍（鮮度の訴求）: 冷凍野菜の裁ち落とし写真に白ラベル見出し
8. こだわり03 低カロリー無添加（健康面の訴求）: 管理栄養士の写真、無添加項目の赤線円3つ、手書き吹き出し付きの器写真
9. 発酵×和漢食材（素材の世界観）: 食材写真を暗く敷き、白文字の見出しと円形写真
10. 商品ラインナップ（種類を選ぶ楽しさ）: 朱赤帯の見出しのあと、丸写真・タグ・説明・食材3列グリッドを繰り返す

Imagery

• 湯気のある器を真上か斜め上から寄りで撮る
• 暖色の自然光で具材の色を見せる
• 食材は水彩タッチの手描きイラスト
• 白衣の調理スタッフを明るい厨房で撮る
• 人物アイコンは朱赤の細い線画を円の中に描く
• 背景に麻の葉など薄い和柄
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPCでも狭い1カラムの縦長構成。SPもそのまま1カラムで組む
• PCは中央に固定幅のカラムを置き、左右の余白は章の地色で塗る
• 食材カードはSPでも3列を保つ
• 商品の丸写真はSPで幅40%程度

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