--- version: alpha name: Pink Shimmer Japanese Sweets Ice Cream LP description: くすみピンクのラメ質感の面と縦書き明朝で、和の素材を使った上品なアイスを見せる新商品紹介 LP。前半は斜めの面とひし形カードで華やかに、後半はクリーム色の丸ゴシックで「こだわり」をやわらかく説明する。 colors: primary: '#E47C83' secondary: '#FDADBA' background: '#FEF4F5' background-alt: '#FEF1CC' surface: '#FEFEFE' text: '#2B211D' text-body: '#6D4F42' accent-1: '#E4758A' accent-2: '#E7B866' on-dark: '#FEEDED' line: '#FCD2D1' cta: '#E27589' on-cta: '#FFFAF1' primary-accessible: '#D12B36' accent-1-accessible: '#D02948' cta-accessible: '#D53653' secondary-accessible: '#DB0528' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.1em headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 23px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.08em accent: fontFamily: Montserrat fontSize: 30px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.08em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 600 lineHeight: 1.8 letterSpacing: 0.05em body-lg: fontFamily: Zen Maru Gothic fontSize: 13px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.03em label-button: fontFamily: M PLUS Rounded 1c fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' ornate-name-frame: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 110px vertical-copy: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 340px ingredient-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 380px voice-diamond: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px point-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 70px wave-heading: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 120px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px info-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px --- # DESIGN.md — 桜色ラメ×縦書き明朝の和スイーツアイス LP（Pink Shimmer Japanese Sweets Ice Cream LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 和風、上品・高級、かわいい、やさしい・柔らかい - **キーワード**: くすみピンク・ラメ・シマー質感・縦書き明朝・ひし形カード・金のグラデ線・和素材の木枡 - **地の質感**: 細かいラメが入った紙のような質感のピンクの面と、ぼかしの入った柔らかいグラデーション - **形**: 斜めに区切った面、45度回したひし形カード、和風の飾り枠、正円のバッジ - **温度感**: 暖かく甘い。ピンクとクリーム色に、焦げ茶の文字で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E47C83` | ブランドを代表するくすみピンクの面 | 17% | 画素の実測 | | `secondary` | `#FDADBA` | 淡いピンクのグラデーションの地 | 12% | 画素の実測 | | `background` | `#FEF4F5` | ファーストビュー下の白っぽい薄ピンクの地 | 10% | 画素の実測 | | `background-alt` | `#FEF1CC` | こだわりセクションのクリーム色の地 | 16% | 画素の実測 | | `surface` | `#FEFEFE` | 声カード（ひし形）の白い面 | 6% | 画素の実測 | | `text` | `#2B211D` | 縦書きコピーと本文の黒に近い焦げ茶 | 3% | 推定 | | `text-body` | `#6D4F42` | こだわり本文の焦げ茶 | 3% | 画素の主要色に補正 | | `accent-1` | `#E4758A` | 見出し・番号バッジのローズピンク | 5% | 画素の実測 | | `accent-2` | `#E7B866` | 飾り枠や光のグラデに入るゴールド | 2% | 推定 | | `on-dark` | `#FEEDED` | ピンク面に乗る白い縦書き文字 | 2% | 画素の実測 | | `line` | `#FCD2D1` | 素材カードを囲む白の細い枠線 | 1% | 画素の主要色に補正 | | `cta` | `#E27589` | 他の商品を見るボタンのピンク | 1% | 画素の実測 | | `on-cta` | `#FFFAF1` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#D12B36` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#D02948` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#D53653` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#DB0528` | AA を満たす補正値（計算） | | 計算 | - 地はピンクの濃淡で作り、純色のピンクを平らに塗らずにラメの質感か柔らかいグラデを重ねる - 説明のブロック（こだわり）だけはクリーム色に切り替え、読みやすさを優先する - 文字は焦げ茶を基本にし、真っ黒にはしない。ピンクの面の上の文字は白にする - 見出し・番号バッジ・波線の飾りはローズピンクにそろえる - ゴールドは枠線・光・カードの角だけに少し使い、面積を広げない - CTA は落ち着いたピンクに黄色の影を付けて、軽く浮かせる - `ingredient-card` は文字 `#FEEDED` × 背景 `#E47C83` のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D12B36`、4.51:1）を使う。 - `point-badge` は文字 `#FEEDED` × 背景 `#E4758A` のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D02948`、4.53:1）を使う。 - `wave-heading` は文字 `#E4758A` × 背景 `#FEF1CC` のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D02948`、4.56:1）を使う。 - `button-primary` は文字 `#FFFAF1` × 背景 `#E27589` のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D53653`、4.51:1）を使う。 - `info-pill` は文字 `#FEEDED` × 背景 `#FDADBA` のコントラスト比が 1.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#DB0528`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書きキャッチ | 明朝 | Shippori Mincho | 800 | 30px | 1.4 | 0.1em | | `headline-lg` | 縦書きのリード文・素材名 | 明朝 | Shippori Mincho | 700 | 24px | 1.6 | 0.08em | | `headline-md` | こだわり見出し（ピンク色） | 丸ゴシック | M PLUS Rounded 1c | 800 | 23px | 1.3 | 0.08em | | `accent` | 欧文のシリーズ名見出し | 欧文サンセリフ | Montserrat | 700 | 30px | 1.1 | 0.08em | | `body-md` | 縦書きの素材説明・声カードの本文 | 明朝 | Noto Serif JP | 600 | 13px | 1.8 | 0.05em | | `body-lg` | こだわりの説明文 | 丸ゴシック | Zen Maru Gothic | 500 | 13px | 1.75 | 0.03em | | `note` | 声の注釈など | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.03em | | `label-button` | 番号バッジ・ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 12px | 1.2 | 0.05em | - 前半の情緒的なパートは縦書きの明朝で、右から左へ読ませる - 後半の説明パートは横書きの丸ゴシックに切り替え、親しみやすさを出す - こだわりの見出しはピンクの太い丸ゴシックで 2 行に分ける - 本文は中央揃えか左揃えで 1 行 20 字前後におさえる - 欧文はシリーズ名だけに使い、字間を少し広げた太いサンセリフにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。素材説明は縦書きカード 2 枚を横に並べ、声カードはひし形を左右に互い違いに置く - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算） - 斜めの面を重ねて、セクションの境目をジグザグに見せる - 写真と文字ブロックは左右に交互に置き、少し重ねる - こだわりの番号バッジは見出しの左右に交互に置く - 素材写真（木枡など）は画面の端で切れるように置く - 全体の幅は 375px に固定し、PC では中央の細い 1 列として見せる ## Elevation & Depth - ひし形の声カードには大きめのぼかし影（不透明度 15% 程度）を付ける - 商品カップの写真の下に柔らかい接地影を付ける - CTA ボタンは黄色の影を下に 4px ずらして付ける - それ以外の面は影なしで、質感とグラデーションだけで奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品と素材は切り抜きで重ねる。こだわりの写真は円か大きな角丸で切り抜き、画面の端で切れるように置く - **セクション境界**: 斜めの面とひし形の重なりで区切る。クリーム色のブロックの上下は波線で飾る - 声カードは正方形を 45 度回したひし形にし、上の角に金のグラデを入れる - 番号バッジはピンクの正円に白文字を入れる - ブランド名は和風の雲形の飾り枠で囲む - 素材カードは白の細線の長方形で、角丸にしない ## Components - **和風飾り枠の商品名**（`ornate-name-frame`）: 雲形の白い枠の中に、欧文シリーズ名と明朝の商品名を 2 段で入れる。左右に葉のアイコンを添える - **縦書きリード**（`vertical-copy`）: 明朝の縦書き 5〜6 行。葉のアイコンを始めと終わりに置く - **素材説明カード**（`ingredient-card`）: ピンクのラメ地に白線の枠。縦書きの素材名（大）と説明（小）を白文字で入れ、上の角に金の光を重ねる - **お客様の声ひし形カード**（`voice-diamond`）: 白いひし形に、ラベル・ピンクのひし形番号・3〜4 行の明朝の声を中央揃えで入れる - **こだわり番号バッジ**（`point-badge`）: 直径 70px ほどのピンクの円に、白でラベルと大きな数字を入れる - **波線で挟んだセクション見出し**（`wave-heading`）: ピンクの波線を上下に引き、欧文の大見出しとその下に日本語の小見出しを入れる - **他の商品へ誘導するボタン**（`button-primary`）: 横に長い角丸のピンクボタン。白文字の末尾に「>」を付け、黄色の影を付ける - **成分情報リンク**（`info-pill`）: 右上に置く薄ピンクのピル型の小さなリンク ## Do's and Don'ts **Do** - ピンクの面にはラメやグレインの質感を入れて、高級感を出す - 情緒を伝える文章は縦書きの明朝で書く - 和の素材（ごま・きなこ・豆）を木枡や粉のまま写真で見せる - ひし形と斜めの面で、リズムのある華やかな構図にする - 説明パートはクリーム色の地と丸ゴシックに切り替える **Don't** - 彩度の高いビビッドなピンクや原色を使わない - 文字を純粋な黒にしない - ゴールドを広い面積に塗らない - 縦書きのパートに丸ゴシックを混ぜない - 大きな角丸のカードやピル型のボタンを多用して、ポップに寄せない - 派手な割引の訴求やバッジを入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観を一目で伝える）: ピンクのグラデの上に、スプーンですくったカップの写真を置き、縦書きの短いキャッチを左上に入れる。下に飾り枠の商品名 2. **コンセプト**（商品の特徴を情緒的に語る）: 白っぽいピンクの地に縦書きの明朝を 6 行。左右の端に素材入りの木枡を切れた状態で置く 3. **素材の紹介**（トッピング・ソース・ベースの 3 つの素材を説明する）: 斜めに区切ったラメのピンク面に、白線枠の縦書きカードを置き、カップを真上から撮った写真と重ねる 4. **お客様の声**（食べたい気持ちを後押しする）: 白いひし形のカード 2 枚を左右に互い違いに置き、下に小さな注釈を入れる 5. **3 つのこだわり**（製法と品質への安心感を伝える）: クリーム色のブロックに波線の見出し。番号バッジ・ピンクの見出し・説明文・丸く切り抜いた写真を交互に並べる 6. **CTA・シェア**（他の商品やブランドサイトへ誘導する）: 白い地にピンクのボタンを置き、その下に SNS アイコンを横に並べる ## Imagery - 商品は斜め上から撮り、スプーンでとろける様子を見せる。背景はピンクのグラデで、少し霧がかったように - 素材はカップを真上から撮り、断面と粉の質感をアップで見せる - 粉や種子を木枡に盛り、画面の端で切れるように置く - こだわりの写真は白っぽく明るいキッチンと牛乳などで清潔感を出す - 飾りは葉のシルエットのアイコン、金色の光のグラデ、ラメのテクスチャ - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では SP と同じ縦長の 1 列を中央に約 340px 幅で置く - PC の左右の余白はピンク一色で埋め、左上にロゴとキャッチを固定表示する - PC では上部に緑の帯のブランドヘッダーを足す - 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-d7f9c1ec`（元 LP の URL から採番） - **元 LP**: https://www.haagen-dazs.co.jp/products/special/greencraft-soy-black-sesame-and-kinako/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。