DESIGN.md — 斜め帯×淡ピンクグレーのプロテイン食品LP（Diagonal Pastel Protein Food LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型、ポップ・元気
• キーワード: 斜め帯・パステル・英字極太見出し・サーモン強調・白カード・フレーバー色分け
• 地の質感: フラットな単色面。白カードにごく薄い影を付ける
• 形: 角丸なしの四角いカードと斜めのセクション境界。フレーバーを示す円だけが丸い
• 温度感: やや暖かい。淡いピンクとニュートラルなグレーの組み合わせ

Colors

• 白・淡グレー・淡ピンクの地を、斜めの境界で交互に切り替える
• 強調はサーモン赤の文字だけで行い、面には使わない
• 番号・数値・グラフの主要な線をサーモン赤にする
• 商品ごとにピンク・オレンジ・赤・緑の淡い色を割り当てて、カード地にする
• 本文は黒に近い色で統一し、注釈はグレーで小さく入れる

Typography

• セクションの見出しは英字の極太大文字にし、下に日本語の小見出しを添える
• 訴求文は中央揃えにし、キーワードだけを赤で大きくする
• 番号は細身で大きく、赤で入れる
• 見出しを＼ ／ の斜線で挟む装飾を使う
• 本文は行間を広めにとり、左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツは中央寄せの狭めの幅にまとめる
• ポイント解説は写真とテキストを左右交互に並べる（SPでは縦積み）
• セクション間は斜めの帯でつなぎ、余白を広くとる
• 解説カードは縦に積み、カード同士の間隔は16px前後にする
• 販売店のロゴは白いボックスに入れて横に並べる

Elevation & Depth

• 白カードにはぼかしの小さい薄い影（0 2px 6px rgba(0,0,0,.08)）を付ける
• 商品バナーにも同じ薄い影を付ける
• それ以外はフラットにする

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンはピル型。
• 写真の切り抜き: 写真は四角か、斜めの平行四辺形に切り抜く。商品パッケージは切り抜きで配置する
• セクション境界: 斜めの直線（片側を約8〜10%下げる）で色面を切り替える
• カードは角丸なしの四角にする
• フレーバーは正円で色分けする
• 小さなナビボタンだけをピル型にする
• グラフのバーやバッジには赤い円バッジを使ってよい

Components

• 英字セクション見出し（section-title-en）: 極太の英大文字に日本語の小見出しを添えて、中央に置く
• 番号付き解説カード（numbered-card）: 左に大きな赤い細字番号、右に見出しと本文を置いた白カード
• フレーバー別商品カード（flavor-card）: 淡い色の地に、見出し・商品画像・赤い円の含有量バッジを載せる
• POINT番号見出し（point-label）: POINTの英字と大きな番号に下線を引き、グレーの帯の上に重ねる
• フレーバー円（flavor-circle）: 味ごとの色で塗った正円に、白文字で味の名前を入れる
• 商品バナー（product-banner）: 横長カードの片側に写真、もう片側に商品画像・斜体の見出し・特長タグを配置。右下に詳細ボタンを付ける
• 斜線囲み見出し（slash-heading）: ＼ ／ で挟んだ中央揃えの小見出し
• 販売店ロゴボックス（store-logo-box）: 白い四角の中に通販サイトのロゴを入れて横に並べる
• ナビボタン（nav-pill）: 小さな白いピル型ボタン。現在地のボタンは黒地にする

Do's and Don'ts

Do - セクションの境界は斜めの色面で切り替える - 強調はサーモン赤の文字に限定する - 商品ごとのパステル色を一貫して使う - データはグラフや数値で示し、出典を注釈で添える - 英字見出しと日本語小見出しを必ず対にする

Don't - 濃い色をセクションの地として広く塗らない - カードに大きな角丸を付けない - 赤を面いっぱいに塗らない - 明朝体や手書き書体を混ぜない - セクション境界に波線や曲線を使わない

Page Structure

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

1. ファーストビュー（商品の価値と商品ラインナップを示す）: 淡い背景の左にロゴと商品パッケージ、右に女性の写真。中央に太字のコピーを置き、強調部分を大きくする
2. ナビゲーション（ページ内を移動しやすくする）: グレーの帯の上に小さなピル型ボタンを横に並べる
3. ABOUT・課題データ（栄養素の大切さと不足していることを伝える）: 英字見出しの下、斜めのグレー帯の上に番号付きの白カードを3枚積む。3枚目には折れ線グラフを入れる
4. 商品の選び方（悩みに合った商品を選ばせる）: 赤で強調した訴求文と斜線囲み見出しの下に、フレーバー色のカードを2×2で並べる
5. 食生活の提案（取り入れ方と効果を数値で示す）: ピンクの地の上に白カードを置き、比較の棒グラフ、アイコン付きのまとめ帯を入れる
6. 特長POINT（3つの特長を訴求する）: POINT番号の見出しとテキストを、商品画像・フレーバー円・斜めに切った写真と左右交互に配置する
7. 商品紹介（各商品の詳細へ誘導する）: 英字見出しの下に、写真と商品を組み合わせた横長バナーを4本縦に並べる
8. 関連コンテンツ（レシピなどの回遊を促す）: ピンクの斜め帯の上に、斜線囲み見出しとサムネイルカードを1枚置く
9. 販売店（購入先へ誘導する）: 英字見出しの下に、白いロゴボックスを3つ横に並べる
10. フッター（サイト内リンクと関連ブランドを示す）: 白地にリンク列とSNSアイコンを小さな文字で並べる

Imagery

• 自然光の明るい室内で、白い服の女性が微笑む爽やかな写真を使う
• 商品パッケージは影なしの切り抜きで並べる
• 果物を添えた、フレーバー色の写真やカードにする
• グラフは細い線とパステル色で描く
• アイコンは赤い細線で描いたシンプルなものにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは1カラムにし、ポイントの写真とテキストは縦に積む
• 商品カードはSPでも2列か1列にし、バッジは小さくする
• 英字見出しはSPで30px前後にする
• 斜めの境界はSPでは角度を浅くする
• PCでは中央の幅を約60%に絞り、左右の地は帯の色のまま見せる

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