DESIGN.md — 黄金と若葉グリーンの産地コラボ洋菓子 LP（Fresh Muscat Green Patisserie Story LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ナチュラル、やさしい・柔らかい、清潔・爽やか
• キーワード: 産地ストーリー・黄金色の光・若葉グリーン・水彩イラスト・細明朝・余白多め
• 地の質感: ぼかしグラデーションと光のボケが入った地。紙のようにやわらかい生成りの面を重ねる
• 形: 角丸はほぼ使わない矩形写真と細枠カード。帯リボンや円形エンブレム、上辺がアーチ状のタブを装飾に使う
• 温度感: 暖かく明るい。黄と緑で果実の瑞々しさを出し、焦げ茶で締める

Colors

• 地の色はセクションごとに黄→空色→生成り→若葉グリーン→黄橙グラデと移し、物語の場面転換を示す
• 本文の地は生成りか白に統一し、可読性を保つ
• 焦げ茶はエンブレム・フッター・見出しに絞り、全体を締める
• 黄緑の細線は枠や区切りに使い、太い色面にはしない
• CTA は緑のグラデーションのピルボタン1種類に統一する
• グラデーションはやわらかなぼかしにし、境界をはっきり出さない
• button-primary は文字 #FFFFFF × 背景 #5E9E2A のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#4E8423、4.52:1）を使う。
• ribbon-label は文字 #FFFFFF × 背景 #BDCE95 のコントラスト比が 1.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#6A7E3A、4.51:1）を使う。
• badge-edition は文字 #FFFFFF × 背景 #E0D016 のコントラスト比が 1.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#575757、4.54:1）を使う。

Typography

• 見出しはすべて細めの明朝で、字間を広げ、中央にそろえる
• 本文は小さめのゴシックで、字間 0.12em・行間 1.9 で軽く見せる
• 英字の見出しはセリフ体を大文字で組み、下に和文のサブ名を小さく添える
• 強調は太字にせず、引用符やかぎ括弧で示す
• 太すぎる書体や原色の文字は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は2枚並びも使う
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右に 5% の余白をとった幅いっぱいの矩形で置く
• 見出し→写真→リード→本文の順に縦に積む
• 見出しの上に余白を多めにとり、ゆったり見せる
• セクションの切れ目に水彩の果物イラストを左右端からはみ出させて置く
• 商品紹介は細枠カードの中にまとめる

Elevation & Depth

• カードは薄くて広がった影（0 4px 20px rgba(0,0,0,0.06)）で地からわずかに浮かせる
• CTA ボタンには下向きの柔らかい影をつける
• 写真には影をつけず、平置きにする

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。横長 3:2 前後
• セクション境界: ぼかしグラデーションで溶かす。商品セクションは上辺の中央がアーチ状に盛り上がる
• カードとフレームは角丸なしで、細い二重線か黄緑の線で囲む
• エンブレムは円の周りに葉の形を並べた円形にする
• 見出しラベルは波打つリボン帯にする
• 区切りには蔓（つる）模様の小さなオーナメントを使う

Components

• 緑グラデのピル CTA（button-primary）: 緑のグラデーションのピル型ボタン。右端に小さな矢印、文字は明朝で白
• 円形エンブレム（emblem-circle）: 焦げ茶の葉形を円に並べ、中央に2行の漢字を置く。セクションの頭に使う
• リボン見出し（ribbon-label）: 黄緑の波打つリボン帯に白い明朝文字。カードの上辺に重ねて置く
• 人物紹介カード（profile-card）: 白いカードに写真・名前・欧文ルビ・経歴を縦に並べる
• 商品フレーム（product-frame）: 若葉グリーンの地の上に置く生成りのカード。細い二重線で囲み、上辺はアーチ型
• 弾数バッジ（badge-edition）: 黄〜緑グラデの縦長の旗。中に欧文の筆記体・大きい数字・発売日を入れ、写真の左上に重ねる
• 黄緑線のメッセージ枠（line-frame）: 太めの黄緑線で囲った枠。線が写真の背後を通り、内側にコメントと写真を置く
• 線つき小見出し（heading-rule）: オリーブ緑の小見出しのあとに、横に細い線を伸ばす
• 蔓模様の区切り（ornament-divider）: 黄緑の細い蔓模様を中央に置いて段落を区切る

Do's and Don'ts

Do - 地の色を場面ごとに変え、ぼかしでつないで物語として流れを作る - 見出しは細い明朝で中央にそろえ、余白を広くとる - 水彩の果物や道具のイラストを余白のアクセントに置く - 写真は自然光の明るいものにそろえる - CTA は数を絞り、緑のピル型1種類にする

Don't - 原色の赤や青、蛍光色で強調しない - 太いゴシックの大きな見出しを使わない - カードや写真に大きな角丸をつけない - 値引きの訴求や煽る表現、バッジを多用しない - 地の色をくっきりした直線で切り替えない

Page Structure

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

1. ファーストビュー（企画の世界観と新商品を印象づける）: 黄金色の光ボケの地。中央に円形エンブレム、その下に3行の明朝コピー、さらに商品と果実の写真と手書きの New を置く
2. コンセプト（コラボ企画の趣旨を伝える）: 空色のグラデーション地。上に2つのロゴを×で並べ、かぎ括弧の見出しと本文を続け、下端に山の風景写真を置く
3. 産地紹介（産地の気候と技術を伝える）: エンブレム・見出し・果樹園の写真・リード・本文の順に並べ、水彩の果物イラストと2枚並びの写真を添える
4. 職人の工房（作り手のこだわりを伝える）: 生成りの地。厨房の写真と本文を置き、水彩の道具イラストを添える
5. シェフ紹介（権威と信頼を示す）: リボン見出しをのせた白カードに、人物写真・名前・欧文ルビ・経歴を入れる
6. 商品紹介（商品の特長と製法を伝える）: 若葉グリーンの地に、上辺がアーチ型の生成りフレームを置く。中に弾数バッジ付きの商品写真、英字の商品名、本文と写真の交互配置を並べる
7. 販売店舗案内（購入場所へ誘導する）: フレームの末尾に蔓模様の区切り、見出し、緑のピル CTA を置く
8. 推薦メッセージ（公的な立場の人の言葉で信頼を補強する）: 黄緑線の枠の中に、見出し・肩書き・本文・人物写真・取り組みのバナーを3枚並べる
9. 社会貢献（ブランドの姿勢を示す）: 黄〜橙のグラデーション地に、明朝の見出し・本文・バナー画像を置く
10. フッター（サイト内を案内する）: クリームのサービス帯の下に焦げ茶の地。欧文セリフの見出しとリンクの一覧、言語切替のボタンを置く

Imagery

• 果実は逆光や自然光で瑞々しく撮り、背景をぼかす
• 商品は黄色の反射面や白い皿に置き、光沢のある黄色の背景で撮る
• 果樹園や生産者の手元の写真で、産地の空気感を出す
• 果物・葉・製菓道具は透明感のある水彩イラストで描き、切り抜いて余白に置く
• 光のボケやレンズフレアで、明るく幸福な印象を足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文ブロックを中央 80% 程度の幅にし、本文を中央揃えにする
• PC のファーストビューは縦書きのコピーを左に、写真を右に置く横長構成にする
• 商品紹介の本文と写真は、PC で左右交互の2カラムにする
• 人物カードは PC で写真が左、テキストが右の横並びにする
• フッターは PC で4カラムに横並びにする

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