---
version: alpha
name: Blue Sky Flat Illustration BtoB Consulting LP
description: 白地に紺と空色を重ね、空と海を描いたフラットイラストで「理想への道」を表すBtoBコンサルのサイト。大きな角丸パネルと白カードを組み合わせ、すっきりした信頼感と親しみやすさを両立している。
colors:
  primary: '#0059A9'
  background: '#FFFFFF'
  secondary: '#A8DCF4'
  background-alt: '#B3CDF2'
  cta: '#0059A9'
  on-cta: '#FFFFFF'
  surface: '#FFFFFF'
  text: '#2E3437'
  text-muted: '#888888'
  line: '#EAF4FA'
  tint-1: '#A8DCF4'
  dark-section: '#0059A9'
  on-dark: '#FFFFFF'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
  headline-lg:
    fontFamily: Montserrat
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.03em
  accent:
    fontFamily: Montserrat
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 88px
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: 48px
  arrow-square:
    backgroundColor: '{colors.primary}'
    rounded: '{rounded.sm}'
    height: 24px
  section-heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 60px
  service-panel:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 640px
  feature-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 150px
  problem-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 90px
  knowledge-card:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.primary}'
    typography: '{typography.note}'
    rounded: '{rounded.md}'
    height: 260px
  news-row:
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 44px
  contact-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.md}'
    height: 200px
---

# DESIGN.md — 空色×紺のフラットイラスト BtoB コンサル LP（Blue Sky Flat Illustration BtoB Consulting LP）

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

## Overview

- **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、クール・先進的、シンプル・ミニマル
- **キーワード**: 空と海・紺×空色・フラットイラスト・角丸パネル・余白多め・欧文大見出し
- **地の質感**: 質感のないフラットな塗り。グラデーションや影はほぼ使わない
- **形**: 大きな角丸パネルに小さな白カードを並べる。海の曲線と雲の丸いシルエットを装飾に使う
- **温度感**: やや寒色寄りの爽やかなトーン。白い余白で軽く見せる

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#0059A9` | ブランドの紺。海・フッター・ボタン・欧文見出しに使う | 12% | 画素の実測 |
| `background` | `#FFFFFF` | ページの地色 | 50% | 画素の実測 |
| `secondary` | `#A8DCF4` | サービス1のパネル地と空の色 | 12% | 画素の実測 |
| `background-alt` | `#B3CDF2` | サービス2のパネル地（青みのラベンダー） | 6% | 画素の実測 |
| `cta` | `#0059A9` | 問い合わせ・一覧ボタンの地 | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 |
| `surface` | `#FFFFFF` | パネル上に置く白カード | 8% | 画素の実測 |
| `text` | `#2E3437` | 日本語見出し・本文の濃い文字 | 2% | 画素の実測 |
| `text-muted` | `#888888` | 日付・カテゴリなどの補足文字 | 0% | 推定 |
| `line` | `#EAF4FA` | お知らせ一覧の区切り線 | 0% | 画素の主要色に補正 |
| `tint-1` | `#A8DCF4` | ナレッジカードのサムネイル地 | 2% | 画素の実測 |
| `dark-section` | `#0059A9` | フッターの紺面 | 6% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 紺地の上の白文字 | 0% | 画素の主要色に補正 |

- 地は白。セクションの区切りを色面ではなく余白と大きな角丸パネルでつける
- 紺は海・ボタン・欧文見出し・フッターに絞って使う
- サービス群は空色とラベンダー寄りの青でパネルを塗り分け、違いを示す
- パネルの上には白カードを置き、文字は濃いグレーにする
- 暖色はイラスト内の差し色（黄）だけに留める
- ページ最後は空色の空から紺の海へ移り、そのままフッターにつなげる

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの縦書き風2行キャッチ | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.4 | 0.1em |
| `headline-lg` | セクションの欧文大見出し | 欧文サンセリフ | Montserrat | 700 | 34px | 1.1 | 0.04em |
| `headline-md` | サービス名の日本語見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.05em |
| `headline-sm` | カード見出し・悩みのカード文 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.03em |
| `body-md` | 本文・リード文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.05em |
| `note` | 日付・カテゴリ・カード説明 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.03em |
| `accent` | 欧文見出しの上に添える小さな日本語ラベル・サービス番号 | 欧文サンセリフ | Montserrat | 600 | 11px | 1.4 | 0.05em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.05em |

- セクション見出しは紺の欧文大文字を主役にし、小さな日本語ラベルを上に添える
- 日本語見出しは太字ゴシックで字間を広めに取る
- 本文は行間1.8〜2.0でゆったり組む
- サービス番号は小さな紺の欧文で表記する
- 書体はゴシックと欧文サンセリフに統一し、明朝は使わない
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。カードは 2 列グリッドも可
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 88px、基本単位 8px、カード内 16px（375px 幅換算）
- サービスは大きな角丸パネル1枚に、説明＋イラストと2×2の白カードを収める
- 見出しとリード文は左右に分けて並べる（SPでは縦に積む）
- ナレッジは3枚のカードを並べる（SPは横スクロールか縦積み）
- お知らせは日付と見出しの1行リストを罫線で区切る
- セクション間に飛ぶ鳥などの小さなイラストを置き、余白を生かす

## Elevation & Depth

- 影はほぼ使わず、色面の差で階層を表す
- 白カードはパネル上に置き、影はごく薄くするかなしにする
- 問い合わせカードだけは海の上に浮く白い面として見せる

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
- **写真の切り抜き**: イラストは切り抜きで背景に置く。ヒーローとアバウトの画像は角丸の矩形で切り抜く
- **セクション境界**: 基本はまっすぐな余白で区切る。ページ末尾だけ空と海の水平線、雲のシルエットでフッターへつなぐ
- ボタンは角丸小さめの矩形。右端に矢印を付ける
- 小さな正方形の紺ボタンに白矢印を付けてリンクを示す
- 大パネルは角丸を大きめにし、白カードは中くらいにする
- 海は大きな曲線で描き、直線的な区切りの中に動きを足す

## Components

- **主ボタン**（`button-primary`）: 紺地に白文字。右に矢印を付けた横長の角丸ボタン
- **矢印アイコンボタン**（`arrow-square`）: 紺の小さな正方形に白い矢印。カードや見出しの横に置く
- **欧文見出しセット**（`section-heading`）: 紺の大きな欧文見出しの上に、小さな日本語ラベルを置く
- **サービスパネル**（`service-panel`）: 空色かラベンダーの大きな角丸面。番号、見出し、説明、イラスト、2×2カードを収める
- **機能カード**（`feature-card`）: 白カードに線画アイコン、紺の小見出し、短い説明、矢印を入れる
- **悩みカード**（`problem-card`）: 細枠の白カード。左に短い悩み文、右に人物イラストと矢印を置く
- **記事カード**（`knowledge-card`）: 淡い青のサムネイルに紺のタイトル文字。下に日付とタイトル、カテゴリを並べる
- **お知らせ行**（`news-row`）: 日付とリンク見出しを1行に並べ、下罫線で区切る
- **問い合わせカード**（`contact-card`）: 海の上に浮かぶ白い大カード。欧文見出し、説明、矢印ボタンを入れる

## Do's and Don'ts

**Do**
- 紺・空色・白の3色を軸にし、イラストも同じパレットで描く
- 見出しは欧文大文字と日本語ラベルを組み合わせる
- サービスの各項目は角丸パネルと白カードで整理する
- 余白を広く取り、鳥や雲の小さなイラストで間を埋める
- リンクの合図は紺の正方形と矢印で統一する

**Don't**
- 赤やオレンジを強調色やCTAに使わない
- グラデーションや強い影で立体的に見せない
- 写真を多用せず、フラットイラストの世界観を崩さない
- 文字を詰め込まない。本文の行間は狭くしない
- ピル型や装飾の多いボタンにしない

## Page Structure

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

1. **ヘッダー**（ナビゲーションと問い合わせへの導線）: 白地の左にロゴ、右にテキストメニューと紺の問い合わせボタンを置く
2. **ファーストビュー**（企業の理念を伝える）: 右上に大きな2行のキャッチを置く。下に、空と曲線の海の道に人物が立つ角丸イラスト。白文字の短い紹介文を重ねる
3. **悩みの提起**（対象顧客の課題に共感する）: 吹き出しアイコン付きの小見出しの下に、悩みを短い言葉で書いた白カードを2枚並べ、イラストと矢印を添える
4. **事業内容（サービス1）**（主力サービスを紹介する）: 欧文見出しとリード文を置き、空色の大パネルに番号、見出し、説明、人物イラスト、2×2の機能カードを収める
5. **事業内容（サービス2）**（2つ目のサービスを紹介する）: ラベンダー系の大パネルで同じ構成をくり返し、色を変えて区別する
6. **ナレッジ**（専門性を示す記事への導線）: 欧文見出しの下に記事カードを3枚並べ、その下に横長の紺ボタンで一覧へ誘導する
7. **会社概要**（企業の姿勢を伝える）: 左にヒーローと同じモチーフの角丸イラスト、右に欧文見出し・短文・紺ボタンを置く
8. **お知らせ**（最新情報を伝える）: 左に欧文見出し、右に日付とタイトルを罫線で区切ったリストを置く
9. **問い合わせ**（無料相談の申し込みへ導く）: 雲が浮かぶ空色の空と紺の海を背景にし、白い大カードに欧文見出し・案内文・矢印ボタンを入れる
10. **フッター**（サイト全体のナビゲーション）: 紺地に白文字で、ロゴ、キャッチ、多段のリンクリスト、SNSアイコン、コピーライトを並べる

## Imagery

- 人物は線の少ないフラットイラストにする。服は紺・白、肌は淡い色で描く
- 空は空色、海は紺の大きな曲線で描き、白い雲と飛ぶカモメを添える
- 業務の場面（PC作業、段ボール、グラフ）をシンプルな図形で描く
- アイコンは紺の細い線画で統一する
- 記事サムネイルは淡い青地に紺の太字タイトルと小さなイラストで作る
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは見出しとリードを左右に並べる。SPでは縦に積む
- サービスパネルはPCで説明と2×2カードを横に並べる。SPでは説明、イラスト、カード（2列または1列）の順に積む
- 記事カードはPCで3列。SPは1列か横スクロールにする
- ヘッダーのメニューはSPでハンバーガーメニューに替え、問い合わせボタンは残す
- ヒーローのキャッチはSPでイラストの上に配置し、28〜32pxに抑える
- フッターのリンク列は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-a7ff596e`（元 LP の URL から採番）
- **元 LP**: https://www.bluedge.co.jp/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-14、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。