DESIGN.md — コーラル×淡色パステルのクリエイター向けSaaS LP（Soft Coral Pastel Creator SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: やさしい・柔らかい、シンプル・ミニマル、信頼・誠実、清潔・爽やか
• キーワード: コーラルピンク・パステル面の切り替え・広い字間・ピル型ボタン・フラットイラスト・スマホ画面モック
• 地の質感: グラデーションをほぼ使わないフラットな単色面。影はごく弱い
• 形: ピル型ボタン、円形バッジ、角丸の端末モック、角丸が小さいカード
• 温度感: 暖色寄り。ピーチとベージュに寒色の淡グレーブルーを差して温度を整える

Colors

• セクションごとに白・ベージュ・淡ピーチ・淡ブルーグレーの地を交互に切り替える
• コーラルは主CTA、ロゴ、Q.の頭文字、強調数字だけに使う
• サブボタンは白地に淡い枠線と青紫寄りグレー文字で控えめにする
• 数字の訴求は淡ピーチの円の中に濃グレーの大きな数字で置く
• フッターだけ濃グレーで締める
• 黒は使わず、文字は濃グレーにする
• button-primary は文字 #FFFFFF × 背景 #FB717A のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#ED0716、4.52:1）を使う。

Typography

• セクション見出しは細字で字間0.2em前後。2行に分けて中央揃えにする
• 見出しの下に小さな一行リードを添える
• 数字は単位を小さくして数字だけを大きくする
• 本文は左揃え、見出しとリードは中央揃え
• 太字は小見出しとボタンだけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。機能やイラストのグリッドはSPで2列、PCで3〜4列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの上下余白は広め（56〜72px）
• 見出し→リード→コンテンツ→ボタンの順で中央に揃える
• 機能紹介はイラスト・小見出し・説明文の縦積みカード
• FVは左にロゴ・コピー・CTA、右にスマホモックを横に並べる
• FAQは点線区切りのアコーディオン

Elevation & Depth

• 端末モックとサポートカードにだけ、ごく弱い影をつける
• 資料サムネイルに薄い落ち影をつける
• それ以外はフラットにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物写真は縦長の矩形で、細い淡ピンク枠をつける。担当者写真は円形
• セクション境界: 直線で背景色を切り替えるだけ
• ボタンはすべてピル型
• 数字バッジや相談項目は円形
• スマホモックは大きな角丸
• カードの角丸は小さめ

Components

• 主CTAボタン（button-primary）: コーラル塗りのピル型。白い太字
• サブボタン（button-secondary）: 白地に淡グレー枠のピル型。もっと見る系の導線に使う
• 実績バッジ（stat-badge）: 月桂樹装飾で挟んだ小ラベルと大きな数字
• 料金円（price-circle）: 白または淡ピーチの円の中に大きな数字。円の間に＋記号を置く
• スマホ画面モック（phone-mock）: 角丸の白い端末枠。中に写真・価格・小ボタンを入れて横に並べる
• 機能カード（feature-card）: フラットイラストの下に太字の小見出しと説明文を置く
• 担当者相談カード（support-card）: 円形の人物写真とコーラルのボタン。淡ピーチの枠線つき
• FAQ行（faq-item）: コーラルの「Q.」と質問文、右端にシェブロン。下に点線

Do's and Don'ts

Do - セクションの地色を淡いパステルで交互に変える - 見出しは細字・字間広め・中央揃えにする - CTAはコーラルのピル型で統一する - 人物はフラットで柔らかい色のイラストにする - 数字訴求は円形の枠に入れて大きく見せる

Don't - 濃い原色や黒の面を本文の地に使わない - 見出しを極太にしない - 強い影やグラデーションを多用しない - コーラルを本文や広い面に使わない - 角ばった四角ボタンにしない

Page Structure

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

1. ファーストビュー（何ができるかと無料であることを伝える）: ベージュ地。上部に実績バッジ3つ、左にロゴ・コピー・箇条書き・0円の円バッジ・CTA2つ、右にスマホモックを横並び
2. 導入説明（利用規模と使い方の幅を伝える）: 白地。左に端末画像、右に段落の本文
3. 資料ダウンロード（検討層をリードとして獲得する）: ベージュの枠に資料サムネイルと主CTAを置く
4. オールインワン訴求（機能の網羅性を見せる）: 淡ピーチ地。中央にスマホ、周囲に機能アイコンを円形に配置
5. サポート訴求（不安を解消する）: 青白地。満足度の数字、円形の相談項目3つ、担当者相談カード
6. 機能一覧（機能を具体的に示す）: 淡ブルーグレー地。イラスト付きカードを3列×3段、最後にサブボタン
7. 料金（無料と手数料をはっきり示す）: 淡ピーチ地。円の数字を＋でつなぎ、下に主CTA
8. 活用事例（実際の利用者で信頼を得る）: ベージュ地に縦長の人物ポスターを3列×2段
9. 利用ジャンル（自分ごと化を促す）: 白地にジャンル別のフラットイラストを4列×2段、下にラベル
10. 記事・メディア掲載（第三者評価を示す）: 記事バナーを3列、ロゴを4列で並べる
11. よくある質問（疑問を解消する）: 淡ピーチ地に点線区切りのアコーディオン
12. クロージングCTA（最後に申込を促す）: FVと同じ構成を繰り返す
13. フッター（ナビとSNSへの導線）: 濃グレー地に白い小文字のリンク列とSNSアイコン

Imagery

• 人物イラストはフラットで線が少なく、ミント・ピンク・ラベンダーを差し色にする
• 写真は明るい自然光で、ヨガや手作業など個人が教える場面
• 事例は人物写真に明朝の縦書きキャッチを重ねた雑誌風ポスター
• 端末モックの中にサービス画面を入れて見せる
• 月桂樹のラインイラストで実績を飾る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPではFVを縦積みにする（ロゴ→コピー→CTA→スマホモックの横スクロール）
• 機能カードはSPで1〜2列
• 事例ポスターとイラストグリッドはSPで2列
• 料金円はSPで縦並びか小さくして横並び
• グローバルナビはSPでハンバーガーメニューにし、CTAは右上に残す

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