DESIGN.md — クリーム黄と波形の北海道チーズ菓子 LP（Butter Yellow Wavy Sweets Brand LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ナチュラル、やさしい・柔らかい、シンプル・ミニマル、かわいい
• キーワード: クリームイエロー・波形の境界・単色背景の商品写真・広い余白・字間の広いゴシック・緑の草ストライプ
• 地の質感: フラットな面だけで作る。グラデーションや影は使わず、写真の質感にまかせる
• 形: 写真とカードは角丸 12px 前後。セクション境界はゆるい波形。ロゴは手書き風の不定形
• 温度感: 暖かい。黄色とバター色が中心で、黒に近い焦げ茶の文字で落ち着かせる

Colors

• 地は白とクリーム黄の 2 色を交互に使い、クリーム帯は波形で出入りさせる
• 黄色はロゴ・NEW バッジ・見出し下線だけに使う
• 商品写真は 1 商品 1 色の単色背景（黄・ピンク・ミント・ベージュ・水色）で変化を出す
• 緑は草原ストライプ装飾のみ。文字やボタンに使わない
• 文字は純黒を避け焦げ茶系にする

Typography

• 和文は字間を 0.1em 前後広げ、行間 2.0 で余裕を出す
• セクション見出しは英字大文字で左揃え
• 商品名と価格は中央揃え
• 価格は数字だけ大きく太くし、単位と税抜表記は小さく添える
• 見出しは控えめなサイズに抑え、写真を主役にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ニュースのみ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約 22px
• 商品は写真→名前→説明→価格→注記の縦積みで、間を 60px 程度空ける
• コンセプト写真は画面端まで出して横に並べる
• ニュースは横スクロールのカルーセルでも可

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは色面の切り替えと波形の重なりで出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸 12px の横長矩形。商品は約 3:2
• セクション境界: 大きくゆるい波形のカーブ。フッター下端には緑の草ストライプ
• ヘッダーのロゴ台は右下だけ大きく丸めた白い面
• 告知カードは角丸 20px のクリーム面
• バッジは小さなピル型

Components

• 英字セクション見出し（section-title-en）: 大文字の英字を左揃えで置き、下に十分な余白をとる
• 商品ブロック（product-block）: 単色背景の角丸写真の下に、中央揃えの商品名・説明・価格・注記を並べる
• NEW バッジ（badge-new）: 商品名の左に置く黄色のピル型の小さなラベル
• 下線付き小見出し（underline-tab）: 店舗の区分名の下に黄色の太い短線を引く
• 期間表示の枠（date-chip）: 細い焦げ茶の線で囲んだ角丸 4px のボックス
• 近日公開カード（coming-soon-card）: クリーム色の角丸カードにロゴと英字の大見出しを置き、下端を緑の草ストライプで縁取る
• ニュースカード（news-card）: 角丸サムネの下に太字 3 行の見出しを置き、続きは省略記号にする。下に日付
• 丸矢印リンク（link-arrow）: 細線の円に矢印を入れ、横に短いラベルを添える

Do's and Don'ts

Do - 写真の背景はそれぞれ単色にして、1 商品ごとに色を変える - 余白を広く取り、1 画面に要素を詰め込まない - クリーム帯の出入りは波形のカーブでつなぐ - 黄色は小さな面積でアクセントとして使う

Don't - 強いグラデーションやドロップシャドウを使わない - 赤や派手な CTA ボタンで購買をあおらない - 見出しを極太の大きな文字にしない - 緑をストライプ装飾以外に使わない

Page Structure

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

1. ファーストビュー（商品の魅力を一目で伝える）: 石目調の台に焼き菓子を斜めに散らした俯瞰写真を全面に敷く。左上に白いロゴ台、右上にカートとメニュー
2. 新着ニュース（最新情報を知らせる）: 白地に小見出しを置き、角丸サムネと見出しの横スクロールカード
3. ブランド動画/写真（産地の空気を伝える）: 牧場の全幅写真の中央にロゴを重ね、下端は波形でクリーム帯へつなぐ
4. コンセプト（ブランドの成り立ちを語る）: クリーム地に 3 行のコピー、角丸の商品写真、字間の広い本文を数段落
5. 素材写真ギャラリー（原料と産地を見せる）: 角丸写真を横に並べ、画面端で切れるように配置
6. 商品一覧（ラインナップと価格を見せる）: 単色背景の写真、中央揃えの商品名、説明、価格、アレルギー注記を縦に繰り返す
7. 近日公開（次の新商品への期待を高める）: クリーム色の角丸カードにロゴと英字見出し、下端に草ストライプ
8. 店舗一覧（購入場所を案内する）: 波形で始まるクリーム帯。黄色の下線付きの区分名、店舗写真、住所、営業時間、地図リンク
9. ニュース（過去のお知らせ一覧）: 2 カラムのカードグリッドと丸矢印付きの一覧リンク
10. フッター（ブランドで締める）: 中央にロゴ、SNS アイコン、コピーライト。最下端に緑の草ストライプ

Imagery

• 商品写真はパステルやビビッドの単色背景に置き、斜め上から自然光で撮って柔らかい影を落とす
• 菓子は 1〜2 個を重ねて寄りで撮るか、整列・散らしで俯瞰する
• 産地写真は牧場の牛やチーズ素材などで、彩度を少し抑えたドキュメンタリー調にする
• ロゴは山形の黄色い不定形に手書き風の文字を組み合わせる
• 装飾は縦線を不揃いに並べ、草原のように見せる緑のストライプ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 70% に絞り、中央に寄せる
• 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 行書くと起動時に読み込まれる。