--- version: alpha name: Navy and Indigo Clean B2B SaaS LP description: 白と淡いグレーの地に、濃紺の帯と藍色の見出し強調を組み合わせた BtoB SaaS の LP。青一色のフラットなイラスト、白いカード、小さなピル型ラベルで、整った信頼感を出している。 colors: primary: '#2B2F9E' cta: '#1B5AB5' on-cta: '#FFFFFF' dark-section: '#051C2C' on-dark: '#FFFFFF' background: '#FFFFFE' background-alt: '#F9FAFC' tint-1: '#DDECFE' accent-1: '#4A7FD8' surface: '#FDFEFD' text: '#03050F' text-muted: '#5A6070' line: '#E2EAF4' secondary: '#FBFEFD' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em 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.02em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 30px fontWeight: 600 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 72px 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.sm}' height: 44px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px section-label: backgroundColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 22px card-illust: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 320px number-badge: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 24px data-tile: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 36px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 90px cta-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 100px step-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 200px --- # DESIGN.md — 紺×藍の青系イラスト BtoB 情報 SaaS LP（Navy and Indigo Clean B2B SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、クール・先進的、シンプル・ミニマル、情報量多め・訴求型 - **キーワード**: 濃紺の帯・藍色の強調・白カード・青一色のイラスト・ピル型ラベル・3 カラムのグリッド - **地の質感**: フラットで質感はない。カードには薄い影と細い枠線を付ける - **形**: 角丸 8〜12px のカードと小さなピル型ラベル。ボタンは角丸 4px 程度の長方形 - **温度感**: 寒色寄りでクール。白地を多めに取って清潔感を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2B2F9E` | 見出しの強調語・番号・ラベルの藍色 | 2% | 推定 | | `cta` | `#1B5AB5` | 資料ダウンロードボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタンの文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#051C2C` | ヘッダー・中間 CTA 帯・フッターの濃紺 | 8% | 画素の実測 | | `on-dark` | `#FFFFFF` | 濃紺の帯の上の文字 | 1% | 画素の主要色に補正 | | `background` | `#FFFFFE` | 基本の地色 | 40% | 画素の実測 | | `background-alt` | `#F9FAFC` | 課題・FAQ セクションの淡いグレー地 | 15% | 画素の実測 | | `tint-1` | `#DDECFE` | 解決策セクションの淡い青のグラデーション地 | 6% | 画素の実測 | | `accent-1` | `#4A7FD8` | イラストやアイコンの青 | 4% | 推定 | | `surface` | `#FDFEFD` | カード面 | 12% | 画素の実測 | | `text` | `#03050F` | 大見出し・本文の濃い文字 | 2% | 画素の実測 | | `text-muted` | `#5A6070` | サブコピー・注釈 | 1% | 推定 | | `line` | `#E2EAF4` | カードの枠線・区切り線 | 1% | 画素の主要色に補正 | | `secondary` | `#FBFEFD` | 白地の上の白ボタン（問い合わせ） | 0% | 画素の実測 | - 地は白と淡いグレーを交互に使う。解決策セクションだけ淡い青のグラデーション地にする - 濃紺の帯はヘッダー・中間 CTA・フッターに限って使い、ページの区切りにする - 見出しは黒文字にして、重要な語だけ藍色に変えて強調する - CTA は鮮やかな青の塗りと白い枠ボタンを並べ、ボタンの重みに差をつける - イラストやアイコンは青系の 1 色だけで濃淡をつける - 暖色は使わない。写真以外は寒色だけで組む ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.3 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 26px | 1.4 | 0.03em | | `headline-md` | カード見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em | | `body-md` | 本文・箇条書き | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em | | `note` | 注釈・サブコピー | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.02em | | `accent` | 見出しに入れるブランドの欧文ロゴ風の文字 | 欧文セリフ | Playfair Display | 600 | 30px | 1.2 | 0.0em | | `label-button` | ボタン・ピル型ラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.04em | - 見出しは太字のゴシックで、中央揃えにする - 強調語は藍色に変える。マーカーや下線は使わない - ブランド名だけ欧文セリフ体にして、和文の見出しに混ぜる - STEP 番号は小さな英大文字で、藍色にする - 本文は行間を 1.8 程度まで広げ、読みやすくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは縦に積む（PC は 3 カラム） - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 各セクションは「ピル型ラベル→見出し→カード群」の順で並べる - カードの高さは揃えて、イラスト→見出し→箇条書きの順に配置する - 中間 CTA は濃紺の全幅の帯にボタン 2 つを横に並べる - データ項目はアイコン付きの小さなタイルをグリッドで並べる - FAQ は白カードを縦に並べ、Q と A のバッジを付ける ## Elevation & Depth - カードはごく薄い影（0 2px 8px rgba(0,0,0,.06)）を付ける - 細い枠線と影を併用して、面を浮かせすぎない - ボタンには影を付けない ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸 8px の長方形。人物写真も角丸の長方形で切り抜く - **セクション境界**: 直線で背景色を切り替える - ラベルは小さなピル型で、藍色の塗りに白文字にする - 番号は藍色の塗りの円に白数字を入れる - カードは角丸 12px にする - ボタンは角丸 4px の長方形にする ## Components - **資料請求ボタン**（`button-primary`）: 青の塗りに白い太字を載せた主 CTA - **問い合わせボタン**（`button-secondary`）: 白地に濃い文字のボタン。濃紺の帯の上で主 CTA と並べる - **セクションラベル**（`section-label`）: 見出しの上に置く小さなピル型のラベル - **イラスト付きカード**（`card-illust`）: 青のイラスト、藍色の見出し、チェックアイコン付きの箇条書きで構成する - **番号の丸バッジ**（`number-badge`）: 機能カードの見出しの前に置く、藍色の丸に白数字のバッジ - **データ項目タイル**（`data-tile`）: アイコンと短いラベルを並べた、淡いグレーの小さなタイル - **FAQ カード**（`faq-item`）: Q と A の丸バッジを付けた、白い角丸カード - **中間 CTA 帯**（`cta-band`）: 濃紺の全幅帯の中央にボタンを 2 つ並べる - **導入ステップカード**（`step-card`）: STEP 番号、見出し、箇条書きで構成するカード。カードの間に矢印を置く ## Do's and Don'ts **Do** - 白地を広く取り、余白で区切る - 強調色は藍色と青の 2 色に絞る - イラストは青一色のフラットな人物シーンで揃える - 濃紺の CTA 帯をセクションの節目ごとに入れる - カード内は短い箇条書きを 3 つ並べる **Don't** - 暖色やビビッドな装飾色を加えない - 濃い影や立体的な装飾をしない - 手書き風や丸文字の書体を使わない - カードの高さやイラストのテイストをばらつかせない - ボタンを大きなピル型にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（価値を一言で伝え、資料請求へ誘導する）: 淡い青の地に大見出しと短いバッジ 2 つを置き、右側にニュース画面の UI を斜めに重ねたビジュアルを配置する 2. **サービス概要の帯**（サービスを一文で説明する）: 濃紺の帯に白文字の 2 行説明と、CTA 2 つを並べる 3. **導入実績**（信頼を補強する）: 藍色の強調入りの見出しの下に、ロゴを横一列に流す 4. **課題提起**（悩みを 3 つ示して共感を得る）: グレーの地に、イラスト付きカードを 3 枚並べる 5. **解決策**（課題への答えを示す）: 淡い青の地に、対応するカードを 3 枚並べる 6. **機能紹介**（主な機能を 3 つ説明する）: 画面写真と番号バッジ付きのカード 3 枚に、補足の箇条書きボックスを添える 7. **データ連携図**（情報の入力元から出力先までの流れを見せる）: 中央に管理画面のキャプチャを置き、左右に入力元と出力先のラベルを配置する 8. **取得可能データ一覧**（対応範囲の広さを示す）: アイコン付きのタイルをグリッドで並べ、もっと見るボタンを置く 9. **中間 CTA**（行動を促す）: 濃紺の帯にボタン 2 つを並べる 10. **活用事例**（利用シーンを具体的に示す）: 写真、見出し、説明文で構成するカードを 3 列 3 段に並べる 11. **よくある質問**（不安を解消する）: Q と A のバッジ付きの白カードを縦に並べる 12. **導入の流れ**（導入の手軽さを示す）: STEP カード 3 枚を矢印でつなぐ 13. **会社概要**（運営者の信頼性を示す）: 代表者の写真と経歴のカード、2 列の会社情報表を置く 14. **フッター**（ナビゲーション）: 濃紺の地に欧文ロゴと白文字のリンク列を置く ## Imagery - 青一色の濃淡で描いた、オフィスで働く人物のフラットなイラストを使う - UI のスクリーンショットは斜めに重ね、奥行きを出す - 事例写真は都市・店舗・新聞・スマホなど、実写の業務シーンを使う - アイコンは藍色の単色で、線または塗りのシンプルな形にする - 人物写真はモノトーン寄りの落ち着いた背景で撮る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は 3 カラムのカード。SP では 1 カラムに積む - データタイルは PC の 5 列から、SP では 2 列にする - 中間 CTA のボタン 2 つは、SP では縦に並べる - ファーストビューのビジュアルは、SP では見出しの下に置く - 会社情報の表は、SP では 1 列にする ## 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-8a2f336b`（元 LP の URL から採番） - **元 LP**: https://www.thestation.jp/knowledge - **解析に使った画像**: 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/）からご連絡ください。