DESIGN.md — クリーム地×茶×赤の丸いお菓子ブランドLP（Warm Cream Chocolate Sweets Brand LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: やさしい・柔らかい、かわいい、親しみ・手作り感、ポップ・元気
• キーワード: クリーム色・チョコ茶・丸モチーフ・赤ピルボタン・波括弧見出し・ドット線
• 地の質感: フラットな淡黄の地に、薄い円・チェック柄・半円パターンを重ねて質感を出す
• 形: 円形写真・丸ドット・角丸カード・ピル型ボタン
• 温度感: 暖色。黄〜ベージュ〜茶でまとめ、赤は差し色

Colors

• 地はクリーム色と淡黄を交互に使い、白は使わない
• 文字は黒ではなくチョコ茶で統一する
• 赤は主ボタンとナビ帯だけに使う
• 黄はセクション見出しのラベルと丸い矢印ボタンに使う
• カードは淡黄の面と細い茶線で囲む
• 装飾円は黄・ピンク・ベージュを低彩度で散らす

Typography

• 見出しは中央揃えで、上に英字の小ラベルを置く
• 大見出しの左右に波線の括弧装飾をつける
• 本文は中央揃えで短く改行する
• 見出しも本文もチョコ茶色
• 手書き風フォントはポイント番号などの添え物だけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードは 2 列グリッドも可
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツは中央寄せで最大幅を狭めに保つ
• 主力商品は大きい横長カードに、それ以外は 2 列の小さいカードに
• 特長は中央の商品写真から点線で円形写真のポイントにつなぐ
• カルーセルは左右に黄色い丸矢印、下にドットのページ送りを置く
• セクションごとに地色を切り替えて区切る

Elevation & Depth

• 影はほぼ使わずフラット
• カードは細い茶線か淡黄の面で浮かせる
• 写真の上に重ねた円形のサブ写真は白縁で区別する

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: お菓子の写真は円形か角丸に切り抜く。パッケージは切り抜きで配置
• セクション境界: 直線で地色を切り替える。チェック柄や半円パターンの帯もある
• ボタンはすべてピル型
• 見出しラベルは両端を丸めた黄色の帯
• 装飾は円とドットが中心
• カードの角は12〜20px

Components

• 赤ピルボタン（button-primary）: 赤い面に白文字、右に矢印アイコン。商品詳細などに使う
• 波括弧の見出し（heading-bracket）: 英字小ラベルと大見出しを、左右の波線括弧で挟む
• 黄色いラベル見出し（label-ribbon）: 茶の細枠がついた黄色いピル帯で、小見出しを中央に置く
• 商品カード（product-card）: 淡黄の角丸面に、パッケージ写真・商品名・注記・赤ボタンを縦に並べる
• ポイント円写真（point-callout）: 円形写真と手書き風の番号ラベル。中央の商品写真と赤い点線でつなぐ
• 茶枠の情報ボックス（info-box）: 太めの茶線で囲った角丸ボックス。上辺に黄色ラベルを重ねる
• 丸矢印ボタン（carousel-arrow）: 黄色の円の中に茶色の矢印。下に赤と茶のドットでページ送り
• 波形円バッジ（badge-scallop）: 黄色い波形の円に茶文字。横長バナーの左端に置く
• 赤いナビ帯（nav-bar）: ヒーロー直下に横一列の赤い帯を置き、白文字でメニューを並べる

Do's and Don'ts

Do - 地色はクリーム系、文字はチョコ茶にする - 写真は円や角丸で柔らかく切り抜く - ボタンは赤のピル型に右矢印をつける - 見出しは英字ラベル＋波括弧で統一する - 余白を広めにとって中央揃えで組む

Don't - 純白や純黒を大きく使わない - 赤をボタンとナビ帯以外で多用しない - 鋭い角や重い影をつけない - 寒色を持ち込まない - 本文を左右いっぱいに広げない

Page Structure

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

1. ファーストビュー（ブランドの幸せ感を一目で伝える）: 黄色い装飾円の上に大きな円形の商品写真と、周りに小さな円形写真。中央にロゴ、上に短いコピー
2. ナビゲーション（各コンテンツへ誘導）: 赤い帯に白文字のメニューを横並び。その下に黄色いSNS誘導バナー
3. ブランド紹介（商品の特長を説明）: 波括弧見出しとリード文。中央の商品写真の周りに円形ポイント写真を3つ置き、点線でつなぐ
4. 深掘りバナー（おいしさの詳しい解説へ誘導）: 茶枠の横長バナー。左に波形バッジ、右に断面写真、中央に赤ボタン
5. パッケージの秘密（ブランドの物語）: 茶枠ボックスに黄ラベル。2列で写真・見出し・中央揃えの本文
6. 製造紹介（工場見学への誘導）: 茶枠ボックス。左に文章と赤ボタン、右に製造ラインの写真
7. 商品ラインアップ（定番商品を一覧で見せる）: 主力は大カード、それ以外は2列の淡黄カードグリッド
8. 限定商品（季節の商品を紹介）: 斜めのNEWバッジつきカードを横に流すカルーセル。黄色い丸矢印
9. 周年企画（キャンペーンを訴求）: 黄色い角丸の大パネル。赤い点線の円の中に写真、赤リボンのサブ見出し
10. 活動紹介（ブランドの社会活動を紹介）: 3列のサムネイルカード。イラストや写真に見出しと短い本文
11. レシピ（アレンジの提案）: チェック柄の地に、写真カードのカルーセルと、茶枠の横長レシピカード2枚

Imagery

• お菓子は暖かい自然光で、木のテーブルの上でシズル感を出して撮る
• 断面や素材（クリーム・卵・チョコ）のアップを円形に切り抜く
• パッケージは背景を切り抜いて少し傾けて置く
• 背景に黄・ピンク・ベージュのぼかした円を散らす
• 活動紹介などには、やさしい線のフラットな人物イラストを使う
• チェック柄や半円パターンを薄く敷いて地に変化をつける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは商品グリッドを1〜2列に減らす
• ヒーローの周囲の円写真は数を減らして小さくする
• ナビ帯はハンバーガーメニューか横スクロールにする
• 2列の情報ボックスは縦積みにする
• カルーセルは1枚と少しが見える幅にする

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