DESIGN.md — ティール×白の業務効率化SaaS LP（Teal Corporate SaaS Product LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、クール・先進的、シンプル・ミニマル
• キーワード: ティール・ミントグラデーション・UIスクリーンショット・フラットイラスト・英字ラベル・3色CTA
• 地の質感: フラットでノイズのない面。ヒーローだけ白からミントへの淡いグラデーションにする
• 形: 角は小さめに丸める。カードは四角に近い。ボタンは角丸の長方形にする
• 温度感: 爽やかでやや涼しく、落ち着いたビジネスの温度感

Colors

• 地の色は白・ライトグレー・淡いミントをセクションごとに交互に使う
• 特長セクションは濃いティールの帯を左右交互に寄せて置き、リズムを作る
• 強調語はティールの文字にして、上に傍点ドットを付ける
• CTAは色で役割を分ける。トライアルは青、資料請求は緑、問い合わせはオレンジ
• 最終CTAは濃紺の帯、フッターは黒で、ページの終わりを締める
• ティールの帯の上では文字・ボタン枠を白にする
• button-cta は文字 #FFFFFF × 背景 #EC4D1C のコントラスト比が 3.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D74112、4.51:1）を使う。
• button-download は文字 #FFFFFF × 背景 #02A43B のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#028831、4.6:1）を使う。

Typography

• セクション見出しは中央揃えにし、上にティールの英字ラベルを小さく置く
• 本文は行間を1.8前後に広めにとり、読みやすくする
• 強調したい語はティールにして、傍点を付ける
• ヒーローのキャッチは濃紺の帯に白抜き文字で組む
• 太字は見出しとボタンだけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCでは特長を2カラム、理由とシーンを3カラムにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの上下余白は大きめにとる
• 特長はテキストとUI画像を左右交互に並べる
• シーンカードはSPで1〜2列のグリッドにする
• ニュースは日付・バッジ・タイトルの横並びリストにし、細い線で区切る
• 各セクションの最後に中央揃えの小さな一覧ボタンを置く

Elevation & Depth

• UIスクリーンショットのカードには薄くぼかした影を付ける
• それ以外のカードは影を付けず、面の色だけで区別する
• ヘッダーは白地にして、下に細い境界を付ける

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は角丸の小さい長方形にし、ずらしながら重ねてコラージュする。UIはデバイスか白カードに入れる
• セクション境界: 直線で区切り、背景色を切り替えるだけにする
• ボタンは角丸4〜6pxの長方形にし、右端に丸い矢印アイコンを付ける
• 特長番号のバッジは小さいピル型にする
• 問い合わせ情報はティールの細い枠で囲む

Components

• 問い合わせボタン（button-cta）: オレンジの角丸ボタン。右端に白丸の矢印を付ける
• トライアルボタン（button-trial）: 青のボタン。上に小さい誘導文を添え、3色のCTAと並べる
• 資料ダウンロードボタン（button-download）: 緑のボタン
• 詳しく見るボタン（button-more）: ティール帯の上では白地にする。白地の上ではティールの小さいボタンにする
• 英字ラベル付き見出し（section-heading）: ティールの英字の小ラベルと、濃い色の日本語見出しを中央で2段に組む
• 特長の帯ブロック（feature-band）: ティールの帯を片側に寄せ、その上に番号バッジ・見出し・本文を白文字で置く。反対側に白いUIカードを重ねる
• シーンカード（scene-card）: ミントの面の上にアイコン付きの見出しと箇条書きを置く
• ニュースカテゴリバッジ（news-badge）: 淡い黄色の小さいラベル
• キャッチ帯（hero-catch-band）: 濃紺の帯に白抜き文字を置き、ヒーロー写真の上に重ねる

Do's and Don'ts

Do - ティールの帯とミント・白の地を交互に置き、リズムを作る - 機能の説明には簡略化したUIモックを添える - CTAは3色を固定し、役割ごとに色を変えない - 英字ラベル＋日本語見出しの型をすべてのセクションで統一する - イラストはティール・グレー・水色の配色でそろえる

Don't - 濃い原色の背景を大きな面に使わない - 丸ゴシックや手書き書体を混ぜない - ボタンを大きなピル型にしない - 強い影や立体的な装飾を付けない - CTAの色をティールに統一しない（役割が伝わらなくなる）

Page Structure

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

1. ヘッダー（ナビとCTAへの導線）: 白地の左にロゴ、中央にメニュー、右に青と緑の小さいボタンを置く
2. ファーストビュー（製品価値を一言で伝える）: ミントのグラデーション地に、オフィス写真のコラージュと製品UIのノートPCを置く。濃紺の帯でキャッチを載せる
3. 製品概要（何ができるかを短く説明する）: グレーの地。左に円形のフロー図イラスト、右に強調語入りの説明文を置く
4. 特長（主要機能を3つ示す）: ティールの帯を左右交互に置き、テキストとUIカードを並べる
5. 選ばれる理由（導入の利点を示す）: ミントの地に、アイソメ風イラスト・見出し・本文の3列を置く
6. 活用シーン（部門別の用途を示す）: ミントのカードの3列グリッドに、アイコン・見出し・箇条書きを置く
7. サポート（導入後の安心を伝える）: 左に写真コラージュ、右に枠囲みの受付時間と問い合わせボタンを置く
8. ニュース（更新情報の掲載）: 日付・バッジ・タイトルを横並びにしたリストを、線で区切る
9. 最終CTA（申込への誘導）: 濃紺の帯に見出しと3色のボタンを横に並べる
10. フッター（サイトマップと会社情報）: 黒地にロゴとリンクを複数列で並べ、認証マークを添える

Imagery

• オフィスで働く男女の明るい自然光の写真。PCを操作する場面を使う
• 製品UIは白基調のシンプルなモックにし、ティールのアクセントを入れる
• 説明図はティールと水色の線画アイコンとフロー図にする
• 理由セクションは人物入りのフラットなアイソメ風イラストにする
• アバターは丸型のフラットな人物イラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは特長の帯を全幅にし、テキストの下にUIカードを縦に積む
• 理由とシーンのカードはSPで1列にする
• 最終CTAの3ボタンはSPで縦に積み、全幅にする
• ヘッダーのメニューはSPでハンバーガーにまとめ、CTAは1つだけ残す
• ヒーローのコラージュは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 行書くと起動時に読み込まれる。