--- version: alpha name: Pastel Pink Seasonal Festival Confectionery LP description: 桃の節句向けケーキを並べるカタログ型 LP です。ピンクとラベンダーの淡い地に、市松模様・桜・梅の和柄を重ねて華やかに仕上げます。商品写真は白抜きで大きく見せ、各商品に赤い丸ボタン（ピル型）を付けて詳細ページへ送ります。前半のカテゴリはピンク系、後半は紫系で色分けします。 colors: primary: '#D64A6A' cta: '#E0506A' on-cta: '#FCF8F9' secondary: '#B06AB0' background: '#FBE5E7' background-alt: '#F2EAF5' tint-1: '#F6D0DB' tint-2: '#F7D6E0' accent-1: '#F2D46A' accent-2: '#9CC86A' text: '#3A2A2A' text-muted: '#715D5F' dark-section: '#E45482' marker: '#E8408A' cta-accessible: '#D92B4B' secondary-accessible: '#A356A3' accent-2-accessible: '#587D2E' dark-section-accessible: '#DB235D' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 44px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 12px lg: 999px full: 999px spacing: unit: 8px card: 12px section: 48px 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: 36px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px category-fan: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 80px band-heading: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 44px flower-catch: textColor: '{colors.marker}' typography: '{typography.headline-md}' height: 48px product-card: textColor: '{colors.text}' typography: '{typography.body-md}' height: 360px date-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px header-link: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.md}' height: 28px footer-note: backgroundColor: '{colors.dark-section}' typography: '{typography.note}' height: 60px --- # DESIGN.md — 桜色×紫の季節行事スイーツ LP（Pastel Pink Seasonal Festival Confectionery LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、和風、ポップ・元気、やさしい・柔らかい - **キーワード**: 桃の節句・パステルピンク・ラベンダー・桜と梅の花・市松模様・商品カタログ - **地の質感**: 淡いグラデーション地に市松模様・網点ドット・花火状の線模様を薄く重ねた、紙もの風の華やかな質感 - **形**: ピル型ボタン、扇形のカテゴリボタン、両端に花を飾った帯見出し、白抜きの商品写真 - **温度感**: 暖かく甘い。春らしく祝祭的 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D64A6A` | 帯見出し・扇形ボタンの濃いローズ | 3% | 推定 | | `cta` | `#E0506A` | 商品詳細ボタン（前半） | 2% | 推定 | | `on-cta` | `#FCF8F9` | ボタン・帯見出しの文字 | 1% | 画素の主要色に補正 | | `secondary` | `#B06AB0` | 後半カテゴリの紫系ボタン・帯見出し | 3% | 推定 | | `background` | `#FBE5E7` | 前半の淡いピンクの地 | 28% | 画素の実測 | | `background-alt` | `#F2EAF5` | 後半の淡いラベンダーの地 | 22% | 画素の実測 | | `tint-1` | `#F6D0DB` | ファーストビュー・帯の背景の桜色 | 12% | 画素の実測 | | `tint-2` | `#F7D6E0` | 扇形ボタンの背景になる薄紫 | 3% | 画素の主要色に補正 | | `accent-1` | `#F2D46A` | 金屏風・トレーの山吹色 | 3% | 推定 | | `accent-2` | `#9CC86A` | 帯見出しの上下に入る若草色のライン | 0% | 推定 | | `text` | `#3A2A2A` | 商品名・価格の文字 | 2% | 推定 | | `text-muted` | `#715D5F` | 商品説明・注釈の文字 | 1% | 画素の実測 | | `dark-section` | `#E45482` | フッターの注意書き帯 | 2% | 画素の実測 | | `marker` | `#E8408A` | キャッチの縁取り・装飾に使う濃いピンク | 0% | 推定 | | `cta-accessible` | `#D92B4B` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#A356A3` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#587D2E` | AA を満たす補正値（計算） | | 計算 | | `dark-section-accessible` | `#DB235D` | AA を満たす補正値（計算） | | 計算 | - 地は淡いピンクと淡いラベンダーの 2 色にする。前半のカテゴリはピンク、後半は紫に切り替える - ボタンの色はカテゴリの地に合わせる。ピンク地なら赤ローズ、紫地なら紫を使う - 帯見出しは濃いローズの面に白文字。上下に若草色のラインを入れて雛祭りらしさを出す - 金や山吹色は屏風・トレーなどのアクセントに限る - 文字は黒に近いこげ茶にする。真っ黒は使わない - フッターの注意書きは濃いピンクの帯に白文字で載せる - `button-primary` は文字 `#FCF8F9` × 背景 `#E0506A` のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D92B4B`、4.53:1）を使う。 - `button-secondary` は文字 `#FCF8F9` × 背景 `#B06AB0` のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#A356A3`、4.51:1）を使う。 - `date-badge` は文字 `#FCF8F9` × 背景 `#9CC86A` のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#587D2E`、4.54:1）を使う。 - `header-link` は文字 `#FCF8F9` × 背景 `#E45482` のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#DB235D`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインロゴ風の大見出し（白フチ・ピンク文字） | 丸ゴシック | M PLUS Rounded 1c | 900 | 44px | 1.1 | 0.02em | | `headline-lg` | 帯の中のカテゴリ見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.3 | 0.05em | | `headline-md` | 花に挟んだキャッチ見出し（白フチ付き） | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.3 | 0.03em | | `headline-sm` | 商品名 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.0em | | `body-md` | 商品の説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.6 | 0.0em | | `accent` | 価格（数字を大きく） | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.0em | | `label-button` | 商品詳細ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.05em | | `note` | サイズ・人数・直径・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.0em | - 見出しは太い丸ゴシック。白フチと薄い影を付けてポップに見せる - キャッチ見出しは一部の文字だけを小さくして、リズムを付ける - 価格は数字を大きく、人数・サイズは小さい文字で添える - 説明文は 2〜3 行に収める - 英字のサブコピーは丸い欧文で、ピンク色にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラムを基本とし、商品カードは 2 列も可。PC は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算） - 商品は「写真 → 名前 → 説明 → 価格 → ボタン」の順に縦に積む - カテゴリの頭は全幅の帯見出しにし、その下に花で挟んだキャッチを置く - 大きな商品は写真を全幅に置き、テキストを左右どちらかに寄せる - 構成断面のイラストと素材名を商品名の横に小さく添える - 余白は背景の模様で埋めて、華やかさを保つ ## Elevation & Depth - 商品写真の下に柔らかい落ち影を付ける - 見出しの文字は白フチと薄いドロップシャドウで浮かせる - カードには影を付けない。地に直接置く ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 商品は白抜き（切り抜き）で地に直接置く。FV や大きな商品は角版の写真を全幅で使う - **セクション境界**: 直線で区切る。帯見出しの上下に若草色の細いラインを入れ、背景色の切り替えで区切る - カテゴリ切替ボタンは扇形で、花のモチーフを添える - 帯見出しは横長の長方形にし、左右端に桜の花を置く - ボタンはすべて完全なピル型にする ## Components - **商品詳細ボタン**（`button-primary`）: ローズ色のピル型ボタン。商品ごとに左寄せで置く - **紫系の商品詳細ボタン**（`button-secondary`）: 後半カテゴリで使う紫のピル型ボタン - **扇形のカテゴリボタン**（`category-fan`）: 扇の形をしたページ内リンク。2 つ並べ、ローズと薄紫で色分けし、梅の花を添える - **帯見出し**（`band-heading`）: 全幅の濃い色の帯に白文字を載せ、左右に桜を飾る。上下に若草色のラインを入れる - **花挟みキャッチ**（`flower-catch`）: 白フチ付きのピンク文字を、左右の桜イラストで挟む - **商品カード**（`product-card`）: 白抜き写真、名前、説明、価格、ボタンを縦に並べる。サイズ表記を小さく添える - **発売日バッジ**（`date-badge`）: 円形のバッジに日付を白文字で入れ、FV の左上に置く - **一覧リンク**（`header-link`）: 右上に固定する小さなピンクの角丸ボタン - **注意書き帯**（`footer-note`）: 濃いピンクの帯に、税・販売期間などの注記を白い小さな文字で入れる ## Do's and Don'ts **Do** - 淡いピンクと淡いラベンダーの地に、桜・梅・市松模様を薄く敷く - 商品写真は白抜きで大きく見せ、それぞれにピル型ボタンを付ける - カテゴリごとに地の色とボタンの色を揃える - 見出しは白フチ付きの太い丸ゴシックにする - 価格の数字を大きくし、人数やサイズの補足を小さく添える **Don't** - 黒や濃紺の重い地を使わない - 角ばった四角いボタンを使わない - 細い明朝体で見出しを組まない - 原色の青や緑を面で大きく使わない - 装飾のない無地の白い背景を長く続けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節の行事感と商品の全体像を一目で伝える）: 上部に親子の写真とロゴ風の大見出しを置き、下部に商品の集合写真を載せる。背景は桜色の市松模様 2. **カテゴリナビ**（2 つの商品群へ誘導する）: 扇形のボタンを 2 つ並べ、ローズと薄紫で色分けする 3. **カテゴリ見出し（前半）**（商品群の区切りを示す）: ローズの帯見出しの下に、花で挟んだキャッチを置く 4. **ホールケーキ一覧**（主力商品を比較させる）: 2 列の商品カードに、断面イラスト・価格・ボタンを並べる 5. **カテゴリ見出し（後半）**（2 つ目の商品群を始める）: ラベンダー色の帯見出し 6. **大型商品紹介**（目玉商品を大きく見せる）: 全幅の写真の片側にテキストとボタンを置く 7. **カット商品一覧**（手軽な商品も紹介する）: 花挟みのキャッチの下に 2 列カードを置き、屏風風の台に乗せた写真も使う 8. **キャラクター商品**（子ども向けの商品を訴求する）: 左にテキストとボタンを縦に並べ、右に桜の枝と商品写真を置く 9. **注意書きフッター**（価格や販売期間の注記を載せる）: 濃いピンクの帯に白い小さな文字 ## Imagery - 商品は明るい白背景で撮り、切り抜いて柔らかい影を付ける - 桜・梅・雛人形・ぼんぼりなどの行事モチーフを、イラストや小物で添える - 背景には市松模様、網点ドット、花火状の線模様を薄く敷く - 人物写真は明るい室内で撮った笑顔の親子にし、柔らかい光で仕上げる - 金屏風や桜の枝を小道具に使って、商品の台にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は商品カード 2 列で、中央の固定幅（約 1000px）に収める - SP は商品カードを 1 列か 2 列の小さめのカードにし、ボタンは横幅いっぱい近くまで広げる - FV の大見出しは SP で画面幅の 90% 程度に縮める - 扇形のカテゴリボタンは SP でも 2 つを横並びに保つ - 大型商品の写真とテキストの横並びは、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-582f1ff0`（元 LP の URL から採番） - **元 LP**: https://www.fujiya-peko.co.jp/cake/hinamatsuri/ - **解析に使った画像**: 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/）からご連絡ください。