青×黄の斜め構図が爽快な氷菓LP

Cool Blue Crushed Ice Summer Snack LP

濃紺・空色・レモン黄の3色で夏の涼しさと勢いを出した氷菓のブランドLP。斜めのセクション境界、傾けた極太コピー、紺の線で囲んだ見出し、線画イラストのシーンカードで、楽しく読める情報構成にしている。

菓子・スイーツ清潔・爽やかポップ・元気力強い・インパクトSPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

文字は黒ではなく濃紺を使う
セクションの地色は白・水色・黄色を斜めの境界で切り替える
黄色は主ボタン・マーカー・矢印アイコンなど、目を引かせたい場所だけに使う
濃紺の面には白文字、水色の面には濃紺文字
氷の粒の写真は淡いレモン色で背景のアクセントにする
空色はFVとバナーの背景だけに使い、本文の地色にはしない

TYPOGRAPHY

書体

displayFV・コンセプトの斜体極太コピー装飾・ディスプレイ／ Dela Gothic One 900 ／ 56px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg枠で囲むセクション見出しゴシック／ Zen Kaku Gothic New 900 ／ 26px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-md黄色マーカー付きのサブ見出しゴシック／ Zen Kaku Gothic New 900 ／ 24px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-smポイントの文・カード見出しゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文ゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

accentPICK UP・POINT・CHECK などの欧文ラベル欧文サンセリフ／ Oswald 700 ／ 12px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタン・ナビの文字ゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

note注記・コピーライトゴシック／ Noto Sans JP 500 ／ 10px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

本文も太字（700）を基本にして、元気な印象を出す
大きなコピーは-10°ほど右上がりに傾け、斜体の極太書体で組む
見出しは紺の細い線の枠で囲み、白地に紺文字で置く
強調語の下には白か黄色の帯マーカーを引く
難しい読みの語にはルビを振る
欧文のラベルは大文字のコンデンス体にする

PAGE STRUCTURE

セクション構成

ファーストビュー夏の楽しいシーンと商品を印象づける空色の地に人物写真をモザイク状に並べ、中央に傾けた商品と黄色い極太コピーを置く。カルーセルにする
ピックアップキャンペーンを告知する英字の小見出しの下に、横スライドのバナーを並べる
コンセプトコピー商品の世界観を伝える氷の粒の写真を背景に、右上がりに傾けた紺のコピーを数行置き、最後にロゴを置く
ページ内ナビ各章へ誘導する紺のボタンを2×2で並べる
特長味・食感・成分を説明する水色の地に枠付き見出し、本文、大きな商品画像を置く。その下に外部リンクボタンと黄色ボタン、多角形の白い面の解説
利用シーン食べる場面を提案するタブで切り替えるパネルの中に、マーカー付きの見出し、POINT、線画のシーンカード、CHECKアコーディオンを入れる
食べ方の紹介おいしい楽しみ方をステップで伝える黄色の地と氷の写真の上に白カードを置き、矢印でつないで線画と短文を添える。最後にFAQリンク
おすすめコンテンツ関連する施策へ送客する枠付き見出しの下に、小見出しと横長バナーを縦に並べる
フッター規約と企業情報を載せる白地に小さな文字のリンク、企業ロゴ、コピーライト

COMPONENTS

部品

ページ内ナビボタン nav-anchor紺の面に白文字。左に黄色い丸の下矢印アイコンを置き、2×2 で並べる
枠付き見出し heading-boxed白地を紺の細線で囲み、中に紺の極太文字を入れる。左寄せで置く
黄色アコーディオンボタン button-primary黄色の面を紺の枠線で囲み、右端に紺の丸い＋アイコンを置く
外部リンクボタン button-outline紺の線の枠に中央揃えの文字。右に外部リンクのアイコンを付ける
CHECK付きアコーディオン check-accordion水色のCHECKタグの下に紺の帯を置き、帯の右に水色の丸い＋アイコンを付ける
POINTバッジ point-badge水色の線の正円に紺の欧文ラベル。右に太字のポイント文を置く
シーンカード scene-card水色の面に、紺と空色の線画イラストと短文を左右交互に配置する
切替タブ tab-switch選択中のタブは白地に紺の線、非選択のタブは水色の面にする
FAQラベル＋詳しく見る faq-link紺の小さな角丸ラベル、Q の文、右下に黄色い丸の矢印を並べる

守ること

文字は黒ではなく濃紺で統一する
斜めの境界とコピーの傾きで勢いを出す
氷の粒の写真を背景の端に散らして涼しさを出す
イラストは紺・空色・黄の3色に限る
黄色は強調点だけに使う

DON'T

避けること

暖色の赤やオレンジを主役にしない
大きな角丸やピル型のボタンを多用しない
ドロップシャドウで立体感を出さない
細い明朝体を使わない
グレーの本文文字にしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 青×黄の斜め構図が爽快な氷菓LP（Cool Blue Crushed Ice Summer Snack LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

業種: 菓子・スイーツ／ 雰囲気: 清潔・爽やか、ポップ・元気、力強い・インパクト
キーワード: 夏・爽快・斜め構図・氷のかけら・濃紺×黄・線画イラスト
地の質感: フラットな単色面に、半透明の氷の粒の写真を散らして清涼感を出す
形: ほぼ角丸なしの四角いボックスに斜め切りの面と傾けたロゴ文字を組み合わせる
温度感: 寒色が中心で、黄色を効かせて明るく元気な印象

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#014191`	見出し文字・ナビボタン・アコーディオン帯の濃紺	6%	画素の実測
`secondary`	`#14A7EC`	FV背景のビビッドな空色	5%	画素の実測
`background`	`#FFFFFF`	基本の白地	38%	画素の実測
`background-alt`	`#CAEBFA`	特長セクションの淡い水色地	20%	画素の実測
`cta`	`#FFF21D`	黄色のボタン・強調面	5%	画素の実測
`on-cta`	`#044694`	黄色ボタン上の文字	0%	画素の主要色に補正
`text`	`#1F4B83`	本文の紺文字	2%	画素の実測
`tint-1`	`#CAEBFB`	シーンカード・非アクティブタブの水色	4%	画素の実測
`accent-1`	`#F3EBAB`	氷の粒の淡いレモン色	9%	画素の実測
`marker`	`#FEF31B`	サブ見出しの黄色マーカー	0%	画素の実測
`line`	`#044694`	見出し枠・カード枠の紺線	0%	画素の主要色に補正
`surface`	`#FEFEFE`	黄地に乗る白カード	6%	画素の実測

文字は黒ではなく濃紺を使う
セクションの地色は白・水色・黄色を斜めの境界で切り替える
黄色は主ボタン・マーカー・矢印アイコンなど、目を引かせたい場所だけに使う
濃紺の面には白文字、水色の面には濃紺文字
氷の粒の写真は淡いレモン色で背景のアクセントにする
空色はFVとバナーの背景だけに使い、本文の地色にはしない

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV・コンセプトの斜体極太コピー	装飾・ディスプレイ	Dela Gothic One	900	56px	1.1	0.0em
`headline-lg`	枠で囲むセクション見出し	ゴシック	Zen Kaku Gothic New	900	26px	1.3	0.05em
`headline-md`	黄色マーカー付きのサブ見出し	ゴシック	Zen Kaku Gothic New	900	24px	1.3	0.03em
`headline-sm`	ポイントの文・カード見出し	ゴシック	Noto Sans JP	700	17px	1.5	0.03em
`body-md`	本文	ゴシック	Noto Sans JP	700	14px	1.8	0.03em
`accent`	PICK UP・POINT・CHECK などの欧文ラベル	欧文サンセリフ	Oswald	700	12px	1.2	0.05em
`label-button`	ボタン・ナビの文字	ゴシック	Noto Sans JP	700	14px	1.6	0.05em
`note`	注記・コピーライト	ゴシック	Noto Sans JP	500	10px	1.5	0.0em

本文も太字（700）を基本にして、元気な印象を出す
大きなコピーは-10°ほど右上がりに傾け、斜体の極太書体で組む
見出しは紺の細い線の枠で囲み、白地に紺文字で置く
強調語の下には白か黄色の帯マーカーを引く
難しい読みの語にはルビを振る
欧文のラベルは大文字のコンデンス体にする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。ナビとシーンカードだけ 2 列
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
左右に約 20px の余白を取る
セクションの境界は斜めの面で区切る
セクション内は見出し→導入文→図版の順で縦に積む
タブパネルは紺の線の枠で囲み、その中にポイントとカードを並べる
ページ内リンクは紺のボタンを 2×2 で並べる

Elevation & Depth

影はほぼ使わず、フラットに保つ
奥行きは氷の粒の写真を重ねて出す
黄色ボタンは紺の枠線で縁取り、浮いて見せる

Shapes

角丸: 小 4px ／中 8px ／大 12px。ボタンは角丸の長方形。
写真の切り抜き: FV は角丸なしの四角い写真をモザイク状に並べる。商品はパッケージを切り抜いて傾けて置く
セクション境界: 斜めの直線で地色を切り替える。不規則な多角形の白い面も使う
ボタンとカードは角丸 4〜8px の四角
矢印や＋のアイコンは正円で入れる
POINT バッジは水色の線の正円
タブは上の角だけ丸める

Components

ページ内ナビボタン（nav-anchor）: 紺の面に白文字。左に黄色い丸の下矢印アイコンを置き、2×2 で並べる
枠付き見出し（heading-boxed）: 白地を紺の細線で囲み、中に紺の極太文字を入れる。左寄せで置く
黄色アコーディオンボタン（button-primary）: 黄色の面を紺の枠線で囲み、右端に紺の丸い＋アイコンを置く
外部リンクボタン（button-outline）: 紺の線の枠に中央揃えの文字。右に外部リンクのアイコンを付ける
CHECK付きアコーディオン（check-accordion）: 水色のCHECKタグの下に紺の帯を置き、帯の右に水色の丸い＋アイコンを付ける
POINTバッジ（point-badge）: 水色の線の正円に紺の欧文ラベル。右に太字のポイント文を置く
シーンカード（scene-card）: 水色の面に、紺と空色の線画イラストと短文を左右交互に配置する
切替タブ（tab-switch）: 選択中のタブは白地に紺の線、非選択のタブは水色の面にする
FAQラベル＋詳しく見る（faq-link）: 紺の小さな角丸ラベル、Q の文、右下に黄色い丸の矢印を並べる

Do's and Don'ts

Do - 文字は黒ではなく濃紺で統一する - 斜めの境界とコピーの傾きで勢いを出す - 氷の粒の写真を背景の端に散らして涼しさを出す - イラストは紺・空色・黄の3色に限る - 黄色は強調点だけに使う

Don't - 暖色の赤やオレンジを主役にしない - 大きな角丸やピル型のボタンを多用しない - ドロップシャドウで立体感を出さない - 細い明朝体を使わない - グレーの本文文字にしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

ファーストビュー（夏の楽しいシーンと商品を印象づける）: 空色の地に人物写真をモザイク状に並べ、中央に傾けた商品と黄色い極太コピーを置く。カルーセルにする
ピックアップ（キャンペーンを告知する）: 英字の小見出しの下に、横スライドのバナーを並べる
コンセプトコピー（商品の世界観を伝える）: 氷の粒の写真を背景に、右上がりに傾けた紺のコピーを数行置き、最後にロゴを置く
ページ内ナビ（各章へ誘導する）: 紺のボタンを2×2で並べる
特長（味・食感・成分を説明する）: 水色の地に枠付き見出し、本文、大きな商品画像を置く。その下に外部リンクボタンと黄色ボタン、多角形の白い面の解説
利用シーン（食べる場面を提案する）: タブで切り替えるパネルの中に、マーカー付きの見出し、POINT、線画のシーンカード、CHECKアコーディオンを入れる
食べ方の紹介（おいしい楽しみ方をステップで伝える）: 黄色の地と氷の写真の上に白カードを置き、矢印でつないで線画と短文を添える。最後にFAQリンク
おすすめコンテンツ（関連する施策へ送客する）: 枠付き見出しの下に、小見出しと横長バナーを縦に並べる
フッター（規約と企業情報を載せる）: 白地に小さな文字のリンク、企業ロゴ、コピーライト

Imagery

若者や家族が屋外で笑っている明るい自然光の写真
商品パッケージは切り抜きにし、斜めに傾けて躍動感を出す
淡い黄色の半透明の氷の粒を大小ばらばらに散らす
シーンのイラストは紺の主線に空色・黄色を塗ったフラットな線画
食べ方の説明には太めの紺線の簡素なアイコン風イラストを使う
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は FV を横長にし、写真を横方向に並べる
PC の本文は中央幅約70% に収め、左右に氷の写真を大きく見せる
ナビは PC で4つを横一列に並べる
シーンカードは PC で3列にする
特長は PC で文章と商品図を左右に分け、番号付きの吹き出しを加える

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
version: alpha
name: Cool Blue Crushed Ice Summer Snack LP
description: 濃紺・空色・レモン黄の3色で夏の涼しさと勢いを出した氷菓のブランドLP。斜めのセクション境界、傾けた極太コピー、紺の線で囲んだ見出し、線画イラストのシーンカードで、楽しく読める情報構成にしている。
colors:
  primary: '#014191'
  secondary: '#14A7EC'
  background: '#FFFFFF'
  background-alt: '#CAEBFA'
  cta: '#FFF21D'
  on-cta: '#044694'
  text: '#1F4B83'
  tint-1: '#CAEBFB'
  accent-1: '#F3EBAB'
  marker: '#FEF31B'
  line: '#044694'
  surface: '#FEFEFE'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 56px
    fontWeight: 900
    lineHeight: 1.1
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 26px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.8
    letterSpacing: 0.03em
  accent:
    fontFamily: Oswald
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  nav-anchor:
    backgroundColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 72px
  heading-boxed:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 48px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 56px
  button-outline:
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    height: 72px
  check-accordion:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 72px
  point-badge:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 48px
  scene-card:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.primary}'
    typography: '{typography.body-md}'
    height: 90px
  tab-switch:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 48px
  faq-link:
    backgroundColor: '{colors.primary}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 24px
---

# DESIGN.md — 青×黄の斜め構図が爽快な氷菓LP（Cool Blue Crushed Ice Summer Snack LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。
上の YAML（トークン）が正、本文はその使い方の説明です。
**元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。**
公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: 清潔・爽やか、ポップ・元気、力強い・インパクト
- **キーワード**: 夏・爽快・斜め構図・氷のかけら・濃紺×黄・線画イラスト
- **地の質感**: フラットな単色面に、半透明の氷の粒の写真を散らして清涼感を出す
- **形**: ほぼ角丸なしの四角いボックスに斜め切りの面と傾けたロゴ文字を組み合わせる
- **温度感**: 寒色が中心で、黄色を効かせて明るく元気な印象

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#014191` | 見出し文字・ナビボタン・アコーディオン帯の濃紺 | 6% | 画素の実測 |
| `secondary` | `#14A7EC` | FV背景のビビッドな空色 | 5% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白地 | 38% | 画素の実測 |
| `background-alt` | `#CAEBFA` | 特長セクションの淡い水色地 | 20% | 画素の実測 |
| `cta` | `#FFF21D` | 黄色のボタン・強調面 | 5% | 画素の実測 |
| `on-cta` | `#044694` | 黄色ボタン上の文字 | 0% | 画素の主要色に補正 |
| `text` | `#1F4B83` | 本文の紺文字 | 2% | 画素の実測 |
| `tint-1` | `#CAEBFB` | シーンカード・非アクティブタブの水色 | 4% | 画素の実測 |
| `accent-1` | `#F3EBAB` | 氷の粒の淡いレモン色 | 9% | 画素の実測 |
| `marker` | `#FEF31B` | サブ見出しの黄色マーカー | 0% | 画素の実測 |
| `line` | `#044694` | 見出し枠・カード枠の紺線 | 0% | 画素の主要色に補正 |
| `surface` | `#FEFEFE` | 黄地に乗る白カード | 6% | 画素の実測 |

- 文字は黒ではなく濃紺を使う
- セクションの地色は白・水色・黄色を斜めの境界で切り替える
- 黄色は主ボタン・マーカー・矢印アイコンなど、目を引かせたい場所だけに使う
- 濃紺の面には白文字、水色の面には濃紺文字
- 氷の粒の写真は淡いレモン色で背景のアクセントにする
- 空色はFVとバナーの背景だけに使い、本文の地色にはしない

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV・コンセプトの斜体極太コピー | 装飾・ディスプレイ | Dela Gothic One | 900 | 56px | 1.1 | 0.0em |
| `headline-lg` | 枠で囲むセクション見出し | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.3 | 0.05em |
| `headline-md` | 黄色マーカー付きのサブ見出し | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.3 | 0.03em |
| `headline-sm` | ポイントの文・カード見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 14px | 1.8 | 0.03em |
| `accent` | PICK UP・POINT・CHECK などの欧文ラベル | 欧文サンセリフ | Oswald | 700 | 12px | 1.2 | 0.05em |
| `label-button` | ボタン・ナビの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.05em |
| `note` | 注記・コピーライト | ゴシック | Noto Sans JP | 500 | 10px | 1.5 | 0.0em |

- 本文も太字（700）を基本にして、元気な印象を出す
- 大きなコピーは-10°ほど右上がりに傾け、斜体の極太書体で組む
- 見出しは紺の細い線の枠で囲み、白地に紺文字で置く
- 強調語の下には白か黄色の帯マーカーを引く
- 難しい読みの語にはルビを振る
- 欧文のラベルは大文字のコンデンス体にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。ナビとシーンカードだけ 2 列
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
- 左右に約 20px の余白を取る
- セクションの境界は斜めの面で区切る
- セクション内は見出し→導入文→図版の順で縦に積む
- タブパネルは紺の線の枠で囲み、その中にポイントとカードを並べる
- ページ内リンクは紺のボタンを 2×2 で並べる

## Elevation & Depth

- 影はほぼ使わず、フラットに保つ
- 奥行きは氷の粒の写真を重ねて出す
- 黄色ボタンは紺の枠線で縁取り、浮いて見せる

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
- **写真の切り抜き**: FV は角丸なしの四角い写真をモザイク状に並べる。商品はパッケージを切り抜いて傾けて置く
- **セクション境界**: 斜めの直線で地色を切り替える。不規則な多角形の白い面も使う
- ボタンとカードは角丸 4〜8px の四角
- 矢印や＋のアイコンは正円で入れる
- POINT バッジは水色の線の正円
- タブは上の角だけ丸める

## Components

- **ページ内ナビボタン**（`nav-anchor`）: 紺の面に白文字。左に黄色い丸の下矢印アイコンを置き、2×2 で並べる
- **枠付き見出し**（`heading-boxed`）: 白地を紺の細線で囲み、中に紺の極太文字を入れる。左寄せで置く
- **黄色アコーディオンボタン**（`button-primary`）: 黄色の面を紺の枠線で囲み、右端に紺の丸い＋アイコンを置く
- **外部リンクボタン**（`button-outline`）: 紺の線の枠に中央揃えの文字。右に外部リンクのアイコンを付ける
- **CHECK付きアコーディオン**（`check-accordion`）: 水色のCHECKタグの下に紺の帯を置き、帯の右に水色の丸い＋アイコンを付ける
- **POINTバッジ**（`point-badge`）: 水色の線の正円に紺の欧文ラベル。右に太字のポイント文を置く
- **シーンカード**（`scene-card`）: 水色の面に、紺と空色の線画イラストと短文を左右交互に配置する
- **切替タブ**（`tab-switch`）: 選択中のタブは白地に紺の線、非選択のタブは水色の面にする
- **FAQラベル＋詳しく見る**（`faq-link`）: 紺の小さな角丸ラベル、Q の文、右下に黄色い丸の矢印を並べる

## Do's and Don'ts

**Do**
- 文字は黒ではなく濃紺で統一する
- 斜めの境界とコピーの傾きで勢いを出す
- 氷の粒の写真を背景の端に散らして涼しさを出す
- イラストは紺・空色・黄の3色に限る
- 黄色は強調点だけに使う

**Don't**
- 暖色の赤やオレンジを主役にしない
- 大きな角丸やピル型のボタンを多用しない
- ドロップシャドウで立体感を出さない
- 細い明朝体を使わない
- グレーの本文文字にしない

## Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. **ファーストビュー**（夏の楽しいシーンと商品を印象づける）: 空色の地に人物写真をモザイク状に並べ、中央に傾けた商品と黄色い極太コピーを置く。カルーセルにする
2. **ピックアップ**（キャンペーンを告知する）: 英字の小見出しの下に、横スライドのバナーを並べる
3. **コンセプトコピー**（商品の世界観を伝える）: 氷の粒の写真を背景に、右上がりに傾けた紺のコピーを数行置き、最後にロゴを置く
4. **ページ内ナビ**（各章へ誘導する）: 紺のボタンを2×2で並べる
5. **特長**（味・食感・成分を説明する）: 水色の地に枠付き見出し、本文、大きな商品画像を置く。その下に外部リンクボタンと黄色ボタン、多角形の白い面の解説
6. **利用シーン**（食べる場面を提案する）: タブで切り替えるパネルの中に、マーカー付きの見出し、POINT、線画のシーンカード、CHECKアコーディオンを入れる
7. **食べ方の紹介**（おいしい楽しみ方をステップで伝える）: 黄色の地と氷の写真の上に白カードを置き、矢印でつないで線画と短文を添える。最後にFAQリンク
8. **おすすめコンテンツ**（関連する施策へ送客する）: 枠付き見出しの下に、小見出しと横長バナーを縦に並べる
9. **フッター**（規約と企業情報を載せる）: 白地に小さな文字のリンク、企業ロゴ、コピーライト

## Imagery

- 若者や家族が屋外で笑っている明るい自然光の写真
- 商品パッケージは切り抜きにし、斜めに傾けて躍動感を出す
- 淡い黄色の半透明の氷の粒を大小ばらばらに散らす
- シーンのイラストは紺の主線に空色・黄色を塗ったフラットな線画
- 食べ方の説明には太めの紺線の簡素なアイコン風イラストを使う
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は FV を横長にし、写真を横方向に並べる
- PC の本文は中央幅 約70% に収め、左右に氷の写真を大きく見せる
- ナビは PC で4つを横一列に並べる
- シーンカードは PC で3列にする
- 特長は 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-357ca453`（元 LP の URL から採番）
- **元 LP**: https://www.morinaga.co.jp/icebox/2027new/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

菓子・スイーツ山吹色×えんじの絵本風お菓子 LPWarm Picture-Book Confectionery Campaign LP 菓子・スイーツピンク×水色ストライプのポップなスイーツ LPPop Pastel Stripe Dessert Topping LP 菓子・スイーツ桃色×金箔の季節限定スイーツドリンク LPPeach Pink and Gold Premium Dessert Drink LP 菓子・スイーツ金色きらめきの新作フローズンスイーツ LPGolden Shimmer Frozen Dessert LP 菓子・スイーツクラフト紙とチョコ色のサステナ菓子 LPKraft Chocolate Sustainability LP 菓子・スイーツ星空ネイビー×ゴールドのコラボスイーツ LPCosmic Night Collab Dessert Campaign LP