DESIGN.md — ティール×ローズの淡色クラウドSaaS LP（Clean Teal Cloud SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、クール・先進的、やさしい・柔らかい
• キーワード: 淡い水色グラデーション・ティールとローズの2色・大きな角丸の白カード・アイソメ風イラスト・ピル型ボタン
• 地の質感: フラットで光沢なし。背景は白〜水色〜うっすらピンクの淡いグラデーション。
• 形: 角丸24px前後のカードとセクション、ピル型ボタン、円形の小さな矢印ボタン。
• 温度感: やや涼しめ。ローズの差し色で温かみを足す。

Colors

• 地は白と淡い水色グラデーションを交互に使い、セクションを角丸で重ねる
• ブランド色ティールは資料DL・一覧ボタン・タブ・数字強調に使う
• ローズは問い合わせ等の最重要CTAと強調下線に限定する
• 見出し下にティールとローズの2つの小さな丸を並べる
• 最下部の相談セクションのみティール全面地に白カードを置く
• 非選択タブは黒地白文字でコントラストをつける
• button-primary は文字 #FFFFFF × 背景 #01ADC5 のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#018092、4.66:1）を使う。
• button-cta は文字 #FFFFFF × 背景 #E9355D のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E61E4B、4.51:1）を使う。

Typography

• 見出しは中央揃え、カード本文は左揃え
• 数字は欧文書体で大きくしてティールで強調
• キーワードの下にティールやローズの短い太線を引く
• 本文は行間広めで字間を少し空ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、カードを縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは上角を大きく丸めた面で重ねて区切る
• カードは画面幅の約90%で中央配置
• CTAボタンは2本を縦に並べ、全幅に近いサイズ
• ロゴ帯は横スクロールで一列
• 見出し→2色ドット→本文→カードの順で構成

Elevation & Depth

• ボタンに淡いドロップシャドウと白い縁取り
• カードは影なしかごく薄い影で、白と淡地のコントラストで浮かせる
• タブボタンに軽い影

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸矩形。FVは大きな円形に切り抜く
• セクション境界: 上角を大きく角丸にしたセクションを重ねる
• ボタンは全てピル型
• 矢印ボタンは小さな円形の淡グレー
• カテゴリラベルもピル型
• カードの角丸は16〜24px

Components

• 資料DLボタン（button-primary）: ティールのピル型、白縁と影、左にアイコン
• 問い合わせボタン（button-cta）: ローズのピル型。無料表記を括弧で添える
• 2色ドット付き見出し（heading-dots）: 中央見出しの下にティールとローズの小丸を2つ
• 特長カード（feature-card）: 白い角丸カードにアイソメイラストと2行の短い特長
• イラスト付きアコーディオン（accordion-tab）: 左にはみ出すイラスト、選択はティール・他は黒のピル
• サービスカード（service-card）: ロゴ・名称・説明文・右下の丸矢印
• 事例スライダー（case-slider）: 写真上部・角丸タブにロゴ・左右に丸矢印
• お知らせリスト（news-list）: 日付＋紺のピルラベル＋下線付きリンク、線で区切る
• 相談パネル（contact-panel）: ティール地の白カード内に資料DL・フォーム・電話を区切り線で縦並び

Do's and Don'ts

Do - 淡い水色〜白のグラデーション地を保つ - ティールとローズの2色CTAをセットで繰り返し配置する - イラストはティールとピンクのアイソメ風で統一 - 角丸を大きく、余白をたっぷり取る - 実績の数字は大きな欧文で強調する

Don't - 濃い原色や黒の広い背景を使わない（タブを除く） - ローズを装飾に多用しない - 角の尖ったボタンやカードを使わない - 写真に強いフィルターをかけない - 明朝体を混ぜない

Page Structure

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

1. ファーストビュー（サービスの価値を一言で伝え、2つのCTAへ誘導）: 円形に切り抜いたオペレーター写真に大見出しと下線、説明文、2色ピルボタン
2. 導入企業ロゴ（信頼性の提示）: 白地に企業ロゴを横一列で流す
3. 選ばれる理由（実績と特長を示す）: 大きな数字の実績文、白い角丸カードに特長を5つ縦積み
4. 成果訴求とCTA（効果を示し行動を促す）: 中央揃えテキストにローズ下線で強調、2色ボタン
5. サービス一覧（製品カテゴリの紹介）: イラスト付きアコーディオンタブ、開くとサービスカードを縦並び、一覧ボタン
6. 導入事例（事例で安心感を与える）: 水色地に写真付きカードのスライダー、丸矢印とプログレスバー
7. お知らせ・コラム（最新情報の提示）: 日付とピルラベル、下線リンクのリスト
8. お問い合わせCTA（資料DL・フォーム・電話へ誘導）: ティール全面地の白カードに3つの導線を区切り線で並べ、各上部に小イラスト

Imagery

• FVはヘッドセットを付けたオペレーターの明るい写真を水色寄りの色調で
• 特長はティール・ピンク・グレーのアイソメ風イラスト（電卓・PC・人物）
• 人物イラストは単色ベタのシンプルなフラット調
• 事例写真は明るいオフィスや店舗、角丸で切り抜く
• 製品ロゴはカード上部中央に余白を取って置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは特長カードを5列横並びにする
• PCはCTAボタンを横2つ並べる
• PCはサービスタブを4列横並びにし、カードを3列で表示
• PCの事例スライダーは3枚同時表示
• PCのお知らせは日付・ラベル・タイトルを1行に
• PCの相談パネルは3カラムに分ける

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