DESIGN.md — ワインレッドと生成りの上品な茶ギフト LP（Elegant Crimson Japanese Gift Tea LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、和風、やさしい・柔らかい
• キーワード: ワインレッド・生成り・明朝見出し・波形区切り・金色バッジ・ギフト
• 地の質感: 無地の面に写真を重ねる。紙のような温かい生成り地と、深い赤の面を交互に置く
• 形: 波形のセクション境界、正円バッジ、片側を斜めに切ったリボン型カード
• 温度感: 暖色。赤・金・ベージュで温かく華やかな印象

Colors

• 地は白・生成り・深紅の 3 色を交互に置き、境界は波形にする
• 深紅の帯の中では文字をすべて白にする
• 金色は丸バッジ・ランキング・数値の強調だけに使う
• 商品カードは商品ごとの色（ピンク・オリーブ・オレンジ・藤色）で塗り分ける
• 淡い色のカードには同じ系統の濃い色を文字やラベルに使う
• キーワードを強調する見出しは赤文字にし、薄黄のマーカーを引く
• badge-circle は文字 #FEFBF9 × 背景 #BEA64B のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#857330、4.54:1）を使う。
• stat-card は文字 #8B7D2A × 背景 #89141D のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• flavor-card は文字 #FEFBF9 × 背景 #D24E73 のコントラスト比が 4.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#CE3E66、4.52:1）を使う。

Typography

• 見出しはすべて明朝体で、字間を広めにとる
• 見出しの中で助詞を一回り小さくし、名詞を大きく見せる
• 本文はゴシック体で中央揃えにし、短く改行する
• 見出しの上に小さな前置き文と点線を置く
• 数値は金色の明朝体を特大にして目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。バッジは 3〜4 個を横に並べ、カードは文字と商品写真の 2 分割
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは前置き→明朝見出し→説明→写真の順に中央揃えで並べる
• 写真は画面幅いっぱいに置き、上下を波形で切る
• 商品カードは縦に積み、カードの間を 20px 前後あける
• 説明文ボックスは左右に 16〜20px の余白をとる

Elevation & Depth

• 影はほぼ使わない。平らな面の重ね方で奥行きを出す
• 数値カードだけに薄い影をつけてもよい
• 立体感は商品写真の切り抜きと映り込みで出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 全幅の写真を波形で切る。商品は白背景の切り抜きで縦長に置く
• セクション境界: ゆるい波形カーブ
• 推し・特長のバッジは正円にする
• 商品カードは右上を斜めに切り、リボンのように見せる
• 説明文ボックスは小さめの角丸（4〜8px）
• 花材タグはピル型にする
• ラベル見出しは矢羽根型の帯にする

Components

• 波形区切りの赤帯セクション（wave-section）: 深紅の地の上下を波形で切り、白文字の明朝見出しを置く
• 丸バッジ（badge-circle）: 金または白の正円に、短い言葉を 2 行で入れる。3〜4 個を横に並べる
• 番号付き丸カード（number-badge）: 白い円の上部に金色の番号帯をつけ、利用シーンを明朝で入れる
• 実績数値カード（stat-card）: 赤地に麦穂の飾りと金の特大数字、時点の注釈を添える
• 商品色帯カード（flavor-card）: 商品の色で塗った帯に英字ラベル・明朝の商品名・区切り線・説明を置き、右に商品写真を置く。右上は斜めに切る
• 淡色の商品カード（tint-card）: 淡い地に色つきの明朝商品名、下にピル型の素材タグを置く
• 矢羽根ラベル（label-arrow）: 白と黒の 2 色に分けた矢羽根型の帯。下に小さな三角を置き、章の番号を示す
• ポイントカード（point-card）: 赤地の左側に英字の番号・明朝見出し・本文を置き、右側の写真を斜めに切って重ねる
• 赤地の説明ボックス（text-box）: 角丸の深紅ボックスに、白い本文を中央揃えで入れる

Do's and Don'ts

Do - 見出しは明朝体で大きく、字間を広くとる - 赤・白・生成りのセクションを交互に置き、境界は波形にする - 商品は白背景で切り抜き、商品ごとの色で整理する - 数値や実績は金色で強調する - 本文は短く改行し、中央揃えにする

Don't - 見出しに太いゴシック体やポップな書体を使わない - 原色の青や蛍光色など、温かみのない色を足さない - 影やグラデーションを多用しない - セクション境界を直線だけで続けない - 本文を左揃えの長文にしない

Page Structure

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

1. ファーストビュー（選べるギフトセットであることを一目で伝える）: 商品写真を全面に敷き、明朝タイトルと黒帯ラベル、左右に選択肢を示す丸バッジを置く
2. 利用シーン（贈る場面を想像させる）: 赤い波形の帯に、番号付きの白い丸カードを 3 つ並べる
3. 実績（ランキングとレビューで信頼を示す）: 金色の月桂樹飾りとランキング表示、赤地の数値カードを 2 つ並べる
4. 商品紹介の導入（セット内容とその価値を伝える）: 赤文字の明朝見出しにマーカーを引き、写真と赤地の説明ボックスを続ける
5. ギフトに向く理由（パッケージ全種を見せる）: 赤帯の上に缶を 4 本並べ、白文字で説明する
6. 特長（健康面の利点を短く伝える）: 生成り地に金色の丸バッジを 4 つ並べ、生活シーンの写真を添える
7. こだわり（原料・産地への信頼を高める）: 産地の風景写真を全幅に置き、金色の丸ラベルと明朝見出しを続ける
8. 選べる商品 1（味の選択肢を見せる）: 赤地に矢羽根ラベルを置き、商品ごとの色帯カードを縦に 4 枚並べる
9. 選べる商品 2（もう一方の選択肢を見せる）: 白地に商品写真を並べ、淡色カードを 3 枚重ねる
10. パッケージ（贈答用の梱包を伝える）: 黒いギフト箱の写真を大きく見せ、明朝見出しを置く
11. 3 つのポイント（選ぶ理由をまとめる）: 赤地のポイントカードに斜め切りの写真を重ね、縦に 3 枚並べる

Imagery

• 商品は白や淡い背景で、自然光を使ってやわらかく撮る
• 木のテーブルや布を使い、生活になじむシーン写真にする
• 果実や花の水彩イラストを入れた白いパッケージで統一する
• 花の写真は前ボケを入れて華やかに見せる
• 産地の風景は広角で、空と大地を明るく撮る
• 金色の麦穂・月桂樹の線画を飾りに使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文幅を 750px 前後で中央に固定し、左右に地の色を広げる
• 丸バッジや商品カードは PC で横に 2〜4 列並べる
• 波形の区切りは画面幅いっぱいに伸ばす
• 見出しサイズは PC で 1.3 倍程度にする

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