DESIGN.md — 黄×ピンク×ミントのポップなSNSツールLP（Pop Pastel Gradient SNS SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、かわいい、クール・先進的
• キーワード: 虹色グラデーション・方眼地・黒の太線・吹き出し・絵文字・流れる英字帯
• 地の質感: 細かいノイズ粒子がのった淡いパステルのぼかし背景と、方眼紙のような薄い格子
• 形: 角丸の大きいカード、黒線で囲ったピル型ボタン、波形のセクション境界
• 温度感: 明るく軽快。ややクールな紫グレーに暖色のピンクと黄が入る

Colors

• 地は淡いグレー紫か白。濃色は悩みセクションとフッターだけに使う
• 主CTAは黄→ピンク→ミントの横グラデーションに黒枠を付ける
• 黄は吹き出し見出し・表のヘッダー・強調ラベルに使う
• 悩みピルは紫→ミントのグラデーション地に白文字。強調語は黄文字にする
• 本文の強調語は黄・ピンク・ミントのマーカー背景か、マゼンタ文字にする
• 締めのCTA帯はピンク地に白の方眼を重ねる

Typography

• 和文は太めのゴシックで統一し、丸みのある欧文を英字ラベルにだけ添える
• セクション見出しは英字ラベル(紫)を上、和文の大見出しを下に置いて中央揃えにする
• リード文は中央揃えにし、キーワードにだけマーカー背景を敷く
• 小見出しの左に縦長のグラデーションバーを付ける
• 本文は14px前後。行間は広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。機能カードは横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 大きなカードは画面端から約10pxだけ内側に置き、黒線で囲む
• 比較表と流れの表は横スクロールにする
• セクションの間に流れる英字帯を挟む
• 悩みピルは中央揃えで縦に4つ並べ、間隔は約24px
• 写真は斜めに散らして小さく配置する

Elevation & Depth

• カードは影よりも黒の2px線で立体感を出す
• FVカードは半透明の白と、すりガラスのようなぼかし
• 散らした写真には白フチと薄い影を付ける

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 白フチ付きの角型写真を少し散らして配置し、円形バッジを重ねる
• セクション境界: 悩みセクションの上下は波形。ほかは流れる英字帯か直線
• ボタン・悩み・吹き出しはすべてピル型
• 吹き出しには下向きの小さなしっぽを付ける
• 流れのステップの境目にはV字の切り欠きを入れる
• アイコンは黒線で囲んだ円の中に入れる

Components

• グラデーション主CTA（button-primary）: 黄→ピンク→ミントのグラデーションのピル型ボタン。黒い1.5px線で囲む
• 白ピルボタン（button-secondary）: 白地に黒枠のピル型ボタン。ログインなどの副動線に使う
• 吹き出し見出し（speech-heading）: 黄色地に黒枠のピル型吹き出し。下にしっぽとキャラクターアイコンを付ける
• 悩みピル（pain-pill）: 紫→ミントのグラデーション地のピルに白文字の悩みを書く。強調語は黄色文字
• 流れる英字帯（marquee-band）: 上下を黒線で挟んだ白い帯の中を、丸みのある欧文が横に流れる
• 機能カード（feature-card）: 暗い写真地のカード。上にグラデーションの円形アイコン、白文字のタイトル、区切り線、説明を置く
• 料金比較表（plan-table）: 黄色ヘッダーの白い表。行は細線で区切り、○×で比べる。おすすめ列は淡い黄で強調する
• 導入ステップ（flow-step）: 左にFLOW番号の列、右に内容。最後のステップの番号列はグラデーションにする
• 方眼カード（grid-card）: 白地に薄い方眼を敷き、黒の2px線と大きな角丸で囲んだ大型カード

Do's and Don'ts

Do - CTAは必ずグラデーションと黒枠のピル型にする - 見出しの上に紫の英字ラベルを置く - 背景には方眼か、ノイズのあるパステルのぼかしを入れる - 絵文字やキラキラの装飾を写真のまわりに散らす - セクションの区切りに流れる英字帯を使う

Don't - 角張ったボタンや、枠線のない単色ボタンを使わない - 濃色の面を悩み・機能・フッター以外に広げない - 明朝体や細い書体を使わない - グラデーションの色を黄・ピンク・ミント・紫以外に増やさない - 写真を全面に大きく敷き詰めない

Page Structure

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

1. ヘッダー（ロゴとメニュー）: 白い半透明のピル型バーに、ロゴと黄色の丸いハンバーガーボタンを置く
2. ファーストビュー（価値を一言で伝え、問い合わせに誘う）: すりガラスのカードに、黄色の吹き出しラベル、2行のキャッチ、端末のモックアップ、グラデーションCTAを並べる
3. 流れる英字帯（ブランドの印象付けと区切り）: 黒線で挟んだ白い帯を英字が横に流れる
4. コンセプト（理念と提供価値）: 方眼カードの中央にロゴを置き、写真を散らす。リード文はマーカーで強調する
5. 悩みの提起（課題に共感してもらう）: 上下が波形の紫グレー地に、グラデーションの悩みピルを4つ並べる
6. 特長・機能（機能を一覧で見せる）: 英字ラベル、吹き出し見出しの下に、暗いカードを横スクロールで並べる
7. プラン一覧（料金の比較）: 方眼カードの中に、黄色ヘッダーの比較表を置く
8. 支払いの注意（初回決済のタイミングを補足する）: 白カードにピンクの縦バー付き小見出しを付け、強調語はマゼンタにする
9. 導入の流れ（始めるまでの手順を示す）: FLOW番号の列と内容を5段に積み、最後の番号列をグラデーションにする
10. CTA（新規登録へ誘う）: ピンクの方眼地に吹き出し、キャラアイコン、白ボタンとグラデーションボタンを左右に並べる
11. フッター（ナビと会社情報）: 黒地に虹色のロゴ、白文字のリンクを中央揃えで並べる

Imagery

• 人物写真は店頭で笑顔の客やスタッフを写した明るいカット。白フチを付け、小さく散らす
• 背景はノイズ粒子のあるパステルのぼかしに、モザイク状の四角を重ねる
• ぼかした絵文字(驚き・ハート目)を背景に浮かべる
• 放射状のキラキラ線と、虹色の円形バッジを添える
• ロゴやキャラクターは太く丸い文字で、虹色グラデーションに塗る
• 端末のモックアップには写真のグリッド画面を映す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVを左右2分割にし、左に文字、右に端末を置く
• PCでは悩みピルを横4列に並べる
• PCでは機能カードを3列のグリッドにする
• PCでは比較表と流れの表の全列が見えるようにする
• 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 行書くと起動時に読み込まれる。