--- version: alpha name: Warm Caramel Custard Dessert Brand LP description: クリーム〜淡いオレンジの暖色の地に、深いえんじ色の文字とピル型ボタンを合わせたデザイン。ロングセラーの洋菓子ブランドサイト向け。英字の大見出しに日本語の小見出しを組み合わせ、波形の区切りと縦書きの明朝コピーで、やさしく懐かしいおいしさを出す。 colors: primary: '#851E22' on-primary: '#FEF5E2' background: '#FFFAEC' background-alt: '#FFE8C3' surface: '#FFFEFC' text: '#6D1E1A' text-body: '#774537' cta: '#7C1419' on-cta: '#FFFDF7' accent-1: '#DC1354' tint-1: '#FDE3BB' line: '#A0484C' accent-2: '#BB3E2A' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-lg: fontFamily: Montserrat fontSize: 38px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.1em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em accent: fontFamily: Montserrat fontSize: 8px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 4px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 80px 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: 64px button-anniversary: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 100px badge-view-more: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 100px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 560px label-volume: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 22px news-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 75px campaign-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 460px footer-nav: height: 64px --- # DESIGN.md — えんじ×クリーム色の洋菓子ブランド LP（Warm Caramel Custard Dessert Brand LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: やさしい・柔らかい、上品・高級、親しみ・手作り感、ナチュラル - **キーワード**: カラメル・クリーム色・えんじ・波形区切り・縦書きコピー・英字見出し - **地の質感**: ミルクが流れるような淡いマーブル模様の背景と、つやのあるシズル写真 - **形**: 大きめの角丸カード、ピル型の二重線ボタン、円形の切り抜き写真、波形のセクション境界 - **温度感**: 暖かい。黄み寄りのクリーム色とカラメルの赤茶 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#851E22` | ブランドのえんじ色（見出し・ボタン・フッター） | 15% | 画素の実測 | | `on-primary` | `#FEF5E2` | えんじ地の上の文字 | 1% | 画素の実測 | | `background` | `#FFFAEC` | 基本のクリーム地 | 25% | 画素の実測 | | `background-alt` | `#FFE8C3` | 商品紹介セクションの淡いオレンジ地 | 20% | 画素の主要色に補正 | | `surface` | `#FFFEFC` | 商品写真カードの白 | 10% | 画素の実測 | | `text` | `#6D1E1A` | 見出し文字のえんじ | 2% | 画素の実測 | | `text-body` | `#774537` | 本文の赤茶 | 2% | 画素の実測 | | `cta` | `#7C1419` | 主ボタンの地 | 1% | 画素の実測 | | `on-cta` | `#FFFDF7` | ボタン文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#DC1354` | 周年企画用のローズピンクのボタン | 0% | 画素の実測 | | `tint-1` | `#FDE3BB` | 応募期間ラベルの淡いベージュ | 0% | 画素の実測 | | `line` | `#A0484C` | フッターのナビ区切り線 | 0% | 推定 | | `accent-2` | `#BB3E2A` | カラメル写真の赤茶 | 5% | 画素の実測 | - 地はクリーム色と淡いオレンジ色の 2 色だけを使い、セクションごとに交互に切り替える - 文字・ボタン・ラベルはすべてえんじ色 1 色でそろえる。黒い文字は使わない - 濃いえんじ色の面は、フッター・ボタン・お知らせ帯・商品容量のラベルだけに限る - ピンク〜黄緑のグラデーションは周年企画のカードだけで使う - 写真カードは白に近いクリーム色にして、地の色から少しだけ浮かせる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインビジュアルのブランド名 | 明朝 | Shippori Mincho | 700 | 34px | 1.5 | 0.02em | | `headline-lg` | 英字のセクション見出し（先頭に黒丸を付ける） | 欧文サンセリフ | Montserrat | 700 | 38px | 1.2 | 0.02em | | `headline-md` | 縦書きのキャッチや情緒的な大コピー | 明朝 | Shippori Mincho | 500 | 26px | 1.6 | 0.1em | | `headline-sm` | 商品名・日本語の小見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.6 | 0.08em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 2.0 | 0.08em | | `note` | 容量ラベル・コピーライト | ゴシック | Noto Sans JP | 500 | 11px | 1.5 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.4 | 0.1em | | `accent` | 円形バッジの周りに回す英字 | 欧文サンセリフ | Montserrat | 700 | 8px | 1.0 | 0.1em | - 見出しは英字の大見出しの下に日本語の小見出しを置く 2 段構成にする - 英字見出しの先頭には同じ色の小さな黒丸を付ける - 情緒的なコピーは明朝体の縦書きにして、写真の横に置く - 本文は字間を広め（0.08em）、行間を 2.0 にしてゆったり組む - 文字の色はすべてえんじ系にそろえる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品カードは左右いずれかの端まで広げる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 左右の余白は 20px 前後 - 見出しは左寄せ、ボタンは中央寄せ - 商品カードは片側を画面端まで広げ、もう片側だけ角を丸める - 装飾用の円形写真はセクションの右上に、画面からはみ出すように置く - セクション間は波形でつなぐ ## Elevation & Depth - 影はほぼ使わず、地の色の差で面を分ける - 写真カードは白からクリーム色へのごく淡いグラデーションで、少しだけ浮いて見せる - 円形バッジは影なしでカードの角に重ねる ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜き写真をカードに載せる。素材写真は円形に切り抜く - **セクション境界**: ゆるやかな波形の曲線 - ボタンはピル型にし、内側に白い細線を入れて二重線に見せる - お知らせ帯は左側だけ角を丸め、右端まで伸ばす - 容量ラベルは角丸なしの小さな矩形にする - 歴史の写真はグレーの角丸カードに入れ、横スクロールで並べる ## Components - **二重線のピル型ボタン**（`button-primary`）: えんじ地に白い文字と右向きの細い矢印。内側に白い細線を入れる - **周年企画用のボタン**（`button-anniversary`）: 形は主ボタンと同じで、色だけローズピンクにする - **英字と日本語の見出し**（`section-heading`）: 黒丸付きの大きな英字見出しの下に、日本語の小見出しを置く - **円形の詳細バッジ**（`badge-view-more`）: えんじ色の円の中に虫眼鏡と短い文言を入れ、周りに英字を回す。商品カードの角に重ねる - **商品カード**（`product-card`）: 片側を角丸にした白い写真エリアの下に、商品名・容量ラベル・説明文を並べる - **容量ラベル**（`label-volume`）: えんじ地に白い文字の小さな矩形ラベル - **お知らせ帯**（`news-bar`）: メインビジュアルの下に、日付と更新内容を 2 行で載せる。右端まで伸ばし、左側だけ角を丸める - **キャンペーンカード**（`campaign-card`）: 白い角丸カードにタイトル・バナー・期間ラベル・説明・ボタンを縦に並べる - **フッターのナビ**（`footer-nav`）: えんじ地に、英字と日本語のメニューを細い線で区切って並べる ## Do's and Don'ts **Do** - 地は暖かいクリーム色系だけで組む - 英字見出しと日本語の小見出しを必ずセットで置く - セクションの境界には波形を使う - 素材写真を円形に切り抜き、画面からはみ出すように置く - 商品写真は白い背景で切り抜き、パッケージをはっきり見せる **Don't** - 黒や寒色の文字を使わない - 角張ったボタンにしない - 濃い影や強いグラデーションを多用しない - セクションを直線で区切らない - 原色の赤など彩度の高い色を広い面に塗らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（シズル感で一目でおいしさを伝える）: 大きな商品写真、上から垂れるソース、縦書きの明朝コピー、ロゴとブランド名、パッケージ写真を重ねる 2. **お知らせ**（最新の情報を知らせる）: えんじ色の帯に日付と見出しを 2 行で載せる 3. **こだわり**（素材と製法を伝える）: 英字見出し、円形の素材写真、縦書きの大コピー、パッケージ写真、短い説明、ボタンの順に置く 4. **商品紹介**（商品ラインナップを見せる）: 淡いオレンジ地に、商品カードを端寄せの向きを交互にして縦に並べる 5. **歴史**（ロングセラーの信頼感を伝える）: 明朝の大コピー、過去のパッケージの横スクロールカード、ボタン 6. **周年企画**（特設ページへ誘導する）: ピンクから黄緑へのグラデーションの角丸カードに、記念ロゴとピンクのボタンを載せる 7. **キャンペーン**（応募を促す）: スライダー形式のカードに、バナー・期間ラベル・ボタンを載せ、下にドットのインジケーターを置く 8. **フッター**（ページ内の移動と SNS への導線）: 布のような質感のえんじ地に、ロゴ・ナビ・SNS アイコン・コピーライトを置く ## Imagery - カラメルのつやが出るように、やや上から光を当ててデザートを撮る - 卵・牛乳などの素材は、灰色の石の天板の上で真上から撮り、円形に切り抜く - パッケージは斜め 45 度で白い背景に切り抜く - 背景にはミルクが流れるような淡いマーブル模様を薄く敷く - 過去のパッケージはモノクロ写真にして、グレーのカードに入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では、商品カードの写真と説明文を左右に並べ、行ごとに左右を入れ替える - PC のファーストビューは横長で、ブランド名を左下、お知らせ帯を右下に置く - PC のこだわりセクションは、縦書きコピー・説明・円形写真を 3 カラムで並べる - PC の周年企画は、文章とロゴを左右に並べた横長カードにする - PC でも見出しの文字サイズは SP の約 1.2 倍にとどめ、余白を広く取る ## 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-5b1c3b07`（元 LP の URL から採番） - **元 LP**: https://www.meito.co.jp/custardpudding/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。