--- version: alpha name: Candy Pop Multicolor Collab Goods LP description: 青・黄・橙・緑・マゼンタの原色を面いっぱいに使い、ぷにぷにした不定形の雲のような図形とギザギザの境界で、グミのように弾む雰囲気を出したコラボ雑貨の販売 LP。商品写真に価格ピルと黒丸矢印を添えて、白いピル型の CHECK ボタンで各カテゴリへ送る。 colors: primary: '#005BAA' secondary: '#C6569B' accent-1: '#FEDD22' accent-2: '#78BF21' accent-3: '#FE8302' marker: '#E90115' background: '#FFFFFF' tint-1: '#C2AC7B' cta: '#FCFEFC' on-cta: '#1B1E1B' text: '#1D231D' on-primary: '#FAFDFB' dark-section: '#005BAA' tint-1-accessible: '#89723F' accent-3-accessible: '#B55D01' typography: display: fontFamily: Fredoka fontSize: 48px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Fredoka fontSize: 36px fontWeight: 600 lineHeight: 1.2 headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 800 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.5 label-button: fontFamily: Fredoka fontSize: 22px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 12px md: 20px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-check: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px button-all: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 70px price-pill: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 26px brand-blob: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 600px product-grid-card: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 200px scroll-strip: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.note}' height: 125px campaign-card: backgroundColor: '{colors.primary}' textColor: '{colors.accent-3}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 560px date-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' rounded: '{rounded.lg}' height: 110px --- # DESIGN.md — 原色キャンディカラーの雑貨コラボ LP（Candy Pop Multicolor Collab Goods LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 原色マルチカラー・グミのような不定形・ギザギザ境界・太い丸ゴシック欧文・商品カタログ - **地の質感**: グラデーションなしのベタ塗り。商品の切り抜き写真やお菓子の写真に、軽い影だけを付ける - **形**: 波打つ雲形のブロブ、ジグザグのセクション境界、ピル型ボタン、角丸の大きいカード - **温度感**: 暖かく陽気。子どもっぽさと大人のおしゃれの中間 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#005BAA` | メインの青地（FV・特集セクション） | 13% | 画素の実測 | | `secondary` | `#C6569B` | マゼンタのブロブ・カテゴリ地 | 13% | 画素の実測 | | `accent-1` | `#FEDD22` | 黄色のカテゴリ地 | 10% | 画素の主要色に補正 | | `accent-2` | `#78BF21` | 黄緑のカテゴリ地 | 9% | 画素の実測 | | `accent-3` | `#FE8302` | オレンジのカテゴリ地 | 9% | 画素の実測 | | `marker` | `#E90115` | 赤のアクセント・価格バッジ | 3% | 画素の実測 | | `background` | `#FFFFFF` | ページの白地 | 22% | 画素の実測 | | `tint-1` | `#C2AC7B` | 商品名・価格ピルのベージュ | 4% | 画素の実測 | | `cta` | `#FCFEFC` | CHECK ボタンの白い面 | 2% | 画素の実測 | | `on-cta` | `#1B1E1B` | ボタンの文字・黒丸矢印 | 1% | 画素の実測 | | `text` | `#1D231D` | 白地の大見出しの墨色 | 1% | 画素の実測 | | `on-primary` | `#FAFDFB` | 色地の上の白い見出し・本文 | 2% | 画素の実測 | | `dark-section` | `#005BAA` | 注意書きとフッターの青帯 | 3% | 画素の実測 | | `tint-1-accessible` | `#89723F` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#B55D01` | AA を満たす補正値（計算） | | 計算 | - セクションの地色は、青・橙・マゼンタ・黄・緑を順番に交代で使い、同じ色が続かないようにする - 白地の上に色のブロブを置き、左右の端には別の色の波形をのぞかせる - 色地の上の見出しと本文は白にする。白地の大見出しだけ墨色にする - 商品名と価格は、どの地色の上でもベージュのピルで統一する - ボタンは常に白い面に黒文字と黒丸矢印にする - 横スクロール帯は、親セクションとは別の原色にして区切る - `button-all` は文字 `#FAFDFB` × 背景 `#C2AC7B` のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#89723F`、4.51:1）を使う。 - `price-pill` は文字 `#FAFDFB` × 背景 `#C2AC7B` のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#89723F`、4.51:1）を使う。 - `product-grid-card` は文字 `#FAFDFB` × 背景 `#FE8302` のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#B55D01`、4.53:1）を使う。 - `campaign-card` は文字 `#FE8302` × 背景 `#005BAA` のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字の大見出し（セクションのタイトル） | 欧文サンセリフ | Fredoka | 700 | 48px | 1.1 | 0.0em | | `headline-lg` | ブランド名・カテゴリ名の英字見出し | 欧文サンセリフ | Fredoka | 600 | 36px | 1.2 | 0.0em | | `headline-sm` | 見出しの下の日本語サブタイトル | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 1.4 | 0.05em | | `body-md` | ブロブの中の中央揃えのリード文 | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.8 | 0.02em | | `note` | 商品名・価格・注釈 | ゴシック | Noto Sans JP | 700 | 11px | 1.5 | 0.0em | | `label-button` | CHECK・ALL ITEMS ボタン | 欧文サンセリフ | Fredoka | 700 | 22px | 1.0 | 0.02em | - 見出しは英字の太い丸系サンセリフで、中央揃えにする - 英字見出しの一部の文字をグミのイラストに置き換えて遊ぶ - 日本語のリード文は太い丸ゴシックで、短い行を中央揃えにする - 価格は「¥数字(税込)」の形で、太字の小さな文字にする - 明朝体や細いウェイトは使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品一覧は 2 列グリッド、その下に横スクロールの帯 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - ブランドごとのブロックは、ブロブ 1 つに見出し・写真・価格ピル・ボタンを収める - 写真の端に価格ピルを重ね、写真と少しずらして置く - カテゴリセクションは全幅の色地に 2 列の商品グリッドを置き、セクション末尾にボタンを置く - お菓子の小物写真を余白に散らして賑やかさを出す ## Elevation & Depth - CHECK ボタンに、ふんわりした薄い影を付ける - 切り抜いた小物写真に、軽いドロップシャドウを付ける - それ以外の面はフラットにする ## Shapes - **角丸**: 小 12px ／ 中 20px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 商品は白抜きの切り抜き、または角の少し丸い矩形にする。マスコットは画面端から顔を出す配置にする - **セクション境界**: 細かいジグザグ（ノコギリ刃）と波打つブロブの輪郭 - ブロック背景は直線を避け、ぷくっとした不定形にする - セクション境界は白いジグザグで切る - ボタンも価格ラベルもすべてピル型にする - 告知カードは角丸の大きい矩形にし、中に白い角丸パネルを置く ## Components - **CHECK ボタン**（`button-check`）: 白いピル型に英字ラベルと黒丸矢印を並べる。セクション末尾に中央配置する - **全商品ボタン**（`button-all`）: ベージュの大きなピルに白い英字と黒丸矢印を置く。グミ柄の帯の上に配置する - **商品名・価格ピル**（`price-pill`）: ベージュのピルを 2 段に分けて商品名と価格を載せ、右に黒丸矢印を添える - **ブランドブロブ**（`brand-blob`）: 原色の雲形の中に、白い英字見出し・商品写真・ボタンを収める - **商品グリッド**（`product-grid-card`）: 色地に、写真・右上の黒丸矢印・白文字の商品名と価格を 2 列で並べる - **横スクロール帯**（`scroll-strip`）: 別の原色の帯に商品を横に並べ、白い丸の MORE 表示を重ねる - **キャンペーン告知カード**（`campaign-card`）: 青地にグミ柄を散らした角丸カード。オレンジの見出しの下に白パネルを置き、赤丸の価格バッジを添える - **開始日バッジ**（`date-badge`）: 青い不定形の中に白文字で日付を書き、斜めに傾ける ## Do's and Don'ts **Do** - 原色 5 色をセクションごとに順番に回し、ページ全体を虹のように見せる - ブロブの輪郭とジグザグ境界で、硬い直線をなくす - 価格は必ずピルと黒丸矢印のセットで見せる - グミやマスコットを画面の余白と端に散らす - 見出しは太い丸系の英字を大きく中央揃えにする **Don't** - くすみ色やパステル、グラデーションを使わない - 細い書体や明朝体を使わない - ボタンを角張った四角にしない - 同じ地色のセクションを連続させない - 文字を写真の上に直接重ねて読みにくくしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボを一目で伝える）: 青地の上下をジグザグで切り、ロゴとグミを並べた象徴的なビジュアルを置く。周囲にお菓子を散らす 2. **導入メッセージ**（企画の趣旨と開始日を伝える）: 原色の色面の上にマゼンタのブロブを置き、白い太字の文を中央揃えにする。日付バッジとマスコットを添える 3. **おすすめ見出し**（商品紹介の始まりを示す）: 白地に墨色の巨大な英字を置き、1 文字をグミに置き換える 4. **目玉商品**（主力の商品を見せる）: 青地に生活シーンの写真を置き、価格ピルを散らす 5. **ブランド別コラボ**（コラボ先ごとに商品を紹介する）: 白地に色違いのブロブを縦に並べ、それぞれにボタンを付ける。左右の端に波形の色をのぞかせる 6. **カテゴリ別一覧**（商品をジャンル別に網羅する）: 全幅の色地に 2 列グリッドと横スクロール帯を置き、末尾に CHECK ボタンを置く 7. **全商品への導線**（一覧ページへ誘導する）: グミを並べた写真の帯の上に、ベージュの大型ピルボタンを置く 8. **お菓子商品の紹介**（関連する食品を訴求する）: 青地に白の巨大な英字を置き、マゼンタのブロブの中にリード文とパッケージを横に並べる 9. **キャンペーン**（購入特典と試食を告知する）: グミ型の文字を並べた見出しの下に、青地の角丸カードを 2 枚置く 10. **注意事項**（対象外の店舗などを伝える）: 青い全幅の帯に、白い小さな文字で箇条書きにする 11. **フッター**（サイト内の回遊を促す）: カテゴリのアイコンを一覧にし、その下に青帯のリンクと SNS を置く ## Imagery - 商品は白背景で切り抜くか、明るい俯瞰で撮る - グミや飴の単体写真を切り抜き、傾けて余白に散らす - 生活シーンは自然光の明るい室内で撮り、商品の柄が見えるようにする - 黄色いクマのマスコットを画面の端から覗かせる - 原色のグミを敷き詰めた写真を、帯状の背景に使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では、ブロブとカードを最大 1000px 程度の中央寄せにし、左右に原色の波形を広げる - PC では、商品グリッドを 3〜4 列に増やす - 横スクロール帯は、PC では一覧表示に切り替えてもよい - 見出しは PC で 1.5 倍程度に拡大し、ボタン幅は固定する ## 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-88a8aa0e`（元 LP の URL から採番） - **元 LP**: https://www.plazastyle.com/contents/HARIBO/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（12/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。