--- version: alpha name: Pastel Pink Playful Kids Candy LP description: ページ全体を淡いピンクの単色地で塗り、紺色の丸ゴシック見出しとマゼンタの差し色でまとめた菓子のLP。音符・キラキラ・笑顔の口のモチーフを散らし、写真は円形に切り抜く。中央寄せの1カラムで、ゆったり縦に読ませる。 colors: background: '#F8D1E3' primary: '#193E7B' text-body: '#59464F' cta: '#E3017D' on-cta: '#FFFFFF' surface: '#FFFFFF' accent-1: '#BA1569' secondary: '#7A3F98' accent-2: '#39A9E0' accent-3: '#EB5371' tint-1: '#FCE4BD' background-alt: '#FFFFFF' text: '#060606' 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: 20px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.6 letterSpacing: 0.1em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: M PLUS Rounded 1c fontSize: 11px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Dela Gothic One fontSize: 18px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: M PLUS Rounded 1c fontSize: 12px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.15em rounded: sm: 8px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-speech-logo: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.full}' height: 90px section-title-sparkle: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 30px feature-label: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px circle-photo: backgroundColor: '{colors.tint-1}' rounded: '{rounded.full}' height: 170px ingredient-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.full}' height: 220px caution-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 310px shop-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 175px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px --- # DESIGN.md — 桜色×紺文字の音符が踊る子ども向けキャンディLP（Pastel Pink Playful Kids Candy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい - **キーワード**: 淡いピンク一色の地・紺色の丸ゴシック・音符とキラキラ・円形の写真・吹き出しラベル・中央揃え - **地の質感**: グラデーションも質感もないフラットな塗り。白い手描き風の口モチーフをうっすら散らしている。 - **形**: 円・吹き出し・ピル型ボタン・角丸の白カードが中心。直線の区切りは使わない。 - **温度感**: 暖かく甘い。子どもと親が安心できる、やさしいトーン。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F8D1E3` | ページ全体の地 | 63% | 画素の実測 | | `primary` | `#193E7B` | 見出し・強調テキストの紺色 | 2% | 画素の実測 | | `text-body` | `#59464F` | 本文のグレー茶 | 3% | 画素の実測 | | `cta` | `#E3017D` | 購入ボタンの塗り | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字色 | 0% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | 白いカード・円形の情報パネル | 13% | 画素の主要色に補正 | | `accent-1` | `#BA1569` | 特徴ラベルの文字・注意文のマゼンタ | 0% | 画素の実測 | | `secondary` | `#7A3F98` | グレープ味のパープル | 2% | 推定 | | `accent-2` | `#39A9E0` | 音符・キラキラの水色 | 0% | 推定 | | `accent-3` | `#EB5371` | ストロベリー味のコーラルピンク | 2% | 画素の実測 | | `tint-1` | `#FCE4BD` | 写真背景の淡いクリーム円 | 2% | 画素の実測 | | `background-alt` | `#FFFFFF` | フッターの白地 | 2% | 画素の実測 | | `text` | `#060606` | フッターの社名などの黒 | 0% | 画素の実測 | - 地は最初から最後まで淡いピンク一色で通す。セクションごとに色を切り替えない。 - 見出しと強調テキストは紺色に統一する。本文は落ち着いたグレー茶にする。 - マゼンタは購入ボタン・特徴ラベル・注意文だけに使う。 - パープルとコーラルは味の色分けとして商品や果物の周りだけに使う。 - 水色・ピンク・黄色は音符やキラキラの小さな装飾に限って使う。 - 情報を読ませる場所だけ白いカードや白い円を置き、地から浮かせる。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風のメイン見出し（吹き出しの中） | 丸ゴシック | M PLUS Rounded 1c | 900 | 44px | 1.1 | 0.02em | | `headline-lg` | リード見出し・企業メッセージ | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.5 | 0.08em | | `headline-md` | セクション見出し（両側にキラキラ） | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.6 | 0.1em | | `headline-sm` | 特徴の小見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.5 | 0.08em | | `body-md` | 本文（中央揃え） | 丸ゴシック | M PLUS Rounded 1c | 700 | 11px | 2.2 | 0.1em | | `note` | 原材料・注釈 | ゴシック | Noto Sans JP | 500 | 8px | 1.7 | 0.02em | | `accent` | 味名などの太い装飾文字 | 装飾・ディスプレイ | Dela Gothic One | 400 | 18px | 1.2 | 0.0em | | `label-button` | 購入ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 12px | 1.0 | 0.15em | - 全体を太めの丸ゴシックでそろえ、角ばった書体は使わない。 - 本文も 700 前後の太さにし、行間 2 倍以上でゆったり見せる。 - テキストはすべて中央揃えにする。短い行で改行して文の形を整える。 - 字間は 0.08〜0.15em と広めにとる。 - 見出しは紺色、ラベルと注意文はマゼンタで色分けする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラムで中央揃え。PC は特徴セクションのみ左テキスト＋右写真の 2 カラム。 - **本文ブロックの幅**: 画面幅の約 70% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 本文の幅は画面の約 6〜7 割にとどめ、左右の余白を広くとる。 - 特徴は『ラベル→小見出し→本文→円形写真』を 1 セットにして縦に積む。 - セクション間は 64〜96px と大きく空ける。 - 装飾モチーフは本文の左右の余白に置き、文字と重ねない。 - 購入カードだけは画面幅の 9 割強まで広げる。 ## Elevation & Depth - 基本はフラットにし、影は付けない。 - 商品パッケージの写真の下にだけ、ふんわりした落ち影を付ける。 - 白いカードは影を付けず、地との色の差だけで浮かせる。 ## Shapes - **角丸**: 小 8px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 人物と商品の写真は正円に切り抜き、白か淡色の円の上に載せる。 - **セクション境界**: 区切り線は使わない。単色の地と余白だけでセクションを分ける。 - 特徴ラベルは白い吹き出し型にする。 - 原材料の情報は大きな白い円の中に入れる。 - 注意事項と購入先は角丸の白カードにする。 - ボタンは完全なピル型にする。 ## Components - **吹き出しロゴ見出し**（`hero-speech-logo`）: 白い楕円の吹き出しに大きな丸文字のロゴを入れ、周りにキラキラを付ける。 - **キラキラ付きセクション見出し**（`section-title-sparkle`）: 紺色の太字の両側に、小さな四芒星のキラキラを白と水色で付ける。 - **特徴番号の吹き出しラベル**（`feature-label`）: 白い吹き出しに『特徴＋番号』をマゼンタ文字で入れ、左上にキラキラを添える。 - **円形写真**（`circle-photo`）: 直径 170px 前後の正円に写真を収め、横に果物や音符の装飾を添える。 - **原材料の円パネル**（`ingredient-circle`）: 商品画像の下に大きな白い円を重ね、味名・原材料・アレルギーの注記を入れる。 - **注意事項カード**（`caution-card`）: 角丸の白カードに、ピンクの音符を箇条書きの記号にして注意文を並べる。右下に商品をはみ出させて置く。 - **購入先カード**（`shop-card`）: 白い角丸カードの中央に販売先のロゴ、その下にピル型ボタンを置く。 - **購入ボタン**（`button-primary`）: マゼンタのピル型ボタンに白い太字を入れる。幅は約 160px。 ## Do's and Don'ts **Do** - 地は淡いピンク一色で通し、白い面で情報を区切る。 - 音符・キラキラ・口のモチーフを余白にリズムよく散らす。 - 写真は必ず正円に切り抜く。 - テキストは中央揃えにし、短い行で改行する。 - 見出しは紺、行動を促す要素はマゼンタと、役割で色を固定する。 **Don't** - 濃い色や黒の地のセクションを入れない。 - 角ばった四角い写真や、直線の区切り線を使わない。 - 明朝体や細いゴシックを使わない。 - マゼンタを広い面積に塗らない。 - 装飾を文字の上に重ねて、読みにくくしない。 - 情報を詰め込みすぎない。余白を広く保つ。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の存在と価値をひと目で伝える）: 中央に吹き出しロゴを置き、左右に 2 色のパッケージを配置する。個包装を宙に舞わせ、音符を散らす。下にリード見出しと短い説明を続ける。 2. **ブランドの想い**（開発の背景と健康への姿勢を伝える）: 紺の見出しの下に、短い段落を 3 つ中央揃えで並べる。左右に白い口のモチーフを置く。 3. **特長（3 つ）**（おいしさ・食感・続けやすさを訴求する）: 吹き出しラベル→紺の小見出し→本文→円形写真の順で 3 回繰り返す。 4. **原材料・アレルギー情報**（保護者の安心のために成分を開示する）: 味ごとにパッケージ画像と白い円パネルを縦に並べる。注意文はマゼンタにする。 5. **注意事項**（食べるときの注意を伝える）: 角丸の白カードに、音符を記号にした箇条書きを 4 つ並べる。商品を右下にはみ出させて置く。 6. **購入先（CTA）**（通販サイトへ誘導する）: キラキラ見出しの下に、利用者の種類ごとに見出しと白いカードを分ける。カードの中はロゴとピル型ボタン。 7. **フッター**（規約・社名・コピーライトを示す）: 白地に小さな黒文字で左寄せにする。 ## Imagery - 商品パッケージは正面から撮った切り抜きにし、少し傾けて柔らかい影を付ける。 - 人物は子どもや開発者が商品を持って笑う写真を、明るい白背景で撮って正円に切り抜く。 - 商品そのものは淡いクリーム色の円の上に大きく置き、果物のイラストを添える。 - 装飾は音符（ピンク・水色・黄）と四芒星のキラキラ、白い線の笑った口の手描きモチーフを使う。 - イラストは平塗りでシンプルにする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でもピンク一色の地と中央寄せの構成を保ち、コンテンツの幅は 1000px 前後に収める。 - PC のファーストビューは左右のパッケージを大きく離し、中央にロゴとリードを置く。 - PC の特長は左にラベル付きのテキスト、右に円形写真を縦に連ねる 2 カラムにする。 - PC の原材料は 2 味を横並びにする。 - PC の購入先カードは 2 枚を横並びにする。 - PC の本文は 1 行を長めにして改行を減らす。 ## 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-4d363ad1`（元 LP の URL から採番） - **元 LP**: https://www.morinaga.co.jp/hanigu/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。