DESIGN.md — 紫×白の線画イラスト型 BtoB SaaS LP（Lavender Line-Art SaaS Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、シンプル・ミニマル、情報量多め・訴求型、清潔・爽やか
• キーワード: ラベンダー紫・線画イラスト・細枠カード・比較表・実績バッジ・余白多め
• 地の質感: グラデーションも影もほとんど使わないフラットな面。白と薄グレーの帯を交互に並べる
• 形: 角丸の小さいカードと、ピル型の紫ボタン。カードは 1px の細い枠で囲う
• 温度感: 少し冷たいニュートラルな地に、紫で柔らかい温かみを足す

Colors

• 地は白と #F4F4F6 の薄グレーを交互にしてセクションを区切る
• 主 CTA・枠線・アイコンの差し色は紫 1 色にまとめる
• 料金表では淡い紫から濃い紫へ段階的に濃くし、プランの序列を見せる
• 黄・青緑・黄緑などの多色は、関連サービスを色で見分ける場面だけに使う
• 文字は純黒を避け、#333 のグレーで柔らかく見せる
• イラストはグレーの線画に紫を一部だけ差す
• button-primary は文字 #FFFFFF × 背景 #A67AD4 のコントラスト比が 3.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#915BCA、4.61:1）を使う。
• button-outline は文字 #A576D3 × 背景 #FFFEFE のコントラスト比が 3.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#935BCA、4.54:1）を使う。

Typography

• 見出しは中央揃えの太字ゴシックにする
• 数字（実績・料金・番号）は欧文太字で大きくし、単位は小さく添える
• 強調したい語は紫の文字色にする
• 本文は行間 1.8 前後でゆったり組む
• 見出しの左右に斜線（＼ ／）を置く装飾を使ってよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード群は PC の 3〜4 列を SP では 1〜2 列にする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地の色を白と薄グレーで切り替える
• 見出しの下に中央揃えのリード文を 1〜3 行置く
• カードは同じ高さの格子に並べる
• 悩みのカードと解決のカードを縦に対応させ、矢印でつなぐ
• 料金表は横スクロールさせず、SP ではプランごとのカードに分ける

Elevation & Depth

• 影はほぼ使わず、1px の細枠で面を区切る
• 事例カードにだけ、ごく薄い影か枠を付ける
• 強調したいカードは紫の 1〜2px 枠で浮かせる

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンはピル型。
• 写真の切り抜き: 事例写真は角丸の小さい横長の長方形。人物の写真は切り抜かない
• セクション境界: 直線で切り替える（地色の切り替えのみ）
• ボタンはすべてピル型にする
• カードの角丸は 4〜6px に抑える
• バッジは月桂樹の飾りを付けた数値の形にする

Components

• 主 CTA ピルボタン（button-primary）: 紫の塗りに白の太字。右端に矢印を付ける
• 資料請求のサブボタン（button-outline）: 白地に紫の枠と紫の文字のピル型
• 実績バッジ（award-badge）: 月桂樹の飾りで囲んだ数値と短いラベル。3 つを横に並べる
• 紫枠の解決カード（solution-card）: 紫の細枠の中に線画アイコンとチェック付きの箇条書きを入れる
• 利用の流れのステップ（step-block）: 小さな紫のラベル、STEP 番号の大きな数字、見出し、イラスト、説明文の順に並べる。ステップ間は三角の矢印でつなぐ
• 料金比較表（pricing-table）: 淡い紫から濃い紫へ変わるプランの見出しセルと、大きな数字の料金。おすすめのプランに帯を付ける
• お客様インタビューのカード（case-card）: 上に写真、下に太字の要約の見出しと会社・氏名・利用プラン
• お知らせの行（news-row）: 日付、色付きのカテゴリタグ、本文を 1 行に並べる。行ごとに白とグレーを交互にする

Do's and Don'ts

Do - 紫は CTA・枠・強調の 3 か所に絞る - イラストはグレーの線画に紫を 1 色だけ差して統一する - 実績・料金は大きな数字で見せ、注釈は小さく添える - セクションの地色を白と薄グレーで交互にする - カードは格子に並べて高さを揃える

Don't - 濃いグラデーションや強いドロップシャドウを使わない - 紫以外の彩度の高い色を CTA に使わない - 写真を全面に敷いたヒーローにしない - 角の丸いぼってりしたカードにしない - 見出しを明朝体にしない

Page Structure

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

1. ファーストビュー（サービスの価値と実績を一目で伝える）: 左に大見出し・リード文・2 つのボタン・月桂樹の実績バッジ 3 つ、右に線画イラストを置く
2. 実績・導入企業ロゴ（信頼を示す）: メダルの付いた No.1 の大見出しと、導入企業のロゴを 2 段の格子で並べる
3. 価値の要約（選ばれる軸を 3 つで示す）: 薄グレー地に、斜線装飾の見出しと 3 列の短い見出し、チェックの箇条書きを置く
4. 悩みの提起と解決（課題と解決策を対応させる）: グレー枠の悩みカード 4 つを、矢印でその下の紫枠の解決カード 4 つにつなぐ
5. ご利用の流れ（導入の手軽さを示す）: STEP 番号の付いた 3 つのステップを三角の矢印でつなぐ
6. 料金プラン（価格の安さとプランの違いを示す）: 紫の濃淡で分けた 3 プランの比較表と、各プランのピルボタンを置く
7. セット特典・社会貢献（お得さと企業姿勢を伝える）: 色違いのサービスアイコンと足し算の図、紫枠の社会貢献のボックスを置く
8. 選ばれる理由（機能の詳細を補足する）: 薄グレー地に、イラスト付きの細枠カードを 3 列で並べる
9. 中間 CTA（資料請求・相談・試用へ誘導する）: 紫枠の大きなボックスに、人物のイラストと 3 つのボタンを並べる
10. お客様の声（導入事例で納得してもらう）: 写真付きの事例カードを 3 列の格子に並べる
11. セミナー・コラム（検討段階の人の情報収集を受け止める）: サムネイル付きのカードに、紫のピルボタンを付ける
12. 関連サービス（シリーズ製品を紹介する）: サービスごとの色の太枠カードを 3 列で並べる
13. お知らせ・ヘルプ（更新情報とサポートを示す）: 日付とタグの付いたリスト、サムネイル付きのヘルプカードを 2 列で並べる
14. フッター（サイト内を回遊させる）: 薄グレー地に、ロゴと 4 列のリンクリストを置く

Imagery

• 人物や書類・PC をモチーフにしたフラットな線画イラスト。線はグレー、ポイントだけ紫で塗る
• アイコンは線画にし、四角い紫枠のカードの中に置く
• 事例の写真は会議室やオフィスで撮った自然な人物写真
• 実績は月桂樹の飾りとメダル型のアイコンで見せる
• 関連サービスは同じ立方体のアイコンを色違いで並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 900px にして中央に寄せる。SP は左右に 16px の余白を取る
• ファーストビューの左右 2 カラムは、SP ではテキストを上・イラストを下の 1 カラムにする
• 3〜4 列のカードは SP では 1 列（小さいカードは 2 列）にする
• 料金表は SP ではプランごとの縦のカードに分ける
• ステップ間の横向きの矢印は、SP では下向きにする

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