DESIGN.md — 金茶×淡グレーの上品な有機日本酒 LP（Refined Organic Sake Beauty LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 上品・高級、和風、ナチュラル、やさしい・柔らかい
• キーワード: 和モダン・金茶の明朝・淡いグレー地・有機・オーガニック・美容と健康・余白多め
• 地の質感: 和紙のような生成り地と、水面・波紋の淡い写真テクスチャ。全体にマットで光沢を抑えている
• 形: 大きめの角丸写真、ゆるいアーチ型のセクション境界、細い区切り線と金茶の丸バッジ
• 温度感: やや暖かいニュートラル。金茶とベージュの温かさを、灰緑と深緑で落ち着かせる

Colors

• 地は白と淡いグレーを交互に置き、セクションの切り替えを色面で示す
• 見出しと装飾は金茶に統一し、黒は本文と一部の強い見出しだけに使う
• 深緑はボトルや斜めの帯など大きな装飾に限って使い、文字には使わない
• 朱色は味チャートのドットなど、ごく小さな指標にだけ使う
• 本文の強調は太字の墨色にし、色は変えない
• ビビッドな色や純色の赤・青は使わない
• badge-round は文字 #FFFFFF × 背景 #A8905E のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#877349、4.59:1）を使う。
• pill-label は文字 #8C7D61 × 背景 #E4E4E2 のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#6F634D、4.62:1）を使う。

Typography

• 見出しは明朝で字間を広く取り、品よく見せる
• 本文はゴシックで行間を約1.9と広めにする
• FVのコピーは縦書き明朝を写真の上に置く
• 英字はセリフ体の大文字を字間広めで添える
• 本文の要所は太字で強調し、下線や色変えはしない
• 見出しの一部の語だけを大きくして抑揚をつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。図解のみ 3 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しは中央揃え、本文は左揃え
• 写真は左右に余白を残した角丸ブロックで置く
• 写真を2〜3枚ずらして重ねるコラージュを使う
• セクション間は広い余白で区切る
• 体験談カードは写真上部とテキスト部を一体化する

Elevation & Depth

• 基本はフラットで影なし
• 体験談カードにはごく薄く広い影（0 4px 20px rgba(0,0,0,.08)）をつける
• 重ねた写真に薄い影をつけて前後を分ける

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 大きめの角丸の長方形。一部の角だけ丸くすることもある
• セクション境界: ゆるいアーチ・波型の曲線や斜めの帯で切り替える
• バッジは正円か麦の穂のリース形
• 見出し左に金茶の縦線を引く
• 区切りに下向きの小さな三角を置く
• 鋭い角や太い枠線は避ける

Components

• 上部キャンペーン帯（notice-bar）: 金茶の帯と黒帯を重ねて、告知と実績数字を白文字で出す
• 丸バッジ（badge-round）: 金茶の正円に白文字の明朝で限定性や特徴を示す。麦のリース形と並べる
• ピル型の見出しラベル（pill-label）: 淡いグレーのピル型に金茶の明朝で2つの言葉を並べ、×でつなぐ
• 左線付き見出し（heading-left-line）: 金茶の縦線に明朝の見出しを添える
• 体験談カード（testimonial-card）: 角丸の大きな写真の上に、肩書きの丸ラベルと年齢、金茶の見出し、本文を重ねる
• 3段階の図解（flow-diagram）: 線画イラストを3つ並べ、三角矢印でつなぎ、下に小さな説明を置く
• 味のチャート（taste-chart）: 点線の軸の両端に対になる語を置き、朱色のドットで位置を示す
• 暗色の帯ラベル（dark-label）: 灰緑の帯に白文字でサブコピーを入れる

Do's and Don'ts

Do - 見出しは明朝・金茶・字間広めでそろえる - 白とグレーの地を交互にしてリズムを作る - 写真は大きな角丸でやわらかく見せる - 体験談には個人差の注釈を必ず小さく添える - 余白を広く取り、静かで上品な印象を保つ

Don't - 原色やネオン色を使わない - 太いゴシックの派手な見出しを使わない - 価格や割引を大きな赤文字で押し出さない - 影を強くしたり光沢を足したりしない - 写真を角ばった枠で詰めて並べない

Page Structure

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

1. 告知帯（キャンペーンと人気を伝える）: 金茶と黒の帯を重ね、実績数字を白文字で出す
2. ファーストビュー（商品の世界観を一目で伝える）: 左右で色を分けた背景にボトル2本と縦書き明朝コピーを置き、下に生成り地の限定バッジ
3. ブランド導入（作り手と有機であることを示す）: 白地に筆文字ロゴと金茶の明朝コピー。角丸写真2枚を重ねる
4. こだわりの提示（2つの価値軸を示す）: ピル型ラベル2つを×でつなぎ、田園と人物の写真へ続ける
5. 素材の解説（有機認証の仕組みを説明する）: グレー地のアーチ型面に見出し、3段階の図解、本文
6. 美容訴求（美容・健康との結びつきを示す）: 女性写真に縦書きコピーと金茶の丸バッジ、大きな明朝の締めコピー
7. お客様の声（共感と信頼を得る）: 角丸写真付きの体験談カードを縦に並べ、注釈を添える
8. 理由の説明（美容成分の根拠を示す）: 灰緑の写真上に見出し、左線見出し+横長写真+本文を三角でつなぐ
9. 食生活提案（日常に取り入れる理由を示す）: 白地に左線見出しと本文、写真3枚のコラージュ
10. 蔵元紹介（歴史と職人技で信頼を高める）: グレー地のアーチ見出し、職人の角丸写真、ロゴと沿革文
11. 味わい（味の特徴を見える化する）: 深緑の斜め帯と大きな薄い漢字の背景、ボトル写真、点線と朱ドットのチャート
12. 香り（香りの特徴を伝える）: 薄い大きな漢字の背景と明朝見出し、英字サブ、灰緑の角丸写真と本文

Imagery

• ボトルは明るく柔らかい光で、グラスや泡を背景にぼかして撮る
• 田園・稲穂・米粒など素材の写真は自然光で温かい色調にする
• 人物は白や淡い色の服の女性が笑顔の自然体。背景は明るくぼかす
• 水面の波紋や和紙の質感を背景テクスチャに薄く敷く
• 図解は細い線画で、金茶・灰緑・薄い朱の淡い配色にする
• 背景に大きな漢字一文字を薄いグレーで透かして置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はSP幅の縦長デザイン。PCでは中央に約420〜480px幅で置き、左右を淡いグレーの地で埋める
• PCでもカラムは増やさず、縦のストーリー順を保つ
• SPの見出しは26px前後、本文は14px
• 写真コラージュは幅に合わせて縮小し、重なり方は変えない

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