DESIGN.md — 水色×コーラルの業務改善SaaS LP（Friendly Pastel BtoB SaaS Problem-Solution LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 親しみ・手作り感、信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 線画イラスト・悩み→解決・パステル地・ピル型2ボタン・カード反復・資料請求フォーム
• 地の質感: ベタ塗りのフラット面。影はほぼなく、薄い色面の差でブロックを区切る
• 形: 角丸 16px 前後の大きなカード、ピル型ボタン、吹き出し型の悩みボックス
• 温度感: やや暖かい。ピーチとコーラルで親しみを出し、青とターコイズで信頼感を足す

Colors

• 地は白と薄グレーを交互に置き、FV だけピーチ地にする
• 悩みは必ずコーラル。見出し帯の塗りと悩み文の文字の両方で使う
• 解決パネルは製品ごとに水色・薄紫・ミント・グレーとパステル色を変える
• ボタンは 2 色セット。左が資料 DL のターコイズ、右がオレンジのサブ CTA
• フォームのセクションだけターコイズの全面塗りで目立たせる
• ラインナップのタイル見出しは製品ごとに濃い色帯で色分けする
• button-download は文字 #FFFFFF × 背景 #18B9D5 のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#118195、4.57:1）を使う。
• button-sub-cta は文字 #FFFFFF × 背景 #FD9302 のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AC6401、4.59:1）を使う。
• pain-header-bar は文字 #FFFFFF × 背景 #FB8383 のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#ED0808、4.53:1）を使う。

Typography

• 見出しは太字ゴシックを中央揃えにする
• セクション見出しは小さな前置き行と大きな本題の 2 段にする
• 悩み文はコーラル太字で、大きなクォーテーションマークで挟む
• 製品名は欧文サンセリフとアイコンでロゴ風に見せ、上にダッシュで挟んだ分類名を置く
• ボタン上の添え書きは「＼ ／」で挟んだ小さな文字にする
• 本文は 12px 前後で左揃え、1 段落は 3 行以内にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。FV の悩みだけ 2 列×2 段、ラインナップのタイルは 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 悩み→解決のカードを同じ型で 4 回くり返す
• カードは上からコーラル帯、白の悩み部、パステルの解決部の 3 段
• 解決部の最下段に 2 つのボタンと人物イラストを横に並べる
• フォームは淡水色のカードに、項目ごとに区切り線を入れて縦に並べる
• 選択肢はチップ型のボタンを横に並べて折り返す

Elevation & Depth

• 影はほぼ使わず、色面の差で階層を作る
• 悩みの吹き出しは薄グレー塗りだけで影なし
• フォームカードは影なしで、ターコイズ地との色差で浮かせる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 18px。ボタンはピル型。
• 写真の切り抜き: 人物は円形の薄グレー背景に入れる。画面キャプチャは切り抜いてパネルに直接置く
• セクション境界: FV の下は中央に三角の切り欠き。それ以外は直線で地の色を切り替える
• カードは上の角だけを大きく丸めたコーラル帯から始める
• ボタンはすべてピル型。右端に白丸の矢印アイコンを付ける
• 導入バッジはにじんだ楕円形（ブロブ形）にする
• 解決ラベルの下に小さな青い下向き三角を置く

Components

• 資料DLボタン（button-download）: ターコイズのピル型。右端に白丸の下矢印
• サブCTAボタン（button-sub-cta）: オレンジのピル型。右端に白丸の右矢印、上に小さな添え書き
• 悩み見出し帯（pain-header-bar）: コーラルのグラデーション帯に、白い吹き出しアイコンと白文字の悩みを載せる
• 悩みの吹き出し（pain-bubble）: 薄グレーの吹き出しに悩みを 2 行。下に円形の人物イラスト
• 解決ラベル（solution-label）: 青いピル型に解決策を短く書き、下に青い三角を置く
• 導入バッジ（intro-badge）: ブロブ形の色面に「導入」と分類の略称を 2 段で入れる
• 解決パネル（solution-panel）: 製品ごとのパステル地に、ロゴ・キャプチャ・要約・本文・ボタンを入れる
• 選択チップ（form-chip）: 白地に細い枠線の角丸チップ。複数選択できる
• 送信ボタン（submit-button）: 青いピル型で幅広く、中央に置く
• 製品ラインナップタイル（lineup-tile）: 上に濃い色帯の分類名と「>」。下はキャプチャとキャッチを載せた画像バナー

Do's and Don'ts

Do - 悩み→解決のカードは同じ構造をくり返し、解決パネルの地色だけ変える - 人物は線画で描き、薄い肌色とアクセントの色だけを塗る - 1 つのパネルには必ずボタンを 2 つ並べる - 見出し下にはオレンジか青の細い下線を入れる - 悩み文は短く、コーラルの太字で書く

Don't - 写真の人物をメインのビジュアルにしない - 濃い色の地を多用しない（全面塗りはフォームのみ） - ボタンを角張った四角にしない - 悩みと解決の色を混ぜない（悩みはコーラル、解決は青系） - 強い影や立体的な装飾を付けない

Page Structure

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

1. ヘッダー（ロゴと 2 種類の問い合わせ導線）: 白いバーにロゴ。下にターコイズとオレンジの小さなピルボタンを並べる
2. ファーストビュー（課題をまとめて解決できると伝える）: ピーチ地に 2 行の太字キャッチとオレンジの下線。1 行のサブコピーと、困っている社員たちの線画イラスト
3. 悩みの提起（4 つの典型的な悩みと解決策を一覧で見せる）: 2×2 グリッド。吹き出し、円形の人物、コーラルの悩み、青い解決ラベル、三角の順に縦に並べる
4. 解決の導入見出し（悩み別の解決へつなぐ）: 薄グレー地に、小さな前置き行と大見出し、青い下線、1 行の説明
5. 悩み別の解決カード×4（悩みごとに対応する製品を紹介する）: コーラル帯→白の悩み引用→パステルの解決パネル（バッジ、ロゴ、キャプチャ、本文、2 つのボタン、人物）
6. 資料請求フォーム（リードを獲得する）: ターコイズの全面地に黄色と白の見出し。淡水色のカードに選択チップと入力欄、同意欄、送信ボタン
7. 製品ラインナップ（シリーズの製品一覧へ誘導する）: 白地に見出しと青い下線。分類ごとに色を変えた帯付きタイルを 2 列に並べる
8. フッター（会社情報）: 淡水色の地に、中央揃えのロゴ・住所・コピーライト

Imagery

• 人物は黒の線画に、肌色と髪色、スーツの青だけを塗った漫画風のビジネスイラスト
• 案内役としてスーツの男性が◯の札を持ち、OK サインをするイラストを添える
• 製品画面はノート PC とスマホのモックアップで見せ、背景は透過する
• FV は書類の山に埋もれて頭を抱える社員たちの群像を描く
• ラインナップのバナーはパステルのグラデーションに、キャプチャと 3D 風アイコンを載せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 85% 幅にカードを置き、左右の余白は薄グレーにする
• FV の悩みグリッドは PC で 4 列 1 段にする
• 解決パネルは PC でキャプチャと本文を横に並べ、ボタンを横一列にする
• フォームは PC で中央に幅 50% ほどで置く
• ラインナップのタイルは PC で 3 列にする
• PC のヘッダーにはサービス一覧のドロップダウンと 2 つのボタンを右に寄せて置く

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