--- version: alpha name: Clean Cyan BtoB SaaS Document LP description: 薄いグレーの地に白い角丸カードを重ねた、清潔で信頼感のあるBtoB SaaS LP。見出しは水色の文字と短い下線で統一する。CTAはオレンジの相談ボタンと緑の資料DLボタンの2つを並べる。水色の斜め分割帯の中に白カードを置いたCTAブロックを何度も挟む。紙飛行機と点線の装飾でセクションをつなぐ。 colors: primary: '#1BA8D0' secondary: '#2BD2F2' cta: '#FE8D2B' on-cta: '#FFFFFF' accent-1: '#4ABB7B' background: '#F6F6F8' surface: '#FEFEFE' background-alt: '#ECF9FC' tint-1: '#D5F0F9' tint-2: '#FDF8EA' accent-2: '#FDF4EC' text: '#222222' line: '#EDF7FC' marker: '#F4C21A' cta-accessible: '#BD5801' accent-1-accessible: '#328455' primary-accessible: '#15809E' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Barlow Condensed fontSize: 28px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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: 48px button-secondary: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px cta-block: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 300px heading-underline: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 60px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 220px reason-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 300px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 140px step-chevron: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 140px lead-form: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 480px --- # DESIGN.md — 水色×オレンジCTAの帳票クラウドBtoB LP（Clean Cyan BtoB SaaS Document LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 清潔・爽やか、信頼・誠実、情報量多め・訴求型 - **キーワード**: 白カード・水色アクセント・2択CTA・線画アイコン・紙飛行機モチーフ・斜線付き小見出し - **地の質感**: フラットな単色面。CTA帯だけ水色の斜め分割で奥行きを出す - **形**: 角丸8〜12pxのカード、ピル型ボタン、矢羽型のステップ帯 - **温度感**: 爽やかで涼しい寒色系。CTAのオレンジだけで温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1BA8D0` | 見出し文字・下線・ラベル | 2% | 推定 | | `secondary` | `#2BD2F2` | CTA帯の水色面 | 6% | 画素の実測 | | `cta` | `#FE8D2B` | 主CTAボタン（無料相談） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#4ABB7B` | サブCTA（資料DL）・アウトソーシング帯 | 3% | 画素の実測 | | `background` | `#F6F6F8` | ページの地色 | 14% | 画素の実測 | | `surface` | `#FEFEFE` | セクションカードの面 | 40% | 画素の実測 | | `background-alt` | `#ECF9FC` | セクション内の淡い水色帯 | 12% | 画素の実測 | | `tint-1` | `#D5F0F9` | 帳票例エリアの水色面 | 7% | 画素の実測 | | `tint-2` | `#FDF8EA` | カード見出しのクリーム面 | 3% | 画素の主要色に補正 | | `accent-2` | `#FDF4EC` | カード見出しの淡いピーチ面 | 2% | 画素の実測 | | `text` | `#222222` | 本文・小見出し | 3% | 推定 | | `line` | `#EDF7FC` | カードの枠線・区切り線 | 0% | 画素の主要色に補正 | | `marker` | `#F4C21A` | 数字バッジ・強調の黄色 | 0% | 推定 | | `cta-accessible` | `#BD5801` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#328455` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#15809E` | AA を満たす補正値（計算） | | 計算 | - 地は薄グレー、各セクションは白い角丸カードで区切る - 見出し・下線・アイコン・ラベルは水色で統一する - 主CTAはオレンジ、サブCTAは緑。必ず2つを並べて出す - CTA帯は水色の2トーン斜め分割＋白カードで作る - 3枚カードの見出し部はピーチ・クリーム・淡水色を1色ずつ当てる - 本文はほぼ黒の濃グレーで、色文字は見出しだけにする - `button-primary` は文字 `#FFFFFF` × 背景 `#FE8D2B` のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#BD5801`、4.61:1）を使う。 - `button-secondary` は文字 `#FFFFFF` × 背景 `#4ABB7B` のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#328455`、4.6:1）を使う。 - `faq-item` は文字 `#1BA8D0` × 背景 `#FEFEFE` のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#15809E`、4.51:1）を使う。 - `step-chevron` は文字 `#1BA8D0` × 背景 `#ECF9FC` のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#15809E`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのメインタイトル | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em | | `headline-lg` | セクション見出し（水色） | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.04em | | `headline-md` | 斜線付きの小見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.04em | | `headline-sm` | カードのタイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 注釈・キャプション | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 番号やSTEP表記 | 欧文サンセリフ | Barlow Condensed | 700 | 28px | 1.1 | 0.02em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | - セクション見出しは中央揃えの水色太字にし、下に短い水色の横線（幅40px）を置く - 小見出しは両脇に斜線（＼＼ ／／）を添える - 見出しの下に2行のリード文を中央揃えで入れる - カード本文は左揃えにする - ボタンの上に斜線で挟んだ短いマイクロコピーを小さく入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード群は縦積み、アイコン一覧は 2〜3 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 各セクションは白い角丸カードにまとめ、地のグレーとの間に余白を取る - 見出し→リード→コンテンツの順に中央揃えで組む - 3〜4セクションごとに2択CTAブロックを挟む - アイコン一覧は線画アイコンの下に2行ラベルを置いた均等グリッドにする - 流れはSTEP番号付きの矢羽型帯を横（SPでは縦）に並べる ## Elevation & Depth - カードは影なし、または極薄い影＋細い枠線にする - CTAブロックの白カードは水色帯の上に浮かせる - 紙飛行機イラストの下にだけ淡い楕円の影を付ける ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸の矩形。認証マークやロゴは切り抜いて白地に置く - **セクション境界**: 直線の白カード境界。CTA帯は内部を斜めに分割する - ボタンはすべてピル型にする - 帳票ラベルカードは角丸の白カードにし、水色の上線ラベルを付ける - 数字アイコンは円形の淡色背景にする - STEPは右向き矢羽（シェブロン）形状にする ## Components - **無料相談ボタン**（`button-primary`）: オレンジのピル型ボタン。上に斜線付きの小さなマイクロコピーを置く - **資料DLボタン**（`button-secondary`）: 緑のピル型ボタン。主CTAと横並び（SPでは縦並び）にする - **2択CTAブロック**（`cta-block`）: 水色の斜め分割帯に白カードを置き、ロゴ・2行のリード・2ボタンを入れる - **下線付きセクション見出し**（`heading-underline`）: 水色の太字見出しに、短い水色の下線を付ける - **3枚並び特長カード**（`feature-card`）: 上部に淡色帯の見出し、下に本文を置く白カード - **番号付き理由カード**（`reason-card`）: 左上に大きな水色の番号、中央に円形アイコンを置き、その下に説明文 - **FAQカード**（`faq-item`）: 水色の質問文を中央に置き、回答は淡い水色面に入れる - **STEP矢羽**（`step-chevron`）: 淡い青グラデの矢羽の中に、円形の線画アイコン・STEP番号・ラベルを入れる - **FV内資料請求フォーム**（`lead-form`）: スマホ枠風の黒縁カードに入力欄・同意チェック・緑ボタンを入れる ## Do's and Don'ts **Do** - 見出しは水色の中央揃えに統一し、下線を付ける - CTAは必ずオレンジ（相談）と緑（資料）を並べる - アイコンは細い線画に水色を少し差して揃える - 白カードと淡い水色面を交互に使い、情報を区切る - 紙飛行機と点線の装飾でセクション間をつなぐ **Don't** - 暖色を地色や見出しに使わない（オレンジはCTAだけ） - 濃い影や立体的なボタンにしない - 写真を全面に敷かない - 見出しの書体を明朝や手書きにしない - カードの角を尖らせない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービス名・実績・安心要素を示し、資料請求を促す）: 水色の面にタイトル・実績メダル・円グラフ風バッジ・3つの認証ポイントを置き、右側にフォームを並べる 2. **導入企業ロゴ**（社会的な証明）: 白地にロゴを横一列に並べる 3. **悩みの提起と解決**（課題への共感）: PC画面のモックと、イラスト付きの悩みを2×2で並べる 4. **安心の特長**（導入の不安を解消する）: 淡色見出し帯の3枚カード 5. **CTA**（相談・資料請求に誘導）: 水色の斜め帯に白カードと2ボタンを置く 6. **選ばれる理由**（差別化）: 番号付きの3カードに円形イラストを入れる 7. **仕組み・配信手段**（サービスの流れを理解させる）: 図解を矢印でつなぎ、手段カードと機能アイコン一覧を置く 8. **セキュリティ認証**（信頼性の担保）: 認証マーク入りの3カード 9. **連携・対応帳票**（適用範囲を示す）: アイコングリッド・連携ロゴ・部署別ラベルカードのグリッド 10. **サブサービス訴求**（アウトソーシングの案内）: 緑の斜め帯に白カードとオレンジボタンを置く 11. **お客様の声**（導入事例）: 写真付きの横スライダーカード 12. **よくある質問**（疑問の解消）: 水色の質問文と淡水色の回答面を持つカードを縦に並べる 13. **導入までの流れ**（手順を見える化する）: 6段階のSTEP矢羽 14. **運営会社紹介とフッター**（企業の信頼）: 左にロゴ枠、右に沿革文。最下部にコピーライト ## Imagery - 人物とPCを描いた線画イラスト。黒の線に水色を少し差す - 細線のアウトラインアイコンで機能を表す - 紙飛行機と点線の軌跡をセクション境界に飛ばす - PC画面のモックアップで管理画面を見せる - 事例には自然光のオフィス写真や人物写真を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCの2カラムFVは、SPではタイトル→フォームの縦積みにする - 3枚カードはSPで縦1列にする - 機能アイコン7列はSPで3〜4列に折り返す - CTAの2ボタンはSPで縦に並べ、幅を100%にする - STEP矢羽はSPで縦向きのフローにする - PCの本文幅は約900pxで中央に寄せる ## 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-d9d9b634`（元 LP の URL から採番） - **元 LP**: https://www.attovas.com/lp09/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。