--- version: alpha name: Warm Bakery Café Novel Promo LP description: パンの線画を敷いたベージュ地に、角を斜めに落とした生成りカードと茶色の欧文セリフ見出しを重ねた文芸書籍のプロモ LP。黒板風のキャラクター紹介とピンクの差し色で、温かくて少し謎めいた空気を出している。 colors: primary: '#8E5635' background: '#EBD0B2' surface: '#F5E8D9' background-alt: '#EAD1B2' dark-section: '#2B2D2A' on-dark: '#D1D3D0' text-body: '#57423F' cta: '#EE859B' on-cta: '#FFF1F5' accent-1: '#ABCD05' secondary: '#9F5935' background-alt-2: '#D5CABB' line: '#E0C2A9' cta-accessible: '#DA1E46' typography: display: fontFamily: Cinzel fontSize: 40px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.1em accent: fontFamily: Playfair Display fontSize: 34px fontWeight: 400 lineHeight: 1.0 headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.7 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.03em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' section-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 80px octagon-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 600px volume-badge: backgroundColor: '{colors.on-cta}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 56px chalkboard-plate: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 130px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px book-title-bar: backgroundColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 24px store-logo-button: backgroundColor: '{colors.on-cta}' height: 40px share-button: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px --- # DESIGN.md — 生成りと焼き色のベーカリー小説 LP（Warm Bakery Café Novel Promo LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: やさしい・柔らかい、ナチュラル、親しみ・手作り感、レトロ - **キーワード**: ベーカリー・生成り・焼き色ブラウン・線画パン柄・黒板・文芸 - **地の質感**: 薄いパンの線画を全面に散らした紙のような質感。画面両脇に細い額縁ラインがある - **形**: 四隅を斜めに切り落とした八角形カード、丸い巻数バッジ、ピル型ボタン - **温度感**: 暖色寄り。ベージュと茶色に、ピンクと黄緑を少しだけ差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8E5635` | 欧文見出し・巻数の焼き色ブラウン | 2% | 画素の実測 | | `background` | `#EBD0B2` | パン柄を敷いたベージュの地 | 30% | 画素の実測 | | `surface` | `#F5E8D9` | 八角形コンテンツカード | 30% | 画素の実測 | | `background-alt` | `#EAD1B2` | 画面両脇の額縁帯 | 7% | 画素の実測 | | `dark-section` | `#2B2D2A` | 黒板風キャラクター名プレート | 6% | 画素の実測 | | `on-dark` | `#D1D3D0` | 黒板上の白文字 | 1% | 画素の実測 | | `text-body` | `#57423F` | 本文テキスト | 3% | 画素の主要色に補正 | | `cta` | `#EE859B` | 主ボタン・強調語のピンク | 1% | 画素の実測 | | `on-cta` | `#FFF1F5` | ボタン上の白文字 | 0% | 画素の実測 | | `accent-1` | `#ABCD05` | 書誌タイトル帯・公式アカウント帯の黄緑 | 4% | 画素の実測 | | `secondary` | `#9F5935` | 切り替えバー・URLコピーのボタン茶 | 2% | 画素の実測 | | `background-alt-2` | `#D5CABB` | シェア帯のくすみグレージュ | 2% | 画素の実測 | | `line` | `#E0C2A9` | 区切り線・額縁線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#DA1E46` | AA を満たす補正値（計算） | | 計算 | - 地はベージュ、コンテンツは一段明るい生成りのカードに載せる - 見出しの欧文と巻数の数字は焼き色ブラウンで統一する - ピンクは主ボタン、人名などのキーワード、レビュー投稿者名だけに使う - 黄緑は書誌タイトル帯とフッターの公式アカウント帯だけに限定する - キャラクター紹介は黒板色のプレートに白文字で、メリハリをつける - 純白はボタン・バッジ・写真フレームにだけ使う - `button-primary` は文字 `#FFF1F5` × 背景 `#EE859B` のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DA1E46`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション欧文見出し | 欧文セリフ | Cinzel | 400 | 40px | 1.1 | 0.02em | | `headline-sm` | 欧文見出し下の和文サブ見出し | ゴシック | Zen Kaku Gothic New | 500 | 18px | 1.3 | 0.1em | | `accent` | 巻数バッジの数字 | 欧文セリフ | Playfair Display | 400 | 34px | 1.0 | 0.0em | | `headline-md` | 短編タイトル・キャラ名 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.03em | | `body-md` | あらすじ・本文・レビュー | ゴシック | Noto Sans JP | 400 | 12px | 2.1 | 0.02em | | `note` | 黒板プレートの紹介文・書誌情報 | ゴシック | Noto Sans JP | 500 | 10px | 1.7 | 0.0em | | `label-button` | ピル型ボタン | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.03em | - 見出しは大きな欧文セリフ＋小さな和文の 2 段で中央揃え - 欧文見出しの左右に麦の穂のアイコンを置く - 本文は中央揃えで行間を広めにとり、短い段落を空行で区切る - 人名・キーワードはピンクの太字にし、ルビを振る - 引用やレビューの末尾にピンクの小さな投稿者名を添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算） - 各セクションは中央揃えの欧文見出しから始め、その下に八角形カードを 1 枚置く - 見出しは細い横線をまたぐように配置する - カードの中では巻数バッジで新しい巻から順に区切る - 購入リンクは 3 列のロゴボタンのグリッドにする - 画面の両端には常に縦の額縁ラインを入れる ## Elevation & Depth - カードに影は付けず、色の段差で浮かせる - 巻数バッジの白丸には柔らかい茶色の影を付ける - 主ボタンの下側に薄いグレーの影を付ける - 写真フレームは白い縁取り＋ごく薄い影 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: キャラ絵は縦長の長方形に白い太枠。洗濯ばさみで黒板に留めたように見せる - **セクション境界**: 色の切り替えではなく、八角形カードの斜めの角と細い横線で区切る - カードは四隅を約 40px 斜めに切り落とした八角形にする - 巻数は白い正円の中にセリフ体の数字を入れ、横に小さな「巻」を添える - ボタンは完全なピル型にする - ロゴボタンは白地に黒い細枠の長方形にする ## Components - **麦穂付き欧文見出し**（`section-heading`）: 茶色の大きな欧文セリフ＋和文サブ見出しの 2 段。左右に麦穂アイコンを置き、細い横線をまたがせる - **八角形コンテンツカード**（`octagon-card`）: 角を斜めに切り落とした生成りの面。中央揃えで本文を載せる - **巻数バッジ**（`volume-badge`）: 白い丸に茶色のセリフ体の数字。横に小さな白丸で単位を添える - **黒板キャラプレート**（`chalkboard-plate`）: 写真の下に重なる黒板色の帯。ルビ付きの名前、麦の線画、細線、紹介文を並べ、右上に洗濯ばさみを付ける - **ピンクのピル型 CTA**（`button-primary`）: カード下部に置く横長のピル型ボタン。白い太字 - **書誌タイトル帯**（`book-title-bar`）: 黄緑の帯に黒い太字の書名。左右端は丸く処理する - **販売店ロゴボタン**（`store-logo-button`）: 白地に黒い細枠の長方形。3 列で並べる - **SNS シェアボタン**（`share-button`）: 各 SNS の色のピル型ボタン。URL コピーは茶色にする ## Do's and Don'ts **Do** - 地には薄いパンや小麦の線画を全面に低いコントラストで散らす - セクションは欧文セリフ見出し＋八角形カードの型で繰り返す - 人物の紹介は縦長の絵と黒板プレートを組み合わせる - 強調語はピンクで最小限に抑える - 両端の額縁ラインでページ全体を一冊の本のようにまとめる **Don't** - 純白の地を広く使わない - ビビッドな青や赤の大きな面を作らない（SNS ボタンは例外） - カードに強いドロップシャドウを付けない - 見出しをゴシックの太字だけで済ませない - 黄緑を本文エリアの装飾に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観を一目で伝える）: 装画を全面に敷き、縦書きタイトルを白い丸に一文字ずつ入れる。著者名は菱形バッジに入れる 2. **イラスト切り替え**（巻ごとのキービジュアルを選ばせる）: 茶色の帯の上に白文字のラベルと丸いサムネイルを 2 つ置く 3. **あらすじ**（物語の導入を伝える）: 八角形カードの中で巻数バッジごとに中央揃えの本文を並べ、キーワードをピンクにする 4. **動画**（PV で興味を高める）: 巻数バッジの下に縦長の動画サムネイルと丸い再生ボタンを置く 5. **登場人物**（キャラクターに愛着を持たせる）: 白枠付きの縦長イラストと黒板プレートを縦に積む 6. **書き下ろし短編**（試し読みで続きを読みたくさせる）: ピンクのタイトル、本文の抜粋、ピンクのピル型ボタンの順に並べる 7. **レビュー**（第三者の評価で後押しする）: 感想を細線で区切って並べ、末尾にピンクの投稿者属性を添える 8. **書誌・購入先**（購入へ導く）: 黄緑の書名帯、書影と書誌の 2 列、販売店ロゴの 3 列グリッドを並べる。電子版は別に分ける 9. **注文書**（書店での予約を促す）: 黄緑の枠で囲んだ注文票の画像を中央に置く 10. **シェア・公式SNS**（拡散と継続接点をつくる）: グレージュの帯にシェアボタンを並べ、黄緑の帯に白いピル型のアカウントボタンを 2 列で置く ## Imagery - 温かい色の光と粒子の舞うアニメ調の装画を使う - キャラ絵はバストアップで、背景をぼかし玉ボケを入れる - 地紋はパン・クロワッサン・小麦を描いた単色の茶色の線画にする - 麦の穂のシルエットを見出しの飾りに使う - 洗濯ばさみや黒板などカフェの小物モチーフを加える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では背景のパン柄と額縁を全幅に広げ、カードは中央約 60% 幅に収める - PC のファーストビューは横長の装画を 2 枚並べ、左端に縦書きの著者情報を置く - PC の動画サムネイルは横長にする - PC の登場人物は 2 列のグリッドにし、余った 1 枚を中央に置く - 購入ロゴのグリッドは PC でも 3 列のまま、中央に小さくまとめる ## 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-b372e380`（元 LP の URL から採番） - **元 LP**: https://kotonohabunko.jp/special/majonazo/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。