DESIGN.md — 黄色の波形と線画の食品プロテインLP（Yellow Wave Kitchen Protein LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ポップ・元気、ナチュラル、親しみ・手作り感、シンプル・ミニマル
• キーワード: 黄色の波形・生成り地・線画イラスト・欧文見出し・黄色マーカー・黒パッケージ
• 地の質感: 生成りのフラット地に、薄い方眼紙・手描きの食材線画・紙クリップなどアナログな質感を重ねる
• 形: 有機的な曲線の波形で面を区切り、帯見出しは斜めに傾けた黄色の短冊
• 温度感: 暖色寄り。黄色と生成りで朝食のような明るい温かさ

Colors

• 地は生成りと黄色を波形で交互に切り替える
• 黄色は面・帯見出し・マーカーに使い、文字色には使わない
• 文字は基本黒。黒帯には白文字
• 橙はチェックと注意文だけに限定
• 写真の黒パッケージと黄色で強いコントラストを作る
• フッターは白地にして本編と区切る

Typography

• 見出しは大きな欧文+上に小さな和文ラベルの2段
• 欧文見出しの左右に細い罫線を伸ばす
• 本文は中央揃え、行間2.0でゆったり
• 要点の一文に黄色マーカー下線
• 特長番号は手書き風の細い欧文数字を薄く重ねる
• フレーバー名は欧文大文字2行+和文名、横に太い縦線
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右に余白を取った横長配置
• フレーバー紹介はパッケージ写真と名前を左右交互
• 特長は帯見出し→写真→本文の繰り返し
• 方眼紙カードは画面幅いっぱいでわずかに傾ける
• 装飾線画は端からはみ出して配置

Elevation & Depth

• パッケージ写真に柔らかいドロップシャドウ
• 方眼紙カードに薄い影で紙が浮いた表現
• ボタンは影を少しつけて浮かせる
• それ以外はフラット

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸ほぼなしの横長矩形。商品は切り抜きで食材と重ねる
• セクション境界: 黄色と生成りの大きな有機的な波形カーブ
• 帯見出しは少し傾けた黄色の短冊
• 情報ボックスは黄色の太枠+角丸
• ボタンは黒細線のピル型
• チェックボックス型アイコンで手順を表示

Components

• ピル型詳細ボタン（button-view-more）: 白地に黒細線のピル型。欧文ラベルと右矢印
• 罫線付き欧文見出し（heading-en-lined）: 小さな和文ラベルの下に大きな欧文、左右に細い罫線
• 黒帯ラベル（label-black-band）: FV上部の告知を黒帯に白文字で載せる
• 黄色短冊の番号見出し（feature-band-heading）: 傾いた黄色帯に太字見出し、左上に手書き風番号
• 方眼紙カード（grid-paper-card）: 白い方眼紙を少し傾け、紙クリップ装飾を付ける
• 黄色枠の説明ボックス（info-box-yellow）: 黄色の太枠角丸。罫線付き見出し、本文、橙の注意文、写真
• チェック付き手順（check-step）: 黄色の小ラベル+橙チェックアイコン+太字の手順文
• 黄色マーカー（text-marker）: 本文の要点に下半分だけ黄色を敷く

Do's and Don'ts

Do - 黄色と生成りを波形で大胆に切り替える - 食材の線画を余白に散らして手作り感を出す - 見出しは欧文大+和文小の組み合わせにする - 本文は中央揃えで短く改行する - 商品写真は切り抜いて食材写真と重ねる

Don't - 黄色を文字色に使わない - 直線的な色面の区切りにしない - 寒色やビビッドな別の色を足さない - 本文を長い段落で詰めない - 装飾に重い影やグラデーションを使わない

Page Structure

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

1. ファーストビュー（再販告知と商品・味の提示）: 黄色波形の地に黒帯ラベル、大型欧文商品名、2袋の切り抜きと料理写真、下に2フレーバー名を縦線で区切る
2. 開発者の想い（商品開発の背景を伝える）: 線画料理イラスト、罫線付き欧文見出し、中央揃え短文にマーカー、横長の商品棚写真
3. お召し上がり方（飲み方を2通り示す）: 傾いた方眼紙カードにチェック手順2つ、線画のボトルとカップ、手書き風吹き出し
4. 作り方（分量と注意点の説明）: 黄色太枠ボックスに本文、橙の注意文、マスキングテープ風の写真
5. 特長（3つの強みを提示）: 生成り地に番号付き黄色短冊見出し→横長写真→マーカー入り本文を3回繰り返す
6. フレーバー紹介（各味の魅力と詳細誘導）: 黄色と生成りの面で味ごとに切り替え、パッケージと料理写真、欧文名、本文、ピル型ボタン
7. フッター（サイト導線と規約）: 白地に欧文ナビ4列、SNSアイコン、規約リンク、ロゴ、コピーライト

Imagery

• 料理写真は木のテーブルやグレーの石の上で暖色光の真俯瞰・斜め俯瞰
• 商品パッケージは黒基調で切り抜き、影を付けて浮かせる
• コーンや野菜、クラッカーなど食材を切り抜いて周囲に散らす
• 食材や器のモノクロ線画を余白に大きく配置
• 写真の上に手描きの湯気・きらめき線を添える
• 紙クリップやマスキングテープでアナログ感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため SP 基準で推奨を示す
• PC では本文幅を 960px 程度に収め、波形の背景は全幅に広げる
• 特長は写真と本文を左右 2 カラムで交互に配置
• フレーバー紹介は 2 列で横に並べる
• 欧文見出しは 56〜72px まで拡大
• フッターのナビは 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 行書くと起動時に読み込まれる。