--- version: alpha name: Fresh Pear Green Premium Ice Cream LP description: 淡い水色からミルク白、黄緑へと移る背景に、シズル写真と緑の太字見出し、金の細線装飾を重ねたプレミアム季節限定アイスの縦長LP。円形の白パネルと金縁で上品さを出している。 colors: primary: '#2E7A1E' background: '#E3F0F9' background-alt: '#F8F8F6' surface: '#F6FAFD' secondary: '#B8913A' line: '#7A7A7A' cta: '#D1C373' on-cta: '#1E5A14' dark-section: '#D1C373' accent-1: '#4FA632' accent-2: '#1C3D8C' tint-1: '#EDC9B3' tint-2: '#B9DCD2' text-muted: '#B88F49' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 16px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.03em headline-lg: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 16px lg: 999px full: 999px spacing: unit: 8px card: 32px section: 64px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px badge-limited: backgroundColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px badge-leaf: backgroundColor: '{colors.accent-1}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 72px annotation-callout: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 140px oval-panel: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-lg}' rounded: '{rounded.full}' height: 560px review-circle: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-lg}' rounded: '{rounded.full}' height: 220px heading-gold: textColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 50px info-pill: backgroundColor: '{colors.accent-1}' rounded: '{rounded.full}' height: 24px --- # DESIGN.md — 洋梨グリーン×金縁の高級アイス新商品 LP（Fresh Pear Green Premium Ice Cream LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、清潔・爽やか、ナチュラル、やさしい・柔らかい - **キーワード**: シズル感・果実の瑞々しさ・ミルキー・金縁・季節限定・グラデーション背景 - **地の質感**: 水しぶきやミルクの飛沫、水滴付きの果実写真で質感を出す。背景は柔らかいグラデーションで、ステンドグラス風のきらめく模様も使う - **形**: 大きな円形・楕円の白パネルに金の縁取り。リード線で断面図に注釈をつける。CTAはぷっくりした立体のピル型 - **温度感**: 爽やかで少しひんやりした寒色寄り。後半は黄緑とピーチで温かみを加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2E7A1E` | 見出し・本文の緑 | | 推定 | | `background` | `#E3F0F9` | ヒーロー下の淡い水色地 | | 画素の主要色に補正 | | `background-alt` | `#F8F8F6` | 断面図セクションのミルク白地 | | 画素の主要色に補正 | | `surface` | `#F6FAFD` | 円形パネルの白 | | 画素の実測 | | `secondary` | `#B8913A` | 金の見出し・縁取り | | 推定 | | `line` | `#7A7A7A` | 注釈リード線のグレー | | 推定 | | `cta` | `#D1C373` | CTAボタンの黄緑 | | 画素の主要色に補正 | | `on-cta` | `#1E5A14` | CTA文字の深緑 | | 推定 | | `dark-section` | `#D1C373` | フッター付近のオリーブ地 | | 画素の主要色に補正 | | `accent-1` | `#4FA632` | バッジの鮮やかな緑 | | 推定 | | `accent-2` | `#1C3D8C` | 期間限定バッジの濃紺 | | 推定 | | `tint-1` | `#EDC9B3` | レビュー背景のピーチ | | 推定 | | `tint-2` | `#B9DCD2` | レビュー背景のミント | | 画素の主要色に補正 | | `text-muted` | `#B88F49` | 注記の小文字 | | 画素の実測 | - 地は水色→ミルク白→黄緑→ピーチ・ミントの淡いグラデーションでつなぐ - 文字は基本的に深い緑。本文も黒ではなく緑にする - 金色はセクション見出し・区切り線・円パネルの縁だけに使う - CTAは黄緑の立体ボタンに深緑の文字 - 濃紺は期間限定バッジだけに使うアクセント - 純黒は使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名の大見出し | ゴシック | Zen Kaku Gothic New | 900 | 40px | 1.2 | 0.02em | | `accent` | 商品名の英字サブ・Review表記 | 欧文セリフ | Playfair Display | 400 | 16px | 1.3 | 0.03em | | `headline-lg` | 手書き風のキャッチ | 丸ゴシック | Zen Maru Gothic | 900 | 22px | 1.4 | 0.05em | | `headline-md` | 特長の見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.08em | | `headline-sm` | 金色のセクション見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.05em | | `body-lg` | 中央揃えのリード文・レビュー本文 | ゴシック | Noto Sans JP | 700 | 15px | 2.0 | 0.04em | | `body-md` | 特長の説明文 | ゴシック | Noto Sans JP | 500 | 11px | 1.7 | 0.03em | | `label-button` | CTAの文字 | ゴシック | Noto Sans JP | 900 | 16px | 1.2 | 0.04em | - リード文とレビューは中央揃えで、短く改行して行間を広めにとる - 特長の見出しは2行に分けて左揃えにする - 和文見出しの下に欧文セリフのサブを添える - セクション見出しの下に短い金の横線を入れる - 本文は太めのウェイトで緑にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（特長は左右にずらして配置） - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 64px、基本単位 8px、カード内 32px（375px 幅換算） - ヒーローは写真を全面に敷いて、商品名を中央下に重ねる - 特長は大きな断面写真の上に、テキストを左右交互に置いてリード線で指し示す - こだわりは画面幅いっぱいの楕円白パネルに中央揃えの文章 - レビューは3つの円を互い違いに少し重ねて配置 - 最後に全幅のCTAとSNSアイコンを中央に並べる ## Elevation & Depth - CTAは上側にハイライト、下側に影をつけて立体感を出す - 円パネルは金の縁取りでわずかに浮かせる - 果物写真は切り抜いて、セクションの境界をまたいで配置する ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 果物・商品の写真は背景を抜いて、飛沫ごと自由に配置する - **セクション境界**: グラデーションで継ぎ目なく移る。こだわりのセクションだけ金線で上下を区切る - パネルは正円か楕円にして、角のある箱は使わない - 縁は金の二重線か太線にする - 注釈はL字のリード線の先に丸い点をつける - バッジは円形か葉の形にする ## Components - **立体ピルCTA**（`button-primary`）: 黄緑のぷっくりしたピル型ボタン。右に矢印をつける - **期間限定の丸バッジ**（`badge-limited`）: 濃紺の円に白文字2行、白い縁取り - **葉形の数値バッジ**（`badge-leaf`）: 緑の葉の形に、白で大きな数値を入れる - **断面注釈**（`annotation-callout`）: 緑の2行見出しと説明文から、グレーのL字線と点で写真の部位を指す - **金縁の楕円パネル**（`oval-panel`）: ステンドグラス柄の背景に白い楕円を置き、金の見出し・区切り線と中央揃えの本文を入れる - **レビュー円**（`review-circle`）: 金縁の白い正円に、金のReview番号と短い区切り線、緑の2〜3行コメント - **金見出し＋区切り線**（`heading-gold`）: 金色の見出しの下に短い金の横線 - **情報リンクピル**（`info-pill`）: 右上に置く半透明グリーンの小さなピル型リンク ## Do's and Don'ts **Do** - 果物・ミルク・果汁の飛沫写真を大きく使い、シズル感を出す - 文字は緑、装飾は金に統一する - 白い円や楕円のパネルで、文章を柔らかく囲む - 背景は淡いグラデーションでセクションをつなぐ - 写真はセクションの境界をまたいで置き、奥行きを出す **Don't** - 黒い文字や濃い単色の帯は使わない - 角張った四角いカードを並べない - 原色の赤など強い警告色のCTAにしない - 情報を詰め込まず、余白を広くとる - 金色を本文に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の魅力と季節限定感を一目で伝える）: 水色の地に、商品と果物・飛沫の写真を全面に配置。左上に短いキャッチ、中央下に緑の大きな商品名と英字、右に商品パッケージと丸バッジ 2. **リード文**（味わいの世界観を伝える）: 淡い水色の地に、緑の太字で6行ほど中央揃え。行間は広めにとる 3. **特長（断面解説）**（層構造と素材のこだわりを説明する）: 果物とミルクの写真の上に葉形バッジ。その下の大きな断面写真に、3つの注釈を左右交互にリード線で添える 4. **開発のこだわり**（作り手の想いでプレミアム感を高める）: ステンドグラス柄の上に金縁の白い楕円を置き、金の見出し・区切り線と緑の中央揃え本文。果物写真を縁に重ねる 5. **お客様の声**（共感と信頼を得る）: ピーチ・ミント・黄色のグラデーション地に、金縁の白い円3つを互い違いに配置。左に見出しと注記 6. **CTA・シェア**（他の商品への回遊とSNS拡散）: オリーブ色の地に立体ピルCTAを置き、その下にSNSの丸アイコンを3つ並べる ## Imagery - 果物は水滴がついた瑞々しい状態で切り抜き、断面も見せる - ミルクの王冠状の飛沫や、黄金色の果汁がうねるスプラッシュを組み合わせる - 商品の断面は大きくクローズアップして、層の質感を見せる - パステルカラーのきらめく三角片でステンドグラス風の柄を作る - 背景は柔らかくぼかしたパステルのグラデーション - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは約430px幅のSP版を中央に置いて、1カラムのまま見せる - 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-ee3e98a8`（元 LP の URL から採番） - **元 LP**: https://www.haagen-dazs.co.jp/products/special/pear-and-milk/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（2/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。