DESIGN.md — ローズ×ミントのポップなカメラ製品LP（Pastel Pop Instant Camera Product LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: ポップ・元気、かわいい、やさしい・柔らかい
• キーワード: パステル・大きな角丸パネル・浮かぶ製品写真・太い欧文見出し・色面ブロック・若者向け
• 地の質感: グラデーションを使わないフラットな単色面。製品の切り抜き写真には柔らかい落ち影を付ける。
• 形: セクション自体を大きな角丸(約40px)パネルにして重ねる。ボタンはピル型、カードは中くらいの角丸。
• 温度感: 暖色のローズと寒色のミントを交互に置き、明るく軽やかにする

Colors

• ローズとミントのセクションを交互に置き、境界は角丸パネルを重ねて作る
• ボタン・矢印・強調の面は深いプラムに統一する
• ローズ地の文字は白、ミント地の見出しはプラムにする
• ページ後半でプラム→バイオレット→グレー→イエローと、ブロックごとに地の色を切り替える
• 製品のパステル色(ラベンダー・ミント・ブルー・ピンク・白)をそのまま差し色として扱う
• ミント色は小さなバッジやボタンの塗りにも使う

Typography

• セクションの見出しは太い欧文を主役にし、和文はその補助にする
• 特長の番号は、細い縦書きの小さな欧文ラベルと大きな数字を組み合わせる
• 和文の見出しは2行に改行して左揃えにする
• 本文は短く、3〜4行で区切る
• 注釈は小さく、明るい地では淡色にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はテキストと製品画像の 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション全体を角丸パネルにして、前のパネルに少し重ねる
• 製品写真は傾けたり大小を付けたりして、余白に浮かせる
• 特長はテキストと写真を左右交互に組む
• リンクボタンは3つ横並び(SPでは縦積み)にする
• アクセサリーやフィルムは白背景のカードに並べる

Elevation & Depth

• 製品の切り抜きに柔らかい落ち影を付ける
• ポラ風写真は白フチに影を付けて、散らばったように置く
• カードやパネルは影なしのフラットにする

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 製品は背景を抜いた切り抜き。人物写真は大きな角丸の枠に入れるか、全幅の帯にする
• セクション境界: 大きく角を丸めたパネルを重ねて区切る。後半は直線で切り替える
• 写真の背景には楕円・ピル型の色面を敷く
• ボタンはすべてピル型にする
• 情報欄は角丸16pxのミント色パネルにする

Components

• アイコン付きリンクボタン（button-link-pill）: プラム地のピル型。左に丸いアイコン、右に矢印を置く
• ミントの小さなバッジ（badge-mint）: 補足ラベルや一覧ボタンに使う小さなピル
• 特長番号（feature-number）: 縦書きの小さなラベルと大きな2桁の数字を組み合わせる
• お知らせパネル（info-panel）: ミント色の角丸パネルに、日付と下線付きリンクを並べる
• 動画カード（video-card）: 大角丸の写真の中央に、ミント色の丸い再生ボタンを置く
• カラー展開スライダー（color-carousel）: 製品を色ごとに並べ、プラム色の丸い矢印と色のサムネイルで切り替える
• アプリ手順カード（step-card）: バイオレット地に、番号付きのSTEPとスマホ画面を3つ並べる
• 記事カード（article-card）: サムネイル・カテゴリ帯・タイトルの順に縦に積む

Do's and Don'ts

Do - ローズとミントの色面を交互に大きく使う - 製品の切り抜き写真を傾けて浮かせる - 英字の大見出しを各セクションの入口に置く - ボタンはプラム色のピル型に統一する - ポラ風の写真を散らして楽しさを出す

Don't - 暗い無彩色をページ全体の地にしない - 四角く硬いボックスを並べない - グラデーションや光沢の表現を使わない - 明朝体を使わない - 1画面に詰め込みすぎない

Page Structure

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

1. ファーストビュー（製品の色の楽しさを一目で伝える）: ローズ地にパステル製品を積み上げて浮かせ、右側に白文字の2行キャッチを置く
2. お知らせ・受賞（最新情報と信頼性を示す）: ミント色の角丸パネルと受賞バナーを横長に置く
3. プロモーション動画（使用シーンを見せる）: 大角丸の動画カードの中央に再生ボタンを置く
4. 製品デザイン（形と色の展開を見せる）: ミント地にプラムの英字見出しを置き、製品を散らす。カラーのスライダーとチュートリアル動画を続ける
5. 特長（機能をわかりやすく説明する）: 全幅の人物写真に英字見出しを重ね、そのあと番号付きの特長を左右交互に組む
6. リンク導線（購入・仕様・マニュアルへ案内する）: プラム色のピル型ボタンを3つ並べる
7. 写真の帯（撮れる写真の楽しさを伝える）: ポラ風写真を斜めに散らした帯にする
8. アクセサリー・フィルム（関連商品を紹介する）: プラム地に白カードを並べる
9. アプリ紹介（アプリの使い方を知らせる）: バイオレット地に3ステップのカードを置く
10. 記事・関連製品（回遊を促す）: グレー地に記事カードを4つ並べ、その下にバナーを置く
11. フッター（サイト内リンクとSNSへ案内する）: イエロー地にSNSアイコンとリンクリストを置く

Imagery

• パステル色の製品を背景から切り抜き、少し傾けて柔らかい影を付ける
• 多様な若者が笑顔で撮り合う、明るく自然なスナップ写真
• 白フチのポラ風写真を重ねて散らす
• 線の細いシンプルなアイコンを、丸い色面の上に置く
• 写真の背後に楕円・ピル型の色面を敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは2カラムで画像を大きく、SPは1カラムでテキストの後に画像を置く
• SPでもセクションの大角丸は残し、半径は24〜32pxにする
• 3つ並びのボタンはSPで縦に積む
• 記事カードはSPで2列か、横スクロールにする
• 英字の大見出しはSPで32〜36pxにする

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