--- version: alpha name: Ribbon Heart Pop Confectionery Campaign LP description: 濃い赤とピンクのグラデーションを、波打つリボン状の境界で交互に切り替える菓子ブランドのキャンペーン LP。白抜きのセリフ体英字見出しの両側に小さなハートを添え、ハートチョコ・リボン・ナッツの装飾を余白に散らす。商品は角を切り欠いた額縁風ピンクカードで 1 点ずつ見せる。 colors: primary: '#CC172A' accent-1: '#F3011B' background: '#F69DBF' background-alt: '#FED1D4' secondary: '#F492C6' surface: '#FAABB5' on-primary: '#FEF5F6' accent-2: '#EB6685' line: '#FED6D3' accent-3: '#5A2A22' marker: '#FFF890' tint-1: '#FFFFFF' text: '#D1070B' background-accessible: '#FCE1EB' surface-accessible: '#E20D28' secondary-accessible: '#D7167C' accent-2-accessible: '#DD1D4A' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Playfair Display fontSize: 36px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.06em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 2.6 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 9px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em label-button: fontFamily: Playfair Display fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-heart: textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 48px card-product: backgroundColor: '{colors.surface}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 270px frame-media: rounded: '{rounded.md}' height: 230px tab-toggle: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px divider-ribbon: backgroundColor: '{colors.primary}' height: 90px photo-oval: rounded: '{rounded.full}' height: 300px banner-support: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 110px button-nav: textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px icon-sns: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 36px --- # DESIGN.md — 赤×ピンクのリボン舞うハート菓子 LP（Ribbon Heart Pop Confectionery Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、かわいい、力強い・インパクト - **キーワード**: 赤とピンク・リボン・ハート・額縁カード・セリフ英字見出し・お祝い感 - **地の質感**: ベタ塗りの赤と縦グラデーションのピンクの組み合わせ。リボンには虹色の光沢グラデーションを使い、立体的なチョコ写真を散らす。 - **形**: ハート形、波打つリボン状のセクション境界、角を内側に切り欠いた額縁フレーム、ピル型の白線ボタン、楕円に切り抜いた人物写真 - **温度感**: 暖色。情熱的で甘く、華やか ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CC172A` | メインの赤い地（商品一覧・プロフィール・フッター） | 36% | 画素の実測 | | `accent-1` | `#F3011B` | ファーストビューの鮮やかな赤 | 3% | 画素の実測 | | `background` | `#F69DBF` | ピンクのグラデーション地（上端側） | 22% | 画素の実測 | | `background-alt` | `#FED1D4` | ピンクのグラデーション地（下端側の淡色） | 10% | 画素の実測 | | `secondary` | `#F492C6` | 動画エリアのピンク地（左側の濃いめ）・選択中タブ | 7% | 画素の実測 | | `surface` | `#FAABB5` | 商品カードのピンク面 | 8% | 画素の実測 | | `on-primary` | `#FEF5F6` | 赤・ピンクの地の上の白い見出し・本文 | 3% | 画素の主要色に補正 | | `accent-2` | `#EB6685` | 応援バナーのローズピンク | 1% | 画素の実測 | | `line` | `#FED6D3` | 額縁カードの白い線・区切り線 | 1% | 画素の主要色に補正 | | `accent-3` | `#5A2A22` | チョコの茶色（装飾） | 2% | 推定 | | `marker` | `#FFF890` | パステルイエローのハート装飾 | 1% | 画素の実測 | | `tint-1` | `#FFFFFF` | 動画サムネイル・SNS アイコンの白い面 | 2% | 画素の実測 | | `text` | `#D1070B` | 白い面に置くアイコン・テキストの赤 | 0% | 画素の実測 | | `background-accessible` | `#FCE1EB` | AA を満たす補正値（計算） | | 計算 | | `surface-accessible` | `#E20D28` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#D7167C` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#DD1D4A` | AA を満たす補正値（計算） | | 計算 | - 地は濃い赤（primary）とピンクの縦グラデーション（background→background-alt）の 2 種類だけを、セクションごとに交互に使う。 - 赤とピンクの境目は直線にせず、虹色に光るリボン状の波線で切り替える。 - 赤い地とピンクの地では、見出し・本文ともに白抜き文字を基本にする。 - 商品カードは左の濃いピンクから右の淡いピンクへ横グラデーションをかけ、白い二重線の額縁を重ねる。 - 黄色・水色・ピンクのパステルハートとチョコの茶色は、装飾だけに少量使う。 - 白い面は商品パッケージの台紙、動画サムネイル、SNS アイコンに限る。 - `page` は文字 `#D1070B` × 背景 `#F69DBF` のコントラスト比が 2.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#FCE1EB`、4.57:1）を使う。 - `card-product` は文字 `#FEF5F6` × 背景 `#FAABB5` のコントラスト比が 1.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `surface-accessible`（`#E20D28`、4.54:1）を使う。 - `tab-toggle` は文字 `#FEF5F6` × 背景 `#F492C6` のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#D7167C`、4.56:1）を使う。 - `banner-support` は文字 `#FEF5F6` × 背景 `#EB6685` のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DD1D4A`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインコピー（手書き風の斜体ロゴタイプ。画像で作る） | 装飾・ディスプレイ | Dela Gothic One | 400 | 48px | 1.1 | 0em | | `headline-lg` | セクション見出し（英字大文字、両側にハート） | 欧文セリフ | Playfair Display | 700 | 36px | 1.2 | 0.06em | | `headline-sm` | 商品名・人物名 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.6 | 0.04em | | `body-lg` | コンセプト文（中央揃えの短い行） | ゴシック | Zen Kaku Gothic New | 500 | 14px | 2.6 | 0.1em | | `body-md` | プロフィール本文・データ項目 | ゴシック | Noto Sans JP | 500 | 11px | 2 | 0.03em | | `accent` | 人物名の英字表記などの小さな添え書き | 欧文サンセリフ | Montserrat | 600 | 9px | 1.4 | 0.02em | | `label-button` | ナビボタンの英字（日本語の小さな補足付き） | 欧文セリフ | Playfair Display | 700 | 14px | 1.2 | 0.06em | | `note` | ボタン内の日本語補足・SNS ラベル | ゴシック | Noto Sans JP | 500 | 8px | 1.4 | 0.04em | - セクション見出しはセリフ体の英字大文字にし、両側に白い小さなハートを置く。 - 日本語の見出しは使わず、英字見出しと商品名で構成する。 - コンセプト文は中央揃えにし、1 行を短く、行間を 2.5 前後と広く取る。 - メインコピーは手書き風の斜体ロゴタイプを画像で作り、白抜きにピンクの影を付ける。 - ナビボタンは英字の下に日本語の小さな補足を付けた 2 段構成にする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は商品カードを 2 列、プロフィールは写真と文章の 2 列。 - **本文ブロックの幅**: 画面幅の約 73% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 商品カードは中央に縦 1 列で並べ、カード同士の間隔は約 40px 取る。 - 左右の余白には、リボン・ハートチョコ・ナッツ・きらめきの装飾をはみ出させて散らす。 - 見出しとコンテンツの間は約 40px 空ける。 - 動画とグラフィックは額縁フレームの中に、画面幅の約 90% で置く。 - プロフィールのデータ表は細い白線で上下を区切る。 ## Elevation & Depth - 商品パッケージは白い台紙の上に置き、ピンクの柔らかい影を付ける。 - カード自体は影を付けず、白い二重線で浮かせて見せる。 - 装飾のハートチョコには写真の自然な影を残し、立体感を出す。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品は角丸の白い台紙に載せる。人物は楕円に切り抜き、リボンを巻き付ける。動画は角丸の長方形。 - **セクション境界**: 虹色に光るリボンが波打つ曲線で、赤とピンクを切り替える。 - カードは四隅を内側に切り欠いた額縁形にし、白い二重線と四隅のハートを付ける。 - ナビボタンは白線のピル型で、中は塗らない。 - SNS アイコンは白い正円にする。 - 四角い直線的な区切りは使わない。 ## Components - **ハート付き英字見出し**（`heading-heart`）: セリフ体の英字大文字の両側に、白い小さなハートを置く。中央揃え。 - **額縁風商品カード**（`card-product`）: ピンクの横グラデーション面に、角を切り欠いた白い二重線の額縁を重ねる。四隅に小さなハート。中央に商品写真の台紙、下に白抜きの商品名。 - **動画・画像フレーム**（`frame-media`）: ピンクの地に白い細い二重線の額縁を描き、中に角丸の動画サムネイルを置く。中央に再生ボタン。 - **動画切替タブ**（`tab-toggle`）: ピル型の 2 分割スイッチ。選択中は濃いピンク地に白文字、未選択は白地にピンク文字。 - **リボン波線の境界**（`divider-ribbon`）: 赤とピンクの間を、虹色の光沢リボンが波打つ曲線で区切る。ハートチョコやナッツを重ねて置く。 - **楕円人物写真**（`photo-oval`）: 淡いグレー背景の人物写真を楕円に切り抜き、ピンクのリボンを巻き付ける。周りに白い線画のきらめきを添える。 - **応援メッセージバナー**（`banner-support`）: ローズピンクの面の上下にパステルのストライプ帯を入れ、白い丸ゴシックで 3 行のメッセージを置く。端に線画の小物イラスト。 - **アンカーナビボタン**（`button-nav`）: 白線のピル型ボタンを 2 列に並べる。英字の下に日本語の小さな補足を置く。 - **SNS アイコン**（`icon-sns`）: 白い正円の中に赤いアイコンを置き、横一列に並べる。 ## Do's and Don'ts **Do** - 地は赤とピンクの 2 色を交互に使い、境目はリボン状の波線にする。 - 余白にハートチョコ・パステルのハート・リボン・ナッツを散らし、お祝いの雰囲気を出す。 - 見出しは英字のセリフ体にし、両側にハートを置く。 - 商品は 1 点ずつ額縁風のカードに入れて大きく見せる。 - 文字は白抜きを基本にする。 **Don't** - 青や緑などの寒色を地の色に使わない。 - 黒い文字や濃いグレーの本文を使わない。 - 直線的で無機質なセクション区切りにしない。 - カードに強いドロップシャドウを付けない。 - 装飾を本文の上に重ねて読みにくくしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（起用人物と商品で、キャンペーンの世界観を一目で伝える）: 鮮やかな赤の地に人物写真を置き、放射状に飛ぶハートチョコとリボンを重ねる。下に斜体のロゴタイプ、右下に商品パッケージ。 2. **コンセプト**（ブランドの思いを詩的に伝える）: ピンクのグラデーション地。上にイラスト、中央揃えの白文字の短い文を 5 行、下にロゴタイプを再び置く。 3. **商品ラインナップ**（対象商品を 1 点ずつ紹介する）: リボン波線で赤い地に切り替える。ハート付き英字見出しの下に、額縁風カードを縦に並べる。 4. **CM 動画**（テレビ CM を見てもらう）: ピンクの地に戻し、額縁フレームの中に動画サムネイルを置く。下に秒数の切替タブ。 5. **メイキング**（撮影の裏側を見せ、親しみを持ってもらう）: 同じ額縁フレームに、白地のサムネイルと再生ボタンを置く。 6. **グラフィック**（広告ビジュアルを見せる）: 額縁フレームの中にキービジュアルを置き、右上に拡大アイコンを付ける。 7. **人物プロフィール**（起用人物を紹介し、応援の姿勢を伝える）: 赤い地に楕円の人物写真、名前と英字、略歴の本文、線で区切ったデータ表、ピンクの応援バナーを順に置く。 8. **ナビ・フッター**（各セクションへの移動と SNS への誘導）: 白線のピル型ボタンを 2 列×3 段に並べ、その下にセリフ体の小見出しと白い丸の SNS アイコンを置く。 ## Imagery - 人物は白背景のスタジオで、躍動感のあるポーズを撮る。後から赤い地に合成する。 - チョコは光沢のあるハート形のものを角度を変えて切り抜き、あちこちに浮かせる。 - リボンはピンクから水色・黄色へ変わる虹色の光沢グラデーションで、曲線的に描く。 - パステル（黄・水色・ピンク）のハートと、白い線画の 4 方向のきらめきを添える。 - コンセプトのイラストは、ピンクと黄色を基調にしたポップなキャラクターとリボンで描く。 - 商品パッケージは正面から撮り、白い角丸の台紙に載せる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では商品カードを 2 列のグリッドにし、カードを小さくする。 - PC のコンセプトは、左にイラスト、右に左揃えの文章とロゴタイプを置く 2 列にする。 - PC のプロフィールは写真と略歴を横に並べ、データ表を 2 列にして応援バナーと横並びにする。 - PC のナビボタンは 3 列×2 段に並べる。 - 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-1e493465`（元 LP の URL から採番） - **元 LP**: https://www.fujiya-peko.co.jp/heart/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-17、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。