--- version: alpha name: Cool Blue Crushed Ice Summer Snack LP description: 濃紺・空色・レモン黄の3色で夏の涼しさと勢いを出した氷菓のブランドLP。斜めのセクション境界、傾けた極太コピー、紺の線で囲んだ見出し、線画イラストのシーンカードで、楽しく読める情報構成にしている。 colors: primary: '#014191' secondary: '#14A7EC' background: '#FFFFFF' background-alt: '#CAEBFA' cta: '#FFF21D' on-cta: '#044694' text: '#1F4B83' tint-1: '#CAEBFB' accent-1: '#F3EBAB' marker: '#FEF31B' line: '#044694' surface: '#FEFEFE' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Oswald fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.5 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' nav-anchor: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 72px heading-boxed: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 48px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 56px button-outline: textColor: '{colors.primary}' typography: '{typography.label-button}' height: 72px check-accordion: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 72px point-badge: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 48px scene-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 90px tab-switch: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 48px faq-link: backgroundColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 24px --- # DESIGN.md — 青×黄の斜め構図が爽快な氷菓LP（Cool Blue Crushed Ice Summer Snack LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 清潔・爽やか、ポップ・元気、力強い・インパクト - **キーワード**: 夏・爽快・斜め構図・氷のかけら・濃紺×黄・線画イラスト - **地の質感**: フラットな単色面に、半透明の氷の粒の写真を散らして清涼感を出す - **形**: ほぼ角丸なしの四角いボックスに斜め切りの面と傾けたロゴ文字を組み合わせる - **温度感**: 寒色が中心で、黄色を効かせて明るく元気な印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#014191` | 見出し文字・ナビボタン・アコーディオン帯の濃紺 | 6% | 画素の実測 | | `secondary` | `#14A7EC` | FV背景のビビッドな空色 | 5% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 38% | 画素の実測 | | `background-alt` | `#CAEBFA` | 特長セクションの淡い水色地 | 20% | 画素の実測 | | `cta` | `#FFF21D` | 黄色のボタン・強調面 | 5% | 画素の実測 | | `on-cta` | `#044694` | 黄色ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#1F4B83` | 本文の紺文字 | 2% | 画素の実測 | | `tint-1` | `#CAEBFB` | シーンカード・非アクティブタブの水色 | 4% | 画素の実測 | | `accent-1` | `#F3EBAB` | 氷の粒の淡いレモン色 | 9% | 画素の実測 | | `marker` | `#FEF31B` | サブ見出しの黄色マーカー | 0% | 画素の実測 | | `line` | `#044694` | 見出し枠・カード枠の紺線 | 0% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 黄地に乗る白カード | 6% | 画素の実測 | - 文字は黒ではなく濃紺を使う - セクションの地色は白・水色・黄色を斜めの境界で切り替える - 黄色は主ボタン・マーカー・矢印アイコンなど、目を引かせたい場所だけに使う - 濃紺の面には白文字、水色の面には濃紺文字 - 氷の粒の写真は淡いレモン色で背景のアクセントにする - 空色はFVとバナーの背景だけに使い、本文の地色にはしない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・コンセプトの斜体極太コピー | 装飾・ディスプレイ | Dela Gothic One | 900 | 56px | 1.1 | 0.0em | | `headline-lg` | 枠で囲むセクション見出し | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.3 | 0.05em | | `headline-md` | 黄色マーカー付きのサブ見出し | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.3 | 0.03em | | `headline-sm` | ポイントの文・カード見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 14px | 1.8 | 0.03em | | `accent` | PICK UP・POINT・CHECK などの欧文ラベル | 欧文サンセリフ | Oswald | 700 | 12px | 1.2 | 0.05em | | `label-button` | ボタン・ナビの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.05em | | `note` | 注記・コピーライト | ゴシック | Noto Sans JP | 500 | 10px | 1.5 | 0.0em | - 本文も太字（700）を基本にして、元気な印象を出す - 大きなコピーは-10°ほど右上がりに傾け、斜体の極太書体で組む - 見出しは紺の細い線の枠で囲み、白地に紺文字で置く - 強調語の下には白か黄色の帯マーカーを引く - 難しい読みの語にはルビを振る - 欧文のラベルは大文字のコンデンス体にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ナビとシーンカードだけ 2 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 左右に約 20px の余白を取る - セクションの境界は斜めの面で区切る - セクション内は見出し→導入文→図版の順で縦に積む - タブパネルは紺の線の枠で囲み、その中にポイントとカードを並べる - ページ内リンクは紺のボタンを 2×2 で並べる ## Elevation & Depth - 影はほぼ使わず、フラットに保つ - 奥行きは氷の粒の写真を重ねて出す - 黄色ボタンは紺の枠線で縁取り、浮いて見せる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: FV は角丸なしの四角い写真をモザイク状に並べる。商品はパッケージを切り抜いて傾けて置く - **セクション境界**: 斜めの直線で地色を切り替える。不規則な多角形の白い面も使う - ボタンとカードは角丸 4〜8px の四角 - 矢印や＋のアイコンは正円で入れる - POINT バッジは水色の線の正円 - タブは上の角だけ丸める ## Components - **ページ内ナビボタン**（`nav-anchor`）: 紺の面に白文字。左に黄色い丸の下矢印アイコンを置き、2×2 で並べる - **枠付き見出し**（`heading-boxed`）: 白地を紺の細線で囲み、中に紺の極太文字を入れる。左寄せで置く - **黄色アコーディオンボタン**（`button-primary`）: 黄色の面を紺の枠線で囲み、右端に紺の丸い＋アイコンを置く - **外部リンクボタン**（`button-outline`）: 紺の線の枠に中央揃えの文字。右に外部リンクのアイコンを付ける - **CHECK付きアコーディオン**（`check-accordion`）: 水色のCHECKタグの下に紺の帯を置き、帯の右に水色の丸い＋アイコンを付ける - **POINTバッジ**（`point-badge`）: 水色の線の正円に紺の欧文ラベル。右に太字のポイント文を置く - **シーンカード**（`scene-card`）: 水色の面に、紺と空色の線画イラストと短文を左右交互に配置する - **切替タブ**（`tab-switch`）: 選択中のタブは白地に紺の線、非選択のタブは水色の面にする - **FAQラベル＋詳しく見る**（`faq-link`）: 紺の小さな角丸ラベル、Q の文、右下に黄色い丸の矢印を並べる ## Do's and Don'ts **Do** - 文字は黒ではなく濃紺で統一する - 斜めの境界とコピーの傾きで勢いを出す - 氷の粒の写真を背景の端に散らして涼しさを出す - イラストは紺・空色・黄の3色に限る - 黄色は強調点だけに使う **Don't** - 暖色の赤やオレンジを主役にしない - 大きな角丸やピル型のボタンを多用しない - ドロップシャドウで立体感を出さない - 細い明朝体を使わない - グレーの本文文字にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（夏の楽しいシーンと商品を印象づける）: 空色の地に人物写真をモザイク状に並べ、中央に傾けた商品と黄色い極太コピーを置く。カルーセルにする 2. **ピックアップ**（キャンペーンを告知する）: 英字の小見出しの下に、横スライドのバナーを並べる 3. **コンセプトコピー**（商品の世界観を伝える）: 氷の粒の写真を背景に、右上がりに傾けた紺のコピーを数行置き、最後にロゴを置く 4. **ページ内ナビ**（各章へ誘導する）: 紺のボタンを2×2で並べる 5. **特長**（味・食感・成分を説明する）: 水色の地に枠付き見出し、本文、大きな商品画像を置く。その下に外部リンクボタンと黄色ボタン、多角形の白い面の解説 6. **利用シーン**（食べる場面を提案する）: タブで切り替えるパネルの中に、マーカー付きの見出し、POINT、線画のシーンカード、CHECKアコーディオンを入れる 7. **食べ方の紹介**（おいしい楽しみ方をステップで伝える）: 黄色の地と氷の写真の上に白カードを置き、矢印でつないで線画と短文を添える。最後にFAQリンク 8. **おすすめコンテンツ**（関連する施策へ送客する）: 枠付き見出しの下に、小見出しと横長バナーを縦に並べる 9. **フッター**（規約と企業情報を載せる）: 白地に小さな文字のリンク、企業ロゴ、コピーライト ## Imagery - 若者や家族が屋外で笑っている明るい自然光の写真 - 商品パッケージは切り抜きにし、斜めに傾けて躍動感を出す - 淡い黄色の半透明の氷の粒を大小ばらばらに散らす - シーンのイラストは紺の主線に空色・黄色を塗ったフラットな線画 - 食べ方の説明には太めの紺線の簡素なアイコン風イラストを使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV を横長にし、写真を横方向に並べる - PC の本文は中央幅 約70% に収め、左右に氷の写真を大きく見せる - ナビは PC で4つを横一列に並べる - シーンカードは PC で3列にする - 特長は 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-357ca453`（元 LP の URL から採番） - **元 LP**: https://www.morinaga.co.jp/icebox/2027new/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。