--- version: alpha name: Strawberry Red Milky Collab Ice Cream LP description: 深い苺レッドの地に、練乳色のとろりとした曲線と金の縁取りを重ねたスイーツのコラボ新作LP。後半はピンク〜クリームイエローのグラデーションに切り替わり、花形バッジや丸い写真フレームで可愛らしさを出している。最後はクリーム地の情報表で締める。 colors: primary: '#D2443B' background: '#FDEDCB' surface: '#FEFEFD' secondary: '#E78C81' tint-1: '#FFFADB' tint-2: '#FEF5CE' accent-1: '#E3B493' accent-2: '#F4B3CB' cta: '#CC0D3D' on-cta: '#FEFDFA' text: '#3A1A14' on-dark: '#FDEDD0' text-muted: '#A8A0A0' line: '#4A2A22' text-muted-accessible: '#7E7373' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 34px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 21px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Roboto Slab fontSize: 18px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.85 letterSpacing: 0.06em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' flower-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px point-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 40px circle-photo: rounded: '{rounded.full}' height: 200px callout-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 44px story-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 360px button-pill: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px video-frame: backgroundColor: '{colors.surface}' rounded: '{rounded.md}' height: 230px info-table: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 330px banner-card: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 260px --- # DESIGN.md — 苺レッド×練乳クリームの新作アイスLP（Strawberry Red Milky Collab Ice Cream LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい - **キーワード**: 苺レッド・練乳のとろみ・花形バッジ・金の縁取り・丸窓写真・季節の新作 - **地の質感**: 赤地に微妙な明暗グラデーション。練乳がたれるような光沢のある3Dリボンと、小さなキラキラを散らす - **形**: 花形（5弁）バッジ、正円の写真フレーム、波打つ曲線のセクション境界、ピル型ボタン - **温度感**: 暖色中心で甘く温かい。クリーム色で柔らかく中和する ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D2443B` | メインの苺レッド地 | 38% | 画素の実測 | | `background` | `#FDEDCB` | 情報エリアのクリーム地 | 14% | 画素の実測 | | `surface` | `#FEFEFD` | カード・表の白面 | 9% | 画素の実測 | | `secondary` | `#E78C81` | 花形バッジのピンク | 8% | 画素の主要色に補正 | | `tint-1` | `#FFFADB` | 見出しラベル・ボタンのクリーム | 5% | 画素の実測 | | `tint-2` | `#FEF5CE` | グラデ後半の淡いイエロー | 4% | 画素の主要色に補正 | | `accent-1` | `#E3B493` | 金の縁取り・波線 | 2% | 画素の主要色に補正 | | `accent-2` | `#F4B3CB` | 表のピンク見出しセル | 1% | 画素の実測 | | `cta` | `#CC0D3D` | 強調セル・赤ボタン | 2% | 画素の実測 | | `on-cta` | `#FEFDFA` | 赤地の上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#3A1A14` | 濃いこげ茶の見出し・本文 | 1% | 推定 | | `on-dark` | `#FDEDD0` | 赤地上のクリーム文字 | 2% | 画素の主要色に補正 | | `text-muted` | `#A8A0A0` | 表内の非該当グレー文字 | 0% | 推定 | | `line` | `#4A2A22` | 表・枠のこげ茶罫線 | 0% | 推定 | | `text-muted-accessible` | `#7E7373` | AA を満たす補正値（計算） | | 計算 | - 前半は苺レッド地を通し、明るい赤から深い赤への縦グラデで奥行きを出す - 赤地の上の文字はクリーム色か白。黒文字は使わない - 後半のおすすめ枠はピンク〜クリームイエローのグラデに切り替え、花形はコーラルピンク - 情報エリアはクリーム地に白カードとこげ茶罫線 - 金色は境界の波線と写真フレームの縁だけに使う - 該当する項目は赤ベタ塗りで強調し、該当しない項目はグレー文字にする - `flower-badge` は文字 `#D2443B` × 背景 `#E78C81` のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。 - `info-table` は文字 `#A8A0A0` × 背景 `#FEFEFD` のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#7E7373`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名・おすすめ枠のタイトル | 丸ゴシック | M PLUS Rounded 1c | 900 | 34px | 1.2 | 0.02em | | `headline-lg` | 赤地のリードコピー | ゴシック | Zen Kaku Gothic New | 700 | 21px | 1.5 | 0.05em | | `headline-md` | セクション見出し（動画・紹介） | ゴシック | Zen Kaku Gothic New | 900 | 20px | 1.4 | 0.05em | | `accent` | Point番号ラベル | 欧文セリフ | Roboto Slab | 800 | 18px | 1.2 | 0.02em | | `headline-sm` | 花形バッジの文字・表の見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.3 | 0.02em | | `body-md` | 説明文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.85 | 0.06em | | `label-button` | ピル型ボタン | ゴシック | Noto Sans JP | 500 | 12px | 1.2 | 0.08em | | `note` | ※注釈・コピーライト | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | - 見出しは太い丸ゴシックで甘く元気な印象にする - 大見出しは白文字にピンクと濃赤の二重縁取りを付け、斜体ぎみにする - 小見出しは斜線ではさむ（\ 〇〇 /） - 本文は字間を広めにして短い行で改行する - Point番号は欧文スラブセリフにし、左右に花のアイコンを添える - 注釈は※付きの小さな文字で写真の近くに置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長は写真と文章を左右交互に並べる2分割 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 主役の商品写真は画面幅いっぱいに大きく置く - 特長は丸窓写真を左右交互に配置し、反対側にテキスト - 断面写真には引き出し線とラベルで構成要素を示す - おすすめ枠は写真と花形カードを互い違いに重ねる - 情報表は4列グリッドで白セル、罫線は細い - ボタン2つを横並びで等幅に ## Elevation & Depth - カードと動画枠は白い太枠に柔らかい影 - 商品写真には下に淡い影を付けて浮かせる - 練乳リボンの装飾は光沢のあるハイライトと影で立体的に見せる - 情報表はフラット。影なし ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 断面写真は金縁の正円で切り抜く。商品は背景を抜いた切り抜き - **セクション境界**: 金の縁取りが付いた緩やかな波曲線 - バッジは5弁の花形 - Point見出しはクリームのピル型 - 動画やカードは角丸12〜20pxに白枠 - 表の外枠は角丸8px ## Components - **花形バッジ**（`flower-badge`）: ピンクの5弁花の中に商品名を2〜3行の濃赤太字で入れる - **Point見出しラベル**（`point-label`）: クリームのピルの中に欧文で番号を入れ、両脇にピンクの花 - **丸窓写真**（`circle-photo`）: 金縁の正円で断面を見せる。2枚を重ね、交点に×印 - **引き出しラベル**（`callout-label`）: クリームの帯ラベルから赤い点線を写真の上へ伸ばす - **開発秘話カード**（`story-card`）: クリームの角丸カード。虫眼鏡アイコンの見出しとキャラクターを添える - **詳細ピルボタン**（`button-pill`）: クリームのピル。右端にこげ茶の丸い矢印アイコン - **動画枠**（`video-frame`）: 白い太枠と角丸を付けた16:9の埋め込み枠 - **情報グリッド表**（`info-table`）: 白セルの4列表。該当セルは赤ベタに白文字、非該当はグレー文字 - **特設サイトバナー**（`banner-card`）: ピンク地のバナー。下部は赤帯に白文字のリンクを入れる ## Do's and Don'ts **Do** - 赤地の上に練乳色のとろりとした曲線装飾を散らす - 花形・円・波など柔らかな形でそろえる - 商品写真は大きく、ツヤと質感が伝わるように見せる - 苺やケーキの小物を画面端から少しはみ出させて置く - 注釈は※を付けて小さく添える **Don't** - 寒色や黒の大きな面を使わない - 角張った四角いボタンにしない - 赤地に赤文字や茶文字を置かない - 直線だけでセクションを区切らない - 装飾を本文の上に重ねない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節の新作とコラボを告知する）: 赤地にピル型の月ラベルとロゴを置く。花形バッジと特大の商品写真に、キャラクターとサブ商品を添える 2. **リード**（味のコンセプトを伝える）: 波線の下にクリーム色の太字で4行のコピー。その下に白い説明文 3. **構成解説**（中身の構成要素を見せる）: 断面写真に引き出しラベルを3〜4本付ける 4. **特長**（こだわりを2点説明する）: Pointラベルと丸窓写真を左右交互に置く 5. **開発ストーリー**（誕生の背景で共感を得る）: クリームのカードにアイコン見出しを置き、キャラクターを添える 6. **サブ商品紹介**（同時発売品を紹介する）: 白い曲面の上に写真を置き、花形バッジと斜線見出しを添える 7. **特設サイト誘導**（関連キャンペーンへ送客する）: ピンクのバナーカードと赤帯リンク 8. **おすすめの組み合わせ**（併せ買いを提案する）: ピンク〜黄のグラデ地に縁取り大見出し。写真と花形カードを交互に重ねる 9. **動画**（CMと紹介動画を見せる）: 赤地にクリーム見出しと白枠の動画を2本 10. **導線ボタン**（一覧・店舗検索へ誘導する）: クリームのピルボタンを2つ横並び 11. **シリーズ説明**（新作企画の趣旨を伝える）: 水色〜ピンクのグラデカード。左にロゴ、右に点線区切りの3行 12. **アレルギー・栄養情報**（必要な情報を開示する）: クリーム地に白の見出し帯とグリッド表。赤とピンクで強調する ## Imagery - 商品はスタジオで切り抜き撮影し、ツヤと断面の質感を強調する - 練乳がたれるリボン状の3D装飾を、画面の端に配置する - 苺やショートケーキの小物を、写真の切り抜きで散らす - レトロ可愛いキャラクターのイラストを添える - 白いキラキラや星を小さく散らす - 皿・スプーン・カップなどの小道具で、場面を作る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約480px幅のSPデザインを置き、左右を赤地で埋める想定にする - PCで広げる場合は、特長の2分割の比率を保ったまま余白を増やす - 動画は最大幅を制限して中央に置く - 表は4列のまま最大幅600pxにする - 装飾の小物は画面端の外側に追加して置く ## 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-109f4d62`（元 LP の URL から採番） - **元 LP**: https://www.br31.jp/contents/topics/260901_01.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。