DESIGN.md — 紺×赤×黄緑のポップなアイス商品 LP（Bold Navy Pop Ice Cream Brand LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感
• キーワード: 濃紺ドット地・斜めカット境界・三角旗見出し・紙吹雪の三角形・白抜き極太文字・パッケージ写真主役
• 地の質感: 濃紺の面に細かいハーフトーンのドットを重ねる。生成りの面はフラットにする
• 形: 斜めの直線とギザギザ、三角形の旗が中心。カードは角丸を小さくし、太い紺の枠線で囲む
• 温度感: 寒色の紺を主にする。赤・黄・黄緑の暖色を差して温度を上げる

Colors

• 紺のドット地と生成り地を交互に置き、境界は必ず斜めにする
• 見出しの旗は、生成り地では赤、紺地では黄緑にする
• 赤は主CTAと見出しの旗だけに使う
• 黄・黄緑・赤・白の三角形を紙吹雪として紺地や水色地に散らす
• 本文はこげ茶にする。年号やアイテム名は青で示す
• 水色はイラストを置く面と年表カードの地に使う
• button-primary は文字 #FFF0F1 × 背景 #E50112 のコントラスト比が 4.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E00112、4.54:1）を使う。
• point-badge は文字 #F3FAFE × 背景 #8EC41B のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#5A7C11、4.6:1）を使う。
• share-box は文字 #8EC41B × 背景 #FEFEFE のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#5A7C11、4.51:1）を使う。

Typography

• 大見出しは-5〜-8度傾け、旗の上に白抜きで置く
• 見出しの前置きの小コピーは小さく、メインの語を大きくして強弱をつける
• 本文も太字にし、行間はゆったり取る
• 強調したい語だけ一回り大きくする
• 欧文の見出しは極太のサンセリフにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。年表とアイテムはカード内で2〜3列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション間は斜めの境界で切り替える
• 見出しの旗は中央に置く
• 商品写真は画面幅いっぱいに大きく見せる
• 製造工程と年表はスライダーにし、左右の矢印とドットのページャーを付ける
• 斜めの文字帯をセクションのつなぎに使う

Elevation & Depth

• 影はほとんど使わない
• 白いカードはフラットにし、枠線で区切る
• 商品写真の切り抜きにだけ自然な影を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 14px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景を抜いて置く。ポイント欄は白い大きな円の上に商品を載せる
• セクション境界: 斜めの直線カット。一部はギザギザの鋸歯にする
• 見出しの背景は先端が尖った三角旗にする
• カードは紺または青の3px程度の枠線と小さな角丸で囲む
• ポイント番号は黄緑の円の中に白文字で入れる
• 文字の周りに小さな三角を2つずつ添えて動きを出す

Components

• 赤い詳細ボタン（button-primary）: 上段に小さな補足、下段に太い誘導文を置く2段の赤ボタン。右端に白い三角矢印を付ける
• 三角旗の見出し（heading-flag）: 横長で先端が尖った赤または黄緑の旗に、傾けた白抜きの極太文字を載せる
• ポイント番号（point-badge）: 黄緑の円の中に小さなラベルと大きな数字を入れ、右側に見出しを並べる
• 斜めの文字帯（slant-text-band）: 白地に紺の枠を付けた傾いた帯。ロゴ風の文字を繰り返して並べ、セクションをつなぐ
• 年表スライダーカード（timeline-card）: 水色地を紺の太枠で囲む。青い年号、商品画像、説明文を並べ、項目間は点線で区切る。左右に四角い矢印を付ける
• 商品アーカイブ枠（archive-card）: 白地を青い枠で囲む。見出しの下に線を引き、商品画像と青いキャプションをグリッドで並べる。右上に斜めの吹き出し注記を付ける
• スライダー矢印（slider-arrow）: 画面端に寄せた紺の角丸四角に白い山形の矢印。戻る側はグレーにする
• シェア枠（share-box）: 紺地に黄緑の英字見出しを斜線で挟んで置き、その下の白い角丸箱にSNSアイコンを並べる

Do's and Don'ts

Do - 紺と生成りを斜めの境界で交互に配置する - 見出しは必ず三角旗と傾けた白抜き文字で作る - 三角形の紙吹雪を3色ほど散らして賑やかにする - 商品写真は大きな切り抜きで主役にする - 本文はこげ茶の太字でゆったり組む

Don't - セクション境界を水平の直線だけにしない - パステルや淡いグラデーションで甘く柔らかくしない - 細い明朝体やライトウェイトの書体を使わない - 赤をCTAと見出し以外に多用しない - 大きなドロップシャドウや立体的なボタンを使わない

Page Structure

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

1. ファーストビュー（商品の見た目と名前を一瞬で印象づける）: 紺のドット地に商品の束を大きく置く。右に縦書きの極太ロゴ、左上に傾けた白い短冊コピーを配置する
2. 商品紹介（商品パッケージと概要を伝える）: 生成り地に赤い旗見出しを置く。パッケージ写真、赤い商品名、本文、赤ボタンの順に並べる
3. 3つのポイント（特長を3つに絞って示す）: 紺地を斜めに切る。白い円に商品を載せ、円の弧に沿って文字を添える。右側に黄緑の番号バッジと見出しを3つ並べる
4. 製法の紹介（作り方の工程で信頼を補強する）: 赤い旗見出しと短い導入文の下に、STEPごとの図解スライダーとドットのページャーを置く
5. ブランドのある時間（楽しく食べる情景を想起させる）: 斜めの文字帯で始め、紺地に黄緑の旗見出しと白文の3行を置く。下端をギザギザにして水色地のパッケージイラストへつなぐ
6. 歴史・年表（ロングセラーの歴史で愛着を深める）: 赤い旗見出しと導入文の下に、水色の枠付き年表カードをスライダーで並べる
7. 過去商品アーカイブ（懐かしさで共感を呼ぶ）: 白い枠付きカードの中に、歴代パッケージ画像と年号・名前をグリッドで並べる
8. シェア・フッター（拡散を促し、ページを締める）: 斜めに入る紺地にシェア枠を置く。最下部は白地に小さな規約リンクと社名を置く

Imagery

• 商品は白背景で撮って切り抜く。複数本を放射状に束ねて迫力を出す
• パッケージは斜め上から見た立体の角度で見せる
• イラストは太い紺の線と紺・白・赤・黄のフラット塗りで描く
• 紙吹雪は三角・丸・短い線を黄・黄緑・白・赤で散らす
• 紺地には細かいハーフトーンのドットを敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央約900px幅のコンテンツ領域に収め、斜めの境界は全幅で保つ
• PCの商品紹介は画像を左、テキストを右の2カラムにする
• PCのポイント欄は円と商品を左、番号リストを右に並べる
• PCの年表はカード内で2項目を横に並べ、縦の点線で区切る
• PCのアーカイブは1行に5〜6点並べる

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 行書くと起動時に読み込まれる。