DESIGN.md — 木目とセージの和モダン贈答食品 LP（Warm Wood Mincho Gift Spread LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、和風、ナチュラル、やさしい・柔らかい
• キーワード: 木目の食卓・縦書き明朝・セージグレー・贈答・暖色の自然光
• 地の質感: 木の質感と生成りの紙っぽい面。線画の食材イラストを薄く敷き詰める
• 形: 角のない四角い写真ブロック。吹き出しだけを楕円にする
• 温度感: 暖かい（焼き色・琥珀色）と落ち着いたくすみ緑の中間

Colors

• 地の色は写真、セージグレー、白、生成りを交互に切り替える
• 商品ごとに説明帯の色を変える（こげ茶・琥珀茶・オリーブ緑）
• 朝・夕・夜のラベルだけに青系のグラデーションを使って時間帯を表す
• 原色や鮮やかな色は使わない。どの色も彩度を落とす
• 赤茶は小さなギフトバッジにだけ使う

Typography

• 見出しは縦書きの明朝で統一する
• 本文も明朝にして行間を広く（2.0 程度）取る
• 太字はほぼ使わず、字間を広げて上品に見せる
• 写真の上に置く文字は白にして、うっすら影をつける
• 本文は中央揃えか左揃えの短い行にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と見出しを左右 2 分割にする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 0px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション同士は余白を挟まずに直接つなげる
• 商品ブロックは縦書きの見出しと瓶の写真を並べ、その下に使用シーンの写真と色帯の説明を置く
• 商品ごとに左右の配置を入れ替えてリズムを出す
• 各セクションは写真を全幅で見せる

Elevation & Depth

• 基本は影なしの平面で作る
• 写真の上の白文字だけにうっすら影をつける
• 口コミの商品写真は切り抜きにして、軽い落ち影をつける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角のない四角で全幅または半幅に置く。口コミでは商品を切り抜いて使う
• セクション境界: 直線で区切る（地の色を切り替える）
• 吹き出しは楕円の線画にする
• ラベルとバッジは角のない四角にする
• 背景に大きな結び紋の線画を薄く敷く

Components

• 縦書き明朝見出し（vertical-heading）: 商品名やコンセプトを 2〜3 行の縦書きで写真の横に置く
• 時間帯ラベル（time-label）: 写真の端に重ねる正方形のラベル。青のグラデーションの上に漢字 2 文字を白で置く
• 色帯の説明ブロック（description-band）: 商品ごとに地の色を変えた帯の上に、白文字で 3〜4 行の説明を置く
• 楕円の口コミ吹き出し（voice-bubble）: 線で描いた楕円の中に「」で囲んだ感想を入れ、右下に年代・性別を添える
• 写真の上の帯コピー（photo-caption-band）: 写真の下寄りに、半透明の暗い帯を 2 行敷き、白い明朝で置く
• ギフト対応バッジ（gift-badge）: 赤茶の細い線で囲んだ小さな四角に、ギフト対応の文字を入れる
• 結び紋の透かし（watermark-motif）: 地の色の上に、大きな結び紋の線画を薄く重ねる

Do's and Don'ts

Do - 食卓の写真は暖色の自然光で撮った木目のものを使う - 見出しは縦書きの明朝にする - 商品ごとに説明帯の色を変える - 地の色は彩度を落とした中間色にする - 余白は広めにして本文は短く刻む

Don't - ゴシック体の太字で大きく訴求しない - 鮮やかな赤・黄色のボタンや価格の煽りを入れない - 角丸のカードやポップなアイコンを使わない - 寒色の背景を広く使わない - 情報を詰め込みすぎない

Page Structure

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

1. ファーストビュー（ギフト商品の世界観を一目で伝える）: 木の食卓に並ぶ商品の全幅写真。右端に縦書きのキャッチを置き、左下にロゴ、左上にギフトバッジを添える
2. コンセプト（ブランドの想いを伝える）: セージグレーの地に、左は皿の写真、右は縦書きの見出しと中央揃えの本文。背景に結び紋の透かしを敷く
3. ラインナップ概要（3 種の商品があることを示す）: 木のボードに並ぶ瓶の全幅写真。右に白い縦書き見出し、左下に白文字の本文を置く
4. 商品紹介1（1 つ目の商品の魅力を伝える）: 白地に縦書きの商品名と瓶の写真、横に使用シーンの写真と時間帯ラベル、下にこげ茶の説明帯
5. 商品紹介2（2 つ目の商品を伝える）: 商品紹介1と左右を入れ替え、説明帯は琥珀茶にする
6. 商品紹介3（3 つ目の商品を伝える）: 商品紹介1と同じ配置で、説明帯はオリーブ緑にする
7. イメージ訴求（贈り物としての特別感を高める）: 3 種を並べた全幅写真の下寄りに、暗い帯のコピーを 2 行重ねる
8. お客様の声（購入者の評価で安心感を与える）: 食材の線画を敷いたセージ地に、楕円の吹き出し 4 つと切り抜いた商品写真をジグザグに配置する。中央に縦書き見出し
9. ギフト包装（贈答への対応を伝えて締める）: 生成り地に横書きのリード、箱入り商品の写真と包装の写真を並べ、中央揃えの本文で締める

Imagery

• 木のまな板や木のテーブルの上で、暖かい斜光で撮る
• トースト・バゲット・木のスプーン・籐かごなどのパン小物を添える
• 瓶はラベルが見える角度で撮り、スプーンで中身をすくうシズル感を入れる
• 背景に食材の細い線画イラストを薄い色で敷き詰める
• 結び紋のような和の幾何学模様を細い線で透かしとして使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では左右 2 分割をやめて縦に積み、縦書きの見出しは写真の横に重ねるか小さくする
• SP の説明帯は全幅にし、内側の余白を 20px 取る
• 口コミは SP では吹き出しを 1 列に縦に並べる
• PC は最大幅 1080px 程度で写真を全幅で見せる

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