DESIGN.md — 桜ピンク×マスカット緑のフルーツ茶 LP（Fruity Pastel Pink & Muscat Green Tea LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: やさしい・柔らかい、ナチュラル、かわいい、親しみ・手作り感
• キーワード: 季節限定・フルーツ切り抜き・淡ピンク・黄緑の帯・明朝見出し・手書き吹き出し
• 地の質感: 白い木目板の地、淡ピンクの無地、方眼紙の地。写真は透明感のある実写。
• 形: 角丸は小さめ。リボン型ラベルや円形の写真、四角い吹き出しを使う。
• 温度感: 暖かく甘い。黄緑で爽やかさを足す。

Colors

• 地は淡ピンクと白木目を交互に使い、境目には黄緑の帯を入れる
• 見出しはこげ茶の明朝体。小見出しは黄緑またはローズ色にする
• 赤は「決定」「完成」などの強調語とラベルに限って使う
• ストーリー部は細いゴールド線の枠で囲む
• 手順パートは白地に薄グレーの方眼を敷く
• ribbon-label は文字 #DC535B × 背景 #EDCDC0 のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#AF242C、4.53:1）を使う。
• badge-red は文字 #FFF2F0 × 背景 #DC535B のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#AF242C、4.54:1）を使う。

Typography

• 大見出しは明朝体で中央揃えにし、2行に分ける
• 大見出しの背後に薄い筆記体の英字を重ねる
• 本文はやや太めのゴシック体で、行間を広めに取る
• お客様の声は手書き風の書体で書く
• 数字や番号は黄緑の太字で大きくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。素材説明は写真と文を左右交互に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 果物の写真は画面端からはみ出させて配置する
• ストーリー部はゴールド線の大枠1つにまとめる
• ミッションの区切りには黄緑のV字矢印を挟む
• 素材カードは白地に細い枠線を付け、右端に写真を置く

Elevation & Depth

• 影はほぼ使わない
• 写真の斜め配置にだけ薄い影を付ける
• 奥行きは切り抜き写真の重なりで出す

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 果物は切り抜き。人物は円形に、イベント写真は斜めのポラロイド風にする
• セクション境界: 黄緑のベタ帯と、上部が弧になった枠
• 吹き出しは角のある四角に三角のしっぽを付ける
• ラベルは両端を切り込んだリボン型にする
• 選択肢は塗りの円で表す

Components

• 黄緑帯見出し（band-heading）: 全幅の黄緑帯に、こげ茶の明朝体の見出しを置く。上に小見出しのタブを付ける
• リボンラベル（ribbon-label）: 両端に切り込みのあるリボン型のラベル
• 赤ラベル（badge-red）: 「ヒミツ」などの強調に使う赤い小ラベル
• 素材カード（ingredient-card）: 白地に細枠を付け、左に見出しと説明文、右に素材の写真を置く
• 手書き吹き出し（handwritten-bubble）: お客様の感想を手書き風の書体で載せる白い四角吹き出し
• ミッション見出し（mission-title）: ローズ色の英字と数字に黄緑の筆跡を重ね、下に太字の見出しを置く
• 円形特長バッジ（round-badge）: 白の半透明円に明朝体で短い特長を書く
• V字矢印（chevron-divider）: 黄緑の二重V字で、ステップの流れを示す

Do's and Don'ts

Do - 果物の写真を余白にあしらい、季節感を出す - 見出しは明朝体のこげ茶でそろえる - 開発ストーリーは人物写真と手書きコメントで親しみを出す - 地色を切り替えてセクションを区切る

Don't - 濃い原色の背景を広く使わない - 強い影や光沢のあるボタンにしない - 赤を本文や広い面に使わない - 角丸の大きいポップなカードにしない

Page Structure

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

1. ファーストビュー（商品の季節感と魅力を一目で伝える）: ピンク地に、グラス入りのドリンクと果物の写真を置く。明朝体の商品名、円形の特長バッジ、左上に赤い限定ラベルを配置する
2. 特長（素材）（果実のブレンドを説明する）: 白木目の地に番号と明朝見出しを置き、果物の切り抜き写真と説明文を左右交互に並べる
3. 特長（ブレンド）（茶葉の構成を見せる）: 枠付きの素材カードを縦に4枚並べ、右端に茶葉の写真を置く
4. 開発ストーリー導入（共同開発の信頼感を出す）: ピンク地にゴールド枠を敷き、リボンラベル、大見出し、担当者の写真を置く
5. 開発の道のり（開発の過程を物語で伝える）: ミッションごとに選択肢の円、パッケージ案、手書き吹き出しを置き、V字矢印でつなぐ
6. イベントレポート（産地とのつながりを示す）: 斜めに配置したイベント写真に、円形の写真と吹き出し文字を重ねる
7. 完成（体験を後押しする）: ドリンクの写真に赤字の見出しと太字のメッセージを添える
8. 利用シーン（ターゲットの悩みに寄り添う）: 明るい人物写真の全面背景に、明朝見出しと短い本文を重ねる
9. 作り方（手軽さを伝える）: 方眼地に3ステップを番号付きで並べ、手順のイラストを添える。重要な語は赤い太字にする

Imagery

• 果物は白背景で撮った切り抜き写真にし、みずみずしさを出す
• ドリンクは透明なグラスで逆光気味に撮り、氷と果実を入れる
• 人物は自然光で撮った笑顔。担当者は円形に切り抜く
• 手順は線画に淡い色を付けたイラストにする
• 葉や花の切り抜きを四隅にあしらう
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は1カラムにし、画像は全幅で表示する
• PC は中央に幅640px前後のカラムを置き、左右は背景色でつなぐ
• 素材の左右交互の配置は、SP でも写真を小さくして維持する
• 吹き出しの2列並びは、SP では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 行書くと起動時に読み込まれる。