--- version: alpha name: Pastel Illustrated Seasonal Chocolate Collection LP description: 切り絵風の絵本イラストを使ったファーストビューの下に、白地と生成りの帯を交互に重ね、明朝体で商品を静かに並べる洋菓子ブランドのシリーズ紹介 LP。商品ごとに見出しの色を変え、パーツ図解で中身を見せる。 colors: primary: '#B23A2E' background: '#FFFFFE' background-alt: '#F8F7F3' dark-section: '#181818' on-dark: '#C8B07A' cta: '#D4227B' on-cta: '#FFFFFF' tint-1: '#E3B3BB' tint-2: '#FBE2D1' text: '#1D1D1C' accent-1: '#7DB040' accent-2: '#D9A400' accent-3: '#B39456' line: '#D9CBA6' accent-3-accessible: '#8D733F' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.12em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 2px 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}' fv-illustration: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.display}' height: 320px series-band: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 110px product-color-heading: textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 24px parts-diagram: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 300px price-block: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 120px limited-badge: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 36px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px brand-card: textColor: '{colors.text}' typography: '{typography.note}' height: 180px footer-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 260px --- # DESIGN.md — 絵本イラストと生成り帯の季節チョコ LP（Pastel Illustrated Seasonal Chocolate Collection LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、やさしい・柔らかい、かわいい、シンプル・ミニマル - **キーワード**: 絵本イラスト・明朝体・余白多め・生成りの帯・パーツ図解・季節感 - **地の質感**: フラットな白地と紙のような生成り面。写真は白背景の切り抜きで影は控えめ - **形**: 基本は角のない四角。CTA だけピル型。図解には細い引き出し線を使う - **温度感**: やや暖かい。サーモンピンクやベージュに季節のアクセント色を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B23A2E` | ブランドの見出し・新ブランド表記の赤茶 | 0% | 推定 | | `background` | `#FFFFFE` | ページの地 | 59% | 画素の実測 | | `background-alt` | `#F8F7F3` | シリーズ見出しを置く生成りの帯 | 8% | 画素の実測 | | `dark-section` | `#181818` | ヘッダーとフッター | 7% | 画素の実測 | | `on-dark` | `#C8B07A` | 暗い面の上の金色文字 | 0% | 推定 | | `cta` | `#D4227B` | 通販へ誘導するピル型ボタン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `tint-1` | `#E3B3BB` | 通販バナーのくすんだピンク地 | 2% | 画素の実測 | | `tint-2` | `#FBE2D1` | ファーストビューのサーモン空 | 3% | 画素の主要色に補正 | | `text` | `#1D1D1C` | 見出しと本文の墨色 | 2% | 画素の主要色に補正 | | `accent-1` | `#7DB040` | 商品見出しの若草色 | 0% | 推定 | | `accent-2` | `#D9A400` | 商品見出しの山吹色 | 0% | 推定 | | `accent-3` | `#B39456` | 限定バッジ・注記の金茶 | 0% | 推定 | | `line` | `#D9CBA6` | カードの細い枠線と図解の引き出し線 | 0% | 推定 | | `accent-3-accessible` | `#8D733F` | AA を満たす補正値（計算） | | 計算 | - 地は白にして、シリーズが切り替わる場所だけ生成りの全幅帯を敷く - 商品見出しは商品ごとにテーマ色（若草・苺赤・山吹・りんご赤）で塗り分ける - 本文と価格は墨色だけにして、色は見出しと注記の点にとどめる - ヘッダーとフッターは黒に近い濃色＋金色の文字で締める - CTA は鮮やかなマゼンタのピル型を 1 か所だけ置き、くすんだピンクのバナーの上に乗せる - `limited-badge` は文字 `#FFFFFF` × 背景 `#B39456` のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#8D733F`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのシリーズ名 | 明朝 | Shippori Mincho | 500 | 34px | 1.3 | 0.08em | | `headline-lg` | シリーズのコンセプト見出し | 明朝 | Shippori Mincho | 600 | 22px | 1.5 | 0.12em | | `headline-md` | 商品ごとの色付き見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.05em | | `headline-sm` | 商品名・価格の見出し | 明朝 | Shippori Mincho | 600 | 18px | 1.5 | 0.1em | | `body-md` | 商品ストーリーの中央揃え本文 | ゴシック | Zen Kaku Gothic New | 400 | 14px | 1.9 | 0.08em | | `note` | 注記・個数・税表記 | 明朝 | Noto Serif JP | 400 | 11px | 1.7 | 0.05em | | `accent` | 欧文のサブタイトル | 欧文セリフ | Cormorant Garamond | 500 | 12px | 1.4 | 0.05em | | `label-button` | CTA ボタンの文字 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.4 | 0.05em | - 見出しは明朝で、字間を広めにとって静かに見せる - 商品の物語文は中央揃えで 4〜5 行に収める - シリーズ見出しの下に小さな欧文の英訳を添える - 価格は『税込』を小さく、数字を大きく、本体価格は括弧で小さく書く - 図解の中のパーツ名は太めのゴシック 2 行で短く書く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は商品写真と図解を左右 2 カラム、商品一覧は 4 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - シリーズの切れ目に全幅の生成り帯を置き、見出しと説明文を並べる - 商品 1 つは『色見出し→物語→商品写真→パーツ図解→商品名と価格』の順にする - 商品同士の間は 60px 以上あけて、余白でくぎる - パーツ図解はイラスト中央のまわりにパーツ写真を置き、細い線でつなぐ - 商品一覧は白カードに正方形の写真とロゴ名を入れ、グリッドに並べる ## Elevation & Depth - 基本は影を使わずフラットにする - 商品一覧のカードと店舗バナーには、ごく薄いドロップシャドウ（0 2px 6px rgba(0,0,0,.12)）をつける - 商品写真は切り抜きにして、接地影を薄くつけるだけにする ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンはピル型。 - **写真の切り抜き**: 商品は白背景で切り抜き、商品一覧は正方形にトリミングする - **セクション境界**: 直線で区切り、全幅の色帯を切り替える - カードとバナーは角丸なしか 2px にする - ピル型は CTA だけにする - 限定バッジは金茶の正円にする - 新着ラベルは赤い小さなタグにして、カードの左上に重ねる ## Components - **絵本イラストのファーストビュー**（`fv-illustration`）: サーモン色の空に切り絵風の木・人物・動物を描き、中央に明朝のシリーズ名と欧文スクリプトを重ねる - **シリーズ見出し帯**（`series-band`）: 生成りの全幅帯。左に明朝の見出しと欧文の英訳、右に小さな説明文を置く - **商品テーマ色の見出し**（`product-color-heading`）: 商品ごとのテーマ色で書く中央揃えの太字見出し。下に物語文を続ける - **パーツ図解**（`parts-diagram`）: 中央にパフェのイラストを置き、まわりに 4 つのパーツ写真と名前を並べて細い金線でつなぐ - **商品名と価格**（`price-block`）: 小さな注記ドット、明朝の商品名、括弧のサブ名、個数、税込価格を縦に積む - **限定バッジ**（`limited-badge`）: 金茶の正円に白文字 2 行で販路限定を示す - **通販 CTA**（`button-primary`）: くすんだピンクの全幅バナーに置くマゼンタのピル型ボタン。右端に矢印をつける - **商品一覧カード**（`brand-card`）: 正方形の写真の下にロゴと読みを入れた白カード。細い枠線をつけ、NEW タグを重ねる - **濃色フッター**（`footer-dark`）: 黒地に金色の欧文見出し、おすすめ導線 4 枚、SNS 帯を置く ## Do's and Don'ts **Do** - 見出しは明朝で字間を広げ、余白をたっぷりとる - 商品ごとにテーマ色を 1 色決め、見出しだけに使う - 中身の素材はパーツ図解で見せる - 価格の表記ルールを全商品でそろえる - シリーズの切れ目は生成り帯で示す **Don't** - 派手なグラデーションや強い影を使わない - 本文を色付きにしたり、太字を多用したりしない - ピル型ボタンを何個も置かない - 写真の背景を色付きにしない - 文字を詰めて情報を詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ブランドのナビゲーション）: 黒地の中央にロゴ、下に小さなメニューを横に並べる 2. **ファーストビュー**（シリーズの世界観を伝える）: 全幅の絵本イラストに明朝のタイトルを重ねる 3. **ブランド導入**（新ブランドのロゴとコンセプトを示す）: 赤茶の欧文ラベル、線画ロゴ、限定バッジ、中央揃えの短い文 4. **シリーズ見出し**（商品ラインの区切り）: 生成り帯に見出しと説明文を左右で並べる 5. **商品紹介（繰り返し）**（各フレーバーの物語と中身を見せる）: 色見出し、物語、パッケージ写真、パーツ図解、価格の順 6. **缶入りギフト紹介**（別ラインを提示する）: 缶の写真を左に、価格ブロックを右に置く 7. **フレーバー一覧**（詰め合わせの中身を説明する）: 粒の写真に名前と短い説明を添え、6 列のグリッドで並べる 8. **注意事項**（販売条件を伝える）: 小さな注記を左揃えで並べる 9. **通販 CTA**（購入へ誘導する）: ピンクのバナーに白抜きのロゴとマゼンタのピルボタン 10. **商品一覧**（他のブランドへ回遊させる）: 4 列の白カードのグリッドと、店舗導線の横長バナー 11. **フッター**（おすすめ・SNS・規約への導線）: 黒地に金色の文字と写真のサムネイル ## Imagery - 切り絵や版画のような温かいフラットイラストで、森・動物・女性・果実を描く - パッケージは淡いパステルの絵本調で、商品ごとに地色を変える - チョコは真上か斜め上から撮り、白背景で切り抜く - 商品一覧の写真は自然光のテーブルコーディネートで、正方形にする - 季節のモチーフ（蝶・花・小鳥）を小さく散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP は商品写真と図解を縦に積み、図解は幅いっぱいに縮める - 生成り帯は SP では見出しを上、説明文を下に縦に並べる - 商品一覧は PC で 4 列、SP で 2 列にする - フレーバー一覧は PC で 6 列、SP で 3 列にする - ヘッダーのメニューは 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-e003582f`（元 LP の URL から採番） - **元 LP**: https://www.morozoff.co.jp/quality/valentine_cpn/shinonomekajitsuen/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（5/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。