--- version: alpha name: Bright Blue Isometric BtoB Service LP description: 法人向けの取次サービスLP。青と水色の地を基本にし、オレンジのピル型CTAで目線を誘導する。線画の人物イラスト、白カード、立方体パターンの背景を使い、誠実で分かりやすい印象にまとめている。 colors: primary: '#2C75B2' secondary: '#4CB5E5' background: '#FEFEFE' background-alt: '#D9F0F6' surface: '#FEFEFE' cta: '#FE8A33' on-cta: '#FFFFFF' text: '#182325' text-body: '#464645' accent-1: '#5896C2' marker: '#FEFDDD' accent-2: '#FFE14D' line: '#D0D0CF' dark-section: '#2686D0' cta-accessible: '#C25401' accent-1-accessible: '#3D7BA7' typography: display: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 14px 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 accent: fontFamily: Montserrat fontSize: 26px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em 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: 56px button-tel: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 56px worry-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 140px plan-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 320px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 100px service-card: backgroundColor: '{colors.marker}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 360px faq-item: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px form-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 56px heading-highlight: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 32px --- # DESIGN.md — 青×水色とオレンジCTAの法人向けサービスLP（Bright Blue Isometric BtoB Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 青と水色・白カード・線画の人物イラスト・オレンジCTA・立方体パターン・黄色マーカー - **地の質感**: フラットな単色面。青いセクションには、薄いアイソメトリック立方体パターンを重ねる - **形**: 角丸8px前後のカード、ピル型ボタン、帯状の見出しラベル - **温度感**: 爽やかな寒色が中心。CTAと強調だけ暖色にする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2C75B2` | 見出し帯・FAQ帯・濃い青セクション | 14% | 画素の主要色に補正 | | `secondary` | `#4CB5E5` | 収益訴求・お客様の声の地となる明るい青 | 13% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | 29% | 画素の実測 | | `background-alt` | `#D9F0F6` | 悩み・FAQの地となる淡い水色 | 14% | 画素の実測 | | `surface` | `#FEFEFE` | 白カード | 8% | 画素の実測 | | `cta` | `#FE8A33` | 問い合わせボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `text` | `#182325` | 見出し文字 | 2% | 画素の実測 | | `text-body` | `#464645` | 本文 | 2% | 画素の実測 | | `accent-1` | `#5896C2` | 見出し内のキーワードの青文字 | 0% | 画素の主要色に補正 | | `marker` | `#FEFDDD` | 強調用の黄色マーカー・カード地 | 3% | 画素の実測 | | `accent-2` | `#FFE14D` | 見出しラベル・お客様の声のタグ用の黄色 | 1% | 推定 | | `line` | `#D0D0CF` | フォームの区切り線 | 1% | 画素の実測 | | `dark-section` | `#2686D0` | フッターの著作権帯 | 0% | 画素の実測 | | `cta-accessible` | `#C25401` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#3D7BA7` | AA を満たす補正値（計算） | | 計算 | - 地の色は、白・淡い水色・明るい青・濃い青の4段階で交互に切り替え、セクションを区切る - 青い地の上には白カードを置き、本文は濃いグレーで書く - CTAはオレンジだけにする。他の要素にオレンジは使わない - キーワードは青文字、青い帯への白抜き、黄色マーカーのいずれかで強調する - 2つのプランは、青の帯とオレンジの帯で色分けする - フォームの必須ラベルは赤、任意ラベルはグレーにする - `button-primary` は文字 `#FFFFFF` × 背景 `#FE8A33` のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C25401`、4.6:1）を使う。 - `button-tel` は文字 `#FE8A33` × 背景 `#FEFEFE` のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C25401`、4.56:1）を使う。 - `worry-card` は文字 `#5896C2` × 背景 `#FEFEFE` のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#3D7BA7`、4.54:1）を使う。 - `step-card` は文字 `#5896C2` × 背景 `#FEFEFE` のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#3D7BA7`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのメインコピー | ゴシック | Noto Sans JP | 900 | 26px | 1.4 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.05em | | `headline-md` | カード見出し（青文字） | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em | | `headline-sm` | 小見出し・FAQの質問 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 注釈・受付時間 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 電話番号・STEP番号 | 欧文サンセリフ | Montserrat | 600 | 26px | 1.2 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.05em | - 見出しは太字ゴシックで中央揃えにする - 見出しのキーワードだけを青文字や青帯の白抜きにする - 本文は中央揃えの短い行で、改行位置を整える - カード内の本文は左揃えにする - 大きな数字（実績・番号）は太字で、色を変えて目立たせる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。カードは縦に積み、サービス4種は2×2にする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - セクションごとに地の色を全幅で切り替える - 見出し→補足リード→本体→CTA帯の順で組む - 比較プランは並べて同じ高さに揃える - CTA帯は、問い合わせボタンと電話ボタンを並べて中盤と後半に繰り返す - FAQは全幅の青帯を縦に積むアコーディオンにする ## Elevation & Depth - 白カードは影なし、または非常に薄い影で地の色から浮かせる - CTAボタンには軽いドロップシャドウを付ける - ファーストビューのフォームパネルは半透明の白にする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 写真はファーストビューの背景のみ。他は切り抜きの線画イラスト - **セクション境界**: 直線で地の色を切り替える。区切り位置に斜めのパターン地を挟むこともある - カードは角丸8px前後 - CTAと電話ボタンは完全なピル型 - 見出しラベルは角丸の小さな帯にする - FAQの帯は角丸を小さくする ## Components - **問い合わせCTA**（`button-primary`）: オレンジのピル型ボタン。左にメールアイコン、右に矢印を置き、上に黒い小さな吹き出しラベルを載せる - **電話ボタン**（`button-tel`）: 白のピル型ボタン。オレンジの電話番号と受付時間を入れる - **悩みカード**（`worry-card`）: 白カード。青文字の悩み文の下に、悩む人物のイラストを置く - **プラン比較カード**（`plan-card`）: 白カードの中にイラスト、色帯のプラン名、黄色マーカーの説明、黒ラベル付きのおすすめ文を入れる - **ステップカード**（`step-card`）: 白カード。右上に大きな淡色の番号、左にSTEPラベルと見出しを置き、カード間に丸い矢印を挟む - **サービス種別カード**（`service-card`）: 淡い黄色のカード。上に青い円形アイコン、青の見出し、箇条書きを入れる - **お客様の声カード**（`voice-card`）: 上に人物イラストと黄色の属性タグ、白カードに青の太字見出しと本文を入れる - **FAQ帯**（`faq-item`）: 青の帯に白文字で「Q.」付きの質問を書き、右端に丸囲みの＋を置く - **フォーム行**（`form-row`）: 必須・任意のラベル、項目名、角丸の入力欄を横に並べ、行の間に線を引く - **青帯キーワード**（`heading-highlight`）: 見出しの中のサービス名を、青の帯に白抜き文字で強調する ## Do's and Don'ts **Do** - 地の色を4段階の青系で切り替え、リズムを作る - CTA帯は中盤と後半に2回以上置く - 人物は統一した線画イラストで描き、オレンジや黄色をポイントに入れる - 大事な一言は黄色マーカーか青帯で強調する - 仕組みは図解（箱と矢印）で示す **Don't** - CTA以外にオレンジを多用しない - 写真を多用して重たくしない - 暗い色や黒を背景に使わない - 明朝体や手書き書体を混ぜない - カードの角丸を大きくしすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（電話と問い合わせへの導線）: 白地にロゴを置き、右に黄色の電話枠とオレンジ・青のボタンを並べる 2. **ファーストビュー**（対象とサービスの提示）: 青グラデーションと建物の写真を背景にする。左に対象タグ・太字コピー・円形の実績バッジ、右に資料請求パネルを置く 3. **悩みの提起**（共感）: 淡い水色の地に悩みカードを3枚並べ、下に青帯で解決を示す 4. **サービス説明**（仕組みの理解）: 白地に説明文を置き、青い箱とオレンジ・グレーの矢印で関係図を描く 5. **メリット・プラン**（収益メリットと選択肢）: 立方体柄の青い地に丸バッジと人物を並べたイラストを置き、2プランの比較カードを並べる 6. **CTA**（問い合わせ誘導）: 濃い青の帯に、白見出しとオレンジ・白の2ボタンを置く 7. **選ばれる理由**（信頼の付与）: 淡い水色の地に、文章とイラストを入れた横長の白カードを積む 8. **導入の流れ**（手軽さの訴求）: 青い地に黄色ラベルの見出しを置き、2ステップのカードを矢印でつなぐ 9. **サービス一覧**（対応範囲の提示）: 白地に図解を置き、アイコン付きの黄色カードを4枚並べる 10. **お客様の声**（実績の証明）: 青い地に、人物イラスト付きの白カードを2列で並べる 11. **よくある質問**（不安の解消）: 淡い水色の地に青い帯のアコーディオンを並べる 12. **お問い合わせフォーム**（コンバージョン）: 白地にラベル付きの入力欄を並べ、スクロール式の規約枠、同意チェック、オレンジのピル型送信ボタンを置く 13. **フッター**（運営情報）: 淡い水色の地にロゴと運営会社を置き、最下部に青の著作権帯を敷く ## Imagery - スーツ姿の人物を、黒い線画と青・オレンジ・黄色の部分塗りで描く - 背景に薄い白のアイソメトリック立方体パターンを敷く - サービスアイコンは白抜きのピクトグラムを青い円に入れる - ファーストビューのみ、住宅模型と手元の写真を青いトーンで使う - 仕組みは、角丸の青い箱とシンプルな矢印で図解する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCの3列の悩みカードは、SPでは縦積みにする - PCで横並びの2ボタンCTAは、SPでは縦に積んで全幅にする - 仕組みの図解は、SPでは縦方向の流れに組み替える - お客様の声とプラン比較は、SPでは1列にする - フォームのラベルと入力欄は、SPでは上下に配置する ## 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-e7db99e9`（元 LP の URL から採番） - **元 LP**: https://www.lepris.co.jp/lifeline/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。