DESIGN.md — ティール×マゼンタ×オレンジのEC向けSaaS LP（Teal and Magenta Gradient SaaS Commerce LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、ポップ・元気、信頼・誠実、情報量多め・訴求型
• キーワード: グラデーション帯・2サービス色分け・角丸カード・スマホモック・人物イラスト・英字大見出し
• 地の質感: フラットな白地に淡いラベンダーやクリームの面を敷く。影はごく薄い。
• 形: 角丸 8〜12px のカード、ピル型ボタン、円形の番号バッジ
• 温度感: 明るく軽快な中間温度。ティールのクールさにマゼンタとオレンジの熱量を足す

Colors

• 地は白と淡いラベンダーを交互に置き、セクションの切り替えを示す
• 1つ目のサービスはマゼンタ→紫のグラデ、2つ目はオレンジ→赤のグラデで帯見出しを統一する
• ティールは資料請求ボタンと事例セクションの全面帯だけに使う
• 濃紺は英字の大見出しと主要なお問い合わせボタンに使う
• 数値や強調語はオレンジ赤の文字、キーワードには黄色マーカーを引く
• フッターは黒にし、白文字で締める
• button-secondary は文字 #7FB8B8 × 背景 #FCFFFE のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#467E7E、4.59:1）を使う。
• banner-guide は文字 #F04E23 × 背景 #FBFBFB のコントラスト比が 3.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#D6390F、4.56:1）を使う。
• stat-box は文字 #F04E23 × 背景 #FCF7E1 のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#D6390F、4.55:1）を使う。

Typography

• 英字の大見出しの下に、日本語の小さなサブ見出しを中央にそろえて添える
• 訴求見出しは両側に斜線『\ /』を置いて囲む
• 数値は Montserrat を極太で使い、本文より 2.5 倍以上大きくする
• 強調語は文字色の変更と黄色マーカーを併用する
• 本文は 14px・行間 1.8 で読みやすさを優先する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能カードと導入フローは縦積みにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• サービス紹介は大きな白カードの上端にグラデ帯の見出しを付け、その中に機能カードを並べる
• ロゴは枠付きの正方形で横並びにし、SP では 2〜3 列にする
• 悩みはイラストと吹き出しカードを組にして並べる
• CTA ブロックは 2 ボタンと資料バナーのセットで繰り返す
• FAQ はサービス別にグラデの見出しバーで分ける

Elevation & Depth

• カードにはごく薄い影（0 2px 12px rgba(0,0,0,0.06)）を付ける
• 固定ヘッダーのボタンにも軽い影を付ける
• フラットな面が基本。影を重ねすぎない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 14px。ボタンはピル型。
• 写真の切り抜き: スマホ画面は角丸のモックに入れ、写真は角丸 8px の長方形で切る
• セクション境界: 直線で区切り、背景色の切り替えで分ける。訴求の間には縦の点線を入れる
• ボタンはすべてピル型
• ステップ番号は円形のグラデバッジにする
• 見出しのラベルは角丸の白い枠付きタグにする

Components

• お問い合わせボタン（button-primary）: 濃紺で塗ったピル型。小さな前置き文を添える
• 資料請求ボタン（button-secondary）: 白地にティールの枠と文字を付けたピル型
• 資料誘導バナー（banner-guide）: オレンジ枠の横長バナー。左に人物イラスト、マーカー付きの問いかけ文
• サービス見出し帯（service-header）: カード上端に付けるグラデ帯。白文字とロゴを中央に置く
• 機能カード（feature-card）: グレー地に画像を置き、番号付きの見出しと説明文を続ける
• 悩み吹き出し（worry-bubble）: 人物イラストの横に白い枠付きカードを置き、悩みを短く 2 行で書く
• ステップ番号（step-badge）: 円形のグラデバッジに STEP と数字を入れる
• 実績ボックス（stat-box）: クリーム地に大きな倍率数値、右側に UP バッジ付きの指標を縦に並べる
• FAQ行（faq-item）: Qアイコン、質問文、右端の＋を並べ、下線で区切る

Do's and Don'ts

Do - 2つのサービスはグラデの色で常に区別する - CTA は資料請求とお問い合わせを並べて置く - 数値実績を大きく見せ、注釈を小さく添える - スマホ画面のモックで機能を見せる - 英字の大見出しと日本語のサブ見出しを対にする

Don't - サービスの色を混ぜたり入れ替えたりしない - ボタンを角張った形にしない - 暗い背景をフッター以外に広げない - 本文に強い原色を使わない - 影を濃くしない

Page Structure

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

1. ファーストビュー（価値と成果を一言で伝える）: 店舗の写真に白い霞をかけ、色帯付きの太字コピーを置く。右にスマホを持つ手、下に CTA 2つとバナー
2. 実績（改善数値で信頼を得る）: クリームのボックスに倍率の大きな数値と UP 指標を並べる
3. 導入企業ロゴ（社会的証明を見せる）: 斜線で囲んだ見出しの下に、枠付きのロゴを横並びにする
4. 悩みの提起（ターゲットの課題に共感する）: ラベンダー地に人物イラストと吹き出しを 5 つ並べる
5. 解決策の概要（仕組みを図で示す）: 白カードの中に 2 サービスを左右に置き、円で囲んだ自社サイトの図とつなぐ
6. サービス紹介（機能を詳しく説明する）: グラデ帯付きの大カードに、番号付きの機能カードを 2×2 で並べる
7. CTA（問い合わせへ誘導する）: マーカー付きの見出しの下に、ボタン 2つとバナーを置く
8. 導入事例（具体的な成功例を見せる）: ティールの全面帯に動画サムネイルカードと社名・見出し・要約を置く
9. 導入フロー（導入の手軽さを示す）: サービス別のカードに 3 ステップを矢印でつないで並べる
10. よくある質問（不安を解消する）: 左に英字見出し、右にサービス別のグラデバーとアコーディオンを置く
11. 最終CTA・フッター（最後の申込導線）: 薄い写真の上に CTA を置き、その下に黒いフッター

Imagery

• 人物は線画にフラットな塗りのイラスト。ビジネス服でティールの差し色を入れる
• スマホやPCの画面モックで管理画面や動画を見せる
• アパレル店舗の明るい写真に白い霞をかけて背景に使う
• SNSアイコンや矢印で流れを図解する
• 写真は明るく、自然光で撮った清潔な印象にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では機能カードとフローを 1 列に縦積みする
• FAQ の英字見出しは SP では上に置いて中央にそろえる
• ファーストビューのスマホモックは SP ではコピーの下に配置する
• ロゴは SP では 2〜3 列のグリッドにする
• 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 行書くと起動時に読み込まれる。