DESIGN.md — クリーム色と焦茶の有機曲線アイスLP（Creamy Beige Organic Blob Premium Ice Cream LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル
• キーワード: クリーム色・有機的な曲線・明朝体・金茶の欧文・焦茶アクセント・とろける質感
• 地の質感: マットで柔らかい単色面の重なり。うっすら室内写真を透かす程度で、光沢やグラデーションは控えめ。
• 形: アイスの溶けた輪郭のような不定形ブロブ、円形の写真枠、ピル型ボタン。
• 温度感: 暖色寄りで穏やか。ミルクとキャラメルのような温かさ。

Colors

• 地は生成り#EEE7DDを基本に、濃淡ベージュの不定形ブロブを重ねて区切る。
• 濃い色は焦茶1色のみ。ボタン・矢印・再生ボタン・フッターに限定。
• 欧文見出しは金茶で細身に。和文小見出しは濃茶。
• フレーバー名だけは商品の味に合わせた色（緑・赤・水色・橙）を使う。
• 純白は商品カードの円形地と焦茶上の文字のみ。
• category-bubble は文字 #F8F6F1 × 背景 #C39563 のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#946839、4.52:1）を使う。

Typography

• 和文は明朝で統一し、ボタンのみゴシック。
• セクション見出しは英字大＋和文小の2段組みで中央揃え。
• ブランドメッセージは中央揃え・行間2.0で詩的に区切る。
• 商品カードではフレーバー英字を縦組みで写真の脇に配置。
• 太字は小見出しに限り、本文は細く軽く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム、商品はカルーセルで1枚ずつ。PCは3カラム。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション間は広く取り、ブロブ面の切り替えで区切る。
• 見出しは中央、本文ブロックも中央寄せ基調。
• カルーセルは左右に焦茶の円形矢印、下にドットインジケーター。
• カテゴリ見出しは小さなキャラメル色の吹き出しで添える。

Elevation & Depth

• 影はほぼ使わず、面の濃淡で奥行きを出す。
• 商品パッケージ写真のみ柔らかい落ち影を付ける。
• カードは枠線なしで地色との差だけで浮かせる。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 円形または溶けたアイスのような不定形ブロブで切り抜く。
• セクション境界: ゆるやかな大きな曲線・ブロブの輪郭で区切る。直線の区切りは使わない。
• 矩形写真は避け、丸かブロブにする。
• ボタンはピル型の焦茶。
• 吹き出しは楕円形で小さめ。

Components

• 商品詳細ボタン（button-primary）: 焦茶のピル型、白文字に右向き細矢印。
• 英和2段見出し（section-heading）: 金茶の細い英字大見出し、下に和文小ルビ。
• 円形商品カード（product-card）: 白の円にパッケージ写真、脇に縦組み色付きフレーバー名、下に名前と説明。
• カテゴリ吹き出し（category-bubble）: キャラメル色の楕円に白の英字＋和文。
• 円形矢印（carousel-arrow）: 焦茶の丸に白い細矢印。カルーセル左右に。
• 点線つなぎの特長吹き出し（feature-bubble）: 商品写真から点線を伸ばしたクリーム色の楕円に短い特長文。
• ブロブ動画サムネ（video-thumb）: 不定形に切り抜いた動画サムネと左下の焦茶再生ボタン。
• 焦茶バナー（banner-link）: 焦茶地に左写真・右に金茶英字と白和文の横長リンク。

Do's and Don'ts

Do - ベージュの濃淡ブロブを重ねてセクションを作る。 - 写真は円やブロブに切り抜き、余白をたっぷり取る。 - 和文は明朝、英字は細身セリフ/サンセリフで上品に。 - 濃い色は焦茶1色に絞る。 - 商品写真には金のスプーンやとろける質感を添える。

Don't - 原色や蛍光色を地やボタンに使わない。 - 直線的な矩形セクションや強い影を使わない。 - 太いゴシックで大きく煽らない。 - 情報を詰め込みすぎない。 - 純黒を使わず焦茶で代用する。

Page Structure

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

1. ファーストビュー（ブランドの世界観を一目で伝える）: くつろぐ人物写真を全面に、右上に明朝の大きなコピーとロゴ、下端を曲線で切り、焦茶のCM誘導ピルボタン。
2. ブランドメッセージ（ブランドの歴史と思いを語る）: スプーンのアイス写真をブロブで切り抜き、上に白の中央揃え明朝文、下にロゴ。
3. おいしさの特長（食感・味の特徴を3点で示す）: 中央にアイス写真、点線でつないだ楕円吹き出しに短い特長を3つ。
4. 食べるシーン提案（生活の中の利用シーンを想起させる）: 円形イラスト3枚のカルーセル、各下に明朝小見出しと短文。
5. 歴史・レシピ導線（サブコンテンツへ誘導）: 2列で英字見出し、左は本型の歴史画像、右は円形レシピ写真と焦茶の吹き出しリンク。
6. ラインナップ（商品一覧と詳細導線）: サイズ別に吹き出しで分類、円形商品カード3枚のカルーセルとドット、各カードに商品詳細ボタン。
7. 動画（CM・動画を見せる）: 大きなブロブサムネ1つ＋小サムネ3つ、焦茶の再生ボタン、下にタイトル。
8. 出演者プロフィール（起用タレントを紹介）: 大きなベージュの円の中に縦長楕円写真と明朝の経歴リスト。
9. 関連リンク・シェア（外部サイト・SNSへ誘導）: ページトップの丸ボタン、焦茶の横長バナー2つ、ボタン2つ、SNSアイコン。
10. フッター（規約・著作権表示）: 焦茶の帯に白の小さなリンクを横並び、中央にコピーライト。

Imagery

• 暖色の自然光の室内で、くつろぐ人物を柔らかく撮る。
• アイスは金のスプーンですくった断面を寄りで、とろける質感を強調。
• シーン紹介は落ち着いた色の手描き風イラストを円形に。
• 商品パッケージは切り抜き、柔らかな影付きで斜めに配置。
• 背景にうっすら室内写真を薄く透かす程度にとどめる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは3カラムの商品・シーンを1枚ずつのカルーセルにする。
• セクション見出しはSPで英字28〜32px程度。
• 歴史・レシピの2列はSPで縦積み。
• 動画の小サムネはSPで横スクロールか2列。
• プロフィールは写真上・経歴下の縦積みに。
• ブロブ装飾はSPでも残し、画面端からはみ出させる。

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