--- version: alpha name: Bold Red Chocolate Ice Cream Brand LP description: 鮮やかな赤とチョコレートの茶色を主役にした、元気でシズル感の強いアイス菓子のブランド LP。白・赤・クリーム色の帯を交互に重ねて場面を切り替える。見出しの両側には砕けたチョコ片を散らす。吹き出し型の見出しや漫画風のパーツを使い、遊び心のある見せ方にしている。 colors: primary: '#EB1B01' cta: '#EC1A01' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F8F3C9' dark-section: '#4B1803' secondary: '#882E1B' text: '#070608' accent-1: '#F5B800' tint-1: '#FEF0AB' text-muted: '#747474' line: '#ED1A03' on-primary: '#FEF6F1' cta-accessible: '#E91A01' primary-accessible: '#E11A01' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 900 lineHeight: 1.3 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px card-pickup: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 250px heading-chocolate: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 60px heading-balloon: textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 76px feature-callout: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 110px carousel-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 440px label-plate: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px nav-bar: backgroundColor: '{colors.dark-section}' typography: '{typography.body-md}' height: 60px --- # DESIGN.md — 赤×チョコ茶のポップなアイス菓子 LP（Bold Red Chocolate Ice Cream Brand LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感 - **キーワード**: 鮮烈な赤・チョコのシズル・砕けたかけら・吹き出し見出し・漫画風・帯の切り替え - **地の質感**: 地はフラットな単色の面。チョコの光沢・とろける質感は写真と3Dレンダーで加える - **形**: 角丸は小さめ(4〜8px)のカード。CTAはピル型。セクション下端に下向き三角の切り欠きを入れる - **温度感**: 暖色寄りで高温。赤と茶の濃い色を、クリーム色と白で和らげる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EB1B01` | ブランドの赤（帯セクション・見出し文字） | 20% | 画素の実測 | | `cta` | `#EC1A01` | CTA ボタンの赤 | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 26% | 画素の実測 | | `background-alt` | `#F8F3C9` | クリーム色の帯の地 | 15% | 画素の実測 | | `dark-section` | `#4B1803` | ナビの濃いチョコ茶 | 3% | 画素の実測 | | `secondary` | `#882E1B` | チョコの中間茶（装飾・写真色） | 6% | 画素の主要色に補正 | | `text` | `#070608` | 見出し・本文の濃い文字 | 2% | 画素の実測 | | `accent-1` | `#F5B800` | キラキラ線・FV の黄色 | 1% | 推定 | | `tint-1` | `#FEF0AB` | FV 左側のバター黄 | 3% | 画素の主要色に補正 | | `text-muted` | `#747474` | フッターの注記文字 | 0% | 画素の実測 | | `line` | `#ED1A03` | 吹き出しの赤い枠線 | 0% | 画素の主要色に補正 | | `on-primary` | `#FEF6F1` | 赤地の上の白文字 | 1% | 画素の実測 | | `cta-accessible` | `#E91A01` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#E11A01` | AA を満たす補正値（計算） | | 計算 | - 地の色は白→赤→白→クリーム→赤→白の順に帯で切り替え、場面転換を示す - 赤は帯セクション・CTA・セクション見出し文字に限定。主役の色として広い面で使う - 茶色はチョコ写真とナビ帯で使う。テキスト用の色にはしない - 赤地の上は白文字のみ。白い札やカードを重ねてコントラストを保つ - 黄色はキラキラ線や漫画の文字など、ごく小さな強調だけに使う - `button-primary-pill` は文字 `#FFFFFF` × 背景 `#EC1A01` のコントラスト比が 4.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E91A01`、4.55:1）を使う。 - `carousel-card` は文字 `#FEF6F1` × 背景 `#EB1B01` のコントラスト比が 4.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E11A01`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のロゴ風の大きなキャッチ | 装飾・ディスプレイ | Dela Gothic One | 900 | 48px | 1.1 | 0.0em | | `headline-lg` | セクション見出し（赤・太字） | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.04em | | `headline-md` | 吹き出し見出しの主行 | ゴシック | Noto Sans JP | 900 | 22px | 1.3 | 0.02em | | `headline-sm` | 特長の小見出し・カード見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.02em | | `body-md` | 本文（中央揃え） | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.04em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.06em | | `note` | フッター・注記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 漫画風の黄色い極太文字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 30px | 1.3 | 0.0em | - 見出しはすべて極太ゴシックにし、細い書体は使わない - セクション見出しは赤文字で中央に置き、両脇にチョコ片の画像を添える - 本文は中央揃えで短く改行する。1行は20字前後に収める - 吹き出し見出しは小さな前置き行（黒）と大きな主行（赤）の2段で組む - 擬音語はカタカナを大きく扱い、食感を文字で表現する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長エリアは左にテキスト、右に大きな商品画像を重ねる - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションの区切りは背景色の帯で表す - カードは画面幅の約92%で中央に置く - 赤帯の下端には中央に下向き三角を付け、次の内容へ視線を誘導する - カルーセルは左右に次のカードを少しはみ出させ、丸い矢印ボタンとドットを付ける - 見出しの上下は40〜56px あける ## Elevation & Depth - カード・吹き出し見出しにはごく薄い影（0 2px 6px rgba(0,0,0,.15)） - CTA ボタンの下側に濃い赤の影を付け、押せる立体感を出す - カルーセルの矢印は白丸に軽い影 - チョコ片の画像は立体レンダーで奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: カード上部いっぱいに角丸の長方形で配置。商品のパッケージやチョコは切り抜きで配置する - **セクション境界**: 基本は直線の色帯。商品紹介の赤帯だけ下端中央に三角の切り欠き - 主要な詳細 CTA はピル型、カード内のボタンは角丸小のフル幅 - 吹き出し見出しは白い角丸の箱に下向きのしっぽを付ける - 特長の説明は、赤い細線の吹き出し（L 字の枠としっぽ）で囲む - 漫画パネルはギザギザの爆発型吹き出しで描く ## Components - **ピル型の詳細 CTA**（`button-primary-pill`）: 赤のピル型。上に小さな前置き文字、下に大きなラベルの2段組み。右端に「>」を置く - **ピックアップカード**（`card-pickup`）: 上にバナー画像、中に太字2行の説明、下に赤いフル幅ボタンを並べる - **チョコ片付きの見出し**（`heading-chocolate`）: 赤の極太見出しの左右に、砕けたチョコ片を散らす - **吹き出し見出し**（`heading-balloon`）: 白い角丸箱に影としっぽを付け、黒の前置き行と赤の主行を入れる。右上に黄色のキラキラ線 - **特長の吹き出し**（`feature-callout`）: 左上に黄色のキラキラ線、赤い太字の小見出し、下に赤い細線の吹き出し枠と本文 - **ひみつカルーセルカード**（`carousel-card`）: 上に写真、下に赤い本文エリア。境目に番号の丸バッジを置き、白文字の見出しと中央揃えの本文を入れる - **白い商品名札**（`label-plate`）: 赤帯の上に置く横長の白い角丸札。濃い赤茶の太字を入れる - **チョコ色ナビ**（`nav-bar`）: FV 直下の濃い茶色の帯。白文字のメニュー3つに下向き矢印を付け、上端はチョコが垂れる形にする ## Do's and Don'ts **Do** - チョコ片やとろけるチョコの画像を見出しや FV に必ず散らす - 赤帯・クリーム帯・白帯を交互に使い、リズムを作る - 食感の擬音をカタカナの大きな文字で見せる - CTA は赤で統一し、下に影を付けて立体的にする - 見出しは吹き出しやキラキラ線で賑やかに飾る **Don't** - 寒色やくすんだ色を主要な色にしない - 細い明朝体や繊細な書体を使わない - 赤地の上に茶色や黒の文字を直接置かない - 余白を詰めすぎて写真のシズル感を損なわない - 大きな角丸や柔らかすぎる形にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（食感と商品を一目で伝える）: 斜めに分割した黄と赤の背景。割れたチョコの写真、とろけるチョコ、擬音のタイポ、商品パッケージを重ねる 2. **ナビゲーション**（ページ内の主要セクションへ誘導する）: 濃い茶色の帯に白文字のメニュー3つと下向き矢印 3. **ピックアップ**（キャンペーン・特設サイトへ送客する）: 白地に、バナー画像・説明・赤いボタンのカードを縦に2枚並べる 4. **商品情報**（商品の概要を伝える）: 赤帯の上に白い商品名札、パッケージ画像、白文字の説明。下端は三角の切り欠き 5. **特長**（3つの魅力を伝える）: 左に吹き出し型の特長を3つ、右に大きな割れチョコ。下にピル型 CTA 6. **こだわり（カルーセル）**（おいしさの理由を深く伝える）: クリーム地。写真と赤い本文エリアのカードを番号バッジ付きでスライド表示 7. **動画紹介**（第三者のコンテンツで興味を高める）: 吹き出し見出し、中央揃えの本文、埋め込み動画 8. **漫画ストーリー**（ブランドの歴史を親しみやすく伝える）: 赤い漫画パネルに爆発型の吹き出しと黄色い極太文字。下に赤い読むボタン 9. **CM 情報**（広告とタレントを訴求する）: 赤帯に白い見出し、角丸の写真、白文字のキャプション 10. **シェア・フッター**（SNS 拡散と企業情報）: 白地に赤い見出しと丸い SNS アイコン3つ。下に細線と小さな規約リンク・コピーライト ## Imagery - チョコは光沢のある濃い茶色で、割れ目やかじり跡を見せた寄りの写真か3Dレンダーにする - とろけるチョコとミルクの渦をうねる液体として背景に流す - 砕けたチョコ片の切り抜きを、見出しの周りに角度を変えて2〜4個散らす - 人物写真は明るい空色や水色の背景で、商品を手に持たせる - 漫画パートは赤のスクリーントーンと黒い線画、爆発型の吹き出しで描く - 黄色のキラキラ線（3本の放射線）を強調の記号として使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 70% 幅のコンテナに収め、帯の背景は全幅にする - PC ではピックアップカードを2列に並べる - PC の商品情報は、パッケージ画像（左）と説明（右）の横並び - PC のカルーセルは3枚同時に表示する - PC の FV は横長にし、ナビにロゴとメニューを横一列で並べる - 漫画パネルと動画は PC で幅約 70% に広げる ## 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-131e190c`（元 LP の URL から採番） - **元 LP**: https://www.morinaga.co.jp/itachoco/2026new/ - **解析に使った画像**: 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/）からご連絡ください。