--- version: alpha name: Kyoto Wagashi Elegant Minimal LP description: 白と生成りの余白に明朝の縦書きコピーを置き、朱色の判子風アクセントで和の上品さを出す和菓子 LP。商品の写真を大きく見せ、雲形の装飾で京都らしさを添える。 colors: primary: '#C6432B' background: '#FFFFFF' background-alt: '#F8FAF9' tint-1: '#DCC6B3' text: '#333333' accent-1: '#D49C57' accent-2: '#FEFEFD' marker: '#D9544A' line: '#333333' dark-section: '#323324' typography: display: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.2em headline-lg: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 600 lineHeight: 2.0 letterSpacing: 0.15em headline-sm: fontFamily: Shippori Mincho fontSize: 14px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.1em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.15em accent: fontFamily: Playfair Display fontSize: 40px fontWeight: 700 lineHeight: 1.1 note: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.15em rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' stamp-badge: backgroundColor: '{colors.primary}' textColor: '{colors.background}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px laurel-stat: textColor: '{colors.primary}' typography: '{typography.accent}' height: 80px vertical-copy: textColor: '{colors.text}' typography: '{typography.body-md}' height: 220px callout-line: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 160px wave-underline: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 30px size-compare: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' height: 180px cloud-ornament: backgroundColor: '{colors.accent-2}' height: 40px --- # DESIGN.md — 生成りと朱の京和菓子ミニマル LP（Kyoto Wagashi Elegant Minimal LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 和風、上品・高級、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: 京和菓子・縦書き明朝・朱の判子・広い余白・雲形装飾・淡い和紙地 - **地の質感**: 白地と和紙のような淡いグレーの地。写真は柔らかな自然光で撮り、ベージュのグラデーションに溶け込ませる - **形**: 角のない直線レイアウト。丸い判子バッジと月桂樹の装飾、霞のような雲形が主な形 - **温度感**: 温かい中間色。焼き色のオレンジと朱で温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C6432B` | 朱の判子・実績数字 | 2% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 34% | 画素の実測 | | `background-alt` | `#F8FAF9` | 和紙風の淡グレー地 | 25% | 画素の実測 | | `tint-1` | `#DCC6B3` | FV のベージュ地 | 10% | 画素の実測 | | `text` | `#333333` | 見出し・本文の墨色 | 3% | 推定 | | `accent-1` | `#D49C57` | 焼き色オレンジ（商品色） | 5% | 画素の主要色に補正 | | `accent-2` | `#FEFEFD` | 雲形装飾の淡い青緑 | 1% | 画素の実測 | | `marker` | `#D9544A` | 見出し下の波線 | 0% | 推定 | | `line` | `#333333` | 注釈引き出し線・寸法線 | 0% | 推定 | | `dark-section` | `#323324` | 写真内の黒い器・陰影 | 6% | 画素の主要色に補正 | - 地は白と淡いグレーを交互に使い、セクションを色の差だけで分ける - 朱は判子バッジ・実績数字・波線だけに使い、面積は 2% 以下にする - 文字は墨色 1 色で、本文に色は付けない - 商品の焼き色オレンジとベージュを写真の背景トーンとして揃える - 濃色の面は写真の中だけにとどめ、ベタ塗りの濃色帯は作らない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 写真上の大きなキャッチ | 明朝 | Shippori Mincho | 500 | 26px | 1.8 | 0.2em | | `headline-lg` | セクションの中央見出し | 明朝 | Shippori Mincho | 600 | 20px | 2.0 | 0.15em | | `headline-sm` | 注釈ラベル（例: 生地・クリーム） | 明朝 | Shippori Mincho | 600 | 14px | 1.6 | 0.1em | | `body-md` | 縦書きの本文 | 明朝 | Noto Serif JP | 400 | 14px | 2.0 | 0.15em | | `accent` | 実績の大きな数字 | 欧文セリフ | Playfair Display | 700 | 40px | 1.1 | 0.0em | | `note` | 寸法・補足 | 明朝 | Noto Serif JP | 400 | 12px | 1.6 | 0.15em | - 全体を明朝で統一し、ゴシックは使わない - 本文は縦書き（writing-mode: vertical-rl）で右から左へ数行並べる - 字間は 0.15em 以上に広く取り、品よく見せる - 見出しは中央揃えで 2 行に分けて組む - 数字だけ大きな欧文セリフにし、単位は小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真の比較など 2 点並びのみ 2 カラム - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 余白を広く取り、1 画面に 1 つのメッセージだけ置く - 縦書き本文の周りに小さな商品イラスト写真を散らす - 写真は画面幅いっぱいに置き、上下をグラデーションで地色になじませる - 注釈は細い引き出し線で商品写真と結ぶ ## Elevation & Depth - 影は使わずフラットにする - 立体感は写真の自然な影だけで出す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 全幅の矩形か、切り抜いた商品の単品写真 - **セクション境界**: 直線の色替え、または写真下端をグラデーションで白に溶かす - 判子バッジは正円にする - 雲形（霞）の装飾をセクション端に添える - カードの枠線や角丸ボックスは使わない ## Components - **朱の判子バッジ**（`stamp-badge`）: 朱の円に白い 1 文字、または白い円に朱の 2 行文字を入れた和風の判子 - **月桂樹の実績表示**（`laurel-stat`）: 朱の月桂樹で囲んだ実績数字。小さなラベル 2 行と大きな数字の組み合わせを 2 つ並べる - **縦書き本文ブロック**（`vertical-copy`）: 明朝の縦書き本文を 5〜7 行並べ、中央に置く - **引き出し線の注釈**（`callout-line`）: 商品写真から伸びる細い線の先に、太めのラベルと縦書きの説明を置く - **波線アンダーライン**（`wave-underline`）: 見出しの強調行の下に朱の細い波線を引く - **サイズ比較図**（`size-compare`）: 大小 2 つの商品を並べ、縦書きの名前と寸法線・数値を添える - **霞の雲形装飾**（`cloud-ornament`）: 淡い青緑とベージュの横長の霞を、セクション左右の端に置く ## Do's and Don'ts **Do** - 見出しと本文はすべて明朝にし、字間を広く取る - 本文は縦書きで組み、和の雰囲気を出す - 朱は判子・数字・波線だけにしぼる - 写真の背景はベージュや淡い色に揃え、地色とつなげる - 余白をたっぷり取り、要素を詰め込まない **Don't** - 原色や蛍光色の大きなボタン・帯は使わない - 太いゴシックの煽り見出しは使わない - ボックスに影や角丸カードを多用しない - 1 セクションに写真を詰め込みすぎない - 朱を背景の広い面に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観と上品さを一目で伝える）: ベージュ地に器と商品を並べたテーブル写真を全幅に置く。縦書きの筆文字ロゴと判子、短いコピー、丸い配送バッジを添える 2. **商品紹介・ブランドの由来**（歴史と商品のコンセプトを伝える）: 白地に中央見出しを 3 行置き、縦書き本文を並べる。周りに味違いの商品の小さな写真を散らす 3. **実績**（人気と評価で信頼を得る）: 朱の月桂樹で囲んだ大きな数字を 2 つ横に並べる 4. **食感の訴求**（新しい食感を感覚的に伝える）: 淡いグレーから濃い器へつながる全幅写真に、左上の明朝キャッチを重ねる 5. **こだわり**（生地とクリームの特長を説明する）: 切り抜いた商品写真から引き出し線を伸ばし、ラベルと縦書きの説明を置く。端に霞装飾を添える 6. **サイズ比較**（一口サイズである点を具体的に見せる）: 和紙風グレー地に波線つき見出しを置き、大小比較図と寸法を描く。下に手で持つ写真と断面写真を 2 枚並べる ## Imagery - 自然光でやわらかく撮り、ベージュやグレーの淡い背景にする - 白い器や木の匙、抹茶粉など和の小物を添えたテーブル写真にする - 商品の単品は背景を抜いて真上か斜めから撮る - 果物や素材を添えた小さな切り抜き写真を、余白のアクセントに使う - 手で持つ写真でサイズ感を伝える - 霞・雲形・月桂樹は細く淡い線で描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元は PC 幅でも中央 1 カラムで組まれているので、SP でもほぼ同じ構成にする - SP では見出しを 18〜20px にし、縦書き本文は高さを抑えて 6 行前後にする - 実績の 2 つの数字は SP でも横並びを保つ - 引き出し線の注釈は SP では写真の上下に分けて置く - PC では本文幅を 600px 前後に収め、左右の余白に装飾写真を散らす ## 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-2a009cba`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/kogetsu/10006712/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（5/10 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。