DESIGN.md — 麻布地と焼き色の手作りパンミックス LP（Linen Texture Homemade Bread Mix LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ナチュラル、親しみ・手作り感、やさしい・柔らかい
• キーワード: 麻布テクスチャ・焼き色ブラウン・手描き線画・丸い切り抜き・波形境界・レシピカード
• 地の質感: 生成りのキャンバス（麻布）調の織り目を背景に敷く。白地のセクションと交互に並べる。
• 形: 円形の写真、波形（スカラップ）の境界、手描き風の不揃いな枠線、角丸のピル型ボタン。
• 温度感: 暖色寄り。クリーム・茶・オレンジが中心で、差し色に若草色とサーモンピンクを使う。

Colors

• 地は麻布テクスチャと白を交互に使い、セクションの切り替えをはっきりさせる。
• 文字は黒ではなくこげ茶系を使う。
• 購入 CTA だけオレンジにして、ほかの色と混ぜない。
• サブ導線（レシピ・動画）のボタンはこげ茶にする。
• カテゴリは緑とサーモンで色分けし、帯・タブ・ボタンを同じ色にそろえる。
• 数字の強調はサーモン赤、見出しの強調は黄色マーカーにする。
• button-primary は文字 #FFFFFF × 背景 #FE5C13 のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D54301、4.53:1）を使う。
• button-category は文字 #FFFFFF × 背景 #659A0E のコントラスト比が 3.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#56830C、4.52:1）を使う。
• worry-bubble は文字 #FFFFFF × 背景 #8A8A8A のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#767676、4.54:1）を使う。
• shop-button は文字 #FFFFFF × 背景 #FE5C13 のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D54301、4.53:1）を使う。

Typography

• 見出しは太い丸ゴシックで、柔らかく親しみやすい印象にする。
• 本文も太め（700）にして、テクスチャ地の上でも読めるようにする。
• 数字は大きくしてサーモン赤で目立たせる。
• 悩みの言葉や添え書きは手書き風の書体にする。
• 見出しは中央揃え、本文は左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC では特長を 2 列、レシピカードを 3 列にする。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 特長は「番号の丸 → 見出し → 円形の写真 → 説明文」の縦の流れにする。
• 番号は点線で左右に挟んで中央に置く。
• レシピカードは縦に並べ、カード同士の間を 32px あける。
• ボタンは画面幅の約 85% にする。
• テクスチャのセクションは上下に波形の境界を付ける。

Elevation & Depth

• ボタンには下方向に淡い影（0 3px 6px rgba(0,0,0,.2)）を付ける。
• カードは影なしで、手描き風の茶色の枠線だけにする。
• ヘッダーは白地にごく薄い影を付ける。

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 特長の写真は筆で塗ったような不揃いな円形に切り抜く。レシピの写真は角丸なしの長方形にする。
• セクション境界: テクスチャ地の上下を波形（スカラップ）にする。
• ナビやレシピのボタンはピル型、販売店ボタンは角丸 8px の長方形にする。
• FV のタイトルは白い円の中に収める。
• カードの枠は手描き風の不揃いな線にする。
• カテゴリ帯は点線で縁取った長方形にする。

Components

• 購入ボタン（button-primary）: オレンジのピル型ボタン。右に下向き矢印の白い丸アイコンを付ける。
• 動画レシピボタン（button-secondary）: こげ茶のピル型ボタン。右に矢印の丸アイコンを付ける。
• カテゴリ別レシピボタン（button-category）: カテゴリの色（緑・サーモン）で塗ったピル型ボタン。
• 特長の番号（number-badge）: こげ茶の丸に白い数字。左右に茶色の点線を伸ばす。
• クリップ付きレシピカード（recipe-card）: クリーム地に手描き風の茶色の枠。左上にクリップのアイコン。中は「名前 → 写真 → ボタン」の順に並べる。
• カテゴリ見出しの帯（category-band）: 淡い緑か淡いピンクの横長の帯。内側を白い点線で縁取る。
• 悩みの吹き出し（worry-bubble）: グレーの雲形の吹き出しに白い手書き文字。困った人物のイラストの周りに 4 つ置く。
• ポイントの一覧枠（point-list）: クリーム地の枠に手書き風の「Point 番号」を付け、各行の下に黄色の点線を引く。
• マーカー付き見出し（heading-marker）: 小見出しに黄色の下線マーカーを引き、大見出しの左右に斜線の装飾を付ける。上に電球のアイコンを置く。
• 販売店ボタン（shop-button）: 販売店ごとに色を変えた、角丸の横長ボタンを縦に 4 つ並べる。

Do's and Don'ts

Do - 背景には麻布調のテクスチャを使い、白地のセクションと交互に配置する。 - 料理の写真は木目や白い皿の上で、明るく柔らかい光で撮ったものにする。 - 文字・線・アイコンは茶系の色でそろえる。 - カテゴリは色で分け、帯とボタンの色を一致させる。 - 余白の部分に、調理器具の茶色い線画イラストを散らす。

Don't - 純粋な黒（#000000）の文字は使わない。 - 寒色や青系の色をメインに使わない。 - 直線的で硬い枠や、シャープな角だけで構成しない。 - 購入 CTA のオレンジを、ほかのボタンに使わない。 - 写真に強いフィルターやコントラストをかけない。

Page Structure

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

1. ヘッダー（ブランドの表示とメニューへの導線）: 白い帯の左にロゴ、右に丸いハンバーガーメニューを置く。
2. ファーストビュー（商品を印象づける）: 麻布地に料理写真を円形でコラージュする。中央に白い円のタイトル、上に茶色のリボン、下に商品パッケージと実績のバッジを置く。
3. 悩みの提起（家庭で作るときの不安に共感する）: 困った人物のイラストの周りに、グレーの雲形の吹き出しを 4 つ置く。下端は波形にする。
4. 解決策のポイント（利点を 3 つにまとめる）: クリーム地の枠に、円形の人物写真と「Point 1〜3」の一覧を入れる。
5. 特長（特長 4 つを詳しく説明する）: 白地に「番号の丸 → 見出し → 円形の写真や円グラフ → 説明文」を縦に繰り返す。
6. 中間 CTA（購入へ誘導する）: オレンジのピル型ボタンを中央に置く。
7. 動画（作り方を動画で見せる）: 麻布地に線画イラストを散らし、数字の吹き出し付きの見出し、埋め込み動画、茶色のボタンを並べる。
8. アレンジレシピ（いろいろな使い道を見せる）: 手書き風の見出しの下にカテゴリのタブを 2 つ置く。カテゴリ帯の後にクリップ付きのカードを並べる。
9. 商品情報・購入（仕様を示し、販売店へ誘導する）: 麻布地に、パッケージ写真・タイトルのロゴ・仕様の表・販売店ボタン 4 つを並べる。
10. フッター（著作権の表示）: クリーム地に、中央揃えの小さな文字で入れる。

Imagery

• 料理は木のボードや白い皿に載せ、斜め上から自然光で撮る。
• 特長の写真は筆で塗ったような不揃いな円形に切り抜く。
• 人物はやさしいタッチのイラストにし、オレンジのエプロンなど暖色の服を着せる。
• 泡立て器や麺棒などの調理器具を、茶色の単色の線画で描く。
• 円グラフは布の質感を残した、焼き色系の色で塗る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツの幅を約 900px にして中央に寄せ、左右の余白を広くとる。
• PC の FV はタイトルの円を左、写真を右に置く横長の構図にする。
• 特長は PC で 2 列のグリッドにする。
• レシピカードは PC で 3 列にし、カテゴリのタブは省く。
• 購入セクションは PC でパッケージ写真を左、情報を右に置き、販売店ボタンを 2×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 行書くと起動時に読み込まれる。