--- version: alpha name: Kyoto Washi Minimal Wagashi LP description: 和紙のような淡いグレー白を地に、縦書きの明朝体と余白で老舗の品格を出す京菓子 LP。写真を大きく使い、黒の店舗紹介や芥子色のギフト訴求で面にメリハリをつける。CTA は朱色のピル型ボタンだけにして、購入導線を目立たせる。 colors: background: '#F3F5F4' surface: '#FFFFFF' background-alt: '#F9FBFA' primary: '#02324C' text: '#161616' text-muted: '#707271' cta: '#DC3B22' on-cta: '#FFFFFF' accent-1: '#C45644' secondary: '#CCB252' dark-section: '#141414' on-dark: '#F9F9F9' accent-2: '#CE9B4A' line: '#555555' cta-accessible: '#DA3A22' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.15em headline-lg: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.2em headline-sm: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.12em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em accent: fontFamily: Playfair Display fontSize: 52px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 0px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px badge-octagon: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 56px badge-count: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px award-laurel: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 70px heading-vertical: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 260px heading-center: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 50px review-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 90px product-tile: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 350px --- # DESIGN.md — 和紙白×縦書き明朝の京菓子ギフト LP（Kyoto Washi Minimal Wagashi LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 和風、上品・高級、シンプル・ミニマル - **キーワード**: 縦書き明朝・和紙の地・広い余白・老舗の品格・ギフト・朱色の差し色 - **地の質感**: うっすら紙の繊維が見える和紙調の背景と、霞や雲の線を描いた淡い装飾 - **形**: 四角い写真が中心。CTA と吹き出しだけ角を丸める。バッジは円か八角形 - **温度感**: 温かみのある中間色。生成りと焼き色の上に紺と朱を少しだけ足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F3F5F4` | 和紙調の地色 | | 画素の実測 | | `surface` | `#FFFFFF` | 白い紹介ブロック | | 画素の実測 | | `background-alt` | `#F9FBFA` | 生成りの面 | | 画素の実測 | | `primary` | `#02324C` | 老舗らしい濃紺（数量バッジ・八角バッジ） | | 画素の実測 | | `text` | `#161616` | 見出しと本文の墨色 | | 画素の実測 | | `text-muted` | `#707271` | 注釈・キャプションの灰色 | | 画素の実測 | | `cta` | `#DC3B22` | 購入ボタンの朱色 | | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | | 画素の主要色に補正 | | `accent-1` | `#C45644` | 受賞実績の月桂樹と数字の赤 | | 画素の実測 | | `secondary` | `#CCB252` | ギフトセクションの芥子色の面 | | 画素の実測 | | `dark-section` | `#141414` | 店舗紹介の黒い面 | | 画素の実測 | | `on-dark` | `#F9F9F9` | 黒地の上の白文字 | | 画素の主要色に補正 | | `accent-2` | `#CE9B4A` | 焼き菓子の黄金色 | | 画素の主要色に補正 | | `line` | `#555555` | 吹き出しの枠・細い罫線 | | 推定 | | `cta-accessible` | `#DA3A22` | AA を満たす補正値（計算） | | 計算 | - 地は和紙調の淡いグレー白と白を交互に使い、写真を際立たせる - 文字は墨色の 1 色を基本にする。明るさの差で強弱をつける - 朱色は購入ボタンと見出し下の短い線だけに使う - 濃紺は数量や特典の円形バッジに使う。ブランドの重みを出す色 - セクションの面転換は黒（店舗紹介）と芥子色（ギフト訴求）の 2 回までにする - 受賞実績は赤い月桂樹と数字だけで見せる。面は塗らない - `button-primary` は文字 `#FFFFFF` × 背景 `#DC3B22` のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DA3A22`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦書きのメインコピー・セクションの大見出し | 明朝 | Shippori Mincho | 500 | 30px | 1.5 | 0.15em | | `headline-lg` | 鍵括弧付きの大きな縦書き見出し | 明朝 | Shippori Mincho | 500 | 34px | 1.4 | 0.12em | | `headline-md` | 横書きの中央見出し（商品一覧・お客様の声） | 明朝 | Noto Serif JP | 500 | 22px | 1.5 | 0.2em | | `headline-sm` | 商品名・価格 | 明朝 | Noto Serif JP | 600 | 18px | 1.4 | 0.05em | | `body-md` | 縦書き・横書きの本文 | 明朝 | Noto Serif JP | 400 | 14px | 2.0 | 0.12em | | `note` | 写真キャプション・レビュー本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.05em | | `accent` | 評価点など大きな数字 | 欧文セリフ | Playfair Display | 400 | 52px | 1.0 | 0.0em | | `label-button` | 購入ボタンの文字 | ゴシック | Noto Sans JP | 500 | 14px | 1.0 | 0.1em | - 見出しと本文は縦書き（writing-mode: vertical-rl）を多用し、和の格を出す - 字間は 0.1em 以上あけて、ゆったり組む - 大見出しは鍵括弧で強調語をくくり、本文の 2 倍以上の大きさにする - 太字はほとんど使わない。サイズと余白で強弱をつける - ゴシック体はレビュー・キャプション・ボタンだけに使う - 横書きの中央見出しの下に、朱色の短い線を 1 本入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。縦書きテキストと写真を左右に配置し、商品一覧は 2 カラム - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 縦書きの見出しは右、本文はその左に置く - 写真は片側の画面端まで裁ち落として、テキストと非対称に組む - セクションの上下にたっぷり余白を取り、静けさを出す - 小さな写真を 2〜3 枚、大きな写真と重ねてずらして配置する - 商品一覧は余白のない 2 カラムのタイルで並べる ## Elevation & Depth - 影はほとんど使わない。平面で組む - 写真どうしの重なりとずらしで奥行きを出す - ファーストビューの写真は下端を白へフェードさせ、次のセクションにつなぐ ## Shapes - **角丸**: 小 0px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 角のない長方形。画面端まで裁ち落とすことが多い - **セクション境界**: 直線で面を切り替える。霞や雲の線画を境目にあしらう - 写真は角丸にしない - CTA はピル型にする - 数量バッジは正円にする - 特典バッジは八角形にする - レビューは角丸 16px の線だけの吹き出しにする ## Components - **購入ボタン**（`button-primary`）: 朱色のピル型ボタン。右端に小さな矢印を付け、商品写真の下に配置する - **八角形の特典バッジ**（`badge-octagon`）: 紺・臙脂・焦げ茶の八角形に、明朝 2 行で特典を書いて 3 つ並べる - **数量の円バッジ**（`badge-count`）: 濃紺の正円に入数を白い明朝で入れ、商品写真の左上に重ねる - **月桂樹の実績表示**（`award-laurel`）: 赤い月桂樹で数字と短い説明を挟む。3 つを横に並べる - **縦書き鍵括弧見出し**（`heading-vertical`）: 大きな明朝の縦書き。強調語を鍵括弧でくくる - **中央見出し＋朱線**（`heading-center`）: 横書きの明朝見出しの下に、朱色の短い線を入れる - **レビュー吹き出し**（`review-bubble`）: 細線の角丸吹き出し。アイコン・名前・星をつけ、左右交互に配置する - **商品タイル**（`product-tile`）: 写真を背景にした 2 カラムのタイル。円バッジ・白文字の商品名・価格・購入ボタンを重ねる ## Do's and Don'ts **Do** - 縦書きの明朝見出しを、大きな余白の中に置く - 商品写真は濃い器や布の上で、斜め光で撮ったものを使う - セクション間には霞・雲の淡い線画を入れる - 朱色は CTA と見出し下の線に限定する - 職人・工場・店舗の写真で歴史と信頼を伝える **Don't** - 丸ゴシックやポップな書体を使わない - 鮮やかな多色グラデーションを使わない - 写真を角丸やドロップシャドウで装飾しない - 本文を詰めて組まない - 朱色を面の塗りに広く使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の美しさと老舗の格を一目で伝える）: 全面の商品写真に縦書きロゴと短いコピーを重ねる。右下に八角バッジを 3 つ置き、下端は白へフェード 2. **ブランド導入**（歴史と商品の位置づけを伝える）: 白地に縦書きの大見出しと本文を置き、下に月桂樹の実績を 3 つ並べる 3. **食感の特長**（味と食感を伝える）: 断面写真に引き出し線で構成要素を注記し、写真 3 枚を横に並べて横書きの本文を添える 4. **歴史・由来**（元祖としての物語を伝える）: 朱の印章風の縦書き見出しに商品写真を合わせ、白黒の古写真を重ねる 5. **品質管理**（安心感を与える）: 工場写真を左に裁ち落とし、右に鍵括弧の縦書き見出しを置く。認証マークを添える 6. **素材のこだわり**（原料の良さを伝える）: 製造ラインの写真と素材の小さな写真を重ね、縦書きの本文を添える 7. **情緒ビジュアル**（変わらない美味しさを印象づける）: 紺の布の上の商品を全幅写真にし、白い明朝の横書きコピーを重ねる 8. **名前の由来**（縁起の良さを伝える）: 小さな写真と短い横書きの文で静かに見せる 9. **ギフト対応**（贈答用途を後押しする）: 芥子色の面にのし紙写真と縦書きの白文字を置き、続けてパッケージ写真を見せる 10. **ラインナップ**（入数の選択肢を見せる）: 中央見出しの下に 2×2 の箱写真を並べ、紺の円バッジで入数を示す 11. **店舗紹介**（実店舗による信頼を伝える）: 黒地に暖簾の写真、縦書きの白い見出し、店舗写真 3 枚とキャプションを置く 12. **お客様の声**（評価で後押しする）: 大きな評価数字と星を見せ、線だけの吹き出しを左右交互に並べる 13. **おすすめ商品・CTA**（購入へ導く）: 写真を背景にした 2 カラムのタイルに、商品名・価格・朱色のピル型ボタンを置く ## Imagery - 焼き菓子は黒や紺の漆器や石板の上で、斜めからの自然光で撮る - 背景は和紙・木・布など自然素材にし、浅い被写界深度でぼかす - 職人や工場は白衣の清潔感を出し、古写真は白黒で見せる - 霞・雲・波の細い線画を淡い灰色で添える - 朱の印章風の小さな装飾を見出しに添える - ギフト写真は手元を写して、贈る場面を想像させる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元画像は狭い幅の PC 版で、SP でも同じ 1 カラム構成のまま使える - PC では中央に約 800px のコンテナを置き、外側は地色で埋める - SP の縦書き本文は 14px に落とし、1 行は 12〜15 字程度にする - 商品タイルは SP でも 2 カラムを保つ。文字が窮屈なら 1 カラムにする - 写真は SP でも片側の裁ち落としを保ち、非対称に組む ## 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-3d84c0f3`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/kogetsu/12800/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。