DESIGN.md — 生成り×チャコールの紅茶系プロテイン LP（Cream and Charcoal Tea Protein LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ナチュラル、上品・高級、清潔・爽やか、やさしい・柔らかい
• キーワード: 生成り・チャコール・紅茶オレンジ・細い欧文見出し・波形区切り・切り抜き写真
• 地の質感: 平塗りの面に、氷・茶葉・葉っぱの切り抜き写真を浮かせる。紙クリップや柔らかい影で軽い立体感をつける
• 形: 角丸カードと円形バッジ、波形やV字のセクション境界、細い曲線のライン
• 温度感: 暖かめ（クリームとオレンジ）に、チャコールで締めた中間の温度

Colors

• 白・生成り・チャコールの3つの地を、セクションごとに入れ替えてリズムを作る
• 強調色の紅茶オレンジは、ドット・Q記号・カード上の帯など小さい面だけに使う
• 番号やサブ見出しは、ゴールドやベージュ系で控えめに目立たせる
• 本文中の大事な語句は、黄色やアプリコットのマーカーを文字の下半分に敷いて強調する
• 濃色セクションの文字は白、生成りセクションの文字はチャコールで統一する
• フレーバーごとに写真の色（オレンジ・黄・緑）を変え、見分けやすくする

Typography

• 英字の大見出しは極細ウェイトで大きく置き、すぐ下に日本語の小見出しを添える
• 見出しでは大事な語だけ文字を大きくし、助詞は小さくする
• 本文は行間を約2.2と広く取り、字間も少し開ける
• 数字はほかの文字より大きく太くして目立たせる
• ブランドの英字は、太字と細字を組み合わせて強弱をつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（手順は 2×2 グリッド、お客様の声は横スライダー）
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約24px
• セクションの区切りは波形かV字で地の色を切り替える
• 利用シーンは写真と文字を左右交互に置き、細い曲線でつなぐ
• フレーバー紹介は写真ヘッダー＋商品画像＋説明＋価格の順に縦に並べる
• 見出しの前後は64〜96pxあけてゆったりさせる

Elevation & Depth

• カードには下方向にぼかした薄い影をつける
• 商品パッケージの画像にはやわらかい影を落とす
• 濃色の四角いパネルに紙クリップの画像を重ね、浮かせて見せる
• それ以外の面は平塗りで、影をつけない

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 四角か角丸に切り抜き、一部は画面端まで裁ち落とす。氷・茶葉・葉は背景を抜いて配置する
• セクション境界: なめらかな波形の曲線、またはV字の切り込み
• 特長を示すバッジは細線の円形にする
• フレーバーのヘッダーは上の左右だけ大きく角を丸める
• FAQやカードは12px前後の角丸にする
• 直線の区切りは細い1pxの線を使う

Components

• 英字の大見出し（section-title-en）: 極細の欧文を大きく置き、下に日本語の小見出しを添える。英字の下にマーカーを敷く場合もある
• チェックリストのパネル（check-panel）: チャコールの四角いパネルに白文字の項目を並べ、オレンジのチェックアイコンをつける。紙クリップを重ねる
• 番号つきの円形バッジ（circle-badge）: 細い線の円の中に、ゴールドの番号と短い特長を入れる。少しずつずらして重ねる
• 特長の番号見出し（feature-number）: 小さな欧文を円弧状に並べ、その下にゴールドの大きな数字、見出し、短い線を縦に置く
• お客様の声のカード（voice-card）: 上辺に色帯がある白いカード。中央にイラストのアバター、属性、本文を入れ、ドットとページ番号で送る
• 斜線つきのキャッチ帯（slash-heading）: 左右を斜線ではさみ、背景にアプリコットの帯を敷いた短いキャッチ
• 手順カード（step-card）: 白い四角に大きな薄グレーの番号と線画イラスト、説明を入れ、2×2で並べる
• FAQのアコーディオン（faq-item）: 淡いピーチの面に、オレンジのQ、質問文、右端の細い＋を置く
• 黒いピル型のラベル（button-pill-dark）: 補足を伝えるチャコールのピル型ラベルに白文字を入れる

Do's and Don'ts

Do - 白・生成り・チャコールの地を交互に置き、波形でつなぐ - 英字見出しは極細で大きく、日本語は小さく添える - 氷や茶葉、葉っぱの切り抜き写真を余白に散らして季節感を出す - 強調したい語句には黄色のマーカーを敷く - お客様の声には実写ではなくシンプルなイラストのアバターを使う

Don't - オレンジを広い面に使わない - 見出しを太いゴシックで埋め尽くさない - セクションの境界を直線ばかりにしない - 本文の行間を詰めない - 原色の青や赤を差し色に使わない

Page Structure

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

1. ファーストビュー（商品の新しさと価格を伝える）: クリーム地に英字ロゴと黒帯の小見出しを置き、氷入りの飲み物写真に商品パッケージ3つを重ねる。価格は白い大きな数字で見せる
2. コンセプト訴求（お茶のように飲めることを伝える）: 大小の文字を組み合わせた見出しと細い区切り線を置く。グラスの写真の横にマーカー付きの本文を添える
3. 基礎知識（商品が果たす役割を整理する）: 紙クリップをつけたチャコールのパネルに、チェック項目を4つ並べる
4. こだわり概要（こだわりの3点を一覧で見せる）: 生成り地に円形の番号バッジ3つと商品画像を置き、V字の区切りで濃色へ切り替える
5. 特長の詳細（特長を1つずつ説明する）: チャコール地に番号見出し、本文、横長の写真、注釈の順で3回繰り返す
6. 美味しさの理由（原料の独自性を伝える）: 白抜きの英字を背景に敷き、アプリコットのヘッダーがある枠カードに入れる。本文にはマーカーで強調をつける
7. お客様の声（SNSでの評判を見せる）: 斜線つきのキャッチ帯の下に、テーマごとの声カードを横スライダーで並べる
8. 利用シーン（日常の飲むタイミングを想像させる）: 白地に角丸の写真とキャッチを左右交互に置き、細い曲線と英字でつなぐ
9. 飲み方（簡単な手順を示す）: チャコール地に手順カードを2×2で並べ、注意書きを添える
10. ラインナップ（フレーバーと価格を比べてもらう）: フレーバーごとに色の違う写真ヘッダー、大きな欧文名、商品画像、説明、価格、成分表のリンクを並べる
11. 開発ストーリー（誕生の背景で共感を得る）: チャコール地に吹き出し形のクリーム色ヘッダーがあるカードを置き、矢印で送るスライダーにする
12. よくある質問（購入前の不安をなくす）: 白地に英字の見出しを置き、ピーチ色のアコーディオンを縦に並べる

Imagery

• 氷入りの紅茶やグラスを寄りで撮った、つややかな写真
• 茶葉・ミント・レモン・葉っぱを背景から抜き、余白に散らす
• 人物は自然光の明るいライフスタイル写真で、ナチュラルな女性を中心にする
• アバターや手順の図は、黒い線にオレンジや淡い色を塗った簡素なイラストにする
• フレーバーごとに、その色に寄せた液体の写真をヘッダーに使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央寄せで本文の幅を最大960px程度にとどめる
• 特長の詳細は、写真と本文を左右2カラムにする
• お客様の声は3枚並べて見せ、スライダーをやめる
• 手順は4つを横一列に並べる
• 英字の大見出しは80px前後まで拡大する

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