--- version: alpha name: Heritage Dark Brown Premium Confectionery LP description: 白地を基本に、ブランドの歴史を語る部分だけ墨ブラウンのグラデーション面にしたブランドサイト型 LP。英字セリフ見出しと小さな和文ラベルを組み合わせ、余白を広く取る。商品ごとに大きな写真、赤いピル型バッジ、生成り色の注記ボックス、細線付きの購入リンクを順に置く。 colors: background: '#FFFFFF' primary: '#47453E' dark-section: '#2D2E29' on-dark: '#FCFDFA' secondary: '#E2CAA8' background-alt: '#F6F2EA' accent-1: '#E8381E' text: '#333232' text-muted: '#5F5C5A' line: '#ECECED' surface: '#FFFFFF' accent-2: '#535353' tint-1: '#F1E7DB' accent-1-accessible: '#DE3017' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.12em headline-lg: fontFamily: Cormorant Garamond fontSize: 24px fontWeight: 400 lineHeight: 1.2 headline-sm: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em accent: fontFamily: Cormorant Garamond fontSize: 11px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 4px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 50px circle-arrow-link: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 38px status-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px note-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' height: 60px buy-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 48px event-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 500px story-dark: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 1550px page-top: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' rounded: '{rounded.full}' height: 28px --- # DESIGN.md — 白×墨ブラウン×砂色の老舗洋菓子ブランド LP（Heritage Dark Brown Premium Confectionery LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、シンプル・ミニマル、信頼・誠実、レトロ - **キーワード**: 老舗の物語・余白多め・英字セリフ見出し・墨色グラデーション・生成り注記・円形矢印ボタン - **地の質感**: 白地はフラット。物語セクションと footer だけ、光が差すような墨ブラウンのグラデーションにする - **形**: 写真は角丸なしの矩形。ボタンは細線の正円と矢印、バッジだけピル型 - **温度感**: 暖色寄りのニュートラル。焼き菓子の茶色と砂色で温かさを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | 基本の白地 | 39% | 画素の実測 | | `primary` | `#47453E` | 物語セクションの墨ブラウン面 | 16% | 画素の主要色に補正 | | `dark-section` | `#2D2E29` | グラデーション下部の濃い墨色 | 8% | 画素の実測 | | `on-dark` | `#FCFDFA` | 暗い面の上の白文字 | 1% | 画素の実測 | | `secondary` | `#E2CAA8` | イベントセクションの砂色の帯 | 5% | 画素の実測 | | `background-alt` | `#F6F2EA` | 注記ボックスの生成り色 | 5% | 画素の実測 | | `accent-1` | `#E8381E` | 販売中バッジの朱赤 | 0% | 推定 | | `text` | `#333232` | 見出しと本文の濃いグレー | 2% | 画素の実測 | | `text-muted` | `#5F5C5A` | 説明文の中間グレー | 2% | 画素の主要色に補正 | | `line` | `#ECECED` | 区切り線と円形ボタンの枠線 | 0% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | イベントカードの白面 | 3% | 画素の実測 | | `accent-2` | `#535353` | 終了バッジやタグの濃いグレー | 0% | 画素の実測 | | `tint-1` | `#F1E7DB` | トップへ戻るボタンのベージュ | 0% | 画素の実測 | | `accent-1-accessible` | `#DE3017` | AA を満たす補正値（計算） | | 計算 | - 白地を基本にし、ブランドの物語と footer だけを墨ブラウンのグラデーション面にする - セクションの区切りは面の色で付け、イベントは上半分だけ砂色の帯にしてカードを帯からはみ出させる - 朱赤は販売状況のバッジだけに使い、ほかの強調には使わない - 注意書きは生成り色の面に入れ、本文と区別する - 文字は真っ黒を避け、#333 前後の濃いグレーにする - ボタンは塗らず、細い枠線と矢印で控えめに見せる - `status-badge` は文字 `#FCFDFA` × 背景 `#E8381E` のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DE3017`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 物語セクションのキャッチ | ゴシック | Zen Kaku Gothic New | 500 | 22px | 1.6 | 0.12em | | `headline-lg` | 英字のセクション見出し | 欧文セリフ | Cormorant Garamond | 400 | 24px | 1.2 | 0.0em | | `headline-sm` | 英字見出し横の小さな和文ラベル | ゴシック | Noto Sans JP | 500 | 8px | 1.4 | 0.1em | | `headline-md` | 商品名 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.05em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 400 | 10px | 1.9 | 0.03em | | `note` | 日付・キャッチ・注記 | ゴシック | Noto Sans JP | 500 | 8px | 1.6 | 0.02em | | `label-button` | テキストリンクと一覧へのボタン | ゴシック | Noto Sans JP | 700 | 9px | 1.4 | 0.03em | | `accent` | footer ナビの英字 | 欧文セリフ | Cormorant Garamond | 500 | 11px | 1.3 | 0.02em | - セクション見出しは英字セリフの細字にし、右横に小さな和文ラベルを添える - 見出しの下に 24px ほどの短い横線を入れる - 和文のキャッチは字間を広めに取り、2 行に分ける - 本文は小さめ（10px 前後）で行間 1.9。静かに読ませる - 商品名の上に、短いキャッチを小さく置く - PC の物語セクションでは、キャッチを縦書きにしてもよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は商品を 2 カラム、イベントを 3 枚並べたカルーセルにする - **本文ブロックの幅**: 画面幅の約 95% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は約 10px と狭く、本文ブロックを画面幅いっぱいに使う - 商品写真は左右に約 40px の余白を取り、中央に置く - 商品ブロックは、写真→キャッチ→名前→本文→注記→購入リンクの順にする - 商品ブロックの間は 60px 以上空ける - 見出しのすぐ下に、一覧へのリンクと円形矢印ボタンを置く ## Elevation & Depth - イベントカードだけ、柔らかい影（0 4px 12px rgba(0,0,0,.15)）を付ける - 物語セクションの小物写真は、切り抜きに落ち影を付けて浮かせる - それ以外はフラットで、影を付けない ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 4px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの横長矩形。物語セクションの白黒写真は、白い額縁で囲む - **セクション境界**: 直線で面の色を切り替える - 矢印ボタンは直径 36〜40px の細線の正円にする - 状態バッジは塗りのピル型にし、写真の左上に重ねる - タグは濃いグレーのピル型にする - 区切り線は 1px の薄いグレー ## Components - **英字見出しと和文ラベル**（`section-heading`）: 英字セリフの見出しに小さな和文を添え、下に短い横線を引く - **円形矢印リンク**（`circle-arrow-link`）: テキストの右に、細い枠線の正円と矢印を置くリンク - **販売状況バッジ**（`status-badge`）: 商品写真の左上に重ねる、朱赤のピル型バッジ - **注記ボックス**（`note-box`）: 取扱条件や受付期間を入れる、生成り色の面 - **購入リンク行**（`buy-row`）: 左に太字テキスト、右に円形矢印を置き、下に線を引いた行 - **イベントカード**（`event-card`）: 影付きの白カード。ポスター画像、日付、グレーのタグ、太字タイトルの順に並べる - **物語のダーク面**（`story-dark`）: 墨色のグラデーションに、白文字のキャッチと本文を載せる - **トップへ戻るボタン**（`page-top`）: ベージュの円に上向き矢印を入れたボタン ## Do's and Don'ts **Do** - 余白を広く取り、高級感を出す - 見出しは英字セリフと小さな和文の組み合わせに統一する - 購入導線は塗りのボタンにせず、テキストと円形矢印で控えめに示す - 物語の部分は白黒写真や古い小物を使い、歴史を感じさせる - 販売の条件は生成り色のボックスにまとめる **Don't** - 派手な大きいボタンやグラデーションのボタンを置かない - 朱赤をバッジ以外に使わない - 写真に角丸や装飾枠を付けない（物語の白黒写真の白枠は除く） - 本文を大きく太くしない - ポップな丸ゴシックやイラスト調の装飾を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品のシズル感で惹きつける）: 焼き菓子の写真を全面に敷いたスライダー。左上にロゴ、右上にメニュー、右下にドットと一時停止ボタンを置く 2. **お知らせ**（最新の情報を伝える）: 英字見出しの下に、日付・カテゴリ・1 行の本文を並べたリスト 3. **ブランドストーリー**（歴史と理念を伝える）: 墨色のグラデーション面に白文字のキャッチ、白枠の白黒写真、切り抜きの小物、本文、円形リンクを置く 4. **商品情報**（商品を紹介し、購入へ誘導する）: 写真とバッジ、キャッチ、名前、本文、注記ボックス、購入リンク行を 1 組にし、縦に繰り返す 5. **イベント**（活動実績を見せる）: 上半分を砂色の帯にし、影付きカードのカルーセルを置く。下に矢印と進捗バー 6. **オンラインストア**（EC へ送客する）: 一文のテキストに円形矢印を添え、下に区切り線 7. **ショップ**（店舗の情報を伝える）: 見出しと短い文だけ。下に SNS アイコンを置く 8. **フッター**（ナビゲーションと企業情報）: 墨色のグラデーションに、白線のロゴ、キャッチ、英字と和文を併記したナビ。その下の白地に規約と会社ロゴ ## Imagery - 焼き菓子は白い皿に載せ、斜め上からの自然光で撮る。浅い被写界深度にする - 商品写真は、ティータイムや夜のくつろぎなどのシーンとして撮り、暖色の光で仕上げる - 大理石の上に素材を散らした俯瞰写真も使う - 歴史を伝える部分はモノクロの人物写真と、古いパッケージの切り抜きを使う - ロゴは人の顔を白い線で描いた線画にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では、見出しの右端に一覧へのリンクを置く - PC の商品は 2 カラムのグリッドにする - PC のイベントカードは 3 枚を横に並べる - 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-a090faa8`（元 LP の URL から採番） - **元 LP**: https://www.morinaga.co.jp/taichiro/2026new/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。