DESIGN.md — くすみパステル×クラフトのハーブティー LP（Soft Pastel Herbal Tea Lifestage LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: やさしい・柔らかい、ナチュラル、かわいい、清潔・爽やか
• キーワード: くすみパステル・クラフト紙・手描き動物・白カード・黄色マーカー・ライフステージ
• 地の質感: マットな単色面に小さな星やキラキラを散らす。写真は明るい白背景のブツ撮り。
• 形: 角丸カード、ピル型ラベル、ゆるい波型のセクション境界。
• 温度感: 暖かく穏やか。茶系文字でコントラストを抑えている。

Colors

• 商品ごとにピンク・若草・カスタード・ラベンダーの地を割り当て、セクション背景と札の色をそろえる
• 文字は黒ではなく焦茶で統一する
• 白カードはパステル地の上だけに置く
• 大見出しの強調語には黄色マーカーを引く
• ティールは小ラベルと点線だけ、ゴールドは強調語とボタンに使う
• 濃い色の面は比較表のヘッダーだけ

Typography

• 見出しは中央揃え、字間は広めにとる
• 太字は使わず中太の500まで
• 本文は行間1.9でゆったり組む
• 強調語はゴールド文字か黄色マーカーで示す
• 注釈は※付きの小さい文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（比較表だけ 4 列）
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションごとに背景色を切り替えて区切る
• 写真はフル幅、テキストは左右 7% 程度の余白
• 特長は白カードを縦に 3 枚積み、左にイラスト
• 商品紹介は写真→色地の説明→おすすめカードを 4 回繰り返す
• カードの右下にイラストをはみ出させて置く

Elevation & Depth

• 影はほぼ使わずフラットにする
• 白カードはごく薄い影か影なし
• 写真の商品だけ自然な落ち影をつける

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真はフル幅の矩形。一部は楕円のブロブで切り抜く
• セクション境界: ゆるい波型の曲線、または直線で色を切り替える
• ラベルと見出し札はピル型
• カードは角丸16px
• 番号の札は角丸の吹き出しにする

Components

• セクションラベル（label-pill）: ティールのピルに白文字で小見出しを入れる
• マーカー見出し（marker-heading）: リード行の下に、黄色マーカー付きの大見出しを置く
• 特長カード（feature-card）: 白カードの左にイラスト、右にティールの小見出しと本文
• 特徴バッジ（badge-tile）: クリーム色の角丸タイルに2行の特徴語を入れ、3つ横に並べる
• 原材料ピル（ingredient-pill）: 白いピルに原材料をスラッシュでつないで並べる
• おすすめカード（recommend-card）: ゴールドの見出しに★付きの3行リストを添え、右下にイラスト
• 番号札（number-tag）: 写真右上に置く、番号と小ラベルの角丸札
• 比較表（compare-table）: 焦茶のヘッダー、左列は商品色の地で写真と名前、セルは白
• FAQカード（faq-card）: 白カードの上にQ見出し、ピンクの点線で区切って回答
• ゴールドピル（gold-button）: 小見出し用のゴールドのピルボタン

Do's and Don'ts

Do - 商品ごとの色を背景・札・表の左列でそろえる - 文字はすべて焦茶系にする - 白カードの余白は広くとる - 手描きの動物イラストをカードの角に添える - 見出しは中央揃えにし、強調語にはマーカーを引く

Don't - 原色・高彩度の色を使わない - 純黒の文字や太いボールドを使わない - 強い影やグラデーションをかけない - パステルの地を1セクションで混ぜない - あおり系の赤いバッジやカウントダウンを置かない

Page Structure

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

1. ファーストビュー（世界観と商品ラインナップを提示する）: 白グレー背景に4色のグラスを並べた写真、左上に3行のコピー、下にパッケージ4種
2. ブランド紹介（コンセプトと3つの安心要素を伝える）: ピンク地にロゴ・3行コピー・短い横線・副文、クリーム色のバッジを3つ
3. 選ばれる理由の導入（理由セクションへつなぐ）: 淡いピンク地に2行の見出しと縦の点線、波型の境界
4. 素材の特長（ティーバッグ素材の優位性を説明する）: 若草色の地にマーカー見出し、商品写真、白カードの特長を3枚
5. 想いと背景（開発背景と根拠を示す）: ティールのラベル、写真2枚、白カードの長文と点線区切り、注釈
6. 品質・衛生（製造の安心を伝える）: クリーム地にマーカー見出し、ブロブで切り抜いた写真、ゴールドのピル、チェックリスト
7. ラインナップ紹介（4種の全体像を見せる）: ピンク地のリボン飾り見出しと、グレー地にパッケージを2×2で並べた写真
8. 商品詳細×4（ブレンドごとの味と用途を説明する）: 写真と番号札、商品色の地にブレンド名・原材料ピル・本文・おすすめカード・容量表記
9. 比較表（ライフステージで選びやすくする）: ラベンダー地にグラス写真、焦茶ヘッダーの4行3列の表
10. よくある質問（不安を解消する）: クリーム地にマーカー見出し、白いFAQカードを縦に積む

Imagery

• 白〜淡グレーの背景で、クラフトパウチやグラスを自然光でブツ撮りする
• 透明グラスに色の違うお茶を並べ、手前に茶葉を小山にして置く
• 線の細い手描き動物を淡彩で描く（鳥・ライオン・象・月など）
• 背景に小さな星やキラキラを薄く散らす
• パッケージは商品色のラベルを貼ったクラフト紙にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元画像は SP 幅相当の縦長 1 カラム。PC では中央 375〜480px のカラムに収める
• PC では背景色を全幅に伸ばし、カードは中央に固定する
• 比較表は SP でも 4 列を維持し、文字を11pxにする
• SP の写真はフル幅で使う

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