DESIGN.md — ミルクベージュ×チョコ茶の有機曲線アイスLP（Creamy Beige Organic Blob Premium Ice Cream LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル
• キーワード: ミルクベージュ・チョコレートブラウン・不定形ブロブ・細身セリフ・とろける曲線・ぬくもり
• 地の質感: フラットな面を、少しずつ明度の違うベージュで重ねる。影は商品の落ち影くらいにとどめる。
• 形: 角のない有機的なブロブ形、楕円、ピル型。セクションの境目は大きな弧にする。
• 温度感: 暖色寄りで、ミルクのようにやわらかく温かい。

Colors

• 地はミルクベージュ系の 3〜4 段階だけで作り、明度差でセクションを分ける。
• ボタン・再生アイコン・矢印の丸はチョコ色だけで塗る。
• 英字の大見出しとサイズバッジには焼き色ブラウンを使う。
• フレーバー名の縦書き英字だけ、商品パッケージの色（青・緑・赤など）を使う。
• 赤は注意書きにだけ使う。
• 純白は商品の背後の円や吹き出しに限り、地色には使わない。
• size-badge は文字 #FCF2EF × 背景 #C4915B のコントラスト比が 2.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#936535、4.6:1）を使う。

Typography

• 和文はすべて明朝でそろえ、ゴシックは使わない。
• セクション見出しは、細い英字セリフの上に小さな和文を添える 2 段構成で中央に置く。
• キーコピーは筆記体風の細い線のかなと、太い明朝の漢字を組み合わせる。
• フレーバー名の英字は、商品の横に縦書きで大きく置く。
• 本文は行間を広め（1.9 前後）にとり、中央揃えにすることも多い。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• 各セクションは中央に寄せ、見出しの上下に余白を広くとる。
• 背景に大きなブロブ面を左右にはみ出して重ね、奥行きを出す。
• 商品は白い円の上に置き、楕円のサイズバッジを円の縁に重ねる。
• 商品カルーセルの下に、フレーバーの色のドットと細い矢印を並べる。
• ボタンは幅いっぱい（左右に 8% の余白）のピル型にする。

Elevation & Depth

• 基本はフラットで、ドロップシャドウは使わない。
• 商品の切り抜き写真にだけ、うっすら落ち影を付ける。
• 立体感は、明度の違うベージュの面を重ねて作る。

Shapes

• 角丸: 小 8px ／ 中 24px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 人物や料理の写真は、不定形のブロブ形または円で切り抜く。プロフィール写真は縦長のカプセル形。
• セクション境界: 大きな弧や波のような曲線で、ベージュの濃淡を切り替える。
• 直角の角は使わない（ブックカバー風の装飾は例外）。
• 吹き出しは楕円のブロブ形にし、点線で写真とつなぐ。
• 再生ボタンと矢印ボタンは、チョコ色の正円にする。
• サイズバッジは、焼き色の横長の楕円にする。

Components

• 商品詳細ボタン（button-primary）: チョコ色のピル型ボタン。白い明朝の文字の右に細い矢印を添える。
• 英字＋和文の見出し（section-title）: 焼き色の細い英字セリフの下に、小さな和文の明朝を添える。
• サイズ表示バッジ（size-badge）: 焼き色の楕円に、白い英字と和文を 2 段で入れる。商品の円に重ねて置く。
• 商品の円カード（product-circle）: 白い大きな円の上に商品の切り抜き写真を置く。横に縦書きの色付き英字、下に商品名と説明を並べる。
• 特長の吹き出し（point-bubble）: 白いブロブ形に短い特長を 3 行で書き、茶色の点線で商品写真とつなぐ。
• 動画の再生ボタン（play-button）: チョコ色の正円に、白い線の三角を入れる。ブロブ形の動画サムネの左下に重ねる。
• フレーバー色のドット（carousel-dots）: フレーバーごとの色のドットを並べ、選択中は外側に輪を付ける。左右に細い矢印を置く。
• 楕円のリンクカード（recipe-link）: チョコ色の楕円に、焼き色の英字と白い和文、矢印を入れる。円形の写真に重ねて置く。

Do's and Don'ts

Do - 写真はブロブ形・円・カプセル形で切り抜く。 - 地色は明度の違うベージュを重ねて作る。 - 見出しは英字セリフと和文明朝のペアにする。 - キーコピーは、細い線のかなと太い漢字の対比で見せる。 - 余白を広くとり、ゆったりした印象にする。

Don't - 四角い写真や直角のカードを並べない。 - ゴシック体や太い角ゴシックの見出しは使わない。 - 原色の帯や派手なグラデーションは入れない。 - 強い影や光沢は付けない。 - 情報を詰め込みすぎない。

Page Structure

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

1. ファーストビュー（人物と商品でブランドの世界観を伝える）: 人物の写真を全面に敷き、下端は波形にする。CM へのチョコ色ピルボタンと SNS シェアのアイコンを置く。
2. キーコピー（味の特徴をひと言で印象づける）: ベージュの地に、筆記体風のかなと太い明朝の漢字を重ねる。商品写真とロゴを添える。
3. ブランドメッセージ（ブランドの歴史と想いを伝える）: とろけるアイスの写真をブロブ形で敷き、白い明朝の文章を中央揃えで 7 行ほど置く。
4. 特長の解説（食感と品質を具体的に見せる）: スプーンに乗せたアイスを中心に置き、白いブロブ形の吹き出し 3 つを点線でつなぐ。
5. 利用シーン（食べる場面を想像させる）: 手描き風イラストを円形で切り抜いたカルーセル。チョコ色の丸い矢印で切り替え、下に見出しと文章を置く。
6. レシピ（アレンジの楽しみ方を提案する）: 料理の写真を円で切り抜き、チョコ色の楕円リンクを重ねる。
7. 歴史（長い歴史による信頼感を伝える）: 古い本の表紙風のイラストを置き、NEXT の矢印でページをめくる。
8. 商品ラインナップ（サイズ・フレーバーごとに商品を紹介する）: サイズごとにカルーセルを分ける。白い円に商品、縦書きの英字、楕円のサイズバッジ、ピル型ボタン、色のドットを配置する。
9. 動画（CM 動画を見てもらう）: ブロブ形のサムネを縦に並べ、それぞれに再生ボタンとタイトルを付ける。
10. 出演者プロフィール（起用した人物を紹介する）: カプセル形の写真の下に、明朝で名前・英字表記・出演作のリストを並べる。
11. フッター（ページ先頭へ戻る）: チョコ色の円の Page Top ボタンを、弧状の境目の上に置く。

Imagery

• 人物は暖色の室内で、自然光のようにやわらかく撮る。くつろいで食べるシーンにする。
• アイスはスプーンに乗せた接写にし、とろける質感と金色のスプーンを見せる。
• 商品パッケージは切り抜き写真にし、少し傾けて動きを出す。
• 利用シーンは、くすんだ茶系の手描き風イラストにする。
• 背景のブロブ装飾は単色ベージュで、少し透けて重なるようにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 900px に制限し、中央に配置する。
• PC では利用シーンと商品を 3 列カルーセルで見せ、中央を主役、左右を見切れにする。
• PC では歴史とレシピを 2 カラムで横に並べる。
• PC では動画を、大きなサムネ 1 つの下に小さなサムネ 3 つを並べる構成にする。
• PC のプロフィールは、写真を左、テキストを右に置く 2 カラムにする。

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