DESIGN.md — 生成り×サーモン赤の家族向け食品 LP（Warm Cream Family Food Allergy-Friendly LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、かわいい、信頼・誠実
• キーワード: 生成り・サーモン赤・点線枠・手描き線画・ギンガムチェック・家族の食卓
• 地の質感: クリーム地に細かいドット柄や格子柄をうっすら敷いた、紙のような温かい質感
• 形: 角丸カード・ピル型ボタン・円形に切り抜いた料理写真・点線の囲み
• 温度感: 暖色寄りでやわらかく明るい

Colors

• 地はクリーム色を基本にし、商品紹介は白地、レシピ帯はベージュのギンガム柄にしてセクションを分ける
• 大見出しとボタンはサーモン赤だけを使う
• オレンジはカードの見出し帯・ピル型ラベル・本文中の強調語に限る
• 緑の強調は 1 セクションにつき 1 か所までにする
• 本文は黒ではなくこげ茶にして柔らかさを保つ
• 枠線は淡いベージュの点線にする
• button-primary は文字 #FFFFFF × 背景 #FD6B6B のコントラスト比が 2.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#ED0303、4.55:1）を使う。
• button-wide は文字 #FFFFFF × 背景 #CE6855 のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C64F39、4.59:1）を使う。
• anchor-nav は文字 #CE6855 × 背景 #FFF4F3 のコントラスト比が 3.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C64F39、4.55:1）を使う。
• label-pill は文字 #FFFFFF × 背景 #FE9401 のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#AD6501、4.53:1）を使う。
• recipe-panel は文字 #CE6855 × 背景 #FDF9F6 のコントラスト比が 3.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C64F39、4.52:1）を使う。

Typography

• 本文は中央揃えにし、短めの行で改行する
• 大見出しの下には赤の点線を引く
• 大見出しの上に小さな線画イラストを置く
• 強調したい語は色だけで目立たせ、太さは変えない
• 字間を広めにとってやさしい印象を出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列、料理写真は 2 列のグリッドに並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは「イラスト → 見出し → 点線 → リード文」の順で組む
• カードは等幅で並べ、下端にボタンをそろえる
• 商品カードは「写真 → 小見出し → 商品名 → 説明 → ボタン」の順にする
• レシピは商品ごとに角丸の白パネルにまとめ、幅いっぱいのボタンで閉じる
• PC でもコンテンツ幅は約 750px の中央寄せにする

Elevation & Depth

• 影はほぼ使わず、点線枠と色面で階層をつける
• ナビボタンには淡いピンクの面と細い枠線だけを使う
• 円形の料理写真には白フチを付ける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 料理は白フチ付きの円形、人物と商品は線画または切り抜き
• セクション境界: 直線で切り替え、背景色や柄の変化で区切る
• カードは角丸 12px で、ベージュの点線枠を付ける
• ボタンはピル型か角丸 8px で、右端に丸い矢印アイコンを付ける
• 番号はオレンジの小さな旗型バッジにする

Components

• 詳細ボタン（button-primary）: サーモン赤の面に白文字。右端に白丸の矢印を付ける
• 幅広レシピボタン（button-wide）: パネル幅いっぱいの 2 行ボタン
• 目次ナビボタン（anchor-nav）: 淡ピンクのピル型ボタンの上に小さなイラストを載せる
• イラスト付き大見出し（heading-section）: 線画イラスト・赤の見出し・点線下線を中央に縦に並べる
• オレンジのピル型ラベル（label-pill）: 小見出し用。オレンジの面に白文字
• 見出し帯付きカード（card-header）: 上部がオレンジの帯、本体が白でイラストとボタンを入れる
• 番号付きポイントカード（card-point）: 点線枠の白カード。上端にオレンジの番号バッジを付ける
• レシピパネル（recipe-panel）: ギンガム柄の上に置く白パネル。円形の料理写真と商品の切り抜きを入れる
• アイコンタイル列（icon-grid）: 色ごとに分けた角丸の正方形アイコンを横に並べ、点線枠で囲む

Do's and Don'ts

Do - 見出しの上に必ず小さな線画イラストを添える - カードは点線枠と角丸で柔らかく見せる - 料理写真は白フチ付きの円形にそろえる - ボタンにはすべて丸い矢印アイコンを付けて統一する - 本文の強調はオレンジか緑の文字色で行う

Don't - 黒文字や純黒の面は使わない - 濃い影や鋭い角の箱は使わない - 寒色を主役にしない - 本文を長い左揃えの段落にしない - 強調色を 1 画面に 3 色以上並べない

Page Structure

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

1. ファーストビュー（商品の世界観と安心感を伝える）: 左にロゴと商品パッケージ、右に湯気の立つ料理写真。ピンクのリボン付きキャッチを重ねる
2. 目次ナビ（各セクションへ案内する）: イラスト付きの淡ピンクのピル型ボタンを 3+2 個並べる
3. ブランドの説明（シリーズのコンセプトを伝える）: 中央揃えの本文と色強調。最後に家族の食卓の線画イラストを置く
4. 対象項目の一覧（対応範囲をひと目で示す）: 点線枠の中に多色アイコンを横一列に並べ、下に注釈を添える
5. 取り組み紹介（企業の信頼性を示す）: オレンジの見出し帯付きカードを 4 枚。各カードにイラストと詳細ボタンを入れる
6. こだわりポイント（商品の特長を伝える）: 番号バッジ付きの点線カードを 3+2 枚並べる
7. 商品ラインナップ（商品を比べて選んでもらう）: 白地にピル型ラベル、商品写真・商品名（赤）・説明・ボタンの 3 列
8. 対象別のおすすめ商品（別の対象向けの商品を見せる）: ラベルの下に写真と説明を横に並べて 1 商品を紹介する
9. アレンジレシピ（使い方を広げて購入を後押しする）: ギンガム柄の地に、商品ごとの白パネルを置く。円形の料理写真 4 枚と幅広ボタンを入れる

Imagery

• 人物は細い茶色の線と淡い水彩風の塗りで描いたイラストにする
• 料理は真上から明るく撮り、円形に切り抜く
• 商品パッケージは白背景で切り抜き、少し傾けて置く
• 見出しの装飾には小さなハートや家族の線画を使う
• 背景には淡いベージュのギンガム柄や細かいドットを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 750px の幅で組み、外側は淡いグレーにする
• SP ではカードを 2 列、商品は 1 列にする
• レシピ写真は SP で 2×2 のグリッドにする
• 目次ナビは SP で 2 列のピル型ボタンにする
• PC では文字を約 1.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 行書くと起動時に読み込まれる。