DESIGN.md — 深紅と抹茶緑の和モダン茶スイーツギフトLP（Kyoto Tea Sweets Seasonal Gift LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 和風、上品・高級、ナチュラル
• キーワード: 和モダン・縦書き明朝・季節ギフト・抹茶・写真主体・余白
• 地の質感: 和紙・漆・黒い陶器などのマットな質感。和紙風の生成り地も使う
• 形: 直線的な全幅帯と四角い枠。角丸はほぼなし。ひし形の枠見出しがアクセント
• 温度感: 温かみのある落ち着いた中間〜やや暖色

Colors

• セクションごとに深紅・墨黒・白・青灰・抹茶緑・生成りを全幅で切り替える
• 抹茶緑はメニュー紹介帯の地に限定し最大面積の色面にする
• 暗色・緑地の文字は白、明るい地は墨色で統一
• 見出しの強調は金茶色の文字で控えめに
• 鮮やかな原色は使わず、セット区分ラベルだけ緑・赤茶・紺で色分け
• diamond-heading は文字 #EDEAEC × 背景 #748B45 のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#5F7138、4.5:1）を使う。
• menu-item は文字 #EDEAEC × 背景 #748B45 のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#5F7138、4.5:1）を使う。

Typography

• 本文と見出しは明朝で統一し、ゴシックは注記のみ
• 縦書きを多用し、写真の余白側に右上から配置する
• 字間は広め(0.08〜0.15em)、行間2.0前後でゆったり
• 欧文筆記体は斜めに写真へ重ねて装飾にする
• 欧文ロゴ風表記は大文字で字間を大きく取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介は写真と文を左右交互に配置、セット比較は 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 0px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション間は余白でなく背景色の切り替えで区切る
• 写真は全幅で大きく、テキストは写真の空き側に重ねる
• メニュー紹介は皿写真を左右交互に画面外へはみ出させる
• 縦書きブロックは右寄せで1列幅約20px
• セット比較は細い縦線で3分割

Elevation & Depth

• 影はほぼ使わずフラット
• 商品写真自体の落ち影で立体感を出す
• 注意事項は細い金茶の枠線のみで囲む

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の長方形。メニュー用の皿写真は切り抜きで画面外へはみ出す
• セクション境界: 直線で背景色を切り替える
• 角丸は使わない
• 見出し装飾は白線のひし形枠や白線の四角枠
• 3枚並べの写真は隙間を詰めて帯状にする

Components

• 季節ギフトFV（hero-season-title）: 深紅の地に商品写真、右上に縦書きコピー、下部に欧文セリフの大見出しと商品名
• コピー帯（copy-band）: チャコールの帯に中央揃え明朝2行と補足1行
• 縦書き本文ブロック（vertical-text-block）: 金茶の横書き小見出し+縦書き本文を右から配置
• ひし形枠見出し（diamond-heading）: 白線のひし形内に縦書き和文、右に欧文大文字2行
• 商品メニュー項目（menu-item）: 皿写真・茶葉写真・筆記体欧文・明朝商品名・説明文を左右交互に配置
• 白枠縦書き見出し（boxed-vertical-heading）: 暗色地に白細線の四角枠、中に縦書き明朝見出し
• 配送注意ボックス（notice-box）: 金茶の細枠に中央見出しと区切り線、箇条書き注記
• セット比較3列（set-comparison）: 色分けした見出しラベル、箱写真、内容の箇条書きを3列で

Do's and Don'ts

Do - 背景色の全幅切り替えでリズムをつける - 見出しと本文は明朝で縦書き中心に - 写真に欧文筆記体を斜めに重ねる - 余白を大きく取り、写真を主役にする - 和紙・陶器・木の質感を写真で見せる

Don't - ピル型や角丸ボタンを使わない - ビビッドな原色や派手なグラデーションを使わない - ゴシックの太字見出しで押し出さない - 影の強いカードで囲まない - 文字を詰め込まず、1ブロックの文量を絞る

Page Structure

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

1. ファーストビュー（季節ギフトとしての第一印象）: 深紅地に瓶詰め商品と茶碗、縦書きコピー、欧文タイトル
2. コンセプト帯（贈り物としての価値を一言で）: チャコール帯に中央揃え明朝
3. イメージビジュアル（和の空間で世界観を伝える）: 障子と木台の写真、右下に欧文ロゴと商品名
4. 容器の特長（見た目の可愛らしさを訴求）: 白地に手のひらの商品写真、縦書きコピー、筆記体
5. こだわり説明（贈答シーンと由来を伝える）: 白地に金茶の見出しと縦書き本文
6. 素材紹介（原料の産地品質を訴求）: 青灰グラデ地にスプーン写真、縦書き見出しと本文
7. ラインナップビジュアル（3種の華やかさを見せる）: ロゴと商品名の後、グラス盛り写真に白文字コピー
8. お品書き（各味の特徴を説明）: 抹茶緑地にひし形見出し、皿写真を左右交互に3品
9. 集合カット（癒しの印象を残す）: 生成り地に俯瞰の商品群と縦書き文
10. ブランドストーリー（老舗の信頼を伝える）: 墨黒地に白枠縦書き見出し、店構え写真、縦書き本文、3枚並び写真
11. 配送注意（購入前の注意喚起）: 商品写真の下に金茶枠のボックス
12. セット比較（購入するセットを選ばせる）: 色分けラベルの3列に箱写真と内容

Imagery

• 商品は深紅や黒の漆調の台に置き、側光で艶を出す
• 黒い陶器の皿に崩した中身を盛り、粉茶や茶葉を散らす
• 障子・のれん・茶臼など和の小道具で背景をつくる
• 俯瞰の集合カットは生成りの和紙風の地に茶葉を添える
• 欧文筆記体を白や金で写真の余白に斜めに重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを中央 750px 前後の幅に収め、左右は背景色を延長する
• 縦書きブロックは PC でも縦書きを保ち、写真の横に並べる
• お品書きは PC で写真と文を 2 カラム交互に配置
• セット比較は PC でも 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 行書くと起動時に読み込まれる。