---
version: alpha
name: Clean Blue Medical BtoB Equipment LP
description: 白地に濃い青と水色を重ねた、医療機関向けの業務機器 LP。ファーストビューの直下に資料請求フォームを置く。課題の提示、解決、特長、選ばれる理由、導入の流れ、使い方のステップ、比較表、導入事例、問い合わせの順に、情報を論理的に積み上げていく。線画アイコンと製品の切り抜き写真で、清潔で信頼できる印象をつくる。
colors:
  primary: '#007CC6'
  secondary: '#01AADB'
  cta: '#017AFE'
  on-cta: '#F1FDFE'
  background: '#FFFFFF'
  background-alt: '#EAEBEC'
  tint-1: '#DCF0F7'
  surface: '#F4F4F4'
  text: '#39393B'
  text-muted: '#6A6663'
  line: '#E9E7E4'
  accent-1: '#D90046'
  marker: '#E6D21E'
  dark-section: '#788083'
  cta-accessible: '#016FE7'
  secondary-accessible: '#017DA1'
typography:
  display:
    fontFamily: Zen Maru Gothic
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.8
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.1em
  headline-sm:
    fontFamily: Zen Maru Gothic
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.08em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 2.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  accent:
    fontFamily: Montserrat
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.0
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  lead-form:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 880px
  button-submit:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 56px
  button-pill:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 56px
  solution-row:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 150px
  feature-card:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.headline-sm}'
    height: 320px
  reason-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 460px
  step-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 400px
  compare-table:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 800px
  check-list:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 200px
---

# DESIGN.md — 青×白の清潔感あるクリニック向け機器 LP（Clean Blue Medical BtoB Equipment LP）

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

## Overview

- **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、シンプル・ミニマル
- **キーワード**: 医療機関向け・業務効率化・青と白・線画アイコン・資料請求フォーム・比較表
- **地の質感**: フラットな単色の面。影はほぼ使わず、薄い灰色の写真背景と水色の帯で変化をつける
- **形**: 四角を基本に、カードはわずかな角丸。ボタンはピル型。STEP の番号は正円
- **温度感**: 涼しく清潔。寒色が主体で、赤は必須バッジと別商品の誘導だけに使う

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#007CC6` | ブランドの濃い青。解決セクションの面と見出し文字 | 6% | 画素の実測 |
| `secondary` | `#01AADB` | 明るいシアン。特長カードの面とアイコン | 6% | 画素の実測 |
| `cta` | `#017AFE` | フォームの送信ボタン | 0% | 画素の実測 |
| `on-cta` | `#F1FDFE` | ボタン上の文字 | 0% | 画素の実測 |
| `background` | `#FFFFFF` | ページの地 | 45% | 画素の実測 |
| `background-alt` | `#EAEBEC` | ファーストビューと製品紹介の薄灰色の背景 | 6% | 画素の実測 |
| `tint-1` | `#DCF0F7` | 導入フロー帯と比較表見出しの水色 | 8% | 画素の実測 |
| `surface` | `#F4F4F4` | フォームボックスの面 | 4% | 画素の実測 |
| `text` | `#39393B` | 見出しと本文の濃い文字 | 3% | 画素の実測 |
| `text-muted` | `#6A6663` | カード内の灰褐色の本文 | 2% | 画素の実測 |
| `line` | `#E9E7E4` | カードの枠線 | 0% | 画素の主要色に補正 |
| `accent-1` | `#D90046` | 必須バッジと別商品へ誘導するボタンの赤 | 1% | 画素の実測 |
| `marker` | `#E6D21E` | 解決ワードに引く黄色の下線 | 0% | 推定 |
| `dark-section` | `#788083` | 導入事例の帯。写真に重ねる灰青色 | 4% | 画素の実測 |
| `cta-accessible` | `#016FE7` | AA を満たす補正値（計算） |  | 計算 |
| `secondary-accessible` | `#017DA1` | AA を満たす補正値（計算） |  | 計算 |

- 地は白。セクションの区切りに薄灰色と水色の帯を交互に挟む
- 強く訴求したい解決セクションだけ、濃い青で全面を塗り、白文字で見せる
- 特長カードはシアンで塗り、白文字で読ませる
- セクション見出しは濃い青の文字にする
- 赤は必須バッジと別商品への誘導ボタンに限る
- 黄色は青い面の上に引く下線だけに使う
- `button-submit` は文字 `#F1FDFE` × 背景 `#017AFE` のコントラスト比が 3.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#016FE7`、4.57:1）を使う。
- `button-pill` は文字 `#F1FDFE` × 背景 `#01AADB` のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#017DA1`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのキャッチ | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.8 | 0.08em |
| `headline-lg` | セクション見出し（青文字・中央揃え） | ゴシック | Noto Sans JP | 700 | 24px | 1.5 | 0.05em |
| `headline-md` | 解決ワード（白抜きの大きな文字） | 丸ゴシック | M PLUS Rounded 1c | 800 | 30px | 1.3 | 0.1em |
| `headline-sm` | カードの見出しと STEP のタイトル | 丸ゴシック | Zen Maru Gothic | 500 | 18px | 1.7 | 0.08em |
| `body-md` | 説明文 | ゴシック | Noto Sans JP | 700 | 13px | 2.0 | 0.05em |
| `note` | 注釈と日付 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.05em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em |
| `accent` | STEP の英数字 | 欧文サンセリフ | Montserrat | 700 | 16px | 1.0 | 0.0em |

- 見出しは中央揃えにし、要所の語だけ青で色分けする
- カードの見出しは丸ゴシックで字間を広めにとる
- 本文は小さめの太字で、行間を約 2.0 とゆったりとる
- 英数字の製品名は欧文に頼らず、和文書体の中でそのまま扱う
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。カードと STEP は縦に積む
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
- フォームはファーストビューの直下に、全幅に近い枠で置く
- 選ばれる理由のカードは幅 70% ほどで中央に寄せる
- STEP カードは下向きの吹き出し三角でつなぐ
- 比較表は 3 列。自社の列だけ濃い青の太枠で囲む
- 導入フローは、アイコンと文言の組を小さな青い逆三角でつなぐ

## Elevation & Depth

- 基本はフラットにし、影を使わない
- STEP カードにはごく薄い影と細い枠線をつける
- 写真の上に置く見出しは、半透明の灰色を重ねて読ませる

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
- **写真の切り抜き**: 製品は背景を抜いた切り抜き。人物は正円で切り抜く
- **セクション境界**: 直線で区切る。課題から解決へは、下向きの大きな三角で切り替える
- 特長カードは角丸なしの四角
- 選ばれる理由のカードと STEP カードは小さな角丸
- リンク系のボタンはピル型で、右端に「>」をつける

## Components

- **資料請求フォーム**（`lead-form`）: 青い見出し帯の下に入力欄を並べる。項目ごとに赤い必須バッジをつける
- **送信ボタン**（`button-submit`）: 幅いっぱいの青い角丸の四角に白文字
- **リンクボタン**（`button-pill`）: シアンまたは青のピル型で、右に矢印をつける
- **解決アイコン行**（`solution-row`）: 白線の円形アイコンの右に、小見出し・黄色の下線・大きな結果語を並べる
- **特長カード**（`feature-card`）: シアンの面に、白文字の見出し・白い区切り線・本文を置く
- **理由カード**（`reason-card`）: 白地に灰色の枠線。上にシアンのアイコン、その下に見出しと本文
- **STEP カード**（`step-card`）: シアンの正円に STEP 番号。手順名、説明、画面の写真が続き、下向きの吹き出し三角で次へつなぐ
- **比較表**（`compare-table`）: 項目列は水色の面、自社の列は青い太枠にする
- **悩みのチェックリスト**（`check-list`）: 青いチェックマークの横に、悩みを短文で 4 つ並べる

## Do's and Don'ts

**Do**
- 色は青・シアン・水色の 3 段階でそろえる
- アイコンは単色の線画またはフラットな塗りに統一する
- フォームは早い位置に置き、入力の手間が少ないことを見せる
- 手順や比較は、表やステップで構造的に見せる

**Don't**
- 暖色のグラデーションや派手な装飾を使わない
- 赤を広い面積に使わない
- 写真に強いフィルターをかけない
- 丸すぎる大きな角丸カードで、印象を幼くしない

## Page Structure

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

1. **ファーストビュー**（製品の種類と、解決する課題を伝える）: 薄灰色の背景に、小見出し・製品名ロゴ・2 行のキャッチを置き、下に製品の切り抜き写真
2. **資料請求フォーム**（すぐにリードを獲得する）: 青い見出し帯つきの枠に入力欄を並べ、青いボタンで送信させる
3. **製品概要**（製品を一言で定義する）: 中央揃えの見出しと灰色の本文
4. **悩みの提起**（現場の課題に共感する）: 青文字の見出し、正円の人物写真、チェックリスト 4 項目
5. **解決**（効果を 3 つに要約する）: 下向きの三角から濃い青の全面に切り替え、アイコン行を 3 つ並べる
6. **特長**（具体的な利点を説明する）: 灰色の背景の製品写真に重ねて、シアンのカードを 3 枚置く
7. **選ばれる理由**（信頼の根拠を示す）: 枠線のカードを 4 枚。上部にシアンのアイコンを置く
8. **導入の流れ**（導入への不安を減らす）: 水色の帯に、アイコンと文言の 4 段階を逆三角でつなぐ
9. **使い方**（操作が簡単なことを示す）: STEP カード 5 枚に、画面の写真と製品写真を添える
10. **比較表**（従来の方法との差を見せる）: 3 列の表。自社の列を青い太枠で強調する
11. **導入事例**（実績へ誘導する）: 灰青色の帯に写真を置き、白文字とシアンのピル型ボタン
12. **新着情報と関連商品**（回遊を促す）: 記事カードと、赤いピル型ボタンつきの関連商品バナー
13. **問い合わせ**（電話と問い合わせへ誘導する）: 青い写真背景に大きなフリーダイヤル、白いピル型ボタン

## Imagery

- 製品は白い背景で正面から撮り、切り抜いて使う
- 人物は白衣の医療従事者。明るい背景で撮り、正円で切り抜く
- アイコンはシアン単色のフラットな図形か、白の線画
- 操作画面のキャプチャには、注目点に赤い円の囲みをつける
- 事例の写真は、実際のクリニック受付を自然光で撮ったもの
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では、フォームをファーストビューの右側に並べる
- 悩みは中央のリスト、左右に人物写真を置く
- 解決アイコンと特長カードは 3 列で横に並べる
- 理由カードは横長の 1 行にし、アイコン・見出し・本文を横に並べる
- 導入フローは横一列にし、右向きの三角でつなぐ
- 新着記事は 4 列、問い合わせ先は 3 枚のカードに分ける

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