DESIGN.md — マゼンタ×夜空紫のハロウィン限定アイス LP（Pop Halloween Night Ice Cream Flavor LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、力強い・インパクト
• キーワード: ハロウィン・夜空と月・マゼンタドット・舞台カーテン・キャラクター・限定フレーバー
• 地の質感: 細かい水玉ドットを薄く敷いた平塗り。夜空の面は上から下へ紫紺→青紫のグラデーションにする。
• 形: 上辺がアーチの窓枠、中央に月を載せた山形の区切り、ピル型ボタン、角丸の情報カード
• 温度感: 暖色のマゼンタと寒色の紫紺を対比させた、にぎやかな夜の温度感

Colors

• 地はマゼンタと紫紺の 2 色を交互に切り替え、白い地は使わない。
• セクションの境目には金色の縁取りをした山形を置き、中央に三日月を載せる。
• 主ボタンは黄色地に黒文字。マゼンタ地の上ではサブボタンを白地にピンク文字にする。
• 本文は色地の上に白文字で書く。強調したい語だけ紫のマーカー帯で囲む。
• 金色は枠線・星・商品名見出しに限って使い、面積を小さく保つ。
• 表は白セルに細いマゼンタ罫線。該当項目だけマゼンタで塗り、白文字にする。
• button-secondary は文字 #EB2994 × 背景 #FEFEFE のコントラスト比が 3.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E01585、4.51:1）を使う。
• ribbon-title は文字 #F6CC1D × 背景 #EB2994 のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E01585、4.53:1）を使う。
• info-table は文字 #A0A0A0 × 背景 #FEFEFE のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.5:1）を使う。

Typography

• 見出しは太い丸ゴシックの白抜きで、中央揃えにする。
• 本文は字間を広めにとり、行間は 1.9 前後。
• 強調語は紫の帯で囲み、帯の中は白文字にする。
• 英字見出しは丸みのある太い欧文を使い、リボン帯の上に載せる。
• 商品名見出しは黄色にし、上下を金色の点線で挟む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長と組み合わせ提案は、写真とテキストを左右交互の 2 列に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• ファーストビューはロゴ・商品名を上に置き、その下に大きな商品写真をイラストの夜景に重ねる。
• 特長ブロックでは、アーチ窓の写真とテキストをジグザグに配置する。
• アーチ窓の写真は画面端まで寄せ、片側を断ち切る。
• 余白にはコウモリ・肉球・星を散らす。
• 表とボタンは左右 24px ほどの余白を空けて配置する。

Elevation & Depth

• 基本はフラット。影は使わない。
• 商品写真の切り抜きにだけ、ごく薄い影をつけて浮かせる。
• 奥行きは、金色の枠線と色の重なりで表現する。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 120px。ボタンはピル型。
• 写真の切り抜き: 上辺が半円アーチの窓形に、金色の縁取りと紫カーテンを添える。商品は切り抜き写真にする
• セクション境界: 金色の縁取りをした山形の境界。中央に三日月を置く。最下部は夜の街並みシルエットにする
• ボタンはピル型で、右端に丸い矢印アイコンを入れる。
• 情報カードは角丸 12px で、四隅に肉球を飾る。
• リボン見出しは両端を燕尾形にする。
• 吹き出しは白い円形にし、中にアイコンを入れる。

Components

• 黄色の詳細ボタン（button-primary）: 黄色のピル型ボタン。右端に白い丸の矢印を入れる
• 白の遷移ボタン（button-secondary）: マゼンタ地の上に置く白いピル型ボタン。ピンク文字で、右端にピンクの丸矢印を入れる
• 黄色の見出し帯（heading-bar）: 情報セクションの見出しに使う、角丸の黄色帯
• 魔女帽子のポイント番号（point-badge）: 紫の魔女帽子を載せた黒い楕円に、黄色の英字で番号を入れる
• アーチ窓の写真枠（arch-window）: 金色の縁取りをした半円アーチ窓。中にカーテンと夜空を描き、商品写真を入れる
• 夜景の囲みカード（story-card）: 金色の枠をつけた紺色カード。上部に街並みのイラストを描き、白文字の本文を入れる
• リボン英字見出し（ribbon-title）: マゼンタのリボン帯に黄色の丸い英字を載せる
• アレルギー表（info-table）: 白い 4 列のグリッドをマゼンタの罫線で区切る。該当セルだけマゼンタで塗る

Do's and Don'ts

Do - マゼンタと紫紺の地を交互に使い、月付きの山形でつなぐ。 - 商品写真は大きく切り抜き、キャラクターや雲を添える。 - 余白にはハロウィンの小さな装飾を必ず散らす。 - 主ボタンは黄色に統一する。 - 本文は白文字で中央か左に揃え、行間を広くとる。

Don't - 白やグレーの平坦な地を広く使わない。 - 細い明朝体や繊細な書体は使わない。 - 強調色を増やさず、マゼンタ・紫紺・黄色の 3 色を主役に保つ。 - 角張ったボタンは使わない。 - 写真を四角く切っただけで置かない。

Page Structure

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

1. ファーストビュー（限定フレーバーを一目で伝える）: マゼンタ地の上部にロゴと商品名を置く。下は夜空のイラストに大きなコーン写真を重ね、キャラクターを配置する。左上には「新作」の丸バッジを置く
2. 商品説明リード（味の構成を短くまとめる）: マーカー付きの 3 行見出しの下に、白文字の本文を置く
3. 素材紹介（構成素材を図解する）: 舞台カーテンのアーチ枠にアイスのアップ写真を入れ、引き出し線のラベルで素材を示す
4. 特長（ポイント）（おいしさの理由を 2 点伝える）: アーチ窓の写真と、帽子バッジ付きのテキストを左右交互に並べる
5. 開発ストーリー（商品の背景で共感を得る）: 金色の枠をつけた夜景カードに、白文字の本文を入れる
6. 組み合わせ提案（関連商品へ回遊させる）: 紫紺のグラデーション地にリボン見出しを置く。商品写真と説明・黄色ボタンをジグザグに並べる
7. 動画紹介（動画で魅力を補う）: 白枠の角丸動画プレーヤーを置く
8. SNSシェア・導線（拡散と店舗への誘導）: 丸い SNS アイコンを 2 つ置き、その下に白いピル型ボタンを 2 列で並べる
9. アレルギー・栄養情報（必要な情報を提示する）: 黄色の見出し帯の下に、白い表とマゼンタのタグを置く
10. フッター（注釈で締める）: 夜の街並みシルエットを描き、白文字で注釈を入れる

Imagery

• 商品は真上や斜め上から撮った切り抜き写真にし、色と質感をはっきり見せる。
• 黒猫・魔女帽子・コウモリ・肉球・星・三日月を、フラットなイラストで描く。
• 夜の街並みはギザギザ屋根のシルエットにし、窓は薄紫で描く。
• 雲は白にし、水色の影をつけた丸いフラット形にする。
• キャラクターは太い線のコミカルな表情で、商品を擬人化する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に 480〜600px 幅のコンテンツ列を置き、左右は地色とドット柄で埋める。
• ジグザグ配置は PC でも維持し、写真の比率だけ大きくする。
• ボタンは最大幅 320px 程度に制限する。
• 表は横幅 600px 程度に収める。

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