--- version: alpha name: Chalkboard Cafe Plant-Based Food LP description: 黒板のファーストビューに料理写真と手書き英字を重ね、その下は生成りの紙のような地に茶色の手書き見出しを置く、カフェ風の食品 LP。商品カード、黒板枠のレシピ、イラスト付きの開発者対談とお客様の声で、やさしく親しみやすい印象にまとめている。 colors: primary: '#3F221B' background: '#F5ECE3' background-alt: '#FCF6F4' surface: '#FFFFFF' dark-section: '#2C2C2C' on-dark: '#F5F6F4' secondary: '#804030' accent-1: '#2E7D32' accent-2: '#930403' accent-3: '#B37D59' line: '#3F2C29' text-muted: '#676454' typography: display: fontFamily: Pacifico fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Yomogi fontSize: 30px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.08em accent: fontFamily: Cormorant Garamond fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.2em headline-md: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' height: 34px button-chalk: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 38px badge-circle: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 52px heading-handwritten: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 80px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 300px recipe-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 480px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 130px note-text: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 20px --- # DESIGN.md — 黒板×生成りの手書き風カフェ食品 LP（Chalkboard Cafe Plant-Based Food LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ナチュラル、親しみ・手作り感、やさしい・柔らかい - **キーワード**: 黒板・手書き文字・生成り・木のカトラリー・料理写真・水彩イラスト - **地の質感**: 紙のような細かい布目の生成り地と、チョークのかすれが残る黒板テクスチャ。 - **形**: 角丸なしの白カード、ずらし白枠の写真、丸い赤バッジ、角を切り落とした吹き出しカード。 - **温度感**: 暖色寄り。焼き色のブラウンとクリーム色が中心。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3F221B` | 見出し・本文の焦げ茶 | 4% | 画素の実測 | | `background` | `#F5ECE3` | 生成りの紙地 | 20% | 画素の実測 | | `background-alt` | `#FCF6F4` | ラインナップ周りの淡い地 | 9% | 画素の実測 | | `surface` | `#FFFFFF` | 商品・声のカード、開発者セクションの白 | 30% | 画素の実測 | | `dark-section` | `#2C2C2C` | 黒板の面 | 7% | 画素の実測 | | `on-dark` | `#F5F6F4` | 黒板上の白文字 | 0% | 画素の実測 | | `secondary` | `#804030` | 黒板の木枠・Pick upリボン | 2% | 推定 | | `accent-1` | `#2E7D32` | 強調語に使う緑の手書き文字 | 0% | 推定 | | `accent-2` | `#930403` | 特長バッジの赤丸 | 1% | 画素の実測 | | `accent-3` | `#B37D59` | 木のカトラリー・装飾の茶 | 2% | 画素の主要色に補正 | | `line` | `#3F2C29` | 見出し下線・ボタン枠 | 0% | 画素の主要色に補正 | | `text-muted` | `#676454` | 英字サブ見出し・注釈 | 0% | 画素の主要色に補正 | - 基本の地は生成りで、商品と開発者のブロックだけ白に切り替える。 - レシピだけ黒板の面に木枠を付け、白文字と白い線で描く。 - 文字は純黒を使わず焦げ茶にする。 - 緑は手書き見出しの強調語 1 つだけに使う。 - 赤はファーストビューの丸いバッジにだけ使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの欧文ロゴ風コピー | 欧文スクリプト | Pacifico | 700 | 48px | 1.1 | 0.02em | | `headline-lg` | セクションの手書き見出し | 手書き・筆 | Yomogi | 400 | 30px | 1.3 | 0.08em | | `accent` | 見出し下の英字サブタイトル | 欧文セリフ | Cormorant Garamond | 500 | 12px | 1.4 | 0.2em | | `headline-md` | 対談の小見出し | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.4 | 0.04em | | `headline-sm` | 商品名・レシピ名 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.05em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.02em | | `label-button` | 詳細ボタンの文字 | ゴシック | Noto Sans JP | 500 | 12px | 1.0 | 0.1em | - セクション見出しは手書き体にし、下に小さな英字セリフを大文字で添える。 - 見出しの上には放射状の短い線を置く。 - 特長の見出しでは、強調したい語だけ緑の手書き文字にする。 - 短い説明文は中央揃えで短めに改行し、長い対談文は左揃えにする。 - 対談本文の要所は太字で強調する。 - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-d59dfcc4`（元 LP の URL から採番） - **元 LP**: https://www.marusanai.co.jp/brand/tonyucheese/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。