DESIGN.md — 紺×生成りの上品なアイスケーキ新商品LP（Navy and Cream Patisserie Product LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、信頼・誠実、シンプル・ミニマル
• キーワード: 紺グラデ・生成り地・切り抜きケーキ写真・断面図の引き出し線・欧文見出し・細線枠
• 地の質感: フラットな単色面と、紺の斜めグラデーション。紙のような生成りの地。
• 形: 四角を基本に細い黒線の枠。ボタンだけピル型、表と見出し帯は小さい角丸。
• 温度感: 落ち着いた冷色の紺に、暖色のケーキと焦げ茶を合わせた中間の温度感。

Colors

• 地は生成りで統一し、純白は表セルなど小さい面だけに使う。
• セクション見出しの帯と商品説明パネルは、左上が明るく右下が濃い紺の斜めグラデーションにする。
• 焦げ茶はアレルギー表の商品名帯だけに使い、チョコの色とつなげる。
• 表で該当する項目は紺で塗って白抜きにし、強調色を増やさない。
• ボタンはすべて紺のピル型で白文字にする。赤やオレンジは使わない。
• サイズ表記の帯は淡いベージュかグレーにして控えめにする。

Typography

• 英字見出しの下に短い横線を入れ、日本語の小見出しを添える 3 段構成にする。
• 商品名は数字と名前を太いゴシックで書き、小さなルビを添える。
• 価格は欧文の太字にして、下に細い下線を長く引く。
• 本文は字間を少し広げ、行間 1.8 前後でゆったり組む。
• 枠内の本文は中央揃え、説明パネルの本文は左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アレルギー表は 4 列のグリッド
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 紺の帯セクション（英字見出しのみ）は全幅で高さ約200px。
• 商品写真は紺パネルから上にはみ出させ、パネルは左右20px内側に置く。
• 商品ブロックは商品名、サイズ帯、価格、写真、説明、断面図、注釈の順に並べる。
• ABOUT と HOW TO は細線の四角枠で囲み、英字見出しを上の線にまたがせる。
• 注釈は各ブロックの直後に左揃えで小さく置く。

Elevation & Depth

• 基本はフラットで影を使わない。
• 切り抜きのケーキ写真だけ、右下に柔らかい落ち影を付けて紺パネルから浮かせる。
• 動画の埋め込みには小さい角丸を付けるだけにする。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: ケーキは背景を抜いて斜め俯瞰で見せる。断面は正面から写した四角い切り抜きにする。
• セクション境界: 直線で切り替える。紺帯と生成り地が水平に接する。
• 枠線は1px程度の黒の細線。
• 見出し帯と表は小さい角丸で囲む。
• ボタンは完全なピル型で、右端に細い山括弧を付ける。
• 点線と見出しを組み合わせた区切りを予約エリアに使う。

Components

• 紺グラデの英字見出し帯（section-band-heading）: 全幅の紺グラデ帯。中央に白い英字見出し、短い横線、日本語サブ見出しを置く。
• 細線枠の説明ボックス（outlined-intro-box）: 黒い細線の四角枠。上辺に英字見出しをまたがせ、中央揃えの本文を入れる。
• 紺の商品パネル（product-panel）: 切り抜きケーキを上にはみ出させ、白文字の説明と断面図を載せる紺グラデのパネル。
• 断面図と引き出し線（cross-section-diagram）: 断面写真の右側に白い細線で層の名前を並べる。
• サイズ表記帯（size-chip）: 縦×横×高さを淡い帯に入れ、中央に置く。
• 価格と下線（price-underline）: 写真の左上に太い欧文の価格を置き、細い下線を右へ伸ばす。
• 発売日の丸バッジ（release-badge）: 紺の円に白文字で日付と発売を入れ、価格の横に置く。
• アレルギー表（allergy-table）: 上に焦げ茶の商品名帯を置き、4 列の罫線表を続ける。該当項目のセルは紺塗りの白文字にする。
• ピル型の紺ボタン（button-primary）: 紺のピル型で白文字、右端に山括弧を付ける。予約ボタンは左に白丸アイコンを入れる。

Do's and Don'ts

Do - 生成りの地と紺グラデの帯を交互に並べ、リズムを作る。 - 商品写真は大きな切り抜きにして、パネルから上にはみ出させる。 - 見出しは英字、短い線、日本語の順で統一する。 - 商品ごとにまったく同じ構成を繰り返す。 - 注釈は※付きの小さい文字で各ブロックの直後に置く。

Don't - 赤や黄色など派手な強調色やセール風の装飾を使わない。 - 純白をページの地にしない。 - 角丸の大きいカードや強い影を使わない。 - 手書き風や丸ゴシックの書体を混ぜない。 - 写真に背景や小物を足して切り抜きの清潔さを崩さない。

Page Structure

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

1. ファーストビュー（新商品の発売を印象づける）: 紺地に商品を並べた全面写真。左上にロゴの白パネル、右上に発売日の円形バッジ、左下に白帯の斜めキャッチを置く。
2. ブランド紹介（シリーズのコンセプトを伝える）: 細線枠のボックスに英字見出しと中央揃えの短い本文を入れる。
3. 商品一覧の見出し（商品紹介の始まりを示す）: 全幅の紺グラデ帯に白い英字見出しを置く。
4. 商品紹介（繰り返し）（各商品の味・価格・構造を伝える）: 商品名、サイズ帯、価格、はみ出し写真の紺パネル、説明、断面図、注釈の順に並べ、3 商品分繰り返す。
5. 食べ方の案内（おいしく食べる手順を伝える）: 細線枠に中央揃えの手順文を入れ、下に注釈を置く。
6. 動画（CMで話題性を伝える）: 紺グラデ帯に英字見出しと角丸の動画埋め込みを置く。
7. アレルギー情報（原材料の安心情報を伝える）: 商品ごとに焦げ茶の名前帯と 4 列の表を並べ、該当項目を紺で塗る。
8. 予約 CTA（購入行動へ誘導する）: 情報ボタンの下に点線付きの見出しを置き、ネット予約と店舗予約の 2 つのピルボタンを並べ、税込の注釈で締める。

Imagery

• ケーキは白背景で撮って切り抜き、斜め上 30〜45 度の俯瞰で層とトッピングを見せる。
• 断面写真は真横から撮り、層がはっきり分かるようにする。
• ファーストビューは紺と金茶の布の上に商品を斜めに並べた明るい物撮りにする。
• 写真の右下に柔らかい落ち影を付けて立体感を出す。
• アイコンは紺地に白い線画の簡単なものにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では内容を幅 960px 前後で中央に置き、紺の帯は全幅のまま残す。
• 商品紹介は写真と説明を左右 2 カラムにしてもよい。
• アレルギー表は 3 商品を横に並べるか、6 列に広げる。
• 予約ボタンは横に並べ、それぞれ幅 300px 程度にする。
• 英字見出しは 48px 前後に拡大する。

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