--- version: alpha name: Light Blue Corporate BPO Service LP description: 淡い水色の地に青の見出しとコーラルのCTAを置いた、BtoB向け営業支援サービスのLP。線画のビジネスマンのイラストと白いカードで、信頼感がありつつ親しみやすい印象にしている。 colors: primary: '#019CED' secondary: '#019CEC' background: '#EFF8FF' background-alt: '#D4EEFB' surface: '#FFFFFF' cta: '#FE6C63' on-cta: '#FFFFFF' text: '#11303D' text-body: '#4A4F57' line: '#B1C1C9' marker: '#FFE27A' tint-1: '#EFF8FF' accent-1: '#54432C' on-dark: '#FFFFFF' cta-accessible: '#EA0F02' primary-accessible: '#017CBD' typography: display: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.4 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: 17px 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: Montserrat fontSize: 12px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px 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.sm}' height: 48px section-label: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 56px service-tag-box: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 56px concern-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 320px reason-item: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 120px cta-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 360px case-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 300px flow-step: backgroundColor: '{colors.surface}' textColor: '{colors.text}' rounded: '{rounded.md}' height: 120px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' rounded: '{rounded.sm}' height: 56px --- # DESIGN.md — 水色×コーラルの法人向け営業代行LP（Light Blue Corporate BPO Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、クール・先進的 - **キーワード**: 淡い水色の地・青の英字ラベル・コーラル色のCTA・線画の人物イラスト・白カード・黄色マーカー - **地の質感**: フラットな面に、淡い水色の大きな曲線の波形を重ねる。影はごく弱い - **形**: 角丸は小さめ（4〜8px）。ボタンは角丸の長方形。セクション境界に緩やかな波形を使う - **温度感**: 寒色寄りで爽やか。CTAだけ暖色にして目立たせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#019CED` | ブランド青・見出しの強調・番号 | 7% | 画素の実測 | | `secondary` | `#019CEC` | 濃い青・帯の背景・矢印ボタン | 4% | 画素の実測 | | `background` | `#EFF8FF` | ページ全体の淡い水色地 | 34% | 画素の実測 | | `background-alt` | `#D4EEFB` | フロー枠などの濃い水色面 | 6% | 画素の実測 | | `surface` | `#FFFFFF` | カード・FAQの白い面 | 14% | 画素の実測 | | `cta` | `#FE6C63` | 主CTAのコーラル | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAボタンの白文字 | 0% | 画素の主要色に補正 | | `text` | `#11303D` | 見出しの濃い紺文字 | 2% | 画素の実測 | | `text-body` | `#4A4F57` | 本文のグレー文字 | 2% | 推定 | | `line` | `#B1C1C9` | 区切り線・カードの枠 | 1% | 画素の主要色に補正 | | `marker` | `#FFE27A` | 強調語の黄色マーカー | 0% | 推定 | | `tint-1` | `#EFF8FF` | 番号の淡い青 | 6% | 画素の実測 | | `accent-1` | `#54432C` | 悩みバッジの濃紺・茶 | 0% | 画素の実測 | | `on-dark` | `#FFFFFF` | 青帯の上の白文字 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#EA0F02` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#017CBD` | AA を満たす補正値（計算） | | 計算 | - 地は淡い水色にし、カードは白にして浮かせる - 見出しは濃紺。英字の小ラベルと番号は青にする - CTAはコーラル1色だけを使い、ほかの要素には暖色を使わない - 資料DLの帯セクションは青の全幅面にして、白文字で書く - 強調したい語には黄色の半マーカーを敷き、文字は太字にする - `button-primary` は文字 `#FFFFFF` × 背景 `#FE6C63` のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#EA0F02`、4.6:1）を使う。 - `service-tag-box` は文字 `#019CED` × 背景 `#FFFFFF` のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#017CBD`、4.55:1）を使う。 - `cta-band` は文字 `#FFFFFF` × 背景 `#019CED` のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#017CBD`、4.55:1）を使う。 - `case-card` は文字 `#019CED` × 背景 `#FFFFFF` のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#017CBD`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインコピー（強調語は青） | ゴシック | Noto Sans JP | 900 | 28px | 1.4 | 0.02em | | `headline-lg` | セクションの見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.04em | | `headline-md` | 理由やカードの小見出し | ゴシック | Noto Sans JP | 700 | 17px | 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` | 英字の小ラベル・大きな番号 | 欧文サンセリフ | Montserrat | 500 | 12px | 1.2 | 0.05em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.04em | - 見出しの上には青い英字の小ラベルを置き、2段組みの見出しにする - 番号（01〜05）は細めのMontserratで大きく、色は青 - 本文は控えめなグレーにし、行間は広めの1.8 - 強調語は太字にして黄色マーカーを敷く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは1列、フローは縦積み - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは中央揃えの見出しから始める - 理由ブロックは番号・見出し・本文を左揃えで並べ、区切り線で分ける - 事例はカードを横スクロールのカルーセルにし、矢印ボタンを付ける - サービス一覧は写真付きの白カードをグリッドに並べる - 資料DLの青帯はページの中盤と末尾に繰り返す ## Elevation & Depth - カードとFAQには、ごく薄い影（0 2px 8px rgba(0,60,120,.08)）を付ける - CTAボタンには弱い影を付けて押せる感じを出す - その他はフラットにする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: カード上部に横長の長方形で配置し、角丸なしで裁ち落とす - **セクション境界**: 淡い水色の大きな波形曲線、または直線で切り替える青帯 - ボタンは角丸4pxの長方形にし、右端に矢印アイコンを付ける - 悩み枠は線だけの角丸の枠にし、上部に円形のバッジを重ねる - 事例のカルーセルの矢印は丸ボタンにする ## Components - **コーラルのCTA**（`button-primary`）: 資料DL・問い合わせのボタン。白文字で、右に矢印を付ける - **英字ラベル付き見出し**（`section-label`）: 青い小さな英字と、濃紺の日本語見出しを中央に縦に並べる - **サービス名の枠**（`service-tag-box`）: FVでサービス名を3つ並べる、青い枠線の白いボックス - **悩みの枠**（`concern-panel`）: 左右2つの枠に悩みを並べ、中央に人物イラスト、上に円形のバッジを置く - **番号付きの理由**（`reason-item`）: 大きな青番号・太字見出し・本文を区切り線で並べる - **資料DLの青帯**（`cta-band`）: 全幅の青い面。左にイラスト、右に白文字の説明とCTAを置く - **事例カード**（`case-card`）: 写真・青の見出し・概要・青い小タグで構成する白カード - **導入フローのステップ**（`flow-step`）: 白カードの中に番号・見出し・説明を入れ、5段階を矢印形の区切りでつなぐ - **FAQのアコーディオン**（`faq-item`）: 青い「Q」・質問文・右端の青い丸＋アイコンを持つ白いバー ## Do's and Don'ts **Do** - 地は淡い水色にし、白カードで情報をまとめる - 強調語は青い文字か黄色マーカーで示す - 人物イラストは青と白の線画で統一する - CTAはコーラル1色にし、ページ内で繰り返し置く - 見出しは必ず英字ラベルとセットにする **Don't** - CTA以外の要素に赤やオレンジを使わない - 濃い暗色の背景を広い面に使わない - ボタンを大きな丸のピル型にしない - 太い影や立体的な装飾を付けない - フォントの種類を増やさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（提供価値と対応サービスを一目で伝える）: 大きなコピーの一部を青にし、サービス枠を3つ並べてCTAを置く。右には線画の人物 2. **悩みの提起**（ターゲット別に課題を示して共感を得る）: 左右の枠に悩みを3〜4個ずつ並べ、黄色マーカーで強調。中央に考え込む人物 3. **選ばれる理由**（強みを3つ示す）: 大きな番号01〜03と見出し・本文を並べ、横にイラストを添える 4. **資料DLの帯**（資料DLで中盤のリードを獲得する）: 青い全幅帯にグラフのイラストと白文字、コーラルのCTA 5. **事例**（導入実績で信頼を得る）: 写真付きの事例カードをカルーセルにし、タグを付ける 6. **サービス一覧**（提供業務の範囲を示す）: 写真・青見出し・説明の白カード6枚をグリッドに並べ、下にCTA 7. **導入までの流れ**（導入の手順を示して不安をなくす）: 水色の角丸枠の中に、5ステップの白カードを横につなぐ 8. **よくある質問**（疑問を解消する）: Qアイコン付きの白いアコーディオンを縦に4つ 9. **最終CTA**（資料DLを最後にもう一度促す）: 中盤と同じ青帯を繰り返す ## Imagery - 人物はスーツ姿の線画イラスト。青・水色・白・グレーで塗る - 写真はオフィスや店頭で働くビジネスパーソンを自然光で撮ったもの - グラフや矢印のイラストで成長を表現する - 背景には淡い水色の大きな曲線の波形を重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPではFVのイラストをコピーの下に回し、サービス枠は3つを縦に並べるか小さくする - 悩みの左右枠は縦に積み、人物イラストは枠の間に置く - サービスのカードはSPでは1〜2列にする - フローの5ステップはSPでは縦に並べ、下向きの矢印でつなぐ - 青帯はSPではイラストを上、文字とCTAを下にする - ヘッダーはSPではハンバーガーメニューと小さいCTAにする ## 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-9cb470da`（元 LP の URL から採番） - **元 LP**: https://www.r-staffing.co.jp/app/webroot/sol/contents/client/lp/sales_01/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。