DESIGN.md — クリーム色×黄×赤の乳製品ブランドLP（Creamy Beige and Yellow Dairy Brand LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、ナチュラル
• キーワード: クリーム色・ミルク感・黄色と赤・焦げ茶の見出し・波形境界・白カード
• 地の質感: フラットな生成り地。ところどころにミルクが流れるような淡いグラデーション写真を敷く
• 形: 角丸カード、ピル型の線ボタン、円形の料理写真、緩い波線のセクション境界
• 温度感: 暖色寄り。乳白とベージュでまろやかに温かい

Colors

• 地はクリーム色と白をセクション単位で交互にし、境界は波線でつなぐ
• 見出しは焦げ茶、キャッチ的な強調文と小見出しは赤
• 黄は FV とバナーの背景に限定し、面で使う
• 赤はバナー下の影線・矢印丸・トップへ戻るボタンなど小面積の強調に使う
• 汎用ボタンは塗らず、白地に金茶の線と文字のピル型にする
• button-outline は文字 #94805F × 背景 #FFFFFF のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#867456、4.52:1）を使う。

Typography

• 大見出しは英字ラベル＋和文見出しの 2 段で中央揃え
• 大見出しは焦げ茶の丸ゴシックで大きく、太すぎないウエイト
• 本文は行間 2 前後でゆったり組む
• 赤文字は訴求コピーと注釈に限定する
• バナー文字は太字の赤で字間を広めに
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品一覧のみ 2 カラム、レシピ写真は 2×2
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• セクション上下の余白は大きくとり、詰め込まない
• 大見出しは中央、本文は左揃え（レシピ紹介は中央揃え）
• 商品は画像→商品名→説明→詳細ボタンの縦並び
• ナビはFV直下に白カードで3項目を縦並び
• 右下に赤丸のトップへ戻るボタンを固定

Elevation & Depth

• 影はほぼ使わずフラット
• バナーは右と下にずらした赤い帯で立体感を出す
• 白カードは影なしで地色との差だけで浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き、料理写真は正円、バナー内は斜めや曲線で切る
• セクション境界: 緩い波線でクリーム地と白地を切り替える
• 汎用ボタンはピル型の線ボタン
• カードの角丸は 8〜12px
• バナーは曲線で黄と白の面を分ける

Components

• ナビカード（nav-card）: 白の角丸カードに和文項目と英字小ラベルを3行並べ、薄い線で区切る
• 写真付きバナーリンク（banner-link）: 黄と白を曲線で分けた横長バナー。片側に商品や素材の写真、赤字の題名と赤丸の矢印。下右に赤い影帯
• ピル型の線ボタン（button-outline）: 白地に金茶の細い線と文字、右に細い矢印
• 吹き出しバッジ（speech-bubble）: 濃茶の吹き出しに白抜きの短い言葉。横に赤線のイラスト円を添える
• 2段見出し（section-heading）: 英字ラベルの下に大きな焦げ茶の和文見出しを中央揃え
• レシピカード（recipe-card）: 白カード内に小アイコンと赤い題名、料理写真とキャラメル色の誘導パネルを左右に並べる
• トップへ戻るボタン（pagetop）: 赤い正円に白い山形矢印、右下固定

Do's and Don'ts

Do - 地色はクリームと白の2色で切り替え、境界を波線にする - 黄は面、赤は点で使い分ける - 見出しは英字ラベル＋和文の2段で中央に置く - 余白を広くとり、ゆったり見せる - 料理写真は正円で 2×2 に並べる

Don't - 黒や純グレーの見出しにしない（焦げ茶を使う） - 汎用ボタンを赤や黄で塗りつぶさない - 強い影やグラデーションボタンを使わない - 角張った直線の境界にしない - 赤を広い面で使わない

Page Structure

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

1. ヘッダー（企業ロゴ表示）: 白地の細い帯に左ロゴのみ
2. ファーストビュー（ブランド認知と世界観）: 黄色の面にロゴと商品パッケージとキャッチ、その下に生活シーンの人物写真を全幅で
3. ページ内ナビ（主要セクションへの誘導）: クリーム地に白の角丸カードで3項目
4. ブランド紹介（商品の独自性を伝える）: 2段見出し、ミルク背景に商品切り抜き、吹き出し＋イラスト、赤い大キャッチと注釈、本文
5. 詳細ページへのバナー（深掘りコンテンツへ誘導）: 写真付きの黄白バナーを大1つと小2つ縦に並べる
6. 商品ラインアップ（商品の比較と選択）: 白地に2カラムで商品画像・商品名・説明・ピル型詳細ボタン、末尾に赤字の注意リンク
7. アレンジレシピ（飲料以外の用途提案）: クリーム地に円形料理写真2×2、赤の小見出し、中央揃え本文、線ボタン
8. レシピピックアップ（個別レシピへの誘導）: 白カード内に写真とキャラメル色の誘導パネル
9. フッター（規約・問い合わせ・コピーライト）: 白地に灰茶の小さな文字リンクを縦線区切りで並べる

Imagery

• 商品パッケージは白背景で切り抜き、正面かやや斜めから撮る
• 生活シーンは明るい自然光の室内で、白いシャツの人がカップを持つ穏やかな写真
• 背景にミルクが流れるような乳白色の柔らかい曲線写真を淡く敷く
• 料理写真は寄りで撮り、正円で切り抜く
• イラストは赤の線画1色で人物を描いた素朴なタッチ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の FV は左に黄色の面＋ロゴ＋商品、右に人物写真の左右分割
• PC のナビは横並びのピル型白バー1本
• PC のブランド紹介は商品画像左・テキスト右の2カラム
• PC の商品一覧は4カラム横並び
• PC のレシピ写真は4つ横1列
• コンテンツ幅は PC で約 65% に絞り、余白を広く残す

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