--- version: alpha name: Icy Blue Frozen Dessert Brand Hub LP description: 濃紺の帯見出しと氷のような水色グラデーションの地で、冷たさと勢いを出したアイス商品のブランドLP。商品パッケージの並び、ゲーム・CM動画、キャンペーン、特集バナー、リンク集を縦に積み、最下部に固定タブナビを置く。 colors: primary: '#1C1E83' on-primary: '#FFFFFE' secondary: '#137CCE' background: '#CAEBFC' background-alt: '#E1F3FD' surface: '#FEFFFE' accent-1: '#E0151F' accent-2: '#C8E9FA' text: '#110F57' dark-section: '#0D1C4F' line: '#FFFFFF' typography: display: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-lg: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.4 accent: fontFamily: Montserrat fontSize: 12px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 12px full: 999px spacing: unit: 8px card: 12px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.display}' height: 64px badge-new: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 40px product-grid: height: 200px media-frame: backgroundColor: '{colors.surface}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 200px banner-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 90px share-row: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 160px bottom-nav: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.note}' height: 64px --- # DESIGN.md — 紺×氷水色の爽快アイス新商品LP（Icy Blue Frozen Dessert Brand Hub LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 清潔・爽やか、ポップ・元気、力強い・インパクト - **キーワード**: 氷水色グラデーション・濃紺の帯見出し・パッケージ並べ・動画・ゲーム訴求・バナー集約 - **地の質感**: 淡い水色の縦グラデーションに光の筋。動画ゾーンだけ鮮やかな青の面。 - **形**: 角のない長方形の帯見出しとバナー。区切りは波形の曲線。 - **温度感**: 寒色で冷たく爽快 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1C1E83` | 見出し帯・ヘッダー・フッターの濃紺 | 12% | 画素の実測 | | `on-primary` | `#FFFFFE` | 濃紺の上の白文字 | 2% | 画素の実測 | | `secondary` | `#137CCE` | 動画ゾーンの鮮やかな青 | 12% | 画素の実測 | | `background` | `#CAEBFC` | ページ地の氷水色 | 35% | 画素の実測 | | `background-alt` | `#E1F3FD` | グラデーションの明るい側 | 10% | 画素の実測 | | `surface` | `#FEFFFE` | シェア帯・リンクカードの白 | 8% | 画素の実測 | | `accent-1` | `#E0151F` | NEWバッジ・赤バナーの赤 | 2% | 推定 | | `accent-2` | `#C8E9FA` | 波形区切りの明るい青 | 4% | 画素の実測 | | `text` | `#110F57` | 白地の見出し文字の紺 | 1% | 画素の実測 | | `dark-section` | `#0D1C4F` | 終了キャンペーンの暗幕 | 3% | 画素の主要色に補正 | | `line` | `#FFFFFF` | バナーの細い白枠 | 1% | 画素の主要色に補正 | - 地は水色の縦グラデーションにし、白一色にはしない - 動画・ゲームのゾーンだけ鮮やかな青の面にして、波形で切り替える - セクション見出しは必ず濃紺の帯に白の極太文字 - 赤はNEWバッジに限り、面積を小さく抑える - フッターと固定ナビは濃紺と白で締める ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション帯見出し（英字・カナ） | ゴシック | Noto Sans JP | 900 | 40px | 1.2 | 0.02em | | `headline-md` | シェア見出しなど小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.03em | | `body-lg` | 青地上の紹介文（中央揃え） | ゴシック | Noto Sans JP | 700 | 16px | 1.7 | 0.04em | | `body-md` | フッターリンク | ゴシック | Noto Sans JP | 700 | 14px | 2.2 | 0.02em | | `note` | コピーライト・ナビのラベル | 欧文サンセリフ | Noto Sans JP | 700 | 10px | 1.4 | 0.0em | | `accent` | NEWバッジの斜体 | 欧文サンセリフ | Montserrat | 900 | 12px | 1.0 | 0.02em | - 見出しは極太ゴシックで帯いっぱいに大きく置く - 本文は太字・中央揃えで短く3行程度まで - 英字見出しは大文字にする - 細い書体や明朝は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、商品は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 100px、基本単位 8px、カード内 12px（375px 幅換算） - 見出し帯は中央に置き、幅は文字に合わせる - 動画・バナーは幅90%の16:9か横長比率 - 特集バナーは幅約60%で縦に積む - セクション間はたっぷり空ける - 画面下にアイコン付き5タブ固定ナビ ## Elevation & Depth - 商品パッケージに柔らかいドロップシャドウ - バナーは白枠のみでほぼ影なし - 固定ナビは白地で上に薄い影 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 長方形のバナー切り抜き、商品は背景透過 - **セクション境界**: 青ゾーンの下端は大きな波形曲線、他はグラデーションで連続 - 見出し帯とバナーは角丸なし - NEWバッジのみ円形か平行四辺形 - SNSアイコンは角丸正方形 ## Components - **濃紺帯見出し**（`heading-band`）: 濃紺の長方形に白の極太文字 - **NEWバッジ**（`badge-new`）: 見出し帯の左上に重ねる赤い丸バッジ - **商品パッケージグリッド**（`product-grid`）: 透過パッケージを2列に並べ影を付ける - **動画・ゲーム枠**（`media-frame`）: 白い細枠の横長サムネイル、下部に帯リンク - **特集・リンクバナー**（`banner-card`）: 横長バナーを縦に積む - **シェアボタン列**（`share-row`）: 白帯に紺見出しとSNSアイコン3つ - **固定タブナビ**（`bottom-nav`）: 紺アイコンと小ラベルの5タブ ## Do's and Don'ts **Do** - 見出しは必ず濃紺帯で統一する - 地に水色グラデーションと光の筋を入れて冷たさを出す - 商品は透過画像を影付きで整列させる - 新しい要素には赤いNEWバッジを添える - 動画ゾーンは青面と波形で区切る **Don't** - 暖色の地色を広く使わない - 見出しを角丸や細字にしない - 本文を長文にしない - 赤をボタンや見出しに多用しない - 影を強く重くしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとシェア導線）: 濃紺帯に白ロゴとSNSアイコン 2. **ファーストビュー**（CMの世界観で掴む）: 放射状の青背景に人物と商品、極太の立体コピー、動画への丸バッジ 3. **商品ラインナップ**（全商品を見せる）: 水色地にパッケージを2列、箱商品は1列 4. **オリジナルゲーム**（体験への誘導）: 青地に帯見出し＋NEW、横長バナーと短い紹介文 5. **TVCM**（動画視聴）: 白枠の動画埋め込み、下端は波形 6. **キャンペーン**（応募告知）: バナーに暗幕と白文字で終了表示も可能 7. **特集**（関連企画へ回遊）: 横長バナーを3枚縦積み 8. **リンク**（公式SNS・通販へ）: 白カードやカラーバナーを縦積み 9. **シェア・フッター**（拡散と規約）: 白帯にSNSアイコン、濃紺フッターに三角記号付きリンク ## Imagery - 人物は笑顔で商品を掲げ、残像やスピード線で勢いを出す - 背景は青の放射線と光で集中線風にする - 商品は正面で背景透過、パッケージ色を生かす - コピーは白と青の立体パースの文字 - 特集バナーは写真や青い幾何学柄で作る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは商品を4列グリッドで並べる - PCの見出し帯は小さめで中央、コンテンツ幅は約50% - 特集バナーはPCで3列横並び - リンクバナーはPCで3列に折り返す - PCは上部にテキストナビ、SPは下部に固定タブ ## 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-42695ac5`（元 LP の URL から採番） - **元 LP**: https://www.lotte.co.jp/products/brand/coolish/2027/new - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。