DESIGN.md — 金×深紅の和風プレミアムアイス LP（Gold and Crimson Premium Ice Cream LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、和風、力強い・インパクト
• キーワード: 金箔・日の丸・富士山モチーフ・縦書き極太明朝・半透明パネル・クリーミーな質感
• 地の質感: 金箔の揺らぎ、アイスの表面を接写した写真、白い霧のぼかし
• 形: 大きな角丸パネル、商品の円形カップ、赤い円（日の丸）
• 温度感: 暖色寄り。金と深紅に、クリーム色の柔らかさを足す

Colors

• 地は白〜クリーム系の半透明パネル。背景には商品の質感写真を透かす
• 金はFVの地と欧文見出しにだけ使う
• 深紅は商品名・強調文・枠線ボタン・帯に限定する
• 商品カードは各フレーバーの色（クリーム・ベージュ・淡い抹茶）でうっすら色分けする
• 本文は黒。赤で強調するのは1段落に1か所まで

Typography

• キャッチは極太明朝の縦書きで、左右に振り分ける
• セクション見出しは金色の欧文セリフ体で1語にする
• 和文見出しは明朝。引用符で強調語をくくる
• 本文はゴシックで中央揃え。短い改行で段落を分ける
• 概要表は、ラベルを均等割りの左列、値を右列に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は商品だけ 3 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 36px、基本単位 8px、カード内 24px（375px 幅換算）
• 全セクションを半透明の白い角丸パネルに収め、背景写真の上に浮かせる
• パネル同士の間は36px前後空け、背景写真を見せる
• 商品カードは写真→商品名→説明→素材写真→ボタンの順に縦に積む
• 見出しはパネル上端から24px下に中央寄せで置く

Elevation & Depth

• 影はほぼ使わない。半透明の白で奥行きを出す
• 商品カップ写真に、ごく薄い落ち影をつける
• サブボタンは白地に細いグレー線で表す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品と素材は切り抜きで置く。告知バナーは角丸なしの長方形
• セクション境界: 直線で区切らず、パネルの間に背景写真を見せて区切る
• ボタンは角丸なしの赤い枠線の長方形にする
• 日の丸は正円で、富士山シルエットと組み合わせる
• パネルは大きめの角丸にする

Components

• 半透明パネル（panel-section）: 背景写真の上に重ねる白90%の角丸パネル
• 金の欧文見出し（heading-serif-gold）: セクション頭に置く金色のセリフ体1語
• 商品カード（card-product）: フレーバー色の淡い地に、カップ写真・赤い商品名・説明・素材写真を載せる
• 詳細ボタン（button-outline）: 白地に赤い枠線と赤い文字、右端に外部リンクのアイコン
• 店舗検索ボタン（button-sub）: 白地に細いグレー線の角丸、左にアイコン
• 概要表（info-table）: 均等割りのラベル列と値の2列。注釈は※付きのぶら下げインデント
• 手順帯（step-band）: 赤地に白文字で3ステップ。番号は丸数字、イラストは角丸の枠に入れる

Do's and Don'ts

Do - 金・深紅・クリームの3系統で配色をまとめる - 見出しは欧文セリフ体＋和文明朝で格調を出す - 背景に食材の質感写真を敷き、白パネルで可読性を確保する - 商品カードはフレーバーの色でうっすら色分けする

Don't - ポップな丸ゴシックや蛍光色を使わない - 赤ボタンを塗りつぶしの大きなピル型にしない - 背景写真を直接文字の下に置かない - 金色を本文に使わない

Page Structure

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

1. ファーストビュー（高級感と和の世界観を一瞬で伝える）: 金箔の地、日の丸のロゴ、富士山型のアイス、左右に縦書きキャッチ。下端に3商品の丸いアイコン
2. ブランド紹介（商品コンセプトを伝える）: 白パネルに金の欧文見出し、ロゴ、明朝の見出し、中央揃えの本文。1か所だけ赤で強調する
3. 商品ラインナップ（フレーバーを比較させる）: 色分けした商品カードを縦に3枚。各カードに枠線ボタン
4. 店舗検索（購入場所へ誘導する）: パネル下部に横長の白いサブボタン
5. コラボ告知（期間限定企画を知らせる）: 金×赤の告知バナー画像、明朝のロゴ組み、概要表
6. 食べ方提案（体験を具体化する）: 明朝の見出し、金背景のビジュアル、赤い帯の3ステップイラスト

Imagery

• アイス表面のなめらかな筋を接写し、ページ背景に敷く
• 金の匙・富士山・日の丸を組み合わせた和風の合成ビジュアル
• 商品カップは斜め上から撮り、白背景で切り抜く
• 素材（バニラビーンズ・ココア・抹茶）は小さな切り抜き写真で添える
• 手順はやさしい線画の人物イラストで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はパネル幅を約75%で中央寄せにし、背景写真を広く見せる
• PC は商品カードを3カラムに並べる
• PC では和文見出しを1行にまとめる
• PC の食べ方提案はビジュアルと手順を左右に並べる

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