DESIGN.md — 生成りとくすみパステルの推し活ガジェットLP（Soft Pastel Fan-Gear Product LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: かわいい、やさしい・柔らかい、ナチュラル、情報量多め・訴求型
• キーワード: くすみパステル・生成り・推し活・吹き出し・手書き英字・カラバリ
• 地の質感: 生成り紙のような無地と薄いドット・チェック地。写真は自然光で柔らかい。
• 形: 角丸の白カード、雲形吹き出し、斜めのパステル帯、六角形バッジ。
• 温度感: 暖かく柔らかい中間〜やや暖色

Colors

• 地は生成り#F4F1EAと白を交互に使い、セクションごとに淡黄・淡水色・淡ピンクの差し色地を挟む。
• 見出し帯・ラベルは焦げ茶グレーのprimaryに白文字で締める。
• 強調はくすみピンクとターコイズの2色で対比させる。
• 商品カラーのパステルを装飾や比較行の地色にそのまま流用する。
• 原色や高彩度の赤・青は使わない。
• 黄色マーカーは短い一句の強調だけに使う。

Typography

• 見出しは字間を広めにとる。
• 見出しの背後に薄い色の手書き英字を斜めに重ねる。
• 大きな数字はとても大きく太い丸文字で、色面に白抜きにする。
• 強調語は文字色を変えるか、マーカーを引く。
• 本文は短い行で改行し、行間を広めにとる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較・手順は 2 列、同梱品は 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地色を切り替えて区切る。
• 比較は左右2列の行で並べ、中央に番号付き項目ラベルを重ねる。
• 手順は2×2のカードにSTEP番号を付ける。
• カラー一覧は商品写真を左右交互に置き、斜めのパステル帯の上に載せる。
• 人物イラストと吹き出しを左右交互に配置する。

Elevation & Depth

• 基本はフラットで、影は使わない。
• 白カードに極薄の影かグレーの細い線を付ける。
• 商品写真には柔らかい接地影のみ付ける。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き。写真は角丸か角形、スタッフは円形アイコンにする
• セクション境界: 直線で地色を切り替え、一部は斜めの色帯と点線の枠
• 吹き出しは雲形か角丸のふきだしにする。
• 見出しラベルはピル型の濃色帯にする。
• スペックはシンプルな六角形で並べる。
• ステップ枠は細い線の四角にする。

Components

• 濃色ピル見出し（label-pill-dark）: 焦げ茶の地に白文字の短いリード帯。
• お客様の声カード（voice-card）: パステル地の不定形カードに、斜めの吹き出し見出しと商品写真を載せる。
• 悩み吹き出し（worry-bubble）: 人物の線画イラストと雲形の白い吹き出しを組み合わせる。
• 比較行（compare-row）: 左がパステル地で自社の利点、右がグレー地で従来品。中央に「POINT番号＋項目名」の白ラベルを置く。
• 数字解説タイル（number-tile）: ピンクとターコイズの面に白い大きな数字。下向きの矢印で説明の箱へつなぐ。
• スタッフコメント（staff-comment）: 円形のイラストアイコン付きで、淡黄色地にコメントを置く横長の枠。
• 手順カード（step-card）: 大きな数字のSTEP番号、写真、短い説明文を細い線の枠に収める。
• カラー紹介帯（color-band）: 斜めのパステル帯に切り抜き商品を置き、カナと英字筆記体で色名を添える。

Do's and Don'ts

Do - 色はくすみパステルと生成りの範囲に収める。 - 見出しには手書き英字を重ねて柔らかく見せる。 - 数字や比較は図と大きな数字で直感的に示す。 - スタッフや人物のイラストで親近感を出す。 - 注釈は小さい文字で写真の直下に添える。

Don't - 真っ黒の背景や原色のボタンを使わない。 - 角の鋭い硬いデザインで統一しない。 - 長文を詰め込まない。 - 影を強くしない。 - 明朝の重厚な書体を使わない。

Page Structure

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

1. ファーストビュー（商品の全色とカスタマイズ性を見せる）: 自然光の籐椅子に全色の商品を並べた写真。英字ロゴ、カラードット、手書き風コピーを載せる。
2. お客様の声（使用シーンでの満足度を伝える）: パステルの不定形カード4枚に、斜めの吹き出し見出しを付ける。
3. 悩みの提起（選び方の迷いに共感する）: 人物の線画と雲形の吹き出しを交互に置き、中央に大きな問いかけを入れる。
4. 解決提示（商品が解決すると示す）: 濃色のピル見出しを置き、淡黄と淡水色を斜めに分けた地に商品と人物写真を配置する。
5. 比較（従来品との差を示す）: 左右2列の比較行を4つ。中央にPOINT番号を置く。
6. 数字の解説（スペック数字の意味を教える）: グレー地にピンクとターコイズの大きな数字タイルと矢印を置く。
7. 倍率表・特長（会場規模に合うことと、レンズの品質を示す）: 点線の枠の中に淡い色の表を置く。六角形のバッジとレンズの図解を添える。
8. 体験・会場ガイド（実感と使い分けを示す）: スタッフのコメント、比較写真、色分けした座席図のカードを並べる。
9. 軽量設計（携帯性を訴求する）: 手のひらに載せた写真と角丸の白い面を交互に置く。黄色マーカーのコピーを入れる。
10. 使い方手順（操作の不安をなくす）: STEPカードを2×2で並べる。2つの手順でセクションの地色を変える。
11. カラーバリエーション（全色を見せる）: 大見出しの後、斜めのパステル帯に色ごとの切り抜き商品を左右交互に並べる。その後に一覧グリッドを置く。
12. スペック・同梱品（仕様と付属品を伝える）: ベージュ地に寸法線入りの商品図を置き、同梱品を3列で並べる。

Imagery

• 写真は自然光で柔らかく、籐・木・布などナチュラルな小物と合わせる。
• 商品は白背景で切り抜き、各色を同じ角度で撮る。
• 人物は細い線画イラストでゆるく描き、ベタ塗りは少なくする。
• 若い女性が商品を使う写真を、明るい屋内で撮る。
• 装飾は小さな音符・格子・ドットを淡い色で散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版は縦長の1枚絵を中央に固定幅で置く想定。
• SPではそのまま1カラムで、横幅いっぱいに使う。
• 比較と手順は、SPでも2列を保つ。
• PCで横に広げる場合は最大幅を約750pxにし、左右に生成りの地を敷く。

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