--- version: alpha name: Bright Breakfast Table Snack Series LP description: 白い木目の地に、朝の食卓のような写真と水彩のにじみを重ねた菓子シリーズ LP。見出しは焦げ茶の明朝、手書き風の書体で親しみを出す。商品ごとにパッケージの色（クリーム・水色・オレンジ・赤）を見出しや帯に使い分ける。 colors: background: '#F9F9FB' surface: '#FFFFFF' primary: '#5A1A1A' text-body: '#333333' accent-1: '#3AA9DC' accent-2: '#2E9A57' accent-3: '#D30108' secondary: '#EE8A4A' tint-1: '#FAE4A4' tint-2: '#A4AB95' cta: '#461217' on-cta: '#FDFDFD' marker: '#003E9C' accent-1-accessible: '#1E7DA9' typography: display: fontFamily: Shippori Mincho B1 fontSize: 48px fontWeight: 800 lineHeight: 1.15 headline-lg: fontFamily: Shippori Mincho B1 fontSize: 30px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: Caveat fontSize: 16px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em headline-sm: fontFamily: Yomogi fontSize: 18px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.02em label-button: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-outline: backgroundColor: '{colors.on-cta}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px heading-bracket: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 80px stitch-banner: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 90px watercolor-bubble: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 150px tagline-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 30px info-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 460px polaroid-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 190px badge-kcal: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 80px --- # DESIGN.md — 白木目と水彩色の健康菓子シリーズ LP（Bright Breakfast Table Snack Series LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ナチュラル、やさしい・柔らかい、親しみ・手作り感、清潔・爽やか - **キーワード**: 白木目・水彩のにじみ・朝食の食卓・焦げ茶の明朝・手書きの吹き出し・商品色の使い分け - **地の質感**: 白く塗った木目の板の地に、水彩のにじみと紙のような質感を重ねる - **形**: かぎ括弧の見出し、不定形の水彩の楕円、少し傾けたポラロイド風カード、ステッチ点線入りの帯 - **温度感**: 明るく温かい。朝の光を感じる柔らかさ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F9F9FB` | 白木目の地 | 45% | 画素の実測 | | `surface` | `#FFFFFF` | 白い情報カード | 8% | 画素の実測 | | `primary` | `#5A1A1A` | 見出し・帯の焦げ茶 | 4% | 推定 | | `text-body` | `#333333` | 本文テキスト | 2% | 推定 | | `accent-1` | `#3AA9DC` | 水色の帯・2番目の商品色 | 5% | 推定 | | `accent-2` | `#2E9A57` | 緑の帯 | 2% | 推定 | | `accent-3` | `#D30108` | 赤の商品色 | 2% | 画素の実測 | | `secondary` | `#EE8A4A` | オレンジの枠・手書き見出し | 1% | 推定 | | `tint-1` | `#FAE4A4` | 黄色い水彩のにじみ | 6% | 画素の実測 | | `tint-2` | `#A4AB95` | ストライプの薄緑 | 5% | 画素の実測 | | `cta` | `#461217` | 枠線ボタンの線と文字 | 1% | 画素の実測 | | `on-cta` | `#FDFDFD` | ボタンの白地 | 1% | 画素の実測 | | `marker` | `#003E9C` | 会社のロゴ・ブランドの青 | 1% | 画素の実測 | | `accent-1-accessible` | `#1E7DA9` | AA を満たす補正値（計算） | | 計算 | - 地は白木目で全体を明るく保つ - 見出しと帯の基本色は焦げ茶にする - 商品セクションは、その商品のパッケージ色で見出し・帯・ボタン線を染める - 商品写真の背景には、商品色に近い水彩のにじみを敷く - 強調の帯は水色と緑の 2 色だけ。白文字に点線のステッチを入れる - 見出しのかぎ括弧は、オレンジ・水色・赤・青・緑の差し色にする - `stitch-banner` は文字 `#FDFDFD` × 背景 `#3AA9DC` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#1E7DA9`、4.53:1）を使う。 - `badge-kcal` は文字 `#3AA9DC` × 背景 `#FFFFFF` のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#1E7DA9`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名の大見出し | 明朝 | Shippori Mincho B1 | 800 | 48px | 1.15 | 0.0em | | `headline-lg` | かぎ括弧付きのセクション見出し | 明朝 | Shippori Mincho B1 | 800 | 30px | 1.3 | 0.02em | | `headline-md` | 帯やカード内の見出し | 明朝 | Noto Serif JP | 700 | 20px | 1.5 | 0.03em | | `accent` | 見出しの上に添える欧文の手書き | 欧文スクリプト | Caveat | 500 | 16px | 1.2 | 0.02em | | `headline-sm` | 水彩の吹き出し・カードの手書き文 | 手書き・筆 | Yomogi | 400 | 18px | 1.6 | 0.08em | | `body-md` | 商品の説明文 | ゴシック | Noto Sans JP | 400 | 12px | 2.0 | 0.02em | | `label-button` | ボタンのラベル | 明朝 | Noto Serif JP | 700 | 16px | 1.2 | 0.05em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | - 見出しは太い明朝で、どっしり温かく見せる - セクション見出しの上には、斜めに傾けた欧文の手書きを小さく添える - 見出しの下に波線のアンダーラインを引く - 素材の特徴は手書き書体で、水彩の吹き出しの中に入れる - 本文は小さめのゴシックで、行間を広めにとる - 商品名の大見出しは 2 行に分け、文字を写真に少し重ねる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。例示アイコンは 2〜3 列 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 90px、基本単位 8px、カード内 16px（375px 幅換算） - 商品紹介は、写真→大見出し→帯→本文→ボタンの順に縦へ積む - 商品写真は画面幅いっぱいの水彩のにじみの上に置く - 情報カードは白地に薄い影。上下を二重線で区切った見出しを入れる - おすすめカードは少し傾け、左右交互にずらして置く - ボタンは中央に置き、幅は 60% 前後にする ## Elevation & Depth - 白カードには、ぼかしの大きい薄いグレーの影をつける - ポラロイド風カードには、白枠と柔らかい落ち影をつける - 商品写真には自然な接地影をつける - TOP ボタンは丸い紙の質感にし、軽く影をつける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は切り抜き。食材は角版のポラロイドか切り抜き - **セクション境界**: 境界線は引かない。水彩のにじみと木目の切り替えでつなぐ - ボタンは角丸が小さめの長方形で、枠線だけにする - キャッチの帯はピル型にする - 強調の帯は角丸の長方形で、内側に白の点線ステッチを入れる - 吹き出しは不定形の水彩の円にする - ファーストビューと締めは、緑の太いボーダー柄の布地の上に円形の皿を置く ## Components - **枠線ボタン**（`button-outline`）: 白地に商品色の 2px 枠線。明朝のラベルと右端の矢印 - **かぎ括弧見出し**（`heading-bracket`）: 差し色のかぎ括弧で挟んだ明朝の見出し。上に欧文の手書き、下に波線 - **ステッチ帯**（`stitch-banner`）: 水色か緑の帯。上下に白の点線を入れ、白い明朝の 2 行コピーを載せる - **水彩の吹き出し**（`watercolor-bubble`）: 黄・橙・紫・水色の不定形のにじみに、手書きで素材の特徴を書く - **キャッチ帯**（`tagline-pill`）: 商品色のピル型の帯に、白い明朝のキャッチを載せる - **情報カード**（`info-card`）: 白カード。二重線の見出しと、オレンジ枠の例示グリッドを入れる - **傾いたポラロイド**（`polaroid-card`）: 白枠に写真を入れ、下余白に手書き文。少し回転させる - **丸い数値バッジ**（`badge-kcal`）: 白〜水色のグラデーションの円に、数値を明朝で入れる ## Do's and Don'ts **Do** - 白木目の地と水彩のにじみで、明るい食卓の空気を保つ - 商品ごとにパッケージ色で見出しとボタンを揃える - 見出しには欧文の手書きとかぎ括弧を必ず組み合わせる - 素材の訴求は手書きの吹き出しで柔らかく見せる - 食材の写真を添えて原材料を連想させる **Don't** - 黒や濃い単色のベタ背景のセクションを作らない - ボタンを塗りつぶしの派手な色にしない - 見出しを細いゴシックにしない - 水彩のにじみの輪郭をくっきりした図形にしない - 差し色を 1 つのセクションに 3 色以上混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（シリーズ全体と健康価値を一目で伝える）: 緑のボーダー布の上に白い皿を置き、明朝のコピーを入れる。周りに 4 商品を配置し、下に朝食の小物 2. **シリーズの概要**（おいしさと数値の両立を伝える）: かぎ括弧見出しの下に、水色のステッチ帯と丸い数値バッジ 3. **素材の特長**（各商品の原材料の魅力を示す）: 色違いの水彩の吹き出しを散らし、食材の写真を添える。最後は緑の帯でまとめる 4. **数値の解説**（カロリーの目安を身近な食品で説明する）: 白カードに二重線の見出しを置き、オレンジ枠の中に食品イラストをグリッドで並べる 5. **おすすめの人**（利用シーンを 3 つ示す）: 傾いたポラロイドカードに、手書きのひと言を添える 6. **商品紹介**（各商品の特徴と成分を伝える）: 商品色の水彩の上に商品写真を置く。商品色の大見出し、キャッチ帯、本文、枠線ボタンの順に繰り返す 7. **関連の案内**（別シリーズへ誘導する）: 小見出しと横長のバナーを 1 枚 8. **シェアと締め**（拡散を促してページを締める）: 緑のボーダー布に白いパネルを載せ、コピーを再掲。SNS の丸アイコンを 3 つと TOP ボタン 9. **フッター**（ブランドサイトと規約へ導く）: 青のピル型リンク、テキストリンク、ロゴ、コピーライト ## Imagery - 商品パッケージは切り抜きで、個包装を手前に重ねる - ミルクピッチャー・大豆・麦の穂・りんご・穀物などの食材を、白背景で明るく撮る - 商品色に合う水彩のにじみを、写真の背景いっぱいに敷く - 白く塗った木目の板を全面の背景テクスチャにする - 例示の食品はやわらかい陰影のリアル寄りイラストにし、半分を点線で区切る - 上から見下ろした朝食の小物（サラダ・ジュース・コーヒー）で画面の端を飾る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央寄せで、コンテンツ幅は約 80%。ヘッダーにナビとオンラインショップのボタンを横に並べる - PC のファーストビューは横長の布地にし、4 商品を横 1 列に並べる - PC の素材の吹き出しは 3 列で散らして配置する - PC の例示食品とポラロイドは横 1 列に並べる - PC の商品紹介は写真とテキストの 2 カラムにし、左右を交互に入れ替える - PC のフッターリンクは 1 行に横並びにする ## 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-5daa16ff`（元 LP の URL から採番） - **元 LP**: https://www.bourbon.co.jp/80kcal/index.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。