--- version: alpha name: Prismatic Warm Gradient Ice Cream Promo LP description: オレンジ・コーラル・ピンク・薄紫の三角形をいくつも重ねた、プリズムのような多面体グラデ背景が特徴の LP。その上に濃いチョコ色の極太文字と、切り抜いた商品写真を置く。1 商品の期間限定告知を、短いスクロールで見せる構成。 colors: primary: '#2D1412' background: '#FDBD7D' secondary: '#FC4645' background-alt: '#F18449' surface: '#FECE91' cta: '#452629' on-cta: '#FCF6F6' text-body: '#5A3630' accent-1: '#F04A1A' accent-2: '#EB9CEC' accent-3: '#FDACAB' line: '#41201E' typography: display: fontFamily: Alfa Slab One fontSize: 44px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 900 lineHeight: 1.75 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 24px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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}' height: 50px badge-limited: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 60px callout-line: textColor: '{colors.line}' rounded: '{rounded.full}' height: 40px ingredient-heading: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 60px hex-panel: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 330px pill-link: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 26px share-icons: rounded: '{rounded.full}' height: 36px --- # DESIGN.md — 多面体グラデと濃茶の期間限定アイス LP（Prismatic Warm Gradient Ice Cream Promo LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 力強い・インパクト、ポップ・元気、上品・高級 - **キーワード**: 多面体グラデ・チョコブラウン・暖色プリズム・切り抜き商品・期間限定・極太スラブ欧文 - **地の質感**: 三角形の面ごとにかかる柔らかなグラデと、うっすらした粒状ノイズ - **形**: 斜めに切った多角形の面。六角形のパネル。円形のバッジと引き出し線 - **温度感**: 暖色寄りで甘く、ほんのり大人っぽい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2D1412` | 見出し・ロゴ文字・ボタン地のチョコブラウン | 6% | 画素の実測 | | `background` | `#FDBD7D` | 多面体背景のベースになるアプリコット | 11% | 画素の実測 | | `secondary` | `#FC4645` | 多面体背景のコーラル面 | 11% | 画素の実測 | | `background-alt` | `#F18449` | 成分解説パネルの濃いオレンジ | 12% | 画素の主要色に補正 | | `surface` | `#FECE91` | メッセージ用六角形パネルのクリーム | 9% | 画素の実測 | | `cta` | `#452629` | 主ボタンの地色（濃茶） | 1% | 画素の実測 | | `on-cta` | `#FCF6F6` | ボタン上の文字色 | 0% | 画素の実測 | | `text-body` | `#5A3630` | 本文テキスト | 2% | 画素の主要色に補正 | | `accent-1` | `#F04A1A` | メッセージ中の強調語（朱オレンジ） | 0% | 推定 | | `accent-2` | `#EB9CEC` | 背景に差すラベンダーの面 | 3% | 画素の実測 | | `accent-3` | `#FDACAB` | 見出しの影に使うピンク | 5% | 画素の実測 | | `line` | `#41201E` | 成分を指す円と引き出し線 | 0% | 画素の主要色に補正 | - 地はオレンジ・コーラル・アプリコット・ラベンダーの三角形を組み合わせた多面体グラデ。単色ベタの背景は使わない - 文字は基本すべてチョコブラウン。白抜きの文字はボタンだけにする - 強調語だけを朱オレンジに変える。強調は 1 ブロックにつき 2 語まで - 情報を読ませる面は、濃いオレンジかクリームの単色に近い多角形パネルで敷く - ボタンは濃茶にして、商品のチョココーティングと色を合わせる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名の欧文を極太で組む | 装飾・ディスプレイ | Alfa Slab One | 400 | 44px | 1.0 | 0.02em | | `headline-lg` | 和文の商品名・FV のキャッチ | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.4 | 0.02em | | `headline-md` | 成分名の見出し（ピンクの影付き） | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.3 | 0.02em | | `headline-sm` | 中央にセンター揃えで置くメッセージ文 | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.75 | 0.02em | | `body-md` | 成分の説明文 | ゴシック | Noto Sans JP | 500 | 12px | 1.9 | 0.03em | | `label-button` | ボタンの文言 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | | `accent` | 円形バッジ内の縦 2 行の短い語 | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.05em | - 見出しはどれも極太にし、強い存在感を出す - 成分名の見出しには、右下へずらしたピンクのドロップシャドウを付ける - 欧文の商品名はスラブセリフを大きく 3 行に積む - 本文は 2 行程度の短文にとどめる - メッセージ文はセンター揃えで 5 行前後。行間は広めにとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真と文字を左右に重ねて配置する - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算） - 商品写真は画面端からはみ出す大きさで置く - 成分解説は左にテキスト、右に断面写真の構成。引き出し線と円で両者をつなぐ - セクション間に区切り線は引かず、背景の多角形の切り替わりで区切る - テキストの左端は約 16px でそろえる ## Elevation & Depth - 影はほぼ使わず、平面の多角形を重ねて奥行きを出す - 見出しにピンクのオフセット影を付ける - 商品写真には切り抜きの自然な影だけを残す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 背景を除いた切り抜き。写真を斜めに傾けて大きく置く - **セクション境界**: 斜めの多角形エッジ（六角形パネルの縁） - 角は直線の斜めカットを基本にする - ボタンは左右の端を矢羽根状の六角形に切る - 円は期間限定バッジと成分の指し示しにだけ使う ## Components - **六角形の濃茶ボタン**（`button-primary`）: 左右の端が尖った横長の六角形。白文字で、右端に矢印を付ける - **円形の期間限定バッジ**（`badge-limited`）: 濃茶の円に白縁を付け、短い語を 2 行で白抜きにする - **成分の引き出し線**（`callout-line`）: 見出しから水平線を伸ばし、写真上の円で該当部分を囲む - **影付きの成分見出し**（`ingredient-heading`）: 極太の濃茶文字にピンクのずらし影を付け、2 行で組む - **六角形のメッセージパネル**（`hex-panel`）: クリーム色の不規則な六角形。中央に極太のメッセージを置き、強調語は朱色にする - **右上の情報リンク**（`pill-link`）: 半透明の濃茶地に白い細枠を付けたピル型の小リンク - **SNS シェアアイコン**（`share-icons`）: 直径約 36px の丸いアイコンを 3 つ中央に並べる ## Do's and Don'ts **Do** - 背景は暖色とラベンダーの三角形グラデで、画面全体を埋める - 商品写真は大きく傾け、画面からはみ出させる - 文字色はチョコブラウンで統一する - 成分は円と線で写真の該当部分を指して説明する **Don't** - 白や単色ベタの背景にしない - 角丸カードや柔らかい丸ボタンを使わない - 青や緑などの寒色を主役にしない - 長い本文を並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の印象と期間限定であることを伝える）: 傾けた商品写真を大きく置き、右上に短いキャッチ。左下に極太の欧文商品名と和文名、パッケージ写真とバッジを添える 2. **成分解説（中身）**（アイスとソースの構成を説明する）: 濃いオレンジの多角形パネルに断面写真を右寄せで置く。左に見出しと 2 行の説明を並べ、引き出し線でつなぐ 3. **成分解説（外側）**（コーティングとトッピングを説明する）: 左に写真、右に見出しと説明。前のセクションと左右を反転させた配置にする 4. **メッセージ**（味わいを一言でまとめる）: クリーム色の六角形パネルの中央に、極太のセンター揃えの文。強調語は朱色にする 5. **CTA**（他の商品へ誘導する）: 六角形の濃茶ボタン 6. **シェア**（SNS での拡散を促す）: 丸いアイコンを 3 つ中央に並べる ## Imagery - 商品は背景を除いた切り抜き写真にし、30 度前後傾けて迫力を出す - 断面の写真で中の層を見せる - 添え物のスイーツや焼き菓子を切り抜いて散らす - 背景は多面体グラデのグラフィックに細かいノイズを乗せ、温かい質感にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像がないため推奨として記す。中央 480〜600px の SP カラムを維持し、左右は同じ多面体背景で埋める - PC では成分解説を 2 カラムで広めに配置する - 商品写真は 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-89f74e46`（元 LP の URL から採番） - **元 LP**: https://www.haagen-dazs.co.jp/products/special/rich-tiramisu-crunch/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。