DESIGN.md — 白×墨ブラウン×砂色の老舗洋菓子ブランド LP（Heritage Dark Brown Premium Confectionery LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、シンプル・ミニマル、信頼・誠実、レトロ
• キーワード: 老舗の物語・余白多め・英字セリフ見出し・墨色グラデーション・生成り注記・円形矢印ボタン
• 地の質感: 白地はフラット。物語セクションと footer だけ、光が差すような墨ブラウンのグラデーションにする
• 形: 写真は角丸なしの矩形。ボタンは細線の正円と矢印、バッジだけピル型
• 温度感: 暖色寄りのニュートラル。焼き菓子の茶色と砂色で温かさを出す

Colors

• 白地を基本にし、ブランドの物語と footer だけを墨ブラウンのグラデーション面にする
• セクションの区切りは面の色で付け、イベントは上半分だけ砂色の帯にしてカードを帯からはみ出させる
• 朱赤は販売状況のバッジだけに使い、ほかの強調には使わない
• 注意書きは生成り色の面に入れ、本文と区別する
• 文字は真っ黒を避け、#333 前後の濃いグレーにする
• ボタンは塗らず、細い枠線と矢印で控えめに見せる
• status-badge は文字 #FCFDFA × 背景 #E8381E のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DE3017、4.53:1）を使う。

Typography

• セクション見出しは英字セリフの細字にし、右横に小さな和文ラベルを添える
• 見出しの下に 24px ほどの短い横線を入れる
• 和文のキャッチは字間を広めに取り、2 行に分ける
• 本文は小さめ（10px 前後）で行間 1.9。静かに読ませる
• 商品名の上に、短いキャッチを小さく置く
• PC の物語セクションでは、キャッチを縦書きにしてもよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は商品を 2 カラム、イベントを 3 枚並べたカルーセルにする
• 本文ブロックの幅: 画面幅の約 95%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 10px と狭く、本文ブロックを画面幅いっぱいに使う
• 商品写真は左右に約 40px の余白を取り、中央に置く
• 商品ブロックは、写真→キャッチ→名前→本文→注記→購入リンクの順にする
• 商品ブロックの間は 60px 以上空ける
• 見出しのすぐ下に、一覧へのリンクと円形矢印ボタンを置く

Elevation & Depth

• イベントカードだけ、柔らかい影（0 4px 12px rgba(0,0,0,.15)）を付ける
• 物語セクションの小物写真は、切り抜きに落ち影を付けて浮かせる
• それ以外はフラットで、影を付けない

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 4px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの横長矩形。物語セクションの白黒写真は、白い額縁で囲む
• セクション境界: 直線で面の色を切り替える
• 矢印ボタンは直径 36〜40px の細線の正円にする
• 状態バッジは塗りのピル型にし、写真の左上に重ねる
• タグは濃いグレーのピル型にする
• 区切り線は 1px の薄いグレー

Components

• 英字見出しと和文ラベル（section-heading）: 英字セリフの見出しに小さな和文を添え、下に短い横線を引く
• 円形矢印リンク（circle-arrow-link）: テキストの右に、細い枠線の正円と矢印を置くリンク
• 販売状況バッジ（status-badge）: 商品写真の左上に重ねる、朱赤のピル型バッジ
• 注記ボックス（note-box）: 取扱条件や受付期間を入れる、生成り色の面
• 購入リンク行（buy-row）: 左に太字テキスト、右に円形矢印を置き、下に線を引いた行
• イベントカード（event-card）: 影付きの白カード。ポスター画像、日付、グレーのタグ、太字タイトルの順に並べる
• 物語のダーク面（story-dark）: 墨色のグラデーションに、白文字のキャッチと本文を載せる
• トップへ戻るボタン（page-top）: ベージュの円に上向き矢印を入れたボタン

Do's and Don'ts

Do - 余白を広く取り、高級感を出す - 見出しは英字セリフと小さな和文の組み合わせに統一する - 購入導線は塗りのボタンにせず、テキストと円形矢印で控えめに示す - 物語の部分は白黒写真や古い小物を使い、歴史を感じさせる - 販売の条件は生成り色のボックスにまとめる

Don't - 派手な大きいボタンやグラデーションのボタンを置かない - 朱赤をバッジ以外に使わない - 写真に角丸や装飾枠を付けない（物語の白黒写真の白枠は除く） - 本文を大きく太くしない - ポップな丸ゴシックやイラスト調の装飾を使わない

Page Structure

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

1. ファーストビュー（商品のシズル感で惹きつける）: 焼き菓子の写真を全面に敷いたスライダー。左上にロゴ、右上にメニュー、右下にドットと一時停止ボタンを置く
2. お知らせ（最新の情報を伝える）: 英字見出しの下に、日付・カテゴリ・1 行の本文を並べたリスト
3. ブランドストーリー（歴史と理念を伝える）: 墨色のグラデーション面に白文字のキャッチ、白枠の白黒写真、切り抜きの小物、本文、円形リンクを置く
4. 商品情報（商品を紹介し、購入へ誘導する）: 写真とバッジ、キャッチ、名前、本文、注記ボックス、購入リンク行を 1 組にし、縦に繰り返す
5. イベント（活動実績を見せる）: 上半分を砂色の帯にし、影付きカードのカルーセルを置く。下に矢印と進捗バー
6. オンラインストア（EC へ送客する）: 一文のテキストに円形矢印を添え、下に区切り線
7. ショップ（店舗の情報を伝える）: 見出しと短い文だけ。下に SNS アイコンを置く
8. フッター（ナビゲーションと企業情報）: 墨色のグラデーションに、白線のロゴ、キャッチ、英字と和文を併記したナビ。その下の白地に規約と会社ロゴ

Imagery

• 焼き菓子は白い皿に載せ、斜め上からの自然光で撮る。浅い被写界深度にする
• 商品写真は、ティータイムや夜のくつろぎなどのシーンとして撮り、暖色の光で仕上げる
• 大理石の上に素材を散らした俯瞰写真も使う
• 歴史を伝える部分はモノクロの人物写真と、古いパッケージの切り抜きを使う
• ロゴは人の顔を白い線で描いた線画にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、見出しの右端に一覧へのリンクを置く
• PC の商品は 2 カラムのグリッドにする
• PC のイベントカードは 3 枚を横に並べる
• PC の物語セクションは、左に写真、右に本文、右端に縦書きのキャッチを置き、背景に大きな英字を薄く敷く
• PC では、ヘッダーに英字と和文を併記した横並びのナビを置く

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