DESIGN.md — 暗色写真×ティールの診断型IT比較LP（Teal Diagnostic SaaS Comparison LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 診断型・2択ボタン・ティール・淡いミント地・オレンジの結論文・月桂樹実績バッジ
• 地の質感: フラットな面と、暗いトーンをかぶせた写真の組み合わせ。影は診断カードにわずかに付く程度。
• 形: 角丸は小さめ（4〜12px）。下向き三角で流れをつなぎ、丸い黄色バッジを差し色にする。
• 温度感: 寒色（ティール・ミント）が基調。結論文のオレンジだけが暖色。

Colors

• ファーストビューと最後の CTA は、暗い写真に黒っぽいオーバーレイをかけた地にする
• 本文セクションは白地と淡いミント地 #EDF7F8 を交互に置く
• 行動を促すボタンはティールのグラデーション1色にそろえる
• 結論文だけオレンジにして、それ以外で暖色は使わない
• 見出しは濃いティール、本文は濃いグレー
• 黄色は特典バッジと月桂樹アイコンの金色だけに使う

Typography

• 書体は太めのゴシック1種類だけ
• サブコピー内の数字は約1.5倍の大きさで強調する
• セクション見出しは中央揃え、下に短い水色の線を引く
• 本文は小さめで左揃え、行間は広めにとる
• 結論文は中央揃えで、2〜4行に分ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はメリットを 3 カラム、比較ポイントを画像左・文字右の横並びにする
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 診断カードは画面幅の約80%で中央に置く
• 2択ボタンは横に2つ並べる
• メリットは小見出し→イラスト→本文の縦並びを3回繰り返す
• 各セクションの最後は下向き三角→結論文で締める
• 比較表は横スクロールの画像で見せ、その下に比較項目の箱を縦に並べる

Elevation & Depth

• 診断カードには薄い影と角丸12pxを付ける
• 比較表の画像には弱い影を付ける
• それ以外の要素はフラットにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: イラストは不定形の淡いブロブ背景の上に載せる。人物アイコンは円形に切り抜く
• セクション境界: 直線で背景色を切り替える。セクション内は下向き三角でつなぐ
• ボタンは角丸4pxの四角
• 吹き出しは角丸で、小さなしっぽを付ける
• 特典バッジは正円の黄色にする
• 比較項目の箱は角丸なし、細い枠線で囲む

Components

• 診断カード（diagnostic-card）: 白いカードに質問文を書き、下に2択ボタンを置く
• 2択診断ボタン（button-primary）: ティールのグラデーション地に白文字と丸い矢印アイコン。大きめに作る
• 案内人物の吹き出し（speech-balloon）: 円形に切り抜いた人物イラストの横に白い吹き出しを置き、診断へ誘導する
• 月桂樹の実績バッジ（laurel-badge）: 金色の月桂樹の間に実績の数字を書き、3つ横に並べる
• 下線つき見出し（heading-underline）: 中央揃えの見出しの下に短い水色の線
• 白い箱の見出し（heading-box）: ミント地の上に白い箱を置き、中に見出しを入れる
• 三角＋結論文（arrow-conclusion）: 下向き三角の下にオレンジの大きな結論文を置く
• 特典丸バッジ（bonus-badge）: 黄色の正円にティールの文字を2行で入れる
• 比較項目の箱（item-box）: 淡いティールの地に枠線を引いた横長の箱。項目名を左揃えで入れる

Do's and Don'ts

Do - ファーストビューに診断の質問と2択ボタンを置き、すぐ答えられるようにする - 各セクションは三角と結論文で締める - 白地とミント地を交互に置く - イラストは淡い青紫のフラットイラストでそろえる - ページ最後でファーストビューの診断ブロックを再掲する

Don't - オレンジを結論文以外に使わない - ボタンをピル型や派手な色にしない - 装飾的な書体や明朝体を使わない - 強い影やグラデーションを多用しない - 写真の上にカラフルな装飾を足さない

Page Structure

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

1. ヘッダー（ロゴを示す）: 白地の細い帯の左にロゴを置く
2. ファーストビュー（診断）（診断を始めてもらう）: 暗い写真の上に白い大見出しと、強調した数字入りのサブコピーを置く。その下に白い診断カードと2択ボタン
3. 案内と実績（気軽さと信頼を伝える）: 人物の吹き出しを置き、月桂樹バッジ3つと注釈を並べる
4. メリット（サービスを使う利点を3つ示す）: 白地。小見出し、イラスト、本文を縦に3回繰り返し、三角とオレンジの結論文で締める
5. 比較のポイント（選び方を教える）: ミント地に白い箱の見出しを置く。続けてイラスト、濃いティールの小見出し、本文を3回繰り返し、最後に結論文
6. 診断特典・比較表（診断後に比較表が使えることを伝える）: 黄色の丸バッジを置き、見出しは淡いティールの帯の上に置く。比較表の画像を見せ、比較項目の箱を4つ並べて、結論文で締める
7. 最終CTA（診断を再度すすめる）: ファーストビューと同じ構成を再掲する
8. フッター（運営情報と規約へのリンク）: 黒地に白いロゴを置き、リンクを横に並べる

Imagery

• ファーストビューは、PC作業中の手元やチェックリストを写したオフィス写真に、暗い紺のオーバーレイを重ねる
• メリットは、スーツの人物とアイコンを描いた青紫×黄色のフラットイラストを淡いブロブの上に置く
• 比較ポイントは、青系のビジネスイラストを横長に切り抜いて使う
• 案内役は女性ビジネスパーソンのイラストを円形に切り抜く
• 実績は金色の月桂樹アイコンで飾る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューの見出しを1行にし、2択ボタンを横長にする
• PC はメリットを3カラムに並べる
• PC の比較ポイントは、画像を左・文字を右に置く
• PC は比較表を左、比較項目を右の2カラムにする
• PC は吹き出しの人物をカード右下に配置

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