青×ライムのイラスト技術紹介BtoB LP

Flat Illustrated Tech Blue-Lime BtoB LP

ノイズ質感の青・ライム・濃紺の面を斜めの光線で切り替える、フラットイラスト主体の産業技術LP。白カードと点線、ピル型の見出しラベルで情報を整理する。

BtoB・SaaS・ITサービスクール・先進的清潔・爽やか信頼・誠実ポップ・元気SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

セクションごとに地を白→青→ライム→濃紺→淡水色→青と大きく切り替える
地の境界はカメラ光線を模した斜めの三角形で切る
文字は基本濃紺、青・濃紺地では白
黄は主CTAと特許バッジだけに使う
活用例は事例ごとに青緑・サーモン・水色・黄緑・黄など鮮やかな地色を変える
白カードは色地の上に浮かせて情報を読ませる

TYPOGRAPHY

書体

display製品ロゴ風の欧文大見出し欧文サンセリフ／ Montserrat 800 ／ 42px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション見出し（和文部分）ゴシック／ Zen Kaku Gothic New 700 ／ 22px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdキャッチ・ポイント見出しゴシック／ Zen Kaku Gothic New 700 ／ 17px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

accent見出し上の英字イタリック小見出し・POINT番号欧文サンセリフ／ Barlow Condensed 700 ／ 11px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文ゴシック／ Zen Kaku Gothic New 500 ／ 14px ／行間 1.9

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・コピーライトゴシック／ Zen Kaku Gothic New 500 ／ 10px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタン文字ゴシック／ Zen Kaku Gothic New 700 ／ 14px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm電話番号など数字強調欧文サンセリフ／ Barlow 600 ／ 28px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

見出しは欧文ロゴ大＋和文小の組み合わせにする
見出しの上に英字イタリック小見出しと下線を置く
本文は字間を広めにし行間1.9前後
キーワードは濃紺ボックス反転や色丸で強調
全体的に太めのウエイトで現場感を出す

PAGE STRUCTURE

セクション構成

ファーストビュー技術の価値と実績を一目で伝える白地に2行キャッチ、大きな欧文ロゴ、黄の星形バッジ、工場ラインのイラストを青い光線で照らす
製品概要技術の仕組みを簡潔に説明青地に白文字の本文、下に白カードでPOINTを3つ並べる
設定方法導入の手軽さを示すライム地、人物イラスト、吹き出し付き見出し、白カードのSTEPを点線で縦連結
活用例の導入応用分野へ誘導濃紺地に巨大な英字を流し、中央に淡色の大円で見出しと双眼鏡の人物
活用例業界別の使い方を見せる事例ごとに鮮やかな地色、スタジアム形パネルにイラスト・説明・タグピル・動画ボタン
よくある質問導入の疑問を解消淡水色地、点線の円の中に見出しと人物、白のアコーディオンカード
会社概要信頼性の担保白い大カードに点線枠の事業紹介と点線区切りの定義リスト、濃紺ボタン
イベント告知展示会出展を知らせるロイヤルブルーのスタジアム形に白文字、ロゴ円を上に重ねる
CTA問い合わせに誘導斜めの光線で青地へ切り替え、人物群イラスト、大きな電話番号と黄のピルボタン

COMPONENTS

部品

問い合わせCTA button-primary黄のピル型に濃紺の点線縁、紙飛行機アイコン付き
サブボタン button-secondary濃紺のピル型に白文字、外部リンクアイコン
POINTラベル point-label淡い青緑のピル内に英字イタリックの番号、右に点線下線つき見出し
STEP帯見出し step-ribbon右端が矢羽根形の濃紺帯に白文字
吹き出し speech-bubbleライムや白の角丸吹き出しに短い一言
ギザギザバッジ badge-burst黄の星形バッジに実績を箇条書き
FAQアコーディオン faq-item白カードに英字Q、質問文、右端に＋
点線枠の事業カード dotted-box濃紺点線の角丸枠に青見出しと箇条書き
英字小見出し section-eyebrowイタリック英字に細い下線、和文見出しの上に置く

守ること

地色の切り替えに斜めの光線を使う
イラストはノイズ入りのフラットタッチで統一
白カードで本文を読ませる
点線を区切り・枠・下線に一貫して使う
英字イタリック小見出しを各見出しに付ける

DON'T

避けること

写真を使わない
濃いドロップシャドウやグラデーションボタンを使わない
黄をCTA以外に多用しない
明朝体や手書き書体を混ぜない
実線の太い枠で囲まない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 青×ライムのイラスト技術紹介BtoB LP（Flat Illustrated Tech Blue-Lime BtoB LP）

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

Overview

業種: BtoB・SaaS・ITサービス／ 雰囲気: クール・先進的、清潔・爽やか、信頼・誠実、ポップ・元気
キーワード: フラットイラスト・斜めの光線・ノイズ質感・点線区切り・工場・現場・色面の切り替え
地の質感: 面にざらついたグレインノイズを乗せ、版画風のフラットイラストと合わせる
形: 角丸カード、ピル型ラベル、カメラ光線の斜め三角形、大きな円・スタジアム形
温度感: 爽やかで少しクール。ライムと黄で明るさを足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#1E96CC`	ブランド青の面	16%	画素の実測
`background`	`#FFFFFF`	白の基本地・カード	35%	画素の実測
`background-alt`	`#E2F5FB`	FAQ・会社概要の淡い水色地	12%	画素の実測
`secondary`	`#CAE98F`	ライムグリーンの設定方法地	8%	画素の実測
`dark-section`	`#1B2D51`	濃紺の活用例セクション地	6%	画素の実測
`text`	`#15294C`	見出し・本文の濃紺文字	3%	画素の主要色に補正
`cta`	`#E3E33D`	問い合わせボタンの黄	1%	画素の実測
`on-cta`	`#15294C`	CTAボタン上の文字	0%	画素の主要色に補正
`accent-1`	`#2756A8`	告知ブロックのロイヤルブルー	5%	画素の実測
`tint-1`	`#FEFEFE`	POINTラベル・円パネルの淡い青緑	4%	画素の実測
`accent-2`	`#6293B2`	会社概要の小見出し青	0%	画素の実測
`on-dark`	`#FFFFFF`	青・濃紺地の白文字	2%	画素の主要色に補正
`line`	`#15294C`	点線の区切り線	0%	画素の主要色に補正

セクションごとに地を白→青→ライム→濃紺→淡水色→青と大きく切り替える
地の境界はカメラ光線を模した斜めの三角形で切る
文字は基本濃紺、青・濃紺地では白
黄は主CTAと特許バッジだけに使う
活用例は事例ごとに青緑・サーモン・水色・黄緑・黄など鮮やかな地色を変える
白カードは色地の上に浮かせて情報を読ませる

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	製品ロゴ風の欧文大見出し	欧文サンセリフ	Montserrat	800	42px	1.1	0.0em
`headline-lg`	セクション見出し（和文部分）	ゴシック	Zen Kaku Gothic New	700	22px	1.4	0.05em
`headline-md`	キャッチ・ポイント見出し	ゴシック	Zen Kaku Gothic New	700	17px	1.6	0.08em
`accent`	見出し上の英字イタリック小見出し・POINT番号	欧文サンセリフ	Barlow Condensed	700	11px	1.2	0.02em
`body-md`	本文	ゴシック	Zen Kaku Gothic New	500	14px	1.9	0.06em
`note`	注釈・コピーライト	ゴシック	Zen Kaku Gothic New	500	10px	1.6	0.04em
`label-button`	ボタン文字	ゴシック	Zen Kaku Gothic New	700	14px	1.4	0.08em
`headline-sm`	電話番号など数字強調	欧文サンセリフ	Barlow	600	28px	1.2	0.0em

見出しは欧文ロゴ大＋和文小の組み合わせにする
見出しの上に英字イタリック小見出しと下線を置く
本文は字間を広めにし行間1.9前後
キーワードは濃紺ボックス反転や色丸で強調
全体的に太めのウエイトで現場感を出す
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。STEP・活用例も縦積み
本文ブロックの幅: 画面幅の約 89%
余白: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算）
白カードは左右約20pxの余白で配置
イラストはセクション頭に大きく置き、見出しはその下
会社概要は点線区切りの定義リスト
ステップは点線で区切って縦に連結
FAQは白カードを8px間隔で積む

Elevation & Depth

影はほぼ使わずフラット
白カードは色地とのコントラストで浮かせる
イラスト人物の足元に淡い楕円影

Shapes

角丸: 小 6px ／中 10px ／大 200px。ボタンはピル型。
写真の切り抜き: 写真は使わず、イラストを切り抜きで配置。活用例は円・スタジアム形の面にのせる
セクション境界: カメラから伸びる光線の斜め直線で区切る。濃紺セクションは大きな円で抜く
カードは角丸10px程度
ボタン・ラベルはピル型
STEP見出しは右端が矢印形の濃紺帯
枠線は点線を多用
告知ブロックは上下半円のスタジアム形

Components

問い合わせCTA（button-primary）: 黄のピル型に濃紺の点線縁、紙飛行機アイコン付き
サブボタン（button-secondary）: 濃紺のピル型に白文字、外部リンクアイコン
POINTラベル（point-label）: 淡い青緑のピル内に英字イタリックの番号、右に点線下線つき見出し
STEP帯見出し（step-ribbon）: 右端が矢羽根形の濃紺帯に白文字
吹き出し（speech-bubble）: ライムや白の角丸吹き出しに短い一言
ギザギザバッジ（badge-burst）: 黄の星形バッジに実績を箇条書き
FAQアコーディオン（faq-item）: 白カードに英字Q、質問文、右端に＋
点線枠の事業カード（dotted-box）: 濃紺点線の角丸枠に青見出しと箇条書き
英字小見出し（section-eyebrow）: イタリック英字に細い下線、和文見出しの上に置く

Do's and Don'ts

Do - 地色の切り替えに斜めの光線を使う - イラストはノイズ入りのフラットタッチで統一 - 白カードで本文を読ませる - 点線を区切り・枠・下線に一貫して使う - 英字イタリック小見出しを各見出しに付ける

Don't - 写真を使わない - 濃いドロップシャドウやグラデーションボタンを使わない - 黄をCTA以外に多用しない - 明朝体や手書き書体を混ぜない - 実線の太い枠で囲まない

Page Structure

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

ファーストビュー（技術の価値と実績を一目で伝える）: 白地に2行キャッチ、大きな欧文ロゴ、黄の星形バッジ、工場ラインのイラストを青い光線で照らす
製品概要（技術の仕組みを簡潔に説明）: 青地に白文字の本文、下に白カードでPOINTを3つ並べる
設定方法（導入の手軽さを示す）: ライム地、人物イラスト、吹き出し付き見出し、白カードのSTEPを点線で縦連結
活用例の導入（応用分野へ誘導）: 濃紺地に巨大な英字を流し、中央に淡色の大円で見出しと双眼鏡の人物
活用例（業界別の使い方を見せる）: 事例ごとに鮮やかな地色、スタジアム形パネルにイラスト・説明・タグピル・動画ボタン
よくある質問（導入の疑問を解消）: 淡水色地、点線の円の中に見出しと人物、白のアコーディオンカード
会社概要（信頼性の担保）: 白い大カードに点線枠の事業紹介と点線区切りの定義リスト、濃紺ボタン
イベント告知（展示会出展を知らせる）: ロイヤルブルーのスタジアム形に白文字、ロゴ円を上に重ねる
CTA（問い合わせに誘導）: 斜めの光線で青地へ切り替え、人物群イラスト、大きな電話番号と黄のピルボタン

Imagery

作業服・帽子の作業員とロボット・カメラのフラットイラスト
粒状ノイズとシンプルな陰影の版画風タッチ
監視カメラから伸びる光線の三角形をモチーフに使う
アイコンは濃紺の太線で単純化（PC・カメラ・Wi-Fi）
人物はポーズで動きを出し、セクション境界にまたがらせる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCは上部にグローバルナビ、FVはイラスト全面にロゴを左上へ
PCのSTEPは3カラム横並び
PCの活用例は左にイラスト、右に説明の2カラム
PCのFAQ・会社概要は中央寄せ幅約60%
PCの告知ブロックは横長スタジアム形で左にロゴ、右に本文
PCのCTAは人物イラストを左右に分けて配置

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
version: alpha
name: Flat Illustrated Tech Blue-Lime BtoB LP
description: ノイズ質感の青・ライム・濃紺の面を斜めの光線で切り替える、フラットイラスト主体の産業技術LP。白カードと点線、ピル型の見出しラベルで情報を整理する。
colors:
  primary: '#1E96CC'
  background: '#FFFFFF'
  background-alt: '#E2F5FB'
  secondary: '#CAE98F'
  dark-section: '#1B2D51'
  text: '#15294C'
  cta: '#E3E33D'
  on-cta: '#15294C'
  accent-1: '#2756A8'
  tint-1: '#FEFEFE'
  accent-2: '#6293B2'
  on-dark: '#FFFFFF'
  line: '#15294C'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 42px
    fontWeight: 800
    lineHeight: 1.1
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.08em
  accent:
    fontFamily: Barlow Condensed
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.02em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.06em
  note:
    fontFamily: Zen Kaku Gothic New
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.04em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Barlow
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
rounded:
  sm: 6px
  md: 10px
  lg: 200px
  full: 999px
spacing:
  unit: 8px
  card: 28px
  section: 80px
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.full}'
    height: 56px
  button-secondary:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 46px
  point-label:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 22px
  step-ribbon:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 32px
  speech-bubble:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 30px
  badge-burst:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 90px
  faq-item:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 70px
  dotted-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 190px
  section-eyebrow:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 18px
---

# DESIGN.md — 青×ライムのイラスト技術紹介BtoB LP（Flat Illustrated Tech Blue-Lime BtoB LP）

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

## Overview

- **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: クール・先進的、清潔・爽やか、信頼・誠実、ポップ・元気
- **キーワード**: フラットイラスト・斜めの光線・ノイズ質感・点線区切り・工場・現場・色面の切り替え
- **地の質感**: 面にざらついたグレインノイズを乗せ、版画風のフラットイラストと合わせる
- **形**: 角丸カード、ピル型ラベル、カメラ光線の斜め三角形、大きな円・スタジアム形
- **温度感**: 爽やかで少しクール。ライムと黄で明るさを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#1E96CC` | ブランド青の面 | 16% | 画素の実測 |
| `background` | `#FFFFFF` | 白の基本地・カード | 35% | 画素の実測 |
| `background-alt` | `#E2F5FB` | FAQ・会社概要の淡い水色地 | 12% | 画素の実測 |
| `secondary` | `#CAE98F` | ライムグリーンの設定方法地 | 8% | 画素の実測 |
| `dark-section` | `#1B2D51` | 濃紺の活用例セクション地 | 6% | 画素の実測 |
| `text` | `#15294C` | 見出し・本文の濃紺文字 | 3% | 画素の主要色に補正 |
| `cta` | `#E3E33D` | 問い合わせボタンの黄 | 1% | 画素の実測 |
| `on-cta` | `#15294C` | CTAボタン上の文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#2756A8` | 告知ブロックのロイヤルブルー | 5% | 画素の実測 |
| `tint-1` | `#FEFEFE` | POINTラベル・円パネルの淡い青緑 | 4% | 画素の実測 |
| `accent-2` | `#6293B2` | 会社概要の小見出し青 | 0% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 青・濃紺地の白文字 | 2% | 画素の主要色に補正 |
| `line` | `#15294C` | 点線の区切り線 | 0% | 画素の主要色に補正 |

- セクションごとに地を白→青→ライム→濃紺→淡水色→青と大きく切り替える
- 地の境界はカメラ光線を模した斜めの三角形で切る
- 文字は基本濃紺、青・濃紺地では白
- 黄は主CTAと特許バッジだけに使う
- 活用例は事例ごとに青緑・サーモン・水色・黄緑・黄など鮮やかな地色を変える
- 白カードは色地の上に浮かせて情報を読ませる

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 製品ロゴ風の欧文大見出し | 欧文サンセリフ | Montserrat | 800 | 42px | 1.1 | 0.0em |
| `headline-lg` | セクション見出し（和文部分） | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.05em |
| `headline-md` | キャッチ・ポイント見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.6 | 0.08em |
| `accent` | 見出し上の英字イタリック小見出し・POINT番号 | 欧文サンセリフ | Barlow Condensed | 700 | 11px | 1.2 | 0.02em |
| `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.9 | 0.06em |
| `note` | 注釈・コピーライト | ゴシック | Zen Kaku Gothic New | 500 | 10px | 1.6 | 0.04em |
| `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.4 | 0.08em |
| `headline-sm` | 電話番号など数字強調 | 欧文サンセリフ | Barlow | 600 | 28px | 1.2 | 0.0em |

- 見出しは欧文ロゴ大＋和文小の組み合わせにする
- 見出しの上に英字イタリック小見出しと下線を置く
- 本文は字間を広めにし行間1.9前後
- キーワードは濃紺ボックス反転や色丸で強調
- 全体的に太めのウエイトで現場感を出す
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。STEP・活用例も縦積み
- **本文ブロックの幅**: 画面幅の約 89%
- **余白**: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算）
- 白カードは左右約20pxの余白で配置
- イラストはセクション頭に大きく置き、見出しはその下
- 会社概要は点線区切りの定義リスト
- ステップは点線で区切って縦に連結
- FAQは白カードを8px間隔で積む

## Elevation & Depth

- 影はほぼ使わずフラット
- 白カードは色地とのコントラストで浮かせる
- イラスト人物の足元に淡い楕円影

## Shapes

- **角丸**: 小 6px ／ 中 10px ／ 大 200px。ボタンはピル型。
- **写真の切り抜き**: 写真は使わず、イラストを切り抜きで配置。活用例は円・スタジアム形の面にのせる
- **セクション境界**: カメラから伸びる光線の斜め直線で区切る。濃紺セクションは大きな円で抜く
- カードは角丸10px程度
- ボタン・ラベルはピル型
- STEP見出しは右端が矢印形の濃紺帯
- 枠線は点線を多用
- 告知ブロックは上下半円のスタジアム形

## Components

- **問い合わせCTA**（`button-primary`）: 黄のピル型に濃紺の点線縁、紙飛行機アイコン付き
- **サブボタン**（`button-secondary`）: 濃紺のピル型に白文字、外部リンクアイコン
- **POINTラベル**（`point-label`）: 淡い青緑のピル内に英字イタリックの番号、右に点線下線つき見出し
- **STEP帯見出し**（`step-ribbon`）: 右端が矢羽根形の濃紺帯に白文字
- **吹き出し**（`speech-bubble`）: ライムや白の角丸吹き出しに短い一言
- **ギザギザバッジ**（`badge-burst`）: 黄の星形バッジに実績を箇条書き
- **FAQアコーディオン**（`faq-item`）: 白カードに英字Q、質問文、右端に＋
- **点線枠の事業カード**（`dotted-box`）: 濃紺点線の角丸枠に青見出しと箇条書き
- **英字小見出し**（`section-eyebrow`）: イタリック英字に細い下線、和文見出しの上に置く

## Do's and Don'ts

**Do**
- 地色の切り替えに斜めの光線を使う
- イラストはノイズ入りのフラットタッチで統一
- 白カードで本文を読ませる
- 点線を区切り・枠・下線に一貫して使う
- 英字イタリック小見出しを各見出しに付ける

**Don't**
- 写真を使わない
- 濃いドロップシャドウやグラデーションボタンを使わない
- 黄をCTA以外に多用しない
- 明朝体や手書き書体を混ぜない
- 実線の太い枠で囲まない

## Page Structure

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

1. **ファーストビュー**（技術の価値と実績を一目で伝える）: 白地に2行キャッチ、大きな欧文ロゴ、黄の星形バッジ、工場ラインのイラストを青い光線で照らす
2. **製品概要**（技術の仕組みを簡潔に説明）: 青地に白文字の本文、下に白カードでPOINTを3つ並べる
3. **設定方法**（導入の手軽さを示す）: ライム地、人物イラスト、吹き出し付き見出し、白カードのSTEPを点線で縦連結
4. **活用例の導入**（応用分野へ誘導）: 濃紺地に巨大な英字を流し、中央に淡色の大円で見出しと双眼鏡の人物
5. **活用例**（業界別の使い方を見せる）: 事例ごとに鮮やかな地色、スタジアム形パネルにイラスト・説明・タグピル・動画ボタン
6. **よくある質問**（導入の疑問を解消）: 淡水色地、点線の円の中に見出しと人物、白のアコーディオンカード
7. **会社概要**（信頼性の担保）: 白い大カードに点線枠の事業紹介と点線区切りの定義リスト、濃紺ボタン
8. **イベント告知**（展示会出展を知らせる）: ロイヤルブルーのスタジアム形に白文字、ロゴ円を上に重ねる
9. **CTA**（問い合わせに誘導）: 斜めの光線で青地へ切り替え、人物群イラスト、大きな電話番号と黄のピルボタン

## Imagery

- 作業服・帽子の作業員とロボット・カメラのフラットイラスト
- 粒状ノイズとシンプルな陰影の版画風タッチ
- 監視カメラから伸びる光線の三角形をモチーフに使う
- アイコンは濃紺の太線で単純化（PC・カメラ・Wi-Fi）
- 人物はポーズで動きを出し、セクション境界にまたがらせる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは上部にグローバルナビ、FVはイラスト全面にロゴを左上へ
- PCのSTEPは3カラム横並び
- PCの活用例は左にイラスト、右に説明の2カラム
- PCのFAQ・会社概要は中央寄せ幅約60%
- PCの告知ブロックは横長スタジアム形で左にロゴ、右に本文
- PCの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-56ae0d44`（元 LP の URL から採番）
- **元 LP**: https://nisshodenkiseigyo.com/chromateach/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://nisshodenkiseigyo.com/chromateach/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

BtoB・SaaS・ITサービス白×紺ブルーの採用AI SaaS LPClean Blue Corporate SaaS Recruitment LP BtoB・SaaS・ITサービス紺×水色の清潔感ある店舗向けSaaS LPClean Slate Navy Wellness SaaS LP BtoB・SaaS・ITサービス黄緑×黄×黒のポップなBtoB広告サービスLPLime Yellow Pop BtoB Marketing LP BtoB・SaaS・ITサービス藍紫×白グレーの静かなAI SaaS LPIndigo Minimal AI SaaS Pre-Registration LP BtoB・SaaS・ITサービス水色×オレンジの店舗向けSaaS特典LPBright Sky Blue SaaS Campaign LP BtoB・SaaS・ITサービス若草グリーン×オレンジCTAのBtoB SaaS LPFresh Green Corporate SaaS LP