DESIGN.md — えんじ×クリーム色の洋菓子ブランド LP（Warm Caramel Custard Dessert Brand LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: やさしい・柔らかい、上品・高級、親しみ・手作り感、ナチュラル
• キーワード: カラメル・クリーム色・えんじ・波形区切り・縦書きコピー・英字見出し
• 地の質感: ミルクが流れるような淡いマーブル模様の背景と、つやのあるシズル写真
• 形: 大きめの角丸カード、ピル型の二重線ボタン、円形の切り抜き写真、波形のセクション境界
• 温度感: 暖かい。黄み寄りのクリーム色とカラメルの赤茶

Colors

• 地はクリーム色と淡いオレンジ色の 2 色だけを使い、セクションごとに交互に切り替える
• 文字・ボタン・ラベルはすべてえんじ色 1 色でそろえる。黒い文字は使わない
• 濃いえんじ色の面は、フッター・ボタン・お知らせ帯・商品容量のラベルだけに限る
• ピンク〜黄緑のグラデーションは周年企画のカードだけで使う
• 写真カードは白に近いクリーム色にして、地の色から少しだけ浮かせる

Typography

• 見出しは英字の大見出しの下に日本語の小見出しを置く 2 段構成にする
• 英字見出しの先頭には同じ色の小さな黒丸を付ける
• 情緒的なコピーは明朝体の縦書きにして、写真の横に置く
• 本文は字間を広め（0.08em）、行間を 2.0 にしてゆったり組む
• 文字の色はすべてえんじ系にそろえる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードは左右いずれかの端まで広げる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は 20px 前後
• 見出しは左寄せ、ボタンは中央寄せ
• 商品カードは片側を画面端まで広げ、もう片側だけ角を丸める
• 装飾用の円形写真はセクションの右上に、画面からはみ出すように置く
• セクション間は波形でつなぐ

Elevation & Depth

• 影はほぼ使わず、地の色の差で面を分ける
• 写真カードは白からクリーム色へのごく淡いグラデーションで、少しだけ浮いて見せる
• 円形バッジは影なしでカードの角に重ねる

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き写真をカードに載せる。素材写真は円形に切り抜く
• セクション境界: ゆるやかな波形の曲線
• ボタンはピル型にし、内側に白い細線を入れて二重線に見せる
• お知らせ帯は左側だけ角を丸め、右端まで伸ばす
• 容量ラベルは角丸なしの小さな矩形にする
• 歴史の写真はグレーの角丸カードに入れ、横スクロールで並べる

Components

• 二重線のピル型ボタン（button-primary）: えんじ地に白い文字と右向きの細い矢印。内側に白い細線を入れる
• 周年企画用のボタン（button-anniversary）: 形は主ボタンと同じで、色だけローズピンクにする
• 英字と日本語の見出し（section-heading）: 黒丸付きの大きな英字見出しの下に、日本語の小見出しを置く
• 円形の詳細バッジ（badge-view-more）: えんじ色の円の中に虫眼鏡と短い文言を入れ、周りに英字を回す。商品カードの角に重ねる
• 商品カード（product-card）: 片側を角丸にした白い写真エリアの下に、商品名・容量ラベル・説明文を並べる
• 容量ラベル（label-volume）: えんじ地に白い文字の小さな矩形ラベル
• お知らせ帯（news-bar）: メインビジュアルの下に、日付と更新内容を 2 行で載せる。右端まで伸ばし、左側だけ角を丸める
• キャンペーンカード（campaign-card）: 白い角丸カードにタイトル・バナー・期間ラベル・説明・ボタンを縦に並べる
• フッターのナビ（footer-nav）: えんじ地に、英字と日本語のメニューを細い線で区切って並べる

Do's and Don'ts

Do - 地は暖かいクリーム色系だけで組む - 英字見出しと日本語の小見出しを必ずセットで置く - セクションの境界には波形を使う - 素材写真を円形に切り抜き、画面からはみ出すように置く - 商品写真は白い背景で切り抜き、パッケージをはっきり見せる

Don't - 黒や寒色の文字を使わない - 角張ったボタンにしない - 濃い影や強いグラデーションを多用しない - セクションを直線で区切らない - 原色の赤など彩度の高い色を広い面に塗らない

Page Structure

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

1. ファーストビュー（シズル感で一目でおいしさを伝える）: 大きな商品写真、上から垂れるソース、縦書きの明朝コピー、ロゴとブランド名、パッケージ写真を重ねる
2. お知らせ（最新の情報を知らせる）: えんじ色の帯に日付と見出しを 2 行で載せる
3. こだわり（素材と製法を伝える）: 英字見出し、円形の素材写真、縦書きの大コピー、パッケージ写真、短い説明、ボタンの順に置く
4. 商品紹介（商品ラインナップを見せる）: 淡いオレンジ地に、商品カードを端寄せの向きを交互にして縦に並べる
5. 歴史（ロングセラーの信頼感を伝える）: 明朝の大コピー、過去のパッケージの横スクロールカード、ボタン
6. 周年企画（特設ページへ誘導する）: ピンクから黄緑へのグラデーションの角丸カードに、記念ロゴとピンクのボタンを載せる
7. キャンペーン（応募を促す）: スライダー形式のカードに、バナー・期間ラベル・ボタンを載せ、下にドットのインジケーターを置く
8. フッター（ページ内の移動と SNS への導線）: 布のような質感のえんじ地に、ロゴ・ナビ・SNS アイコン・コピーライトを置く

Imagery

• カラメルのつやが出るように、やや上から光を当ててデザートを撮る
• 卵・牛乳などの素材は、灰色の石の天板の上で真上から撮り、円形に切り抜く
• パッケージは斜め 45 度で白い背景に切り抜く
• 背景にはミルクが流れるような淡いマーブル模様を薄く敷く
• 過去のパッケージはモノクロ写真にして、グレーのカードに入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、商品カードの写真と説明文を左右に並べ、行ごとに左右を入れ替える
• PC のファーストビューは横長で、ブランド名を左下、お知らせ帯を右下に置く
• PC のこだわりセクションは、縦書きコピー・説明・円形写真を 3 カラムで並べる
• PC の周年企画は、文章とロゴを左右に並べた横長カードにする
• PC でも見出しの文字サイズは SP の約 1.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 行書くと起動時に読み込まれる。