DESIGN.md — ティール×白の線画イラスト業務SaaS LP（Teal Line-Illustration SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、シンプル・ミニマル
• キーワード: ティールグリーン・線画イラスト・カードグリッド・白×薄グレー帯・ピル型ボタン・業務効率化
• 地の質感: フラットで影はほぼない。細い枠線と薄いグレー面で区切る
• 形: 角丸は小さめのカード、CTA はピル型、比較表は角のない四角
• 温度感: クールだが、ティールとやわらかいイラストで親しみやすい

Colors

• 地色は白が中心。セクションごとに薄グレー（#F3F5F4）の帯を交互に入れて区切る
• ティールはCTA・重要カードの枠線・図の差し色にだけ使う
• 見出しのキーワードには淡いミントの下線マーカーを敷く
• 比較表は列ごとに右へ行くほどミントを濃くして、上位プランを目立たせる
• 黄・橙・紫・黄緑・紺は関連サービスの識別にだけ使う
• 文字は純黒にせず濃いグレーにする
• button-primary は文字 #FFFFFF × 背景 #03CBB5 のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#028576、4.55:1）を使う。

Typography

• 見出しはすべて太字ゴシックで中央揃えにする
• 数字は欧文の太字で大きくし、単位は小さく添える
• サブ見出しは斜線の括り（＼ ／）で挟む装飾を使う
• 本文は行間1.8で読みやすくする
• 注釈は※付きの小さいグレー文字でまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。カードは1列、ロゴやバッジは2列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは見出し、リード文、カード群の順に並べる
• カードは同じ高さでグリッドに揃える
• 悩みから解決への流れは、上下に並べたカードを矢印でつなぐ
• 比較表はSPでは横スクロールにする
• お知らせは日付・ラベル・本文の行リストにする

Elevation & Depth

• 影はほぼ使わず、フラットにする
• カードは1pxの薄グレー枠で区切る
• 強調カードはティールの2〜3px枠にする
• ヘルプカードに限り、ごく薄い影を許容する

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形カードの上部に16:9で入れる
• セクション境界: 直線。背景色の切り替えだけで区切る
• CTAは完全なピル型で、右に矢印を付ける
• 比較表のセルは角丸にしない
• ラベルバッジは角丸2〜4pxの小さい長方形にする
• 実績バッジは月桂樹の枠で囲む

Components

• 主CTAボタン（button-primary）: ティールのピル型で、白文字の右に→を付ける
• サブボタン（button-outline）: 白地に黒またはティールの枠線を付けたピル型
• 実績バッジ（award-badge）: 月桂樹の枠の中に大きな数字と小さなラベルを入れる
• 悩みカード（problem-card）: グレー枠の中に悩みの文と線画を入れ、下の矢印で解決カードへつなぐ
• 解決カード（solution-card）: ティールの太枠の中に、イラストとチェックアイコン付きの箇条書きを入れる
• STEP番号（step-label）: 黒い小ラベルの下に、大きな数字と見出しを置く
• 料金比較表（pricing-table）: ヘッダーをミントの濃淡で塗り分け、行はグレー面で区切る
• 導入事例カード（case-card）: 上に写真、下に見出し・業種・社名・プランを並べる
• マーカー見出し（marker-heading）: キーワードの下半分に淡いミントの帯を敷く
• お知らせ行（news-row）: 日付・色ラベル・本文を並べた行。グレーと白を交互にする

Do's and Don'ts

Do - ティールはCTAと強調の枠線に絞って使う - イラストは黒い線画にティールの面を少し差して統一する - 数字の実績は大きく見せ、注釈を必ず添える - セクションごとに白と薄グレーの背景を交互にする - カード内の要素の順番をすべて揃える

Don't - 濃い影やグラデーションの装飾を使わない - ティール以外の強い色をCTAに使わない - 写真を背景いっぱいに敷いて文字を重ねない - 明朝体や手書きフォントを混ぜない - カードの角丸を大きくしすぎない

Page Structure

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

1. ファーストビュー（何が自動化できるかを一目で伝える）: 左にコピーと2つのボタン、右にティールの線画イラスト。小さい黒ラベルを添える
2. 実績バッジ（信頼を作る）: 月桂樹の枠の数字を4つ並べ、No.1の表記と注釈を付ける
3. 導入企業ロゴ（社会的な証明）: ロゴを横に流すように並べる
4. ベネフィット（選ぶ理由を3軸で示す）: 薄グレーの帯に、マーカー見出しとチェック付きの箇条書きを置く
5. 悩みから解決（課題と解決を対応させる）: 悩みカードを4つ、矢印、ティール枠の解決カードの順に並べる
6. ご利用の流れ（導入イメージを伝える）: STEP番号とイラストを4段で横に並べ、三角の矢印でつなぐ
7. 料金プラン（価格を比較する）: ミントの濃淡で塗り分けた比較表と、列ごとのCTA
8. 選ばれる理由（細かな機能を訴求する）: ティール枠のアイコンカードを3列で並べる
9. CTA（資料請求・相談・試用へ誘導する）: ティール枠の大きなボックスに、イラストとボタンを3つ並べる
10. お客様の声（導入事例を示す）: 写真付きのカードを3列グリッドで並べる
11. セミナー（検討層を育成する）: サムネイル付きのカードの下にピル型ボタンを置く
12. サービス一覧（関連サービスへ導く）: サービスごとの色枠カードを3列で並べる
13. お役立ち情報・お知らせ（コンテンツへ回遊させ、更新を伝える）: チェック付きの記事カードと日付行のリスト
14. フッター（サイト内を案内する）: 薄グレーの地にリンクを4列で並べる

Imagery

• 黒い細線のフラットな線画に、ティールの面を差す
• 人物はやさしい表情の簡略化したイラストにする
• 書類・PC・封筒など業務の小物をアイコン的に描く
• 事例写真はオフィスで社員が立つ自然光の写真
• ロゴは2段の積層ブロックで、サービスごとに色を変える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCの3〜4列のカードはSPで1列にする（ロゴ類は2列）
• FVはSPでコピー、イラスト、ボタンの縦積みにする
• 料金表はSPで横スクロールにするか、プランをカード化する
• STEPはSPで縦に並べ、矢印を下向きにする
• 実績バッジはSPで2×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 行書くと起動時に読み込まれる。