DESIGN.md — 和紙地と葡萄畑写真の自然派ワイン LP（Natural Washi Wine Story LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ナチュラル、上品・高級、信頼・誠実
• キーワード: 和紙テクスチャ・明朝体・葡萄畑の風景写真・スタイリング撮影・細い枠線見出し・読み物型
• 地の質感: 生成りの和紙風の紙地に薄い繊維模様。写真は自然光で撮った落ち着いたトーン。
• 形: 角丸はほぼ使わない。細い線の矩形枠と全幅写真で構成する。
• 温度感: 暖かい。生成り・焦げ茶・深緑を基調にした温かみのあるアースカラー。

Colors

• ページの大半は生成りの和紙地にして、純白は冒頭の帯と写真まわりだけに使う。
• 文字は真っ黒にせず、焦げ茶系でまとめる。
• 産地を紹介するパートは全幅写真の上に黒の半透明帯を重ね、白文字を載せる。
• 赤は冒頭のお知らせの強調語とラベル帯だけに使う。
• 表と見出しの枠はくすんだ茶色やベージュで作り、鮮やかな色は入れない。

Typography

• 見出しも本文も明朝体で統一し、ゴシック体は使わない。
• 味わいの説明文は中央揃えにし、行間を 1.9 前後まで広く取る。
• 製法や会社の説明は左揃えの段落にする。
• 品種名などの欧文は筆記体で大きく薄く置き、本文の背景に透かす。
• 太字はほぼ使わず、強調は色か文字サイズの差で付ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: 1 カラムが基本。説明文と写真を左右に並べ、本文で写真を回り込ませる箇所がある。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品写真や風景写真は左右に少し余白を残して大きく配置する。
• 産地を紹介するパートは画面幅いっぱいの写真を縦に連続させる。
• セクション見出しの枠は左端から始め、右側に余白を残す。
• 取扱店一覧は 3 列の表（店名・所在地・電話番号）にし、行は点線で区切る。
• 本文の段落の間は 16px 程度空ける。

Elevation & Depth

• 影は使わず、フラットに仕上げる。
• 奥行きは写真に重ねる黒の半透明帯だけで出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。風景写真は全幅、商品写真は左右に少し余白を残して置く。
• セクション境界: 直線で切り替える。紙地から全幅写真へはそのまま切り替える。
• 見出しは 1px の細い線の矩形枠で囲む。
• ラベル帯は角のない矩形にする。
• 取扱店一覧はベージュの太い外枠で囲む。

Components

• 枠線見出し（heading-frame）: 細い茶色の線で囲んだ矩形の中に明朝体の見出しを置く。左端に寄せる。
• 写真上の暗幕テキスト帯（photo-overlay-band）: 全幅の風景写真の下半分に黒の半透明帯を敷き、大見出し・下線・本文を白文字で重ねる。
• ワインレッドのラベル（badge-label）: ロゴの下などに置く小さな矩形のラベル。白文字で短い言葉を入れる。
• 冒頭のお知らせ帯（notice-bar）: 白地に線画のイラストと 2 行の告知文を置き、キーワードだけ赤くする。右下に小さな注釈を添える。
• 筆記体の透かし文字（script-watermark）: 説明文の背後に、薄いベージュの筆記体の欧文を斜めに重ねる。
• 取扱店一覧表（store-table）: 茶色の見出し行の下に、店名・所在地・電話番号の 3 列を点線で区切って並べる。全体をベージュの枠で囲む。
• 写真回り込み段落（text-image-float）: 右に樽やロゴの写真を置き、左の本文がその下まで回り込む。

Do's and Don'ts

Do - 地は和紙風の生成りテクスチャにして、紙の質感を出す。 - 見出しは細い枠線、本文は明朝体で上品にまとめる。 - 産地の写真は夕景や青空が入る広い構図を全幅で使う。 - 暗幕帯の大見出しの下には細い白線を引く。 - 取扱店のような信頼につながる情報は、表で淡々と並べる。

Don't - ゴシック体の太字や派手なボタンを多用しない。 - 原色の赤や黄色で値引きを訴求しない。 - 角丸のカードやドロップシャドウを使わない。 - 純白の地を長く続けない。 - 文字をぎっしり詰めず、行間を広く取る。

Page Structure

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

1. お知らせ帯（採用実績などの権威付け）: 白地に線画の乾杯イラストと 2 行の告知文を置き、キーワードを赤くする。
2. ファーストビュー（商品と産地のイメージを伝える）: 葡萄畑の全幅写真の上に、左は半透明の暗い板に明朝体の商品名、右は缶の商品写真を置く。左上にはロゴとラベル帯を置く。
3. 味わいの説明 1（1 品目の香りと味を伝える）: 紙地の上に中央揃えの説明文を置き、背後に筆記体の品種名を透かす。その下にスタイリングした写真を置く。
4. 味わいの説明 2（2 品目の香りと味を伝える）: 説明 1 と同じ構成をくり返し、写真は柄布と植物を使ったものに変える。
5. 製法の特長（保存料を使わない独自製法を説明する）: 枠線見出しの下に左揃えの本文を置き、右に水彩のハーブのイラストを添える。
6. 開発の背景（原料とワインの組み合わせの由来を伝える）: 枠線見出しを置き、樽の写真に本文を回り込ませる。
7. ワイナリーの紹介（生産者の信頼性を伝える）: 枠線見出し、黒地のロゴ画像、本文の順に並べる。
8. 産地のストーリー（畑・土壌・気候を順に紹介する）: 全幅の風景写真を 3 枚続け、それぞれに暗幕帯・大見出し・白文字の本文を重ねる。
9. 独占販売の実績（現地との関係と希少性を示す）: 左に人物写真、右に見出しと短い文と葡萄の写真を置く 2 列構成。
10. 取扱店一覧（飲める店を紹介して信頼を高める）: ベージュの枠の中に見出しと案内文を置き、その下に 3 列の長い表を続ける。

Imagery

• 葡萄畑や山並みは夕景や青空で、広角の横長構図で撮る。
• 商品は木の器や布、ハーブ、赤い実と組み合わせ、自然光でテーブルにスタイリングして撮る。
• 樽が並ぶセラーは暖色の照明で撮り、重厚感を出す。
• 淡い水彩のハーブのイラストを余白に添える。
• 線画の手描き風イラストを小さく使う。
• 生産者と担当者が並ぶ現地の記念写真で信頼感を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにし、写真回り込みは写真を上・本文を下に縦積みする。
• SP の本文は 14px・行間 1.9 前後にする。
• 暗幕帯の本文は SP で 13px 程度にし、帯の高さを伸ばして文字を収める。
• 取扱店一覧の表は SP で 3 列を保つか、電話番号を店名の下に回す。
• PC では本文の幅を 720px 程度に収め、中央に置く。

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