--- version: alpha name: Cream and Honey Gold Patisserie Storytelling LP description: 生成りの地に蜂蜜色の金を差した、明朝体中心の洋菓子店 LP。手描きの線画と、アーチ状に切り抜いた写真で物語を見せる。余白を広く取り、詩のような短い行を中央に揃えて置き、静かで上品な印象にまとめている。 colors: background: '#FFFBF2' primary: '#B7983B' line: '#B79C58' text: '#2E2A26' text-body: '#3E3832' on-dark: '#FFFAF5' accent-1: '#CFCAA5' dark-section: '#6A3D1C' surface: '#FDFCF4' primary-accessible: '#87702B' accent-1-accessible: '#7B7442' typography: display: fontFamily: Shippori Mincho fontSize: 56px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.15em body-lg: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 2.3 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.03em headline-sm: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.2em note: fontFamily: Roboto fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.08em label-button: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 999px full: 999px spacing: unit: 8px card: 0px section: 110px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 45px button-on-gold: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 45px heading-vertical: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 180px label-tag: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 22px loop-border: textColor: '{colors.line}' height: 60px news-list: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 72px arch-photo: height: 370px footer-frame: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 540px --- # DESIGN.md — 生成り×蜂蜜金の明朝 洋菓子店 LP（Cream and Honey Gold Patisserie Storytelling LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、ナチュラル、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: 生成り・蜂蜜色の金・明朝体・縦書き・手描き線画・アーチ切り抜き - **地の質感**: 紙のような生成りの無地。金の細い線とモノクロの線画が版画のような手触りを出す - **形**: 上辺が弧を描くアーチ型の写真とセクション、細い枠線のピル型ボタン - **温度感**: 温かく、静か ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFBF2` | ページ全体の地色（生成り） | 55% | 画素の実測 | | `primary` | `#B7983B` | 蜂蜜金。お知らせ帯の面と線画の差し色 | 10% | 画素の実測 | | `line` | `#B79C58` | ボタン枠・装飾ループの金線 | 1% | 画素の主要色に補正 | | `text` | `#2E2A26` | 見出しと本文の濃い焦げ茶 | 4% | 推定 | | `text-body` | `#3E3832` | 説明文の小さめ本文 | 2% | 推定 | | `on-dark` | `#FFFAF5` | 金の帯の上の白文字・白線 | 1% | 画素の主要色に補正 | | `accent-1` | `#CFCAA5` | ロゴ文字の淡い金 | 1% | 画素の実測 | | `dark-section` | `#6A3D1C` | 写真に多い木や焼き色の茶 | 6% | 画素の実測 | | `surface` | `#FDFCF4` | ラベル帯の白い面 | 1% | 画素の実測 | | `primary-accessible` | `#87702B` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#7B7442` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ全面を生成り 1 色にし、白も黒の帯も使わない - 金はボタンの枠線・装飾ループ・線画の差し色に限り、面で使うのはお知らせ帯の 1 か所だけにする - 文字は真っ黒にせず、焦げ茶寄りの墨色にする - 金の面の上の文字や罫線は白にする - 写真の暖かい木の色や焼き色をそのまま配色に生かし、彩度の高い色は足さない - `button-on-gold` は文字 `#FFFAF5` × 背景 `#B7983B` のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#87702B`、4.62:1）を使う。 - `footer-frame` は文字 `#CFCAA5` × 背景 `#FFFBF2` のコントラスト比が 1.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#7B7442`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書きロゴ文字 | 明朝 | Shippori Mincho | 400 | 56px | 1.2 | 0.1em | | `headline-lg` | 縦書きのセクション見出し | 明朝 | Shippori Mincho | 500 | 22px | 1.4 | 0.15em | | `body-lg` | 中央揃えにした詩のような導入文 | 明朝 | Noto Serif JP | 400 | 14px | 2.3 | 0.08em | | `body-md` | 説明文や店舗紹介の本文 | ゴシック | Zen Kaku Gothic New | 400 | 11px | 2.0 | 0.03em | | `headline-sm` | 店名・住所・お知らせのタイトル | 明朝 | Noto Serif JP | 400 | 14px | 1.7 | 0.05em | | `accent` | 欧文のロゴ文字・小さなラベル | 欧文セリフ | Cormorant Garamond | 400 | 26px | 1.2 | 0.2em | | `note` | 日付・PAGE TOP・コピーライト | 欧文サンセリフ | Roboto | 400 | 9px | 1.5 | 0.08em | | `label-button` | ボタンの文字 | 明朝 | Noto Serif JP | 400 | 14px | 1.4 | 0.05em | - 見出しは縦書きの明朝にし、頭に金のループ記号を添える - 導入文は中央揃えにし、1 行 15〜20 字で改行して詩のように見せる - 説明文はゴシックの小さい文字を左揃えで組む - 太字は使わず、ウェイト 400〜500 で統一する - 欧文は字間を大きく空けたセリフ体を使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 78% - **余白**: セクション間 110px、基本単位 8px、カード内 0px（375px 幅換算） - 写真は端から端まで全幅で使い、本文は左右に約 43px の余白を取る - セクションの間は 100px 以上空ける - 縦書き見出しは左端か右端に寄せ、写真や本文と組み合わせて非対称に置く - 店舗情報は項目名と内容の 2 列で、罫線なしに並べる - カードは使わず、余白だけで区切る ## Elevation & Depth - 影は一切使わず、すべてフラットにする - 奥行きは写真と生成り地の重なりで表す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 全幅の写真の上辺を、ゆるい弧のアーチ形に切り抜く。小さい写真は角丸なしの長方形にする - **セクション境界**: 金の帯の上下を中央が膨らむ弧で切り、フッターは細い金線の枠で囲む - ボタンは細い金枠の線だけのピル型にする - 写真の上辺はアーチ、それ以外は直角にする - ファーストビューの上下には、金線のループを連続させた帯を置く ## Components - **金枠ピルボタン**（`button-outline`）: 生成り地に細い金の枠線。左に明朝のラベル、右に細い矢印を置く - **金の帯の上の白枠ボタン**（`button-on-gold`）: 金の面の上で、白い枠線と白い文字を使う - **縦書き見出し**（`heading-vertical`）: 金のループ記号の下に、明朝の縦書きを 1〜2 行で置く - **写真の上の短冊ラベル**（`label-tag`）: 写真の上に、白い帯に明朝の短い文を 3 段重ねる - **金線ループの帯**（`loop-border`）: 筆記体の l を連ねたような金の線を、横一列に繰り返す装飾 - **お知らせのリスト**（`news-list`）: 金の面に白い罫線を引き、日付と明朝のタイトルを 1 行ずつ並べる - **アーチ写真**（`arch-photo`）: 上辺を弧に切り抜いた全幅の写真 - **金線の枠のフッター**（`footer-frame`）: 細い金線の枠の中に、線画・欧文のロゴ・SNS を収める ## Do's and Don'ts **Do** - 生成りの地を広く残し、余白で高級感を出す - 見出しには縦書きの明朝を使う - 金は線で使うのを基本にする - 手描きのモノクロ線画に、金を部分的に差す - 写真の上辺はアーチ形に切り抜く **Don't** - 鮮やかな赤やオレンジの CTA ボタンを使わない - 太いゴシックや大きな数字で訴求しない - 影・グラデーション・角丸カードを使わない - 純白や純黒の地色にしない - 文字を詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観を一目で伝える）: 全幅の料理写真の上下に金のループの帯を置き、縦書きの白いロゴと短冊ラベル 3 つを重ねる 2. **線画のイラスト帯**（物語らしさと遊び心を出す）: 踊り子と花の線画を、横方向に繰り返す 3. **コンセプトの詩**（土地とこだわりを情緒的に語る）: 明朝を中央揃えにし、行間を広く取った短い行を段落ごとに並べ、最後に金枠のボタンを置く 4. **商品紹介**（商品の特長を説明する）: アーチ写真の下に、ゴシックの説明文と縦書き見出しを置く 5. **店舗紹介**（店の雰囲気と場所を伝える）: アーチ形の内観写真、右寄せの縦書き見出し、外観写真、本文の順に並べる 6. **店舗情報**（住所や営業時間などの実用情報を示す）: 明朝の店名と住所の下に地図ボタンを置き、項目名と内容を 2 列で並べる 7. **お知らせ**（最新情報を伝える）: 上下を弧で切った金の帯に、白い罫線のリストと白枠のボタンを置く 8. **フッター**（ブランドの余韻を残して締める）: 金線の枠の中に、PAGE TOP・線画・字間を広く取った欧文ロゴ・SNS を置く ## Imagery - 写真は自然光の暖かい色調で、木のトレイや器、焼き色を浅い被写界深度で撮る - 店舗の写真は木の内装と窓の光を生かし、彩度を少し抑える - イラストは黒いペンの手描きの線画で、リボンや花の一部だけを蜂蜜金で塗る - 装飾は金の細い線のループ記号と連続ループの帯にする - 写真の上に乗せる文字は、白い短冊か白抜きの明朝にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は本文の幅を 640px 前後に抑え、中央に寄せる - 写真は PC では 2 カラムにするか幅を広げ、アーチの切り抜きは保つ - 縦書き見出しは PC でも縦組みのまま、写真の横に置く - 線画の帯は 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-5302dc64`（元 LP の URL から採番） - **元 LP**: https://hachi-to-waltz.com/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（5/9 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。