DESIGN.md — 焦げ茶×メープル色の手書き風菓子 LP（Warm Maple Bakery Mix LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、ナチュラル
• キーワード: メープル・シズル感・手書き風・ギンガム柄・えんじ茶・温かみ
• 地の質感: 生成りのギンガムチェックと、淡いクリーム色のぼかし光。見出しリボンには布のような細かいノイズが入る
• 形: 装飾の波形フレームを付けたリボン見出し、白枠の角張ったカード、細い線の四角ボタン
• 温度感: 暖色。茶・オレンジ・クリーム色でまとめた焼き菓子の温度感

Colors

• 地は白・クリーム色・ベージュの 3 色を使い分け、真っ白な部分を広くしすぎない
• 見出しリボンはえんじ茶の面に白文字。ページ内で最も濃い色にする
• 強調したい語はメープルオレンジにして、焦げ茶の文中に混ぜる
• 寒色は使わない。差し色はユーカリ写真の緑程度に抑える
• ボタンは白い面に、えんじ茶の細い線と焦げ茶の文字
• speech-badge は文字 #FFF4F0 × 背景 #E0701E のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B15818、4.55:1）を使う。

Typography

• キャッチと大見出しは手書き風の書体にして、少し傾けたり大小をつけたりする
• 訴求文は 2 行構成にし、2 行目のキーワードをオレンジで大きくする
• 英字の筆記体を薄いベージュの透かしとして見出しの背後に置く
• 本文は小さめにして、中央揃えで行間を広くとる
• 縦書きの商品名は手書き風書体にし、縦の罫線ではさむ
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。レシピは PC で 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算）
• 白いカードを画面幅の約 94% で置き、下地のギンガム柄を左右にのぞかせる
• カードの上端にリボン見出しを半分はみ出させて重ねる
• リボンの左右にフォークとナイフのシルエットを斜めに置く
• 動画はカード内いっぱいの 16:9 で、下に注釈を中央揃えで添える
• レシピは写真→名前→説明 3 行→線ボタンを縦に並べる

Elevation & Depth

• カードは影をごく薄くして、ほぼフラットに見せる
• レシピ写真には 4px ほどの白枠を付けて、写真を貼ったように見せる
• 訴求エリアは中央を白くぼかした光のグラデーションで浮き上がらせる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形で白枠を付ける。ファーストビューは全面の写真
• セクション境界: 直線で切り替える。地色とギンガム柄の切り替えで区切る
• 見出しは波形の装飾フレームを付けたリボン型（上は平らで、下に飾り縁）
• ボタンは角丸なしの細線の長方形で、左端に < や > の矢印を付ける
• バッジは吹き出し型の楕円に縦書きの短い語を入れる

Components

• 装飾リボン見出し（ribbon-heading）: えんじ茶の面に布のようなノイズを入れ、白い二重の縁取りと波形の飾り縁を付ける。白文字は明朝体
• フォーク・ナイフの飾り（cutlery-ornament）: リボンの左右に、えんじ茶のシルエットを斜めに置く
• 魅力訴求カード（appeal-card）: クリーム色のぼかし光の上に、焦げ茶とオレンジの 2 行訴求と英字の透かしを重ねる
• 動画カード（video-card）: 白いカードに動画を埋め込み、下に小さな注釈を添える
• レシピカード（recipe-card）: 白枠の写真、太字の料理名、中央揃えの説明文 3 行で構成する
• 細線の詳細ボタン（button-outline）: 白い面にえんじ茶の 1px 枠。矢印の付いた短いラベル
• 吹き出しバッジ（speech-badge）: オレンジとえんじ茶の楕円吹き出し。特徴を表す 1 語を縦書きで入れる
• 手書きの添え書き（handwritten-label）: 斜めに配置した小見出しの下に、線の延びた手書き風の下線を引く

Do's and Don'ts

Do - 写真はシロップが滴る瞬間など、湯気や艶のあるシズル写真を大きく使う - 見出しは毎回同じリボン型にして、統一感を出す - 強調語だけをオレンジにして、手書き風の書体で弾ませる - 地にギンガム柄やクリーム色の光を使い、温かみを保つ

Don't - 青やグレーなど寒色のボタンを使わない - 角丸の大きいピル型ボタンにしない - 黒一色の太いゴシックで見出しを組まない - 白地だけの殺風景なセクションを続けない

Page Structure

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

1. ファーストビュー（おいしさを一目で伝える）: 全面のシズル写真の左に商品パッケージを置き、手書き風のキャッチを斜めに重ねる。左上に縦長の商品名ラベルを添える
2. 魅力の紹介（味と食感の 2 つの価値を伝える）: リボン見出しの付いた白いカードの中に、クリーム色の光を敷き、2 行訴求を 2 つ縦に並べる
3. 紹介動画（商品の世界観を動画で伝える）: リボン見出しとカトラリー飾りを付けた白いカードに、動画を埋め込む
4. 作り方動画（手軽さを示す）: 紹介動画と同じ形のカード。ギンガム柄の地に重ねる
5. アレンジレシピ（使い道を広げる）: 植物写真の背景に手書き風の大見出しと筆記体の英字を置き、ベージュ地にレシピカードを並べる
6. 締めのビジュアル（印象を残して外部サイトへ誘導する）: ギンガム柄の地に縦書きの商品名、吹き出しバッジ、シズル写真を並べ、下に戻りボタンを置く

Imagery

• ホットケーキにシロップを垂らしバターを載せた、寄りのシズル写真
• 木のテーブルに布ナプキン、フォーク、ナイフを添えた暖色光の食卓写真
• アレンジ料理は陶器の器に盛り、上から斜めに撮る
• ユーカリなどの緑を背景にあしらい、ナチュラル感を足す
• カトラリーのシルエットや、手書き風の下線を飾りに使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では白いカードを中央に幅 約 90% で置き、左右のギンガム柄を広く見せる
• PC の魅力訴求は 2 つを横並びにする
• PC のレシピは 2 カラムのカードにする
• PC のファーストビューはキャッチを 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 行書くと起動時に読み込まれる。