DESIGN.md — 紅赤×和紙クリームの調味料キャンペーンLP（Crimson Red & Washi Cream Seasoning Campaign LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 親しみ・手作り感、和風、ポップ・元気、情報量多め・訴求型
• キーワード: 紅赤・和紙テクスチャ・リボン見出し・レシピカード・商品ボトル切り抜き・吹き出し
• 地の質感: クリーム地に和紙のような細かい繊維ノイズを乗せる。赤面はベタ塗り。
• 形: 角丸の大きい赤枠カード、ピル型ボタン、円形バッジ、燕尾リボン、波形のセクション境界。
• 温度感: 暖色寄り。赤と生成りで食卓の温かみを出す。

Colors

• 地はクリーム（和紙調）と紅赤を交互に置き、セクションの切り替えをはっきりさせる。
• 見出しはすべて赤のリボンか赤い帯に白抜き文字で入れる。
• レシピカードは白地に赤い2px線と大きな角丸をつける。
• 本文の文字色は黒ではなく赤系か焦げ茶にして、暖色でまとめる。
• 多色になるのは商品ボトルだけで、UIの色は赤・白・クリームに限る。

Typography

• 書体は太めの丸ゴシックでそろえ、明朝は使わない。
• 見出しは中央揃えで白抜きにする。
• レシピ名は2行の中央揃えで改行位置を整える。
• FVのキャッチだけは縦書きの手書き風にし、傍点をつける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。レシピは 2 カラムのグリッド（最後が奇数なら中央に寄せる）
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 動画は画面幅いっぱいに表示し、下にタイトルを中央に置く。
• レシピは用途ごとに赤枠カードでまとめ、左上に円形バッジを少しはみ出させる。
• 商品ボトルの切り抜きをカードの端からはみ出すように散らす。
• 赤セクションの上下は緩い波形で区切る。

Elevation & Depth

• 影はほとんど使わず、平面的に作る。
• ボトルの切り抜きには白いフチと薄いドロップシャドウをつける。
• 円形バッジに薄い影を落として浮かせる。

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: レシピ写真は角丸10pxの横長4:3。FVは全幅の角丸写真。
• セクション境界: 赤セクションの上下は緩い波形の曲線で区切る。
• 見出しは燕尾リボンか、下に三角の切り込みがある赤帯にする。
• 使用商品のラベルは左右を丸括弧の線で囲む。
• FVの容量表示は赤い楕円バッジに入れる。

Components

• 燕尾リボン見出し（ribbon-heading）: 画面幅いっぱいに渡る赤いリボン。両端が燕尾で、折り返し部分は濃い赤にする。
• 吹き出し型の赤帯見出し（tab-heading）: 角丸の赤帯で、下中央に三角をつける。動画セクションの見出しに使う。
• 白縁ピルボタン（button-primary）: 赤地に白い線のピル型ボタン。右に＞の矢印を置く。
• 赤枠レシピカード（recipe-card-group）: 白地に赤い2px線と角丸20pxのカード。中に写真とレシピ名を2カラムで並べ、写真の右下にCLICKの小ラベルを置く。
• 用途の円形バッジ（circle-badge）: 白縁の赤い円に白文字を3行入れ、カードの左上からはみ出させる。
• 白い吹き出し（speech-bubble）: 白い円形の吹き出しに赤い太字を入れ、人物の口元へしっぽを向ける。
• 括弧つき商品ラベル（paren-label）: 使用商品名を左右の丸括弧の線で囲む。2商品なら間に赤い丸で「もしくは」を挟む。
• 白ピルのリード（pill-tag）: 赤地の上に置く白いピル。赤文字でサブコピーを入れる。
• 締めの赤バナー（closing-banner）: 角丸の赤バナー。左に白文字のコピー、右に商品ボトルを並べる。

Do's and Don'ts

Do - 赤とクリームの地を交互に置き、メリハリをつける。 - 商品ボトルの切り抜きをカードの端や余白に散らして賑やかにする。 - 見出しにはリボンか赤帯の装飾を必ずつける。 - レシピ写真は明るい自然光の俯瞰か斜め上から撮ったものを使う。 - 文字は太めの丸ゴシックで親しみを出す。

Don't - 寒色やグレーの地を使わない。 - 細い明朝体で高級感を出そうとしない。 - 影の強いカードを使わない。 - 赤以外の色をボタンに使わない。 - 白地を広く取りすぎて余白だらけにしない。

Page Structure

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

1. ファーストビュー（人物と商品で印象づけ、容量の良さを伝える）: 料理の前で笑う人物の写真に縦書きの手書きキャッチを重ね、下に円形バッジと商品ラインナップを並べる。
2. CM動画（広告動画を見てもらう）: クリーム地に三角つきの赤帯見出しを置き、全幅の動画3本を縦に並べて、それぞれに赤文字タイトルをつける。
3. 商品訴求（サイズと鮮度のメリットを伝え、商品情報へ誘導する）: 上下が波形の赤セクション。白ピルのリード、波線つきの大見出し、説明文、ボトル列、指さす人物、白い吹き出し、ピルボタンを置く。
4. おすすめレシピ（かけ用途）（食卓での使い方を提案する）: 燕尾リボンの見出しの下に、円形バッジつきの赤枠カードを置き、レシピを2カラムで2件並べる。
5. おすすめレシピ（調理用途）（料理での使い方を提案する）: 同じ型の赤枠カードに、2カラムで5件並べる（最後の1件は中央に置く）。周囲にボトルを散らす。
6. 締めバナー（シリーズを再訴求する）: 角丸の赤バナーに白文字のコピー、エコのマーク、ボトルの列を並べる。

Imagery

• 人物は家庭の台所を背景に、明るい自然光で正面から撮る。
• 料理写真は白や木の器に盛り、彩りよく少し俯瞰で撮る。
• 商品ボトルは白フチの切り抜きにして、少し傾けて配置する。
• 背景には和紙のような繊維テクスチャを薄く敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約480〜600px幅のカラムを置き、左右には和紙調の地を広げる。
• PCの動画は全幅にせず、左右に余白を取る。
• PCのレシピも2カラムのまま、ボトルの装飾を左右の余白へはみ出させる。
• PCの赤セクションと波形は画面幅いっぱいまで広げる。

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