--- version: alpha name: Navy and Sky Blue Fresh Dessert LP description: 濃紺の帯と淡い水色の円形背景で、白いソフトクリームの商品写真を目立たせる新商品告知 LP。焦げ茶の太い丸みゴシック、点線の下線付き見出し、Point 番号見出しを使い、短い縦長構成で特長と店舗への誘導を伝える。 colors: primary: '#012063' on-primary: '#FFFFFF' background: '#FFFFFF' background-alt: '#B4CFEC' tint-1: '#B4CFED' text: '#2A152B' secondary: '#011F62' accent-1: '#2EA44F' cta: '#011F62' on-cta: '#F4FEFF' surface: '#FEFDFD' line: '#394263' text-muted: '#4A3A48' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.15 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 900 lineHeight: 2.0 letterSpacing: 0.03em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 30px fontWeight: 800 lineHeight: 1.1 body-lg: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 800 lineHeight: 2.3 letterSpacing: 0.03em label-button: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 50px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px heading-dotted: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px point-label: textColor: '{colors.text}' typography: '{typography.accent}' height: 44px badge-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 150px date-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' height: 48px price-block: textColor: '{colors.secondary}' typography: '{typography.display}' height: 80px circle-photo: backgroundColor: '{colors.tint-1}' rounded: '{rounded.full}' height: 400px --- # DESIGN.md — 紺×水色の爽やかなコンビニスイーツ新商品 LP（Navy and Sky Blue Fresh Dessert LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 清潔・爽やか、ポップ・元気、シンプル・ミニマル - **キーワード**: 濃紺の帯・水色の円・白いソフトクリーム・焦げ茶の太字・点線の下線・広い余白 - **地の質感**: フラットな単色面にシズル感のある商品写真を重ねる。質感の装飾はほぼなし - **形**: 大きな正円の背景、ハート形の吹き出し、角丸ボタンとピル型ボタン - **温度感**: 涼しげな寒色ベースに、焦げ茶の文字で温かみと食欲を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#012063` | ブランドの濃紺。帯・円背景・吹き出し・主ボタン | 9% | 画素の実測 | | `on-primary` | `#FFFFFF` | 濃紺の上に置く白文字 | 1% | 画素の主要色に補正 | | `background` | `#FFFFFF` | ページ本文の白地 | 36% | 画素の実測 | | `background-alt` | `#B4CFEC` | 締めの CTA セクションの淡い水色の地 | 15% | 画素の実測 | | `tint-1` | `#B4CFED` | 商品写真の背面に置く水色の円 | 5% | 画素の実測 | | `text` | `#2A152B` | 見出し・本文の焦げ茶 | 4% | 画素の主要色に補正 | | `secondary` | `#011F62` | 見出しの強調語の濃紺 | 1% | 画素の主要色に補正 | | `accent-1` | `#2EA44F` | 見出し強調語2色目・Point 下線の緑 | 1% | 推定 | | `cta` | `#011F62` | 店舗検索の主ボタンの濃紺 | 2% | 画素の主要色に補正 | | `on-cta` | `#F4FEFF` | 主ボタン上の文字 | 0% | 画素の実測 | | `surface` | `#FEFDFD` | サブボタンの白い地 | 1% | 画素の実測 | | `line` | `#394263` | 見出し下の点線 | 0% | 画素の主要色に補正 | | `text-muted` | `#4A3A48` | 注釈の小さい文字 | 0% | 推定 | - 地は白が基本。締めの CTA セクションだけを淡い水色の全面地にする - 濃紺はファーストビュー下の帯・円背景・吹き出し・主ボタンにまとめて使う - 本文と大見出しは黒ではなく焦げ茶にして、食品らしい温かみを出す - 見出しの強調語は濃紺と緑の2色で塗り分ける - 商品写真の背面には濃紺または水色の大きな円を置き、交互に使い分ける - 暖色の差し色は使わない。赤紫は写真のソースだけにとどめる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの商品名 | ゴシック | Dela Gothic One | 900 | 40px | 1.15 | 0.0em | | `headline-lg` | セクションの大見出し（点線の下線付き） | 丸ゴシック | M PLUS Rounded 1c | 900 | 24px | 2.0 | 0.03em | | `headline-md` | 商品名の見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 30px | 1.3 | 0.02em | | `accent` | Point 番号の欧文見出し | 欧文サンセリフ | Montserrat | 800 | 30px | 1.1 | 0.0em | | `body-lg` | 特長の説明文 | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 2.3 | 0.03em | | `label-button` | ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.3 | 0.05em | | `note` | 税・取扱いについての注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | - 文字はすべて太字。本文も 800 前後の太さで読ませる - 本文は行間を約 2.3 と広くとり、1行 20 字前後で改行する - 大見出しは2行に分け、それぞれの行の下に点線を引く - Point の番号は欧文の太いサンセリフにして、数字だけ大きくする - 価格は数字を大きく、税込の表記を小さく添える - 注釈は小さく、ページ末尾にまとめて置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は Point セクションだけ写真と文の 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 商品写真は画面幅いっぱいに大きく見せる - Point.1 は左寄せ、Point.2 は右寄せにして左右に振る - セクションの間は 80px 前後の白い余白で区切る - ファーストビューの下に紺の帯を置き、発売日を1行で載せる - ボタンは中央に置き、主ボタン・サブボタンの順に縦に並べる ## Elevation & Depth - 影はほぼ使わずフラットにする - 主ボタンは内側に細い白線を入れた二重枠で立体感を出す - 商品写真は切り抜いて円の上に重ね、円の外へはみ出させる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品は背景を抜いた切り抜き写真にし、大きな正円の上に配置する - **セクション境界**: 直線で区切る（白地から水色の地に切り替える） - 背景の円は画面幅を超えるほど大きくし、端を切らせる - サブボタンは白いピル型にし、左に紺の丸い矢印アイコンを付ける - 主ボタンは角を少し丸めた紺の長方形にし、二重枠で囲む - 割安訴求はハート形の吹き出しに入れる ## Components - **店舗検索の主ボタン**（`button-primary`）: 紺の地に白文字。左に白い丸の矢印、右に店舗アイコンを置き、二重枠で囲む - **情報リンクのサブボタン**（`button-secondary`）: 白いピル型。左に紺の丸い矢印を置き、焦げ茶の文字を入れる - **点線の下線付き見出し**（`heading-dotted`）: 2行の中央揃え見出し。各行の下に点線を引き、強調語だけ紺と緑で塗る - **Point 番号の見出し**（`point-label`）: Point と番号を欧文の太字で書き、下にグラデーションの帯（紺または緑）を敷く - **ハート形の吹き出しバッジ**（`badge-bubble`）: 紺のハート形の吹き出しに白文字を2行入れ、増量などの訴求を載せる - **発売日の帯**（`date-band`）: 紺の帯を画面幅いっぱいに敷き、中央に白い太字で発売日を書く - **価格の表示**（`price-block`）: 税抜価格を大きく、税込価格を括弧付きで書く。白い縁取りの紺文字にする - **円の上に載せた商品写真**（`circle-photo`）: 紺または水色の大きな正円の上に、切り抜いた商品写真を重ねる ## Do's and Don'ts **Do** - 商品写真は切り抜いて大きく見せ、その背面に円を置く - 配色は紺・水色・白・焦げ茶の4色を軸にする - 見出しは中央揃えにし、点線の下線を付ける - 特長は Point 番号を付けて2つほどに絞る - 注釈は末尾に小さくまとめる **Don't** - 本文や見出しを真っ黒にしない - 暖色の差し色やグラデーションのボタンを使わない - カードの影や枠を多用して、画面を詰め込まない - 細い書体を使わない - 背景に写真のテクスチャを敷き詰めない（ファーストビューだけにする） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品名・商品の見た目・価格を一度に伝える）: 果実を敷き詰めた写真を背景に、中央に商品を置く。上に焦げ茶の極太の商品名、右下に価格、左に認証ロゴを配置する 2. **派生商品の帯**（増量版を紹介する）: 紺の帯に、小さな商品写真・吹き出しバッジ・商品名・価格を横一列に並べる 3. **発売日の告知**（発売日を知らせる）: 注釈の下に紺の帯を置き、白い太字で発売日を書く 4. **コンセプト見出し**（味の特徴をひと言で伝える）: 白地の中央に2行の見出しを置き、点線の下線を引く。強調語は2色で塗る 5. **特長1**（素材のこだわりを説明する）: Point 見出しを左に置き、その下に太字の本文を書く。紺の大きな円に商品写真を重ねる 6. **特長2**（乳原料のこだわりを説明する）: Point 見出しを右に寄せ、ロゴを2つ並べる。本文は右揃えにする 7. **増量版の紹介**（上位商品の訴求）: ハート形の吹き出しバッジの下に、水色の円と商品写真を置き、焦げ茶の大きな商品名を重ねる 8. **CTA**（店舗へ誘導する）: 水色の地に、点線の見出しと2つの商品写真を並べる。その下に紺の主ボタンと白いピル型のサブボタンを置く 9. **注釈**（税・取扱いについての注意書き）: 水色の地のまま、小さな文字で左揃えに並べる ## Imagery - 商品は白背景で撮った切り抜き写真にし、少し見上げる角度で質感を見せる - ファーストビューの背景は、主素材の果実を青みのある石の面に敷き詰めた俯瞰写真 - 写真全体を青寄りの涼しい色調にそろえる - 産地や認証のロゴは丸いエンブレムや地図のシルエットで添える - 装飾のイラストは使わず、円と吹き出しの図形だけで構成する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に最大幅 960px 前後のコンテナを置く - PC のファーストビューは横長にし、商品名と価格を1行にまとめる - PC の Point は左に円と写真、右に Point.1・2 の文を縦に並べる2カラムにする - PC の増量版紹介は、左に吹き出しバッジと商品名、右に円と写真を置く - CTA のボタンは PC でも中央に置き、幅は 400px 前後に抑える ## 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-b0578a8c`（元 LP の URL から採番） - **元 LP**: https://www.ministop.co.jp/syohin/sweets/parfait/blueberryyoghourt2025/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。