DESIGN.md — ミルク白×深い青のフェルト調アイス LP（Milky Blue Felt Diorama Ice Cream LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ナチュラル、やさしい・柔らかい、清潔・爽やか
• キーワード: 乳白色・深い青・明朝・フェルト手芸・ミルクのしずく・牧場
• 地の質感: 紙やフェルトのざらついた質感。青の面にも細かいノイズを入れ、のっぺりさせない
• 形: 角が大きく丸いカプセル型カード、ミルクが垂れる形、雲の形、丘のカーブ
• 温度感: 前半はひんやり清潔、後半は草と土の暖かみ

Colors

• 地は乳白→深い青→空色→草の緑→土の茶と、物語に合わせて切り替える
• 乳白カード上の文字は青、青地の上は白文字にする
• えんじ色はファーストビューの縦書きと商品の蓋だけに絞る
• 土の面では文字を濃い茶にして温かみを出す
• CTA は青地・空色地どちらでも浮く明るめの水色グラデーション
• page は文字 #0C84BD × 背景 #FEFBF6 のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#0B7AAF、4.61:1）を使う。
• button-primary は文字 #EAFDFE × 背景 #62B4DB のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#257AA2、4.56:1）を使う。
• capsule-card は文字 #0C84BD × 背景 #FEFBF6 のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#0B7AAF、4.61:1）を使う。
• voice-drip は文字 #0C84BD × 背景 #FEFBF6 のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#0B7AAF、4.61:1）を使う。

Typography

• 本文は中央揃えで、行間 2.0 前後とゆったり組む
• 英字ラベル＋点線＋和文見出しを 3 段に重ねる
• 数字は太い欧文セリフで大きく見せる
• 字間は広めにして上品さを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。素材紹介だけ 2×2 グリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 32px（375px 幅換算）
• カードは画面幅の約 86% で中央に置く
• テキストブロックは中央揃え
• セクション境界に形のある装飾（しずく・雲・丘）を入れる
• イラストやジオラマ写真は全幅で見せる

Elevation & Depth

• 乳白カードの下に、やわらかく広い影
• CTA は上下グラデーションと下の影で立体的なカプセル型にする
• 丸いバッジには軽い影をつけて浮かせる

Shapes

• 角丸: 小 12px ／ 中 24px ／ 大 120px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形か、地図のシルエットで切り抜く
• セクション境界: 垂れるミルク、雲、丘の稜線などの有機的なカーブ
• カードは上下が半円に近いカプセル型
• お客様の声はミルクが垂れる吹き出し型
• reason の番号は白い円形バッジ
• 直線の区切りは使わない

Components

• 立体カプセル CTA（button-primary）: 水色グラデーションのピル型で、右端に矢印
• カプセル型特長カード（capsule-card）: 英字ラベル・点線・明朝見出し・本文・イラストを縦に積む乳白色のカード
• 英字ラベル＋点線（label-dotted）: 小さな欧文セリフの下に短い点線を引く
• ミルク滴り吹き出し（voice-drip）: 白い吹き出しの下端からミルクが垂れる。線画の人物アイコンと引用符つき
• reason 番号バッジ（reason-badge）: 白い円の中に英字と大きな数字
• 素材アイコン 2×2（icon-grid）: 青い線画アイコンに番号と英字名。点線の十字で区切る
• 大きな引用符の語り（quote-block）: 青地の上に白文字の明朝。前後に大きな引用符を置く
• 看板型見出し（sign-board）: 茶色い枠の白い看板に青い見出しを書く

Do's and Don'ts

Do - ミルクの白・青・自然の色だけで構成する - セクション境界はしずく・雲・丘のカーブでつなぐ - 後半はフェルト手芸のジオラマ風で、手触りを出す - 見出しは英字ラベル＋点線で統一する - 本文は短い行に区切って中央揃えにする

Don't - 蛍光色や赤い値引きバッジを使わない - 直線や角ばったカードで区切らない - 本文を左揃えで詰めて組まない - 質感のないベタ塗りの面だけで構成しない

Page Structure

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

1. ファーストビュー（濃厚さを直感的に伝える）: ミルクの質感写真を角丸パネルで3段に並べ、縦書きのえんじ色明朝コピーと商品を添える
2. ブランドメッセージ（商品のコンセプトを語る）: 青い絵の具の筆致の背景に、白い明朝の中央揃え文と、ミルクが跳ねる商品写真
3. 特長1 産地（原料の品質を示す）: カプセルカードに見出しを置き、地図形に切り抜いた牧場写真を入れる
4. 特長2 素材（シンプルな原材料を見せる）: カプセルカードに線画アイコンを 2×2 で並べる
5. 開発者のこだわり（作り手の思いで信頼を出す）: 上端からミルクが垂れる青地に、引用符つきの白文字。背景に大きな英字を透かし、商品を重ねる
6. お客様の声（共感を集める）: 滴り吹き出しを3つ。人物アイコンを左右交互に置く
7. CTA・シェア（他の商品へ誘導して拡散してもらう）: 立体カプセルボタンと SNS の丸アイコン
8. 産地ストーリー（原料のこだわりを深く伝える）: 雲形の境界から空色地に変え、点線見出しとフェルトの地図・reason バッジを置く
9. 3つのこだわり（飼育・牧草・土壌を順に説明する）: フェルトのジオラマと看板見出しのあと、Point 番号ごとに白・緑・茶の地へ切り替える
10. 締めの CTA（最後の行動を促す）: 空色地に CTA と SNS、最下部に草原のジオラマ

Imagery

• ミルクやアイスは白い背景で、柔らかい光のマクロ写真にする
• 青い絵の具の大胆な筆致を背景に使う
• 牛・丘・干し草ロール・柵をフェルトや紙で作ったジオラマ風に撮る
• アイコンは青一色の線画にする
• 雲は白くぼかし、空色の上に浮かべる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はない。PC ではコンテンツを最大 480〜600px 幅で中央に置き、左右を地色かジオラマ背景で埋める
• カプセルカードは横に広げすぎず、縦長の比率を保つ
• 素材アイコンは PC で横 4 列にしてよい
• 装飾の境界カーブは全幅のまま伸ばす

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