--- version: alpha name: Aqua Bubble Fresh Confectionery LP description: 空色から濃い青へのグラデーション地に、透明な水滴の立体素材を散らした爽快感重視のブランド LP。白い有機的な曲面パネルの上に、斜体明朝の大見出しと平行四辺形の青ラベルで成分訴求を見せる。商品ラインナップは円形ラベルと斜めに置いたパッケージで紹介し、CM 動画・ストーリー・タレントのプロフィールへ続く。 colors: primary: '#027EC8' secondary: '#467ED2' accent-1: '#45A3D9' accent-2: '#DB96C5' marker: '#E6F25A' accent-3: '#FDD323' background: '#FFFFFF' background-alt: '#E9F6FF' tint-1: '#93C3EC' dark-section: '#234B6D' text: '#2B2B2B' text-muted: '#687EA6' on-dark: '#FFFFFF' line: '#97A3B3' secondary-accessible: '#3A75CF' accent-1-accessible: '#247DB0' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Playfair Display fontSize: 30px fontWeight: 500 lineHeight: 1.1 headline-sm: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.02em body-lg: fontFamily: Shippori Mincho fontSize: 15px fontWeight: 700 lineHeight: 2.6 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 accent: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 rounded: sm: 0px md: 0px lg: 200px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-label-circle: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px slant-heading-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 36px slant-info-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 64px diagram-circle: textColor: '{colors.text-muted}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 120px badge-new: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 56px plus-detail-button: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' rounded: '{rounded.full}' height: 34px marker-label: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.accent}' height: 24px video-player: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' height: 270px --- # DESIGN.md — 水滴と青グラデの爽快ガム菓子 LP（Aqua Bubble Fresh Confectionery LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 清潔・爽やか、クール・先進的、やさしい・柔らかい - **キーワード**: 水滴・青グラデーション・透明感・曲面パネル・斜体明朝・爽快 - **地の質感**: ぼかしたグラデーション地に、光沢と屈折のあるリアルな水滴を重ねたみずみずしい質感 - **形**: 波打つ曲線の境界、楕円の白パネル、円形ラベル、斜めに切った平行四辺形の帯 - **温度感**: 寒色寄りの涼しい印象。白の余白が多く軽やか ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#027EC8` | ブランドの青（グラデの濃い側・説明帯） | 10% | 画素の実測 | | `secondary` | `#467ED2` | 円形セクションラベル・見出し文字の青 | 4% | 画素の実測 | | `accent-1` | `#45A3D9` | 平行四辺形の説明帯 | 3% | 画素の主要色に補正 | | `accent-2` | `#DB96C5` | 見出しラベルのグラデ端のピンク | 0% | 画素の実測 | | `marker` | `#E6F25A` | パーツ名の黄緑マーカー | 0% | 推定 | | `accent-3` | `#FDD323` | 図解のカプセル粒の黄色 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 白い曲面パネル・本文地 | 16% | 画素の実測 | | `background-alt` | `#E9F6FF` | 商品紹介の淡い水色地 | 20% | 画素の実測 | | `tint-1` | `#93C3EC` | グラデ地の明るい水色 | 12% | 画素の実測 | | `dark-section` | `#234B6D` | 動画エリアの暗い面 | 4% | 画素の主要色に補正 | | `text` | `#2B2B2B` | コピー・プロフィール本文 | 2% | 推定 | | `text-muted` | `#687EA6` | 図解の補足説明文字 | 0% | 画素の実測 | | `on-dark` | `#FFFFFF` | 青地上の白文字 | 1% | 画素の主要色に補正 | | `line` | `#97A3B3` | ＋丸ボタンの細枠 | 0% | 画素の実測 | | `secondary-accessible` | `#3A75CF` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#247DB0` | AA を満たす補正値（計算） | | 計算 | - 地は空色から濃い青への縦・斜めグラデーション。白い曲面パネルを重ねて読ませる - 見出し文字とラベルはやや紫がかった青 secondary に統一する - 説明帯は primary〜accent-1 の青グラデに白文字 - ピンクは見出しラベルのグラデの端だけに少し使う - 黄色・黄緑は図解とマーカーだけ。面には使わない - 暗い色は動画サムネイルの周りだけ - `section-label-circle` は文字 `#FFFFFF` × 背景 `#467ED2` のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3A75CF`、4.54:1）を使う。 - `slant-heading-tag` は文字 `#FFFFFF` × 背景 `#467ED2` のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3A75CF`、4.54:1）を使う。 - `slant-info-band` は文字 `#FFFFFF` × 背景 `#45A3D9` のコントラスト比が 2.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#247DB0`、4.53:1）を使う。 - `badge-new` は文字 `#FFFFFF` × 背景 `#467ED2` のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3A75CF`、4.54:1）を使う。 - `plus-detail-button` は文字 `#467ED2` × 背景 `#FFFFFF` のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3A75CF`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の白抜きキャッチ | 明朝 | Shippori Mincho | 600 | 34px | 1.3 | 0.05em | | `headline-lg` | 技術名の大見出し（斜体） | 明朝 | Noto Serif JP | 700 | 30px | 1.3 | 0.02em | | `headline-md` | 円形ラベルの欧文セクション名（斜体） | 欧文セリフ | Playfair Display | 500 | 30px | 1.1 | 0.0em | | `headline-sm` | 説明帯・小見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.35 | 0.02em | | `body-lg` | ブランドストーリーの中央揃え文（斜体） | 明朝 | Shippori Mincho | 700 | 15px | 2.6 | 0.08em | | `body-md` | プロフィール・図解の説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.0em | | `accent` | ラベル上の小さなルビ風カナ・商品名 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | | `note` | ※イメージ等の注記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | - 情緒的なコピーは明朝体を斜体にして疾走感を出す - 機能説明はゴシック太字で短く切る - セクション名は欧文セリフ斜体の上に小さなカナを添える - ストーリー文は中央揃えで行間を大きくとる - 見出しは secondary の青、青地上は白文字 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。図解だけ左右にずらしてジグザグに置く - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 白の曲面パネルは画面幅いっぱい、もしくは端から少しはみ出す - 商品は左右交互に斜めに置き、名前と＋ボタンを右下に添える - セクション頭に円形ラベルを置く - 動画は全幅で配置 - 水滴素材を余白に大小で散らす ## Elevation & Depth - 商品パッケージに柔らかく広い青みの影 - 水滴素材は透過と屈折のハイライトで立体感を出す - カードには影をつけず、グラデ地との明るさの差で浮かせる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 200px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は円形で切り抜き。動画やシーン写真は角丸なしの長方形 - **セクション境界**: 波打つ曲線と大きな楕円の白パネルでつなぐ - 説明帯は左右を斜めに切った平行四辺形 - セクションラベルは塗りの正円かいびつな円 - 直線の水平区切りは使わない - 詳細ボタンは細枠の小さな円に＋ ## Components - **円形セクションラベル**（`section-label-circle`）: 青い正円に小さなカナと欧文斜体のセクション名を白で入れる - **斜め見出しタグ**（`slant-heading-tag`）: 青→ピンクのグラデの平行四辺形に白い明朝斜体で導入句を入れる - **平行四辺形の説明帯**（`slant-info-band`）: 青グラデの斜め帯を 2 段ずらして重ね、白太字で効果を言い切る - **図解の円**（`diagram-circle`）: 淡いグレーの円の中に黄色の粒を描き、矢印で状態の変化を見せる - **NEW バッジ**（`badge-new`）: 青の円に白いセリフ文字。商品の左上に重ねる - **＋詳細ボタン**（`plus-detail-button`）: 商品名の右に置く細枠の円に＋。開閉や詳細への導線 - **マーカー付きパーツ名**（`marker-label`）: 太字の斜体ゴシックに黄緑の下線マーカーを引き、引き出し線でつなぐ - **動画サムネイル**（`video-player`）: 全幅の動画に、半透明の円と白い再生アイコンを重ねる ## Do's and Don'ts **Do** - 水滴素材を各セクションの余白に大小 2〜4 個ずつ散らす - 情緒的なコピーは斜体の明朝、機能説明はゴシック太字で書く - 白パネルの境界は大きな曲線にする - 商品は斜めに傾けて影をつけ、左右交互に置く - 青の濃淡グラデで奥行きを出す **Don't** - 暖色の大きな面を使わない - 角ばった四角いカードを並べない - 直線の区切りや罫線で区切らない - ボタンを派手な色の塗りにしない - 文字を詰め込みすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（タレントと商品で第一印象をつかむ）: 空色グラデの空にスーツ姿の人物と斜めの商品、白い明朝キャッチ。下端は波形で白へつなぐ 2. **ブランドストーリー**（使う場面と気持ちの変化を伝える）: 白地に斜体明朝を中央揃え、広い行間。締めにかぎ括弧付きのコピーとロゴ 3. **成分の特長**（独自成分のしくみを説明する）: 斜めタグ→斜体の大見出し→円の図解と矢印→平行四辺形の説明帯の順 4. **技術の特長**（新しい配合技術を訴求する）: NEW の手書き風文字と新バッジ、断面イラストに引き出し線とマーカー付きラベル、斜め帯 2 段 5. **商品ラインナップ**（味のバリエーションを見せる）: 淡い水色地に円ラベル。斜めのパッケージを左右交互に置き、商品名と＋ボタン、NEW バッジ 6. **別タイプ商品**（派生商品を紹介する）: 同じ円ラベルとパッケージ配置をくり返す 7. **動画**（CM を見てもらう）: 円ラベルの下に全幅の動画と再生アイコン 8. **CM ストーリー**（CM の流れを追体験させる）: 青グラデ地に白い明朝の短いセリフを中央に並べ、シーン写真を左右にずらして配置 9. **プロフィール**（起用タレントを紹介する）: 円ラベルと円形の人物写真を重ね、白い楕円パネルに名前と経歴を書く ## Imagery - 透明でリアルな水滴・水玉の 3D 素材。屈折と白いハイライトをつける - 人物は青空とビル街を背景にした明るい逆光気味の写真 - 商品パッケージは斜め俯瞰で、柔らかい影をつける - 図解はフラットな円と黄色の粒、青い矢印のシンプルなイラスト - 背景は大きくぼかしたボケ光と青グラデ - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツを中央にまとめ、白パネルを大きな楕円の塊にする - PC の商品は 2 列のジグザグ配置にして、円ラベルを左上に置く - PC の FV は人物を中央、キャッチを左、商品を右に横並び - PC の CM ストーリーは文章を中央に置き、写真を左右の端からはみ出させる - 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-b11964b8`（元 LP の URL から採番） - **元 LP**: https://www.lotte.co.jp/products/brand/acuo/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。