--- version: alpha name: Pop Yellow Chocolate Wave Campaign LP description: 濃い黄色の面とチョコ色の文字を交互に重ね、波形の境界でセクションをつなぐ菓子ブランドのキャンペーン LP。太い丸みのある欧文見出し、白いカード、斜めストライプの地紋で、明るく元気な雰囲気を出している。 colors: primary: '#FECD19' secondary: '#7E3D26' background: '#FFFFFF' surface: '#FFFFFF' text: '#422A27' dark-section: '#5A3420' on-dark: '#FFFFFF' cta: '#7E3D26' on-cta: '#FFFFFF' background-alt: '#F5F5F5' tint-1: '#FEF4B0' accent-1: '#CAC1F5' marker: '#FDD030' primary-accessible: '#8F7101' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Fredoka fontSize: 24px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.04em label-button: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.06em rounded: sm: 6px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 12px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title-display: textColor: '{colors.on-dark}' typography: '{typography.display}' height: 56px tape-label: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 32px video-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 200px product-carousel-card: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 180px campaign-frame: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 260px date-badge: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 22px member-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 200px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 52px sns-follow-bar: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 52px --- # DESIGN.md — 黄色×チョコ茶の波形ポップ菓子 LP（Pop Yellow Chocolate Wave Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感 - **キーワード**: ビタミンイエロー・チョコブラウン・波形の境界・斜めストライプの地紋・太い丸みの欧文見出し・白カード - **地の質感**: ベタ塗りの黄色面と、パステルの斜めストライプを敷いた白地が交互に来る。チョコが溶けたような波線でセクションを区切る - **形**: 角丸カード、ピル型ボタン、ちぎれたテープ風の帯見出し、円形の商品アイコン - **温度感**: 暖かく甘い。明るく弾む ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FECD19` | ブランドの黄色。セクションのベタ地 | 26% | 画素の実測 | | `secondary` | `#7E3D26` | チョコブラウン。カード地・見出しの文字 | 8% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 白地。ストライプ地紋のベース | 40% | 画素の実測 | | `surface` | `#FFFFFF` | 白いカード・動画枠 | 9% | 画素の実測 | | `text` | `#422A27` | 濃いチョコ色の見出し・本文 | 2% | 画素の主要色に補正 | | `dark-section` | `#5A3420` | キャンペーン帯・ラベルの濃茶 | 2% | 推定 | | `on-dark` | `#FFFFFF` | 濃茶の上の白文字 | 1% | 画素の主要色に補正 | | `cta` | `#7E3D26` | ブランドサイト誘導ボタンの茶 | 1% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `background-alt` | `#F5F5F5` | フッター・リンクカードの薄グレー | 4% | 画素の実測 | | `tint-1` | `#FEF4B0` | 地紋ストライプのパステル黄 | 2% | 画素の主要色に補正 | | `accent-1` | `#CAC1F5` | SNS枠のラベンダー | 0% | 画素の実測 | | `marker` | `#FDD030` | 見出し下の黄色マーカー | 0% | 画素の主要色に補正 | | `primary-accessible` | `#8F7101` | AA を満たす補正値（計算） | | 計算 | - 地は白ストライプとベタ黄色を交互に置き、境界は波形にする - 見出しは黄色地の上では白、白地の上ではチョコ茶にする - 強調ラベルや日付バッジは濃茶の地に白文字で入れる - パステル（黄・ピンク・ラベンダー）は地紋と円形の背景だけに使う - 写真以外で赤や青の原色は使わない - `tape-label` は文字 `#FECD19` × 背景 `#FFFFFF` のコントラスト比が 1.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8F7101`、4.64:1）を使う。 - `video-card` は文字 `#FECD19` × 背景 `#FFFFFF` のコントラスト比が 1.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8F7101`、4.64:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.1 | 0.02em | | `headline-lg` | 帯の英字小見出し・キャッチロゴ風 | 欧文サンセリフ | Fredoka | 700 | 24px | 1.2 | 0.04em | | `headline-md` | キャンペーン枠内の見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.5 | 0.04em | | `headline-sm` | カード名・商品名 | 丸ゴシック | M PLUS Rounded 1c | 700 | 16px | 1.5 | 0.04em | | `body-md` | リード文・説明文（中央揃え） | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 2.0 | 0.08em | | `note` | 期間などの注釈・誕生日表記 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.04em | | `label-button` | ボタン・ラベル | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 1.3 | 0.06em | - 英字見出しは極太で丸みのある書体を大きく中央に置く - 和文はすべて丸ゴシックの太字にし、チョコ茶で組む - リード文は短い行で改行し、中央揃え・行間2.0にする - 見出しの下には黄色マーカーの帯を重ねる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。メンバーカードは 2 列にする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 12px（375px 幅換算） - 見出しと要素はすべて中央揃え - セクションの上下を波形で切り替える - 商品の一覧は横スクロールのカルーセルにする - 動画枠は白い角丸カードで幅いっぱいに置く ## Elevation & Depth - 白カードは影をごく薄く付け、黄色地から少し浮かせる - カルーセルのカードには軽い影を付ける - それ以外はフラットにする ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 人物は角丸カードの上半分に四角く切り抜き、商品は円の中に置く - **セクション境界**: チョコが垂れるような大きめの波形 - 帯見出しは端がギザギザのちぎれたテープ風にする - キャンペーン枠は四隅を内側にえぐったクラシックな額縁にする - 再生ボタンは白丸に黄色の三角 ## Components - **英字大見出し**（`section-title-display`）: 極太の丸い英字を中央に。黄色地では白、白地では茶 - **テープ風帯見出し**（`tape-label`）: 白い帯の両端をギザギザにし、黄色の英字を乗せる - **動画カード**（`video-card`）: 角丸の動画サムネイル。右下に白丸の再生ボタン、下に尺切替のピルボタン - **商品カルーセルカード**（`product-carousel-card`）: 茶色の角丸カードに商品パッケージ、名前、説明、円形の味アイコンを並べる。左右に白丸の矢印 - **キャンペーン額縁**（`campaign-frame`）: 茶の二重線で囲った白い額。中にマーカー見出しと応募期間を置く - **回数バッジ**（`date-badge`）: 濃茶の小さな角丸ラベルに白文字。右に日付を並べる - **人物カード**（`member-card`）: 白い角丸カードに上半分写真、名前、誕生日、茶色のピルラベル、好物リスト - **ブランドサイト誘導ボタン**（`button-primary`）: 茶色地に金のステッチ風の縁取り。商品画像とロゴ、右端に白丸矢印 - **SNSフォロー帯**（`sns-follow-bar`）: ラベンダーの枠にストライプ地。吹き出し型ラベルと白丸のSNSアイコン ## Do's and Don'ts **Do** - 黄色と白ストライプのセクションを交互に置き、波形でつなぐ - 英字見出しは極太の丸い書体で大きく置く - 和文は丸ゴシックの太字でチョコ茶にする - 商品の味は円形アイコンで並べ、選ぶ楽しさを出す - カードは白で角丸10px前後にする **Don't** - 直線だけでセクションを区切らない - 黒の文字を使わない（茶で代用する） - 明朝体や細い書体を使わない - 寒色を面の地に使わない - 情報を詰め込みすぎず、余白を広く取る ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（出演者と商品で一目で惹きつける）: 黄色背景に人物を円形に並べ、中央に手書き風の茶色ロゴと商品パッケージ。下端は波形 2. **コンセプト**（選ぶ楽しさを伝える）: 白ストライプ地に短い詩的なリードを中央揃えで置く。ロゴと円形の味アイコンを横一列に並べる 3. **動画**（CMとメイキングを見せる）: 黄色地に英字大見出しとテープ帯、角丸の動画カード、ピルの切替ボタン 4. **グラフィック**（広告ビジュアルを見せる）: 黄色地に大見出しとポスター画像、虫眼鏡アイコン 5. **商品ラインナップ**（味のバリエーションを紹介する）: 果物とチョコの写真を4分割で敷き、茶色のカードをカルーセルで並べる 6. **キャンペーン**（プレゼント応募へ誘導する）: 白ストライプ地に茶の大見出し、額縁の中に期間と回数バッジ。賞品写真と茶色の告知帯 7. **出演者紹介**（人物ごとの好みを見せて親しみを出す）: 黄色地に3列の白い人物カードを並べる 8. **CTA**（ブランドサイトへ送る）: 茶色のステッチ縁ボタンを中央に置く 9. **関連リンク・SNS**（回遊とフォローを促す）: 白地にロゴ、グレーのリンクカード2枚、ラベンダー枠のSNS帯 10. **フッター**（企業情報）: 薄グレー地に小さなロゴとコピーライト ## Imagery - 人物は明るい均一光で、笑顔で商品を手にした姿を撮る - チョコが果物にとろりとかかるシズル写真を大きく使う - 商品は斜め上から撮り、白丸とパステルの円の中に置く - 背景の地紋は白にパステル3色の細い斜めストライプ - ロゴは手書き風のチョコ色レタリングにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約75%幅のコンテンツを置き、SPでは約88%に広げる - 人物カードはPCで3列、SPでは2列にする - カルーセルはSPで1枚を中央に置き、左右を少しだけ見せる - 英字大見出しはPCで約80px、SPで44px前後にする - 関連リンクカードはPCで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-8421c49c`（元 LP の URL から採番） - **元 LP**: https://www.fujiya-peko.co.jp/smileswitch/look/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（5/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。