DESIGN.md — 黒板×生成りの手書き風カフェ食品 LP（Chalkboard Cafe Plant-Based Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ナチュラル、親しみ・手作り感、やさしい・柔らかい
• キーワード: 黒板・手書き文字・生成り・木のカトラリー・料理写真・水彩イラスト
• 地の質感: 紙のような細かい布目の生成り地と、チョークのかすれが残る黒板テクスチャ。
• 形: 角丸なしの白カード、ずらし白枠の写真、丸い赤バッジ、角を切り落とした吹き出しカード。
• 温度感: 暖色寄り。焼き色のブラウンとクリーム色が中心。

Colors

• 基本の地は生成りで、商品と開発者のブロックだけ白に切り替える。
• レシピだけ黒板の面に木枠を付け、白文字と白い線で描く。
• 文字は純黒を使わず焦げ茶にする。
• 緑は手書き見出しの強調語 1 つだけに使う。
• 赤はファーストビューの丸いバッジにだけ使う。

Typography

• セクション見出しは手書き体にし、下に小さな英字セリフを大文字で添える。
• 見出しの上には放射状の短い線を置く。
• 特長の見出しでは、強調したい語だけ緑の手書き文字にする。
• 短い説明文は中央揃えで短めに改行し、長い対談文は左揃えにする。
• 対談本文の要所は太字で強調する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC では写真と本文の交互 2 カラム、カードは 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真の背後に白い板を少しずらして重ね、紙を貼ったように見せる。
• 装飾の木のカトラリーや皿は画面端から少しはみ出させる。
• 商品カードは商品パッケージをカードの上端にはみ出させて置く。
• 黒板セクションは画面端から 12px ほど内側に木枠付きで置く。

Elevation & Depth

• カードには淡い影（0 2px 6px rgba(0,0,0,.08)）を付ける。
• 写真は白い板をずらして重ね、影の代わりに奥行きを出す。
• 商品パッケージ画像には軽いドロップシャドウを付ける。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形に切り抜き、ずらした白枠を重ねる。食材はアイテムごとに切り抜く。
• セクション境界: ファーストビューの下端だけ緩いカーブにし、ほかは地の色を直線で切り替える。
• ボタンとカードは角丸なしの四角形にする。
• お客様の声は角を斜めに切り落としたカードにする。
• バッジは赤の正円にする。

Components

• 詳細リンクボタン（button-outline）: 白地に焦げ茶の細い枠を付け、文字の後ろに右矢印を添える。
• 黒板上のボタン（button-chalk）: 透過の地に白い細枠を付け、白文字と矢印を置く。
• 特長の丸バッジ（badge-circle）: 赤い円の中に、白の手書き文字で特長を 2〜3 行書く。3 つ並べる。
• 手書き見出しと英字（heading-handwritten）: 放射線の飾り、手書きの見出し、英字サブタイトルを縦に積む。
• 商品カード（product-card）: 白いカードの上端にパッケージをはみ出させ、商品名・説明・ボタンを中央揃えで置く。
• レシピカード（recipe-card）: 黒板の上に生成りのカードを置き、写真の右上に茶色のリボンを付ける。
• お客様の声カード（voice-card）: 角を切り落とした白いカードに線画の人物イラストを添え、左右交互に配置する。
• ※注釈（note-text）: 小さな灰茶の文字で、※印と出典を書く。

Do's and Don'ts

Do - 黒板とチョーク線の装飾をファーストビューとレシピで繰り返す。 - 木のスプーンやフォークを画面端に散らす。 - 見出しは手書き体にし、英字のサブタイトルを添える。 - 写真は木のテーブルとクロスを使い、暖かい光で撮る。

Don't - ビビッドなグラデーションや角丸のピル型ボタンは使わない。 - 純黒の本文や青系の色は使わない。 - 赤と緑を広い面積に塗らない。 - ゴシックの太字だけで大見出しを作らない。

Page Structure

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

1. ファーストビュー（商品の世界観と 3 つの特長を伝える）: 黒板の上に料理と食材の俯瞰写真を置き、白い手書きの英字ロゴと赤丸バッジ 3 つを並べる。下端は緩いカーブにする。
2. 特長（主な特長を 2 つ説明する）: 生成りの地にずらし白枠の写真を置き、緑の強調語を含む手書き見出しと、中央揃えの短い本文を続ける。
3. 動画（紹介動画を見せる）: 斜線で挟んだ手書き見出しの下に、動画を 16:9 で埋め込む。
4. 商品ラインナップ（商品を紹介し詳細ページへ誘導する）: 淡い地に白カードを並べ、パッケージをはみ出させる。手書きの吹き出しコメントを添える。
5. レシピ（使い方を料理で提案する）: 木枠付きの黒板にチョーク装飾を描き、生成りのレシピカードを縦に並べる。最後に枠線のボタンを置く。
6. 開発者の声（商品のこだわりを対談形式で伝え、信頼を得る）: 白地に線画の 2 人のイラストと食材の写真を置き、下線付きの小見出しごとに話者名入りの本文を続ける。
7. おいしい食べ方（食べるシーンを想像させる）: 水彩イラストのトーストを大きく置き、続けて対談テキストを載せる。
8. お客様の声（利用者の評価を見せる）: ぼかした家族写真を背景にし、イラスト付きの切り欠きカードを左右交互に重ねる。
9. パンくず（サイト内の位置を示す）: 小さな文字で、ページ下部に左揃えで置く。

Imagery

• 料理は木のテーブル、赤白チェックのクロス、陶器の皿で俯瞰撮影し、暖色光で仕上げる。
• 食材やカトラリーは切り抜き、装飾として画面端に配置する。
• 人物は淡い色の線画イラストで、やさしい表情に描く。
• 水彩風の料理イラストを差し込む。
• 家族の食卓写真は明るい自然光で撮る。
• 黒板にはチョークの点線・星・キラキラを手描きする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では特長を写真と本文の左右交互 2 カラムにする。
• PC では商品とレシピのカードを 2 列にする。
• PC では開発者の声をイラストと本文の 2 カラムにする。
• PC のコンテンツ幅は約 900px で、地の布目を両脇に見せる。
• 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 行書くと起動時に読み込まれる。