DESIGN.md — 生成り×銅茶の果実線画スイーツ LP（Ivory Etching Fruit Jelly Sweets LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル、情報量多め・訴求型
• キーワード: 生成り・果物の銅版画風線画・銅茶の明朝・ワインレッドの丸バッジ・シズル写真・金の曲線
• 地の質感: 生成りの地に、ベージュの細い線で描いた果物の線画をうすく敷き詰める。写真は透明感があり、背景がぼけている。
• 形: 角丸が小さい白カード、正円バッジ、ゆるい金のアーチで区切る。帯ラベルは角ばった長方形。
• 温度感: 暖かく穏やか。甘さと上質さを両立させる。

Colors

• 地は生成り、カードは白にする。重い色の面はレビュー部分のマスタードだけにする。
• 見出しと装飾帯は銅茶系にまとめ、黒は使わない。
• ワインレッドは訴求の丸バッジに限って使う。
• 赤い帯はレビューの要約見出しにだけ使う。
• 商品写真の果物の色を引き立てるため、背景は彩度を落とす。
• lineup-band は文字 #7A5A44 × 背景 #B6B5B2 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#DCDCDB、4.54:1）を使う。

Typography

• 見出しは明朝で、中央に揃える。
• 見出しの中の重要語だけ、少し大きくするか濃い色にする。
• 本文はゴシックの小さめで、行間を広く取る。
• Point 番号は欧文セリフの斜体風数字にする。
• レビューの本文だけゴシックの太字見出しを使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の比較だけ 2 列、成分比較は 4 列。
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真セクションは全幅で敷き、文字を重ねる。
• こだわりは、白カードを生成りの地の上に浮かせて並べる。
• カードの上の中央に Point タブを半分はみ出させる。
• レビューはマスタードの地に白カードを縦に積む。
• ラインナップは横長の帯を交互に左右配置する。

Elevation & Depth

• 白カードには、ぼかし 8px 程度のうすい影を付ける。
• 写真とバッジには影を付けない。
• レビューカードは影なしのフラットにする。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 商品写真は全幅の長方形。果物は切り抜いて重ねる。
• セクション境界: 金の細線を下に凸のアーチにして写真と地を区切る。他は直線で切り替える。
• バッジは正円にする。
• Point タブは上が丸い半円形にする。
• レビューの要約帯は右寄せのピル型にする。
• 無添加マークは丸に斜線の線画にする。

Components

• 丸訴求バッジ（badge-round）: ワインレッドの正円に、白い明朝 2〜3 行。写真の右下に重ねる。
• こだわりカード（point-card）: 白いカード。上の中央に銅茶の Point タブ、明朝の見出し、本文、写真の順に並べる。
• ポイント目次（point-list）: 斜体の Point 番号と明朝の項目名を、下線付きで 3 行並べる。
• 産地ラインナップ帯（lineup-band）: 果物の色をうすくした横帯に、切り抜いた果物と下線付きの産地名を配置する。
• 原料比較表（compare-table）: 4 列のグレーの見出しとアイコンのセル。自社の列だけ銅茶で強調する。
• 茶帯ラベル（label-band）: 銅茶の長方形に白い明朝。セクションの導入に使う。
• レビューカード（review-card）: 白いカードに星、数値、投稿者、本文を入れる。右上に赤いピルの要約見出しを重ねる。
• 利用シーンタグ（scene-tag）: 写真の上に置く白い四角に、黒の小さい文字。

Do's and Don'ts

Do - 生成りの地に果物の線画を低いコントラストで敷く。 - 見出しは明朝の茶色で、中央揃えにする。 - 写真は明るく、透明感のあるシズル感を出す。 - 訴求点はワインレッドの丸バッジで示す。 - こだわりは番号付きのカードで順に見せる。

Don't - 真っ黒の文字や、彩度の高い背景を広く使わない。 - 太いゴシックで見出しを作らない。 - 角丸の大きいポップなボタンを多用しない。 - 線画の地紋を濃くしすぎない。 - 赤帯をレビュー以外に乱用しない。

Page Structure

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

1. ファーストビュー（商品の美しさと無添加・国産を一目で伝える）: 全幅のシズル写真。左上に無添加マーク、金のアーチの下に明朝の大コピー、右に丸バッジを置く。
2. 味わいの訴求（食感と味を想像させる）: ぼけた背景の接写写真に、明朝の見出しと短い本文を重ねる。縦書きの擬音を添える。
3. 見た目の魅力（かわいさと家族向けをアピールする）: 濃いグレーのグラデーションの上に白い明朝。ガラスの器に盛った写真を見せる。
4. こだわり目次（3 つの強みを予告する）: 線画の地に明朝の見出しと、番号付きの下線リストを置く。
5. こだわり1と産地ラインナップ（原料の品質を証明する）: 白カードに果物のコラージュを載せ、その下に 7 種の産地帯を並べる。
6. こだわり2・3（原料と無添加の安心を伝える）: 比較表カード、手で持つ写真のカード、無添加マークのカードを順に並べる。
7. 満足感と利用シーン（食べる場面を想像させる）: 大きい接写写真と、人物写真 3 枚のグリッドに白タグを付ける。
8. 個包装の訴求（携帯性・配りやすさを伝える）: 枠付きの強調語を入れた見出し、写真、丸バッジ 2 つで構成する。
9. おすすめの食べ方（楽しみ方を提案する）: 茶帯ラベル、かぎ括弧の見出し、2 列の写真比較を置く。
10. お客様の声（社会的証明）: マスタードの地に、星付きの白レビューカードと赤いピルの要約見出しを並べる。
11. 価格の理由（簡易包装でお得な理由を説明する）: パッケージ写真に丸バッジを付け、明朝の見出しで説明する。
12. 締めのビジュアル（印象を再確認させる）: 全幅の商品写真に無添加マークと丸バッジを置き、大きい明朝コピーで締める。

Imagery

• ガラスの器や氷の上に置いたシュガーコートのゼリーを、明るいハイキーで接写する。
• 被写界深度を浅くして、背景をパステルにぼかす。
• 果物は水滴付きで切り抜き、果汁のしずくを垂らしてコラージュする。
• 人物は白い服で、自然光の室内の生活シーンにする。
• 地紋は果物を銅版画風の細い線画にし、ベージュでうすく敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を 750px 程度の中央寄せにし、左右を生成りの地で埋める。
• 写真セクションは PC でも横長に保ち、文字は中央に重ねる。
• 利用シーンの写真と食べ方の比較は、PC で 3〜2 列に広げる。
• レビューは PC で 2 列のカード配置にしてよい。

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