--- version: alpha name: Gold Washi Japanese Seasonal Dessert LP description: 金のグラデーション地と和紙テクスチャ、柚子の黄と桃色の水彩背景を組み合わせた季節限定アイス菓子のLP。明朝見出しと縦書きコピーで和の上品さを出し、素材の写真を大きく浮かせて配置する。 colors: primary: '#D39E54' secondary: '#7B130C' background: '#F4F4F4' background-alt: '#FCE5DB' accent-1: '#F5E27A' accent-2: '#F47C5A' text: '#242E12' text-body: '#644D38' on-dark: '#F6F5F4' cta: '#8A5A28' on-cta: '#F6F5F4' line: '#644D38' primary-accessible: '#956726' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1em accent: fontFamily: Josefin Sans fontSize: 22px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.12em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.12em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 40px badge-round: backgroundColor: '{colors.primary}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 72px product-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 110px heading-lines: textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 52px frame-cloud: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 400px callout-line: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 200px marker-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 36px voice-bubble: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 140px --- # DESIGN.md — 金箔×柚子色の和モダン季節スイーツLP（Gold Washi Japanese Seasonal Dessert LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 和風、上品・高級、ナチュラル、やさしい・柔らかい - **キーワード**: 金箔グラデーション・和紙テクスチャ・柚子の黄・桃色水彩・縦書きコピー・素材の切り抜き - **地の質感**: 金属光沢のある金のグラデーション、白い和紙の繊維テクスチャ、桃〜黄の水彩にじみ - **形**: 雲形・洲浜形の細い金線枠、斜めカットのセクション境界、ピル型ボタン、線画の吹き出し - **温度感**: 暖色寄り。金と柚子の黄で季節感と温かみを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D39E54` | 金の地色（ブランド面） | 14% | 画素の主要色に補正 | | `secondary` | `#7B130C` | 商品名帯の深紅 | 3% | 画素の実測 | | `background` | `#F4F4F4` | 和紙の白グレー地 | 25% | 画素の実測 | | `background-alt` | `#FCE5DB` | 桃〜黄の水彩地 | 25% | 画素の実測 | | `accent-1` | `#F5E27A` | 柚子の黄・マーカー | 2% | 推定 | | `accent-2` | `#F47C5A` | 斜め帯のコーラル | 2% | 画素の実測 | | `text` | `#242E12` | 見出しの深緑 | 1% | 画素の実測 | | `text-body` | `#644D38` | 本文の焦げ茶 | 2% | 画素の主要色に補正 | | `on-dark` | `#F6F5F4` | 金地・紅地の白文字 | 1% | 画素の主要色に補正 | | `cta` | `#8A5A28` | ブロンズグラデのボタン | 1% | 推定 | | `on-cta` | `#F6F5F4` | ボタン文字 | 0% | 画素の主要色に補正 | | `line` | `#644D38` | 見出し上下線・吹き出し線 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#956726` | AA を満たす補正値（計算） | | 計算 | - 導入部は金グラデーション、商品詳細は桃〜黄の水彩、後半は白い和紙と地を3段で切り替える - 深紅は商品名帯など一点だけに使う - 見出しは深緑、本文は焦げ茶で、黒は使わない - 柚子の黄は筆で塗ったマーカー帯で訴求一文を強調する時だけ使う - CTAはブロンズの金属調グラデーションにして金地と揃える - `frame-cloud` は文字 `#F6F5F4` × 背景 `#D39E54` のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#956726`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ・縦書きコピー | 明朝 | Shippori Mincho | 700 | 30px | 1.3 | 0.05em | | `headline-lg` | 商品名の大見出し | 明朝 | Shippori Mincho | 500 | 40px | 1.2 | 0.08em | | `headline-md` | 素材ごとの小見出し | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.3 | 0.05em | | `headline-sm` | 上下線で挟むセクション見出し | ゴシック | Zen Kaku Gothic New | 400 | 24px | 1.4 | 0.1em | | `accent` | 欧文のプロジェクト名・サブタイトル | 欧文サンセリフ | Josefin Sans | 600 | 22px | 1.2 | 0.12em | | `body-md` | 本文・説明文 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.9 | 0.05em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.12em | - キャッチと商品名は明朝で和の品格を出す - FVの補助コピーは縦書きの明朝で写真の右に置く - 本文は中央揃え、素材説明だけ左揃えにする - 欧文は字間を広げた大文字の幾何学サンセリフにする - 本文は太めで行間を1.9前後と広くとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 素材説明は左にテキスト、右か左に切り抜き写真を交互に置く - 断面写真から細い線を引いて素材名を指す - セクション境界は斜めカットや写真の重なりでつなぐ - 見出し上下の線は幅70%程度で中央に置く ## Elevation & Depth - 切り抜き写真には柔らかい落ち影をつけて浮かせる - CTAボタンの下にぼかした影をつける - カードの影は使わず、線と地の色で区切る ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 素材と商品は背景を抜いて切り抜く。FVは角丸の矩形写真にする - **セクション境界**: 斜めカットと水彩のにじみ、写真の重なり - 導入文は雲形・洲浜形の細い金線枠で囲む - 吹き出しは右と下だけ線で描き、右下に尻尾をつける - 記章は円形の金バッジで「第N弾」を示す ## Components - **ブロンズのピル型CTA**（`button-primary`）: 金属調のグラデーション、細い金の縁、右端に矢印 - **円形の金バッジ**（`badge-round`）: 金の円に小さい欧文と大きな明朝の数字を組む - **商品名の深紅帯**（`product-band`）: 左に白い明朝の商品名、右にパッケージ写真を置く横帯 - **上下線の見出し**（`heading-lines`）: 見出しの上下に細い二重線を引いて挟む - **雲形の金線枠**（`frame-cloud`）: 金地に細い白金線で洲浜形を描き、ロゴと導入文を中に置く - **素材の引き出し線**（`callout-line`）: 断面写真の点から細い縦線を伸ばして素材見出しにつなぐ - **筆塗りマーカー帯**（`marker-band`）: 黄色の筆跡の帯に訴求の一文を乗せる - **線画の吹き出し口コミ**（`voice-bubble`）: 白地に右と下だけ線を引き、右下に尻尾をつける ## Do's and Don'ts **Do** - 金・桃水彩・和紙の3種の地をページの流れに沿って切り替える - 素材の果実や断片の切り抜き写真を画面の端にはみ出させて散らす - 見出しは明朝か上下線つきで余白を広くとる - 文字色は深緑と焦げ茶を中心にする **Don't** - 純黒の文字やビビッドな原色ボタンを使わない - 四角いカードや強い影で情報を詰め込まない - 金地の上に細い本文を長く載せない - ポップな丸ゴシックや手書きの装飾を混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節限定の商品を印象づける）: 金地に横書きの明朝キャッチ、断面写真、縦書きコピー、円形バッジを置く 2. **商品名帯**（商品名とパッケージを示す）: 深紅の帯の左に商品名、右にパッケージ写真 3. **シリーズ紹介**（シリーズのコンセプトを伝える）: 金のグラデーション地に雲形枠、ロゴ、欧文見出し、中央揃えの白文字 4. **商品紹介**（商品の味の方向性を伝える）: 斜めカットで桃水彩の地に切り替え、明朝の商品名と中央揃えのリード文 5. **素材の解説**（層ごとのこだわりを説明する）: 断面の切り抜きから引き出し線を伸ばし、素材ごとに見出しと本文 6. **訴求の一文**（原料の産地を強調する）: 黄色の筆塗りマーカー帯に一文を載せる 7. **開発者のこだわり**（開発の背景で信頼を得る）: 木漏れ日の写真から和紙地へつなぎ、上下線の見出しと中央揃えの本文 8. **パッケージ紹介**（売場で探せるようにする）: ぼけた緑の背景にパッケージを立てて見せる 9. **お客様の声**（味の評価を伝える）: 線画の吹き出しを3つ縦に並べ、最後に注釈 10. **CTA・シェア**（他の商品への誘導とSNSでの拡散）: ブロンズのピル型ボタンとSNSの円形アイコン3つ ## Imagery - 果実・チョコ片・商品は背景を抜いて落ち影をつけ、端に散らす - 断面のシズル写真を斜めに大きく見せる - 木漏れ日のぼけた緑の写真を区切りに使う - 地には和紙テクスチャや桃〜黄の水彩にじみを敷く - 金地には七宝柄の円形装飾を薄く重ねてもよい - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCはSPのカラムを幅約38%で中央に固定する - PCの左右余白は金のグラデーション地に七宝柄の円をぼかして散らす - PCの左余白にシリーズロゴと「第N弾」を縦に置く - PCでも中の要素の配置は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-986d6cc3`（元 LP の URL から採番） - **元 LP**: https://www.haagen-dazs.co.jp/products/special/yuzu-white-chocolat/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。