--- version: alpha name: Clean Blue SaaS Tool LP description: 鮮やかなロイヤルブルーと白、淡い青グレーの地を交互に重ねたBtoB SaaS向けLP。太いゴシック見出し、角丸の白カード、塗り＋枠線の2段CTAを繰り返す、信頼感のある構成。 colors: primary: '#1363DE' background: '#FFFFFF' background-alt: '#F1F5FE' surface: '#F4F5F7' cta: '#1363DD' on-cta: '#FFFFFF' text: '#030203' text-body: '#2B2B2B' secondary: '#1763D9' line: '#F1F1F4' tint-1: '#4383E4' accent-1: '#F3AC2C' text-muted: '#A5A4A4' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.45 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 700 lineHeight: 1.45 headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 accent: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.6 rounded: sm: 8px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 26px section: 72px 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.md}' height: 56px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 56px section-eyebrow: textColor: '{colors.secondary}' typography: '{typography.accent}' height: 20px feature-card-blue: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 415px tab-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 38px icon-feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 410px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 730px news-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 30px label-banner: backgroundColor: '{colors.tint-1}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 68px newsletter-form: backgroundColor: '{colors.background-alt}' textColor: '{colors.secondary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 56px --- # DESIGN.md — 青×白の清潔なSaaS校正ツールLP（Clean Blue SaaS Tool LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、シンプル・ミニマル、クール・先進的 - **キーワード**: ロイヤルブルー・白カード・太ゴシック・2段CTA・淡青グレー地・フラットアイコン - **地の質感**: フラットで影はほぼなし。単色の面だけで構成する - **形**: 角丸8〜16pxのカードとボタン。ピル型は小さいバッジとタブだけ - **温度感**: やや寒色で知的。人物写真を円形に切り抜いて親しみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1363DE` | ブランド青（帯セクション・強調文字） | 12% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 47% | 画素の実測 | | `background-alt` | `#F1F5FE` | 淡い青のセクション地 | 12% | 画素の実測 | | `surface` | `#F4F5F7` | レビューカードのグレー地 | 5% | 画素の実測 | | `cta` | `#1363DD` | 主CTAボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `text` | `#030203` | 見出し文字 | 2% | 画素の実測 | | `text-body` | `#2B2B2B` | 本文文字 | 3% | 推定 | | `secondary` | `#1763D9` | 小見出し・リンク・枠ボタン文字 | 0% | 画素の主要色に補正 | | `line` | `#F1F1F4` | 区切り線 | 0% | 画素の主要色に補正 | | `tint-1` | `#4383E4` | 青帯内の半透明ラベル | 0% | 画素の実測 | | `accent-1` | `#F3AC2C` | 評価の星 | 0% | 画素の実測 | | `text-muted` | `#A5A4A4` | 補助グレー文字 | 0% | 画素の実測 | - 地は白→青帯→白→淡青→白→青帯→淡青の順で切り替えて、リズムを作る - 青帯の上には白カードと白文字を置く - 主CTAは青の塗り、副CTAは白地に青枠と青文字にする - 青帯の中のCTAは反転させ、白の塗りに青文字、副は白枠に白文字にする - 見出しの中のブランド名だけ青文字にして強調する - 黄色は星評価にだけ使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.45 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 28px | 1.4 | 0.02em | | `headline-md` | カード・機能の見出し | ゴシック | Noto Sans JP | 700 | 21px | 1.45 | 0.0em | | `headline-sm` | 小見出し・リード太字 | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.0em | | `accent` | 見出し上の青い英日ラベル | ゴシック | Noto Sans JP | 500 | 14px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 16px | 1.8 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.03em | | `note` | 日付・引用元・注記 | ゴシック | Noto Sans JP | 400 | 13px | 1.6 | 0.0em | - 見出しは中央揃えで太く、上に小さな青ラベルを置く - カード内本文は左揃え、特長カードは中央揃え - 書体はゴシック1種類だけにする - 英字ロゴは欧文の太字でまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、横スライダーで補う - **本文ブロックの幅**: 画面幅の約 87% - **余白**: セクション間 72px、基本単位 8px、カード内 26px（375px 幅換算） - 左右の余白は25pxで固定する - 各セクションの終わりに2段CTAを繰り返す - 特長カードは横スクロールのカルーセルにする - 見出しラベルと見出しの間は16〜24pxあける ## Elevation & Depth - カードは基本的に影なしで、地色の差だけで分ける - メディア掲載ボックスだけ、ぼかしの大きい薄い影を付ける - ボタンにも影を付けない ## Shapes - **角丸**: 小 8px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は円形に切り抜き、太い青リングで囲む。図版は角丸の長方形にする - **セクション境界**: 直線の切り替えにする。FV下部では、動画の途中から青帯が始まる重ね配置にする - ボタンは角丸10px前後のフル幅にする - バッジとタブはピル型にする - カードは角丸12〜16pxにする ## Components - **主CTA**（`button-primary`）: フル幅で青塗り、白い太字のボタン - **副CTA**（`button-secondary`）: 白地に青の1px枠、青文字。主CTAの下に置く - **見出し上ラベル**（`section-eyebrow`）: 大見出しの上に置く小さな青文字の説明 - **青帯上の白カード**（`feature-card-blue`）: 青地の上を横スクロールする白い角丸カード。見出しと本文を入れる - **機能タブ**（`tab-pill`）: 選択中は青塗り、他は青枠のピル型タブ。横スクロールさせる - **アイコン特長カード**（`icon-feature-card`）: 淡青地に置く白カード。青い線画アイコン、太字見出し、中央揃えの本文 - **レビューカード**（`review-card`）: グレー地のカード。円形アバター、星5つと点数、太字見出し、本文、引用元リンクの順 - **お知らせバッジ**（`news-badge`）: 日付の横に付ける青いピル型ラベル - **青帯内ラベル**（`label-banner`）: 青地の上の、明るい青の角丸ボックス。白文字で短い説明を入れる - **メルマガフォーム**（`newsletter-form`）: 淡青地に置く白い入力欄、枠線ボタン、同意チェックボックス ## Do's and Don'ts **Do** - 色は青1色と白・淡青・グレーに絞る - CTAは必ず塗りと枠線の2段で並べる - セクションの冒頭は青ラベル＋太字見出しの中央揃えにする - アイコンは青い線画で統一する - 人物写真は円形の青リングで囲み、散らすように配置する **Don't** - グラデーションや強い影を多用しない - 青以外の強調色をCTAに使わない - 明朝体や手書き書体を混ぜない - カードの角を直角にしない - 本文を中央揃えで長く続けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとメニューへの導線）: 白地に左ロゴ、右にハンバーガーメニュー 2. **ファーストビュー**（サービスの価値を一目で伝える）: 円形の人物写真を散らし、青のリード文、黒の太字見出し（ブランド名だけ青）、2段CTA 3. **紹介動画**（使い方を直感的に見せる）: 角丸の動画を白と青帯の境目にまたがるように置く 4. **コンセプト・特長**（導入するメリットを示す）: 青帯に明るい青のラベル、白い見出しと本文、横スクロールする白カード 5. **機能紹介**（主な機能を切り替えて見せる）: ピル型タブ、図版、見出し、本文、矢印付きリンク、2段CTA 6. **課題提起と工程比較**（現場の悩みと解決策を示す）: 淡青地に長めの中央見出しと説明文、アイコン付きの白カードを縦に積み、2段CTA 7. **お客様の声**（第三者の評価で信頼を得る）: グレーのカードをカルーセルにし、矢印と一時停止の操作を付ける。星評価を入れる 8. **メディア掲載**（権威付け）: 影付きの白ボックスに、モノクロのメディアロゴを並べる 9. **お知らせ**（最新情報で活動していることを示す）: 日付と青バッジの一覧を線で区切り、枠線の『もっと見る』ボタンを置く 10. **最終CTA**（申込を後押しする）: 青帯に白い太字見出し、白塗りボタン、白枠ボタン 11. **メルマガ登録**（見込み客を獲得する）: 淡青地に青い見出し、入力欄、枠線ボタン、同意チェック 12. **フッター**（サイト全体へのリンク）: 白地にロゴとSNSリンク、カテゴリ見出しごとのリンク一覧 ## Imagery - 多様な人物の明るい笑顔の写真を、円形の青リングで囲む - アイコンは青一色の線画で、歯車やクリップボードなど業務を表すモチーフにする - アバターは水色の円の中に描いたフラットなイラストにする - 機能図版はUI画面の抽象化した図に、淡い青の帯と見出しを重ねる - メディアのロゴはモノクロで統一する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCはヘッダーにグローバルナビを並べ、右上に青いCTAを置く - PCのFVは見出しを2行の中央揃えにし、人物写真は左右の余白に散らす - PCでは機能紹介を左テキスト、右図版の2カラムにする - PCでは特長カードを2列、レビューを3列で並べる - PCではCTAを横並びの小さめのボタンにする - PCのフッターは4カラムにする ## 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-222a15ba`（元 LP の URL から採番） - **元 LP**: https://uicollabo.com/ja/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。