---
version: alpha
name: Aqua Teal Cloud SaaS LP
description: 淡い水色の地に、ティールの帯と濃紺の文字を合わせた電子契約系 SaaS の LP。CTA だけを鮮やかなマゼンタピンクのピル型ボタンにして目立たせている。白カードに柔らかい影、線画アイコン、アイソメトリックのイラスト、実際の画面キャプチャで機能を説明する、清潔で信頼感のある構成。
colors:
  primary: '#2F98B8'
  background-alt: '#D0F0FB'
  background: '#FEFEFE'
  tint-1: '#F3F3F3'
  cta: '#E7278A'
  on-cta: '#FFFFFF'
  text: '#2C3441'
  text-body: '#4A4F5A'
  accent-1: '#508896'
  line: '#DDE7EB'
  marker: '#E8268A'
  surface: '#FFFFFF'
  cta-accessible: '#E11980'
  primary-accessible: '#277F9A'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  accent:
    fontFamily: Barlow
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.15em
  headline-sm:
    fontFamily: Barlow
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.1em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.1em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.1em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 46px
  cta-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    height: 300px
  section-heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 50px
  numbered-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 260px
  feature-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 340px
  step-item:
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 170px
  faq-item:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 46px
  contact-form:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 900px
---

# DESIGN.md — 水色×ティールにピンクCTAのクラウドSaaS LP（Aqua Teal Cloud SaaS LP）

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

## Overview

- **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 清潔・爽やか、信頼・誠実、クール・先進的、シンプル・ミニマル
- **キーワード**: 淡い水色・ティール帯・マゼンタCTA・白カード＋影・線画アイコン・画面キャプチャ
- **地の質感**: フラットな塗り面に、ぼかしの大きい柔らかな影をつける。FV の背景にはうっすらドットの世界地図を敷く。
- **形**: カードは小さめの角丸、CTA は完全なピル型。CTA 帯にはコーナーだけの細い白い括弧線を添える。
- **温度感**: 寒色寄りでクール。CTA のピンクだけが温度差を作る。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#2F98B8` | CTA帯・お問い合わせ見出し帯のティール | 7% | 画素の実測 |
| `background-alt` | `#D0F0FB` | FV・機能一覧セクションの淡い水色地 | 10% | 画素の主要色に補正 |
| `background` | `#FEFEFE` | 基本の白地 | 50% | 画素の実測 |
| `tint-1` | `#F3F3F3` | お問い合わせセクションの薄グレー地 | 6% | 画素の実測 |
| `cta` | `#E7278A` | 主CTAボタンのマゼンタピンク | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | CTAボタン上の白文字 | 0% | 画素の主要色に補正 |
| `text` | `#2C3441` | 見出し用の濃紺 | 2% | 画素の実測 |
| `text-body` | `#4A4F5A` | 本文のグレー紺 | 3% | 推定 |
| `accent-1` | `#508896` | 番号・小見出し・英字ラベルのティール文字 | 1% | 画素の実測 |
| `line` | `#DDE7EB` | 表や会社概要の罫線 | 1% | 画素の主要色に補正 |
| `marker` | `#E8268A` | フォームの必須マーク | 0% | 推定 |
| `surface` | `#FFFFFF` | カード・FAQ項目の白面 | 12% | 画素の実測 |
| `cta-accessible` | `#E11980` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#277F9A` | AA を満たす補正値（計算） |  | 計算 |

- 地は白・淡い水色・薄グレーの 3 種をセクションごとに切り替える。
- ティールのベタ塗り帯は CTA 帯とお問い合わせの見出しだけに使う。
- マゼンタピンクは CTA ボタンと必須マークだけに使い、他の場所では使わない。
- 見出しは濃紺、小見出しと英字ラベルはティールにする。
- アイコンは濃紺の線画にし、差し色にティールを少し入れる。
- イラストは青系の濃淡に、差し色として少量のピンクを入れる。
- `button-primary` は文字 `#FFFFFF` × 背景 `#E7278A` のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E11980`、4.51:1）を使う。
- `cta-band` は文字 `#FFFFFF` × 背景 `#2F98B8` のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#277F9A`、4.58:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVのキャッチ | ゴシック | Zen Kaku Gothic New | 500 | 19px | 1.4 | 0.05em |
| `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.08em |
| `headline-md` | カード・ステップの小見出し（ティール） | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.5 | 0.05em |
| `accent` | 見出し下の英字ラベル・番号・STEP表記 | 欧文サンセリフ | Barlow | 500 | 9px | 1.2 | 0.15em |
| `headline-sm` | 大きな番号 01/02/03 | 欧文サンセリフ | Barlow | 500 | 18px | 1.2 | 0.05em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 10px | 1.8 | 0.1em |
| `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 500 | 12px | 1.2 | 0.1em |
| `note` | コピーライト・注記 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.1em |

- セクション見出しは中央寄せにし、直下に小さなティールの英字大文字ラベルを置く。
- 文字間はどこも広め（0.05〜0.15em）にとる。
- 本文は小さめにし、行間を 1.8 前後とってゆったり読ませる。
- 番号・STEP 表記は欧文サンセリフで、ティールまたは濃紺にする。
- 機能カードは、小さな英字の機能名と大きな日本語見出しを 2 段で組む。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
- カードは画面幅の約 94% にし、左右の余白を小さくとる。
- セクション上下の余白は 48〜64px。
- 機能カードの下に画面キャプチャを少し重ねて配置する。
- ステップは縦に並べ、間に下向きのシェブロン矢印を置く。
- 料金表は 4 列の罫線表にし、はみ出す分は横スクロールさせる。

## Elevation & Depth

- カードと FAQ 項目には、大きくぼかした薄い影（0 8px 24px rgba(0,0,0,.08)）をつける。
- 画面キャプチャにも軽い影をつけて浮かせる。
- CTA ボタンは影なしのフラットにする。

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
- **写真の切り抜き**: 画面キャプチャは角丸なしの長方形のまま置き、デバイス画像は切り抜きで置く。
- **セクション境界**: SP は直線で切り替える。PC の FV 下端は雲形の波で区切る。
- CTA は完全なピル型にする。
- カードの角丸は 6〜10px。
- CTA 帯のコピーは、左上と右下のコーナー括弧線で囲む。
- フォームの入力欄は角丸なしの細い枠線にする。

## Components

- **主CTAボタン**（`button-primary`）: マゼンタのピル型ボタン。幅は約 85% で中央に置く。
- **CTA帯**（`cta-band`）: ティールの帯に、白文字のコピー・コーナー括弧線・CTA ボタン・PC とスマホのモックを並べる。
- **セクション見出し**（`section-heading`）: 中央寄せの濃紺の日本語見出しに、ティールの英字小ラベルを添える。
- **番号付き特長カード**（`numbered-card`）: カード上端に大きなティールの番号を重ね、線画アイコン・ティールの見出し・本文を並べる。
- **機能カード**（`feature-card`）: 線画アイコン・英字の機能名・大見出し・本文を入れ、下に画面キャプチャを重ねる。
- **ステップ**（`step-item`）: STEP 番号・線画アイコン・ティールの見出し・本文をまとめ、下向きのシェブロンでつなぐ。
- **FAQアコーディオン**（`faq-item`）: 白いカードの左にティールの線画の Q、右に下向きのシェブロンを置く。
- **問い合わせフォーム**（`contact-form`）: ティールの電話番号見出しの下に白いフォームを置く。ラベルは太字にし、必須項目はピンクの※で示す。

## Do's and Don'ts

**Do**
- CTA は全てマゼンタのピル型ボタンで統一する。
- アイコンは濃紺の細い線画に統一する。
- 機能の説明には実際の画面キャプチャを添える。
- 見出しには必ず英字ラベルを添える。
- 白・水色・ティールの順に地色を変えて、セクションのリズムを作る。

**Don't**
- CTA 以外にピンクを使わない。
- 暖色系の背景を使わない。
- 影を濃く・硬くしない。
- 写真を多用しない（イラストと画面キャプチャが中心）。
- 見出しに明朝体や装飾書体を使わない。

## Page Structure

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

1. **ファーストビュー**（サービスの価値と無料トライアルへの導線）: 水色の地にドットの地図を敷き、キャッチ・サブコピー・ピンクの CTA・アイソメトリックのイラストを縦に並べる。
2. **サービス概要**（何ができるかの要約）: 白地に、中央寄せの太字リードと小さな本文を置く。
3. **導入メリット**（3 つの利点を提示）: 番号付きの白カードを 3 枚、縦に積む。
4. **CTA帯**（トライアル誘導）: ティールの帯に、括弧線で囲んだコピー・CTA・デバイスのモックを置く。
5. **使用方法**（3 ステップで簡単さを示す）: STEP 番号・線画アイコン・矢印を縦に並べ、最後にまとめの一文を置く。
6. **機能一覧**（具体的な機能の説明）: 水色の地に機能カードを置き、画面キャプチャを重ねて 4 件並べる。
7. **利用プラン**（プランの比較）: 白地に罫線の比較表を置き、対応可否を ○ で示す。
8. **CTA帯（再掲）**（比較後の申込誘導）: 前出の CTA 帯と同じ作りにする。
9. **よくある質問**（不安の解消）: 影付きの白いアコーディオンを 5 件並べる。
10. **運営会社**（信頼の担保）: 項目名と内容を罫線で区切った情報リストにする。
11. **お問い合わせ**（問い合わせ獲得）: 薄グレーの地に、ティールの電話番号見出しと白いフォームを置き、同意チェックとピンクの送信ボタンで終える。

## Imagery

- FV には、書類・ノート PC・ペン・鍵などを描いたアイソメトリックのフラットイラストを置く。配色は青の濃淡に少量のピンク。
- 背景には白いドットで描いた世界地図を、薄く敷く。
- アイコンは濃紺の単線画（豚の貯金箱・雲・書類・ペン・紙飛行機など）。
- 機能の説明には、実際の管理画面のキャプチャを影付きで置く。
- CTA 帯には、ノート PC とスマホにフォーム画面を映したモックを置く。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では特長カード・ステップを 3 カラムの横並びにし、ステップ間の矢印は右向きにする。
- PC の FV は左にコピー、右にイラストを置き、下端を雲形にする。
- PC の機能一覧は、テキストカードと画面キャプチャを左右交互に重ねて配置する。
- PC の CTA 帯は、左にコピーと CTA、右にデバイスモックを置く。
- PC のヘッダーには横並びのナビ・電話番号・ログインボタンを置く。SP ではハンバーガーメニューと TEL ボタンにする。
- PC のフォームは、ラベルを左、入力欄を右に置く 2 列にする。

## Agent Prompt Guide

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-eb2e873d`（元 LP の URL から採番）
- **元 LP**: https://cloudcus.net/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。