DESIGN.md — 生成りと朱の京和菓子ミニマル LP（Kyoto Wagashi Elegant Minimal LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 和風、上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 京和菓子・縦書き明朝・朱の判子・広い余白・雲形装飾・淡い和紙地
• 地の質感: 白地と和紙のような淡いグレーの地。写真は柔らかな自然光で撮り、ベージュのグラデーションに溶け込ませる
• 形: 角のない直線レイアウト。丸い判子バッジと月桂樹の装飾、霞のような雲形が主な形
• 温度感: 温かい中間色。焼き色のオレンジと朱で温度を足す

Colors

• 地は白と淡いグレーを交互に使い、セクションを色の差だけで分ける
• 朱は判子バッジ・実績数字・波線だけに使い、面積は 2% 以下にする
• 文字は墨色 1 色で、本文に色は付けない
• 商品の焼き色オレンジとベージュを写真の背景トーンとして揃える
• 濃色の面は写真の中だけにとどめ、ベタ塗りの濃色帯は作らない

Typography

• 全体を明朝で統一し、ゴシックは使わない
• 本文は縦書き（writing-mode: vertical-rl）で右から左へ数行並べる
• 字間は 0.15em 以上に広く取り、品よく見せる
• 見出しは中央揃えで 2 行に分けて組む
• 数字だけ大きな欧文セリフにし、単位は小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の比較など 2 点並びのみ 2 カラム
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 余白を広く取り、1 画面に 1 つのメッセージだけ置く
• 縦書き本文の周りに小さな商品イラスト写真を散らす
• 写真は画面幅いっぱいに置き、上下をグラデーションで地色になじませる
• 注釈は細い引き出し線で商品写真と結ぶ

Elevation & Depth

• 影は使わずフラットにする
• 立体感は写真の自然な影だけで出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の矩形か、切り抜いた商品の単品写真
• セクション境界: 直線の色替え、または写真下端をグラデーションで白に溶かす
• 判子バッジは正円にする
• 雲形（霞）の装飾をセクション端に添える
• カードの枠線や角丸ボックスは使わない

Components

• 朱の判子バッジ（stamp-badge）: 朱の円に白い 1 文字、または白い円に朱の 2 行文字を入れた和風の判子
• 月桂樹の実績表示（laurel-stat）: 朱の月桂樹で囲んだ実績数字。小さなラベル 2 行と大きな数字の組み合わせを 2 つ並べる
• 縦書き本文ブロック（vertical-copy）: 明朝の縦書き本文を 5〜7 行並べ、中央に置く
• 引き出し線の注釈（callout-line）: 商品写真から伸びる細い線の先に、太めのラベルと縦書きの説明を置く
• 波線アンダーライン（wave-underline）: 見出しの強調行の下に朱の細い波線を引く
• サイズ比較図（size-compare）: 大小 2 つの商品を並べ、縦書きの名前と寸法線・数値を添える
• 霞の雲形装飾（cloud-ornament）: 淡い青緑とベージュの横長の霞を、セクション左右の端に置く

Do's and Don'ts

Do - 見出しと本文はすべて明朝にし、字間を広く取る - 本文は縦書きで組み、和の雰囲気を出す - 朱は判子・数字・波線だけにしぼる - 写真の背景はベージュや淡い色に揃え、地色とつなげる - 余白をたっぷり取り、要素を詰め込まない

Don't - 原色や蛍光色の大きなボタン・帯は使わない - 太いゴシックの煽り見出しは使わない - ボックスに影や角丸カードを多用しない - 1 セクションに写真を詰め込みすぎない - 朱を背景の広い面に使わない

Page Structure

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

1. ファーストビュー（商品の世界観と上品さを一目で伝える）: ベージュ地に器と商品を並べたテーブル写真を全幅に置く。縦書きの筆文字ロゴと判子、短いコピー、丸い配送バッジを添える
2. 商品紹介・ブランドの由来（歴史と商品のコンセプトを伝える）: 白地に中央見出しを 3 行置き、縦書き本文を並べる。周りに味違いの商品の小さな写真を散らす
3. 実績（人気と評価で信頼を得る）: 朱の月桂樹で囲んだ大きな数字を 2 つ横に並べる
4. 食感の訴求（新しい食感を感覚的に伝える）: 淡いグレーから濃い器へつながる全幅写真に、左上の明朝キャッチを重ねる
5. こだわり（生地とクリームの特長を説明する）: 切り抜いた商品写真から引き出し線を伸ばし、ラベルと縦書きの説明を置く。端に霞装飾を添える
6. サイズ比較（一口サイズである点を具体的に見せる）: 和紙風グレー地に波線つき見出しを置き、大小比較図と寸法を描く。下に手で持つ写真と断面写真を 2 枚並べる

Imagery

• 自然光でやわらかく撮り、ベージュやグレーの淡い背景にする
• 白い器や木の匙、抹茶粉など和の小物を添えたテーブル写真にする
• 商品の単品は背景を抜いて真上か斜めから撮る
• 果物や素材を添えた小さな切り抜き写真を、余白のアクセントに使う
• 手で持つ写真でサイズ感を伝える
• 霞・雲形・月桂樹は細く淡い線で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は PC 幅でも中央 1 カラムで組まれているので、SP でもほぼ同じ構成にする
• SP では見出しを 18〜20px にし、縦書き本文は高さを抑えて 6 行前後にする
• 実績の 2 つの数字は SP でも横並びを保つ
• 引き出し線の注釈は SP では写真の上下に分けて置く
• PC では本文幅を 600px 前後に収め、左右の余白に装飾写真を散らす

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