--- version: alpha name: Pop Summer Soda Character Collab Sweets LP description: 鮮やかな空色と明るいレモン黄を交互に敷いた、夏らしく元気なキャラクターコラボのスイーツ新作 LP。波形のスカラップ枠、リボンの区切り、星の散らし、オレンジ色の帯見出しで、子どもにも大人にも届くにぎやかなかわいさを出している。 colors: primary: '#01AAEB' secondary: '#FEEB17' background-alt: '#FEFBDC' background: '#FDFEFD' cta: '#F4AA46' on-cta: '#FFFFFF' accent-1: '#DCB552' accent-2: '#FE66CB' accent-3: '#4585E5' text: '#3297BE' on-primary: '#FFFFFF' line: '#5CC3E8' marker: '#FEF202' text-muted: '#9A9A9A' text-accessible: '#297D9E' cta-accessible: '#A9650A' primary-accessible: '#017EAE' text-muted-accessible: '#757575' accent-2-accessible: '#E00196' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 800 lineHeight: 1.7 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.08em accent: fontFamily: Nunito fontSize: 20px fontWeight: 900 lineHeight: 1.2 headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 24px 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}' button-detail: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px button-white-nav: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px highlight-band: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 30px point-label: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 36px scallop-frame: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 300px section-title-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 40px info-table: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 260px floating-banner: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 32px app-split: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 240px --- # DESIGN.md — 空色×レモン黄のポップな夏限定アイス LP（Pop Summer Soda Character Collab Sweets LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、かわいい、清潔・爽やか - **キーワード**: 空色と黄色・スカラップ枠・リボン区切り・星の散らし・シズル写真・夏限定 - **地の質感**: フラットな単色面と淡黄ストライプ地。写真だけが立体的なシズル感を持つ - **形**: 波形スカラップの円・角丸枠、リボン付きの波線区切り、ピル型ボタン - **温度感**: 明るく高彩度。爽やかで暖かい夏の温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#01AAEB` | メインの空色背景 | 30% | 画素の実測 | | `secondary` | `#FEEB17` | ビビッドなレモン黄（FV背景・枠） | 11% | 画素の主要色に補正 | | `background-alt` | `#FEFBDC` | 淡黄ストライプ地 | 13% | 画素の実測 | | `background` | `#FDFEFD` | 白（ストライプの白・カード・ボタン） | 11% | 画素の実測 | | `cta` | `#F4AA46` | 詳細ボタン・帯見出しのオレンジ | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#DCB552` | ゴールドのリボン・金茶 | 3% | 画素の主要色に補正 | | `accent-2` | `#FE66CB` | アプリ誘導のマゼンタ | 3% | 画素の実測 | | `accent-3` | `#4585E5` | 注文誘導の青 | 3% | 画素の実測 | | `text` | `#3297BE` | 空色の見出し・本文文字（黄・白地上） | 1% | 画素の実測 | | `on-primary` | `#FFFFFF` | 空色地の白文字 | 1% | 画素の主要色に補正 | | `line` | `#5CC3E8` | 表の水色罫線 | 0% | 推定 | | `marker` | `#FEF202` | 表内の該当セル黄色ハイライト | 0% | 画素の実測 | | `text-muted` | `#9A9A9A` | 表の非該当項目のグレー文字 | 0% | 推定 | | `text-accessible` | `#297D9E` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#A9650A` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#017EAE` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#757575` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#E00196` | AA を満たす補正値（計算） | | 計算 | - 地は空色と淡黄ストライプを交互に切り替え、境界はリボン付き波線にする - 空色地の文字は白、黄色地や白地の文字は空色にする - オレンジは帯見出しと詳細ボタンだけに使う - ビビッド黄はFV背景・スカラップ枠・表ハイライトに限る - フッターのアプリ誘導だけはマゼンタと青の2分割で目立たせる - 黒文字は使わず、本文も空色か白でまとめる - `page` は文字 `#3297BE` × 背景 `#FDFEFD` のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#297D9E`、4.59:1）を使う。 - `button-detail` は文字 `#FFFFFF` × 背景 `#F4AA46` のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A9650A`、4.61:1）を使う。 - `button-white-nav` は文字 `#3297BE` × 背景 `#FDFEFD` のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#297D9E`、4.59:1）を使う。 - `highlight-band` は文字 `#FFFFFF` × 背景 `#F4AA46` のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A9650A`、4.61:1）を使う。 - `point-label` は文字 `#3297BE` × 背景 `#FDFEFD` のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#297D9E`、4.59:1）を使う。 - `scallop-frame` は文字 `#3297BE` × 背景 `#FEEB17` のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#297D9E`、4.52:1）を使う。 - `section-title-bar` は文字 `#FFFFFF` × 背景 `#01AAEB` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#017EAE`、4.57:1）を使う。 - `info-table` は文字 `#9A9A9A` × 背景 `#FDFEFD` のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#757575`、4.56:1）を使う。 - `floating-banner` は文字 `#FFFFFF` × 背景 `#F4AA46` のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A9650A`、4.61:1）を使う。 - `app-split` は文字 `#FFFFFF` × 背景 `#FE66CB` のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#E00196`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの商品名・英字ロゴ風見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.3 | 0.02em | | `headline-lg` | オレンジ帯で区切った訴求コピー | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.7 | 0.05em | | `headline-md` | セクション見出し（白文字） | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.4 | 0.08em | | `accent` | Point番号・英字見出し | 欧文サンセリフ | Nunito | 900 | 20px | 1.2 | 0.0em | | `headline-sm` | カード内の小見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.4 | 0.05em | | `body-md` | 説明文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 1.8 | 0.04em | | `note` | 注釈・表内文字 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `label-button` | ボタン文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 1.0 | 0.05em | - 全体を太めの丸ゴシックで統一する - 強調語はオレンジの帯の上に白文字で載せる - 英字見出しは太い丸みのあるサンセリフでアーチ状に配置してもよい - 本文も太字寄りで、細い明朝は使わない - 中央揃えを基本にし、ポイント説明だけ左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ポイントは写真と文の左右交互、ボタンは2列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - ポイントは写真とテキストを左右交互に配置する - 写真は画面端からはみ出させて動きを出す - セクションの切り替えは背景色とリボン波線で区切る - 表とボタンは左右に約16pxの余白をとった枠内に収める - 星やキャラクターを余白に散らして空白を埋める ## Elevation & Depth - 影はほぼ使わずフラットにする - 切り抜き商品写真だけに薄い落ち影をつける - 動画の枠は白い太線で縁取って浮かせる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜き、素材写真は円形やスカラップ円形でトリミング - **セクション境界**: リボン飾り付きの波形スカラップ境界 - カードや写真の枠は波形のスカラップにする - ボタンはピル型で、右端に丸い矢印アイコンを置く - 見出しラベルは角丸の白いピルにする - 表のセルは角丸の枠でまとめる ## Components - **詳細ボタン**（`button-detail`）: オレンジのピル型。右端に白丸の矢印 - **白ナビボタン**（`button-white-nav`）: 空色地の上に置く白いピル型。空色文字と空色丸矢印、2列で並べる - **オレンジ帯強調**（`highlight-band`）: コピーの強調語にオレンジの帯を敷き、白文字を載せる - **Point ラベル**（`point-label`）: 白いピル型に空色の英字番号。両端に小さな星をつける - **スカラップ枠**（`scallop-frame`）: 黄色または白の波形縁で写真やカードを囲む - **見出しバー**（`section-title-bar`）: 淡黄地の上に置く空色の角丸バー。白文字で中央揃え - **情報表**（`info-table`）: 水色罫線の格子表。該当セルだけ黄色で塗る - **追従告知バナー**（`floating-banner`）: オレンジ系グラデの横帯。画面に追従し、右端に開閉アイコン - **アプリ誘導2分割**（`app-split`）: マゼンタと青で左右に分け、スマホのアイコンを描く。白ボタンを置く ## Do's and Don'ts **Do** - 空色と黄色の2色を主役にして、セクションごとに交互に使う - 境界にはリボン付きの波線を入れる - 星やキャラクターを余白に散らしてにぎやかさを出す - 商品写真は切り抜きで大きく見せ、枠からはみ出させる - ボタンはピル型にして矢印アイコンをつける **Don't** - 黒やグレーの重い背景を使わない - 細い明朝や細字を使わない - 直線だけの硬い区切りにしない - オレンジをボタンや帯以外に広げない - 写真を小さく四角いまま並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新作と限定感を一目で伝える）: 空色の上部にロゴと商品名、黄色地に斜めの帯。中央に大きな商品写真、周囲にキャラクターを配置 2. **訴求コピーと概要**（商品の魅力を短く伝える）: 空色地にオレンジ帯の強調コピーを4行。下に白文字の説明文 3. **素材の図解**（構成要素を見せる）: 淡黄ストライプ地にスカラップ円の商品断面。引き出し線と小さなラベルで素材名を示す 4. **ポイント**（特長を2つ説明する）: 空色地。Pointラベルと説明文を、スカラップ円の写真と左右交互に配置 5. **開発ストーリー**（商品のこだわりを語る）: 黄色のスカラップ大枠に空色の本文を入れる 6. **おすすめの組み合わせ**（併売商品を提案する）: 淡黄ストライプ地にアーチ状の英字見出し。波形の白カードと切り抜き写真、オレンジボタン 7. **動画**（CMと紹介動画を見せる）: 空色地に白見出しと星。白枠付きの角丸の動画埋め込みを2本 8. **SNSシェアと導線**（拡散と回遊を促す）: 丸いSNSアイコンを2つと、白いピルボタンを2列 9. **アレルギー・栄養情報**（必要な情報を示す）: 淡黄ストライプ地に空色の見出しバー、水色罫線の表。該当セルを黄色で塗る 10. **アプリ誘導フッター**（アプリと注文への誘導）: マゼンタと青の左右2分割。スマホのイラストと白いボタン ## Imagery - 商品は白背景の切り抜き写真にして、色鮮やかなシズル感を強める - 素材のアップ写真は円形やスカラップ形に切り抜く - 黄色い星・ドット・リボン・風船などフラットなイラストを散らす - キャラクターは表情豊かに複数配置し、動きを出す - リボンは水色・紫・金のパステル調で描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に幅400〜480pxのSP構成を置き、左右を空色やストライプの背景で埋める案を推奨 - PCでは、ポイントの左右交互配置を広い幅でゆったり組んでもよい - 動画とナビボタンは横並びにして幅を活かす - 追従バナーは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-752b9293`（元 LP の URL から採番） - **元 LP**: https://www.31ice.co.jp/contents/topics/250801_01.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。