白×黒に黄アクセントのIT企業コーポレートLP

Minimal Monochrome Corporate Recruit LP

薄いグレー地に白カードを置き、黒の幾何学欧文見出しと黄色の短い線ラベルで区切るミニマルなIT企業・採用サイト。黒いピル型ボタンと、矢印付きの円アイコンで回遊させる。

BtoB・SaaS・ITサービスシンプル・ミニマルクール・先進的信頼・誠実SPPC

ダウンロード

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

COLORS

配色

地は薄グレー、内容のまとまりは白カードで浮かせる
色は黒・白・グレーが基本、黄色は短い線やキャッチ内の一語だけ
ボタンは全て黒塗り白文字で統一
フッターと手前のCTA帯は暗色で締める
写真の空の青以外に彩度の高い色を増やさない

TYPOGRAPHY

書体

displayセクション欧文見出し欧文サンセリフ／ Montserrat 700 ／ 26px ／行間 1.2

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

headline-lgミッション和文見出しゴシック／ Noto Sans JP 700 ／ 18px ／行間 1.5

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

headline-sm職種リスト名欧文サンセリフ／ Montserrat 600 ／ 15px ／行間 1.3

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

accent黄線付きの小ラベルゴシック／ Noto Sans JP 700 ／ 10px ／行間 1.4

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

body-md本文ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.9

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

note日付・補足ゴシック／ Noto Sans JP 400 ／ 8px ／行間 1.5

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

label-buttonボタン文字ゴシック／ Noto Sans JP 700 ／ 9px ／行間 1.0

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

見出しは欧文大文字始まり＋上に和文小ラベルの二段構成
小ラベルの左に黄色の短い横線を置く
本文は小さめ・行間広め・字間やや広め
太字は見出しとボタンのみ

PAGE STRUCTURE

セクション構成

ファーストビュー会社の雰囲気を伝える青空と街並みを背にした社員集合写真全面、中央に白の短いコピーで一語を黄色
ミッション理念を示す黄線ラベル＋太字和文見出し、小さい本文2段落
事業紹介事業への導線スマホモック画像＋白カードに欧文見出し・説明・黒ボタン
カルチャー社風記事を見せる傾いた角丸写真の横スライド、カテゴリ黄字＋タイトル、一覧ボタン
採用職種別募集への導線白カード内に職種4行の矢印リスト＋細枠のオープンポジション枠
メンバー紹介働く人を伝える名刺の写真＋白カード説明と黒ボタン
お知らせ最新情報日付付きニュース3行リスト、すべてみるボタン
会社概要バナー会社情報への導線グレー角丸枠に黄色系イラストを両端、中央に欧文見出し
CTA応募・問い合わせ暗い写真背景に半透明枠ボタン2つ
フッターサイト回遊黒地にアコーディオンメニュー、SNS丸アイコン、ロゴ

COMPONENTS

部品

黒ピルボタン button-primary黒塗りに白文字中央、右端に小さな矢印
黄線ラベル section-label黄色の短い横線＋和文小見出し、下に欧文大見出し
白カード card-white薄グレー地に置く角丸の白い説明ブロック
矢印付きリスト行 list-row-arrow欧文名＋和文小字、右に円矢印、下に細線
お知らせ行 news-row日付グレー小字＋太字タイトル＋円矢印
細枠リンクボックス outline-box白地に灰色の細線枠、欧文見出しと短い説明中央
写真背景CTA photo-cta-banner暗くした集合写真に半透明枠のアイコン付きボタン2つ
フッターアコーディオン footer-accordion黒地に欧文メニュー、右に＋、白細線区切り

守ること

余白を広く取り、要素を詰めない
黄色は線と一語の強調に限定
見出しは欧文＋和文ラベルの組で統一
リンクは全て円矢印で示す
背景に極薄の巨大シルエットを敷いて奥行きを出す

DON'T

避けること

カラフルなボタンを使わない
濃い影やグラデーションを多用しない
本文を大きく太くしない
黄色を面で大きく塗らない
装飾的な書体を混ぜない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 白×黒に黄アクセントのIT企業コーポレートLP（Minimal Monochrome Corporate Recruit LP）

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

Overview

業種: BtoB・SaaS・ITサービス／ 雰囲気: シンプル・ミニマル、クール・先進的、信頼・誠実
キーワード: 余白多め・白カード・欧文見出し・黄色の差し色・黒ピルボタン・チーム写真
地の質感: フラットな薄グレー地に、ごく淡い大きな影絵シルエットを背景装飾として敷く
形: 角丸の白カードとピル型ボタン、細い円形矢印アイコン
温度感: ややクールだが黄色とチーム写真で人の温かみを添える

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#1D1D1D`	見出し・ボタンの黒	4%	画素の実測
`background`	`#FAFAFA`	ページ地の薄グレー	45%	画素の実測
`surface`	`#FFFFFF`	白カード	23%	画素の実測
`accent-1`	`#F5C518`	ラベル横線・強調文字の黄	0%	推定
`cta`	`#1C1D1C`	主ボタン	1%	画素の実測
`on-cta`	`#F2F1F2`	ボタン文字	0%	画素の実測
`text`	`#0A0A0A`	見出し文字	2%	画素の実測
`text-body`	`#4A4849`	本文グレー	2%	画素の主要色に補正
`text-muted`	`#8A8A8A`	日付など	0%	推定
`line`	`#F5F5F5`	リスト区切り線	0%	画素の主要色に補正
`background-alt`	`#EFEFEF`	会社概要バナーのグレー	3%	画素の実測
`dark-section`	`#1D1D1D`	フッター	10%	画素の実測
`on-dark`	`#F9F9F9`	フッター文字	0%	画素の実測
`secondary`	`#5E9AE2`	ヒーロー写真の空色	6%	画素の実測

地は薄グレー、内容のまとまりは白カードで浮かせる
色は黒・白・グレーが基本、黄色は短い線やキャッチ内の一語だけ
ボタンは全て黒塗り白文字で統一
フッターと手前のCTA帯は暗色で締める
写真の空の青以外に彩度の高い色を増やさない

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	セクション欧文見出し	欧文サンセリフ	Montserrat	700	26px	1.2	0.02em
`headline-lg`	ミッション和文見出し	ゴシック	Noto Sans JP	700	18px	1.5	0.02em
`headline-sm`	職種リスト名	欧文サンセリフ	Montserrat	600	15px	1.3	0.0em
`accent`	黄線付きの小ラベル	ゴシック	Noto Sans JP	700	10px	1.4	0.05em
`body-md`	本文	ゴシック	Noto Sans JP	400	10px	1.9	0.05em
`note`	日付・補足	ゴシック	Noto Sans JP	400	8px	1.5	0.05em
`label-button`	ボタン文字	ゴシック	Noto Sans JP	700	9px	1.0	0.05em

見出しは欧文大文字始まり＋上に和文小ラベルの二段構成
小ラベルの左に黄色の短い横線を置く
本文は小さめ・行間広め・字間やや広め
太字は見出しとボタンのみ
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、PC はカード＋画像の 2 カラムや 2 列リスト
本文ブロックの幅: 画面幅の約 94%
余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
白カードは画面端から約5pxだけ空けて大きく置く
セクション見出しは中央揃えか左揃えをカード単位で使い分け
ボタンはカード内中央に配置
リストは区切り線のみで行を分け右端に円矢印
セクション間はたっぷり余白

Elevation & Depth

影はほぼ使わずフラット
白カードと薄グレー地の明度差で階層を出す
オープンポジション枠は細い灰線の囲み

Shapes

角丸: 小 8px ／中 12px ／大 20px。ボタンはピル型。
写真の切り抜き: 角丸の矩形写真、傾けて左右にはみ出させるカルーセル
セクション境界: 直線（色面の切り替えのみ）
ボタンは完全なピル型
矢印は細線の円で囲む
カードは角丸12px前後
ヒーロー写真はSP全幅、PCは角丸で余白付き

Components

黒ピルボタン（button-primary）: 黒塗りに白文字中央、右端に小さな矢印
黄線ラベル（section-label）: 黄色の短い横線＋和文小見出し、下に欧文大見出し
白カード（card-white）: 薄グレー地に置く角丸の白い説明ブロック
矢印付きリスト行（list-row-arrow）: 欧文名＋和文小字、右に円矢印、下に細線
お知らせ行（news-row）: 日付グレー小字＋太字タイトル＋円矢印
細枠リンクボックス（outline-box）: 白地に灰色の細線枠、欧文見出しと短い説明中央
写真背景CTA（photo-cta-banner）: 暗くした集合写真に半透明枠のアイコン付きボタン2つ
フッターアコーディオン（footer-accordion）: 黒地に欧文メニュー、右に＋、白細線区切り

Do's and Don'ts

Do - 余白を広く取り、要素を詰めない - 黄色は線と一語の強調に限定 - 見出しは欧文＋和文ラベルの組で統一 - リンクは全て円矢印で示す - 背景に極薄の巨大シルエットを敷いて奥行きを出す

Don't - カラフルなボタンを使わない - 濃い影やグラデーションを多用しない - 本文を大きく太くしない - 黄色を面で大きく塗らない - 装飾的な書体を混ぜない

Page Structure

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

ファーストビュー（会社の雰囲気を伝える）: 青空と街並みを背にした社員集合写真全面、中央に白の短いコピーで一語を黄色
ミッション（理念を示す）: 黄線ラベル＋太字和文見出し、小さい本文2段落
事業紹介（事業への導線）: スマホモック画像＋白カードに欧文見出し・説明・黒ボタン
カルチャー（社風記事を見せる）: 傾いた角丸写真の横スライド、カテゴリ黄字＋タイトル、一覧ボタン
採用（職種別募集への導線）: 白カード内に職種4行の矢印リスト＋細枠のオープンポジション枠
メンバー紹介（働く人を伝える）: 名刺の写真＋白カード説明と黒ボタン
お知らせ（最新情報）: 日付付きニュース3行リスト、すべてみるボタン
会社概要バナー（会社情報への導線）: グレー角丸枠に黄色系イラストを両端、中央に欧文見出し
CTA（応募・問い合わせ）: 暗い写真背景に半透明枠ボタン2つ
フッター（サイト回遊）: 黒地にアコーディオンメニュー、SNS丸アイコン、ロゴ

Imagery

社員の集合写真やオフィスの自然なスナップ、明るい日中光
アプリ画面のスマホモックアップを斜めに2台重ねる
白い名刺など小物を斜め俯瞰で白背景に
黄色を主にしたフラットな3D風イラスト（グラフ・地図）
背景に極薄グレーの大きな人物・建物シルエット
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCはヘッダーにロゴと欧文ナビ横並び
PCのヒーローは角丸で左右に余白
PCは白カードと画像を左右2カラムで交互配置
採用職種はPCで2列グリッド
お知らせはPCで見出し左・リスト右の2カラム
フッターはPCで多列のサイトマップ、SPはアコーディオン

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: Minimal Monochrome Corporate Recruit LP
description: 薄いグレー地に白カードを置き、黒の幾何学欧文見出しと黄色の短い線ラベルで区切るミニマルなIT企業・採用サイト。黒いピル型ボタンと、矢印付きの円アイコンで回遊させる。
colors:
  primary: '#1D1D1D'
  background: '#FAFAFA'
  surface: '#FFFFFF'
  accent-1: '#F5C518'
  cta: '#1C1D1C'
  on-cta: '#F2F1F2'
  text: '#0A0A0A'
  text-body: '#4A4849'
  text-muted: '#8A8A8A'
  line: '#F5F5F5'
  background-alt: '#EFEFEF'
  dark-section: '#1D1D1D'
  on-dark: '#F9F9F9'
  secondary: '#5E9AE2'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Montserrat
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.3
  accent:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.05em
rounded:
  sm: 8px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 80px
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: 24px
  section-label:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 16px
  card-white:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 170px
  list-row-arrow:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 60px
  news-row:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 55px
  outline-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 100px
  photo-cta-banner:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    rounded: '{rounded.sm}'
    height: 55px
  footer-accordion:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 37px
---

# DESIGN.md — 白×黒に黄アクセントのIT企業コーポレートLP（Minimal Monochrome Corporate Recruit LP）

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

## Overview

- **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: シンプル・ミニマル、クール・先進的、信頼・誠実
- **キーワード**: 余白多め・白カード・欧文見出し・黄色の差し色・黒ピルボタン・チーム写真
- **地の質感**: フラットな薄グレー地に、ごく淡い大きな影絵シルエットを背景装飾として敷く
- **形**: 角丸の白カードとピル型ボタン、細い円形矢印アイコン
- **温度感**: ややクールだが黄色とチーム写真で人の温かみを添える

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#1D1D1D` | 見出し・ボタンの黒 | 4% | 画素の実測 |
| `background` | `#FAFAFA` | ページ地の薄グレー | 45% | 画素の実測 |
| `surface` | `#FFFFFF` | 白カード | 23% | 画素の実測 |
| `accent-1` | `#F5C518` | ラベル横線・強調文字の黄 | 0% | 推定 |
| `cta` | `#1C1D1C` | 主ボタン | 1% | 画素の実測 |
| `on-cta` | `#F2F1F2` | ボタン文字 | 0% | 画素の実測 |
| `text` | `#0A0A0A` | 見出し文字 | 2% | 画素の実測 |
| `text-body` | `#4A4849` | 本文グレー | 2% | 画素の主要色に補正 |
| `text-muted` | `#8A8A8A` | 日付など | 0% | 推定 |
| `line` | `#F5F5F5` | リスト区切り線 | 0% | 画素の主要色に補正 |
| `background-alt` | `#EFEFEF` | 会社概要バナーのグレー | 3% | 画素の実測 |
| `dark-section` | `#1D1D1D` | フッター | 10% | 画素の実測 |
| `on-dark` | `#F9F9F9` | フッター文字 | 0% | 画素の実測 |
| `secondary` | `#5E9AE2` | ヒーロー写真の空色 | 6% | 画素の実測 |

- 地は薄グレー、内容のまとまりは白カードで浮かせる
- 色は黒・白・グレーが基本、黄色は短い線やキャッチ内の一語だけ
- ボタンは全て黒塗り白文字で統一
- フッターと手前のCTA帯は暗色で締める
- 写真の空の青以外に彩度の高い色を増やさない

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクション欧文見出し | 欧文サンセリフ | Montserrat | 700 | 26px | 1.2 | 0.02em |
| `headline-lg` | ミッション和文見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em |
| `headline-sm` | 職種リスト名 | 欧文サンセリフ | Montserrat | 600 | 15px | 1.3 | 0.0em |
| `accent` | 黄線付きの小ラベル | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.05em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 10px | 1.9 | 0.05em |
| `note` | 日付・補足 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.05em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 9px | 1.0 | 0.05em |

- 見出しは欧文大文字始まり＋上に和文小ラベルの二段構成
- 小ラベルの左に黄色の短い横線を置く
- 本文は小さめ・行間広め・字間やや広め
- 太字は見出しとボタンのみ
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、PC はカード＋画像の 2 カラムや 2 列リスト
- **本文ブロックの幅**: 画面幅の約 94%
- **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
- 白カードは画面端から約5pxだけ空けて大きく置く
- セクション見出しは中央揃えか左揃えをカード単位で使い分け
- ボタンはカード内中央に配置
- リストは区切り線のみで行を分け右端に円矢印
- セクション間はたっぷり余白

## Elevation & Depth

- 影はほぼ使わずフラット
- 白カードと薄グレー地の明度差で階層を出す
- オープンポジション枠は細い灰線の囲み

## Shapes

- **角丸**: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 角丸の矩形写真、傾けて左右にはみ出させるカルーセル
- **セクション境界**: 直線（色面の切り替えのみ）
- ボタンは完全なピル型
- 矢印は細線の円で囲む
- カードは角丸12px前後
- ヒーロー写真はSP全幅、PCは角丸で余白付き

## Components

- **黒ピルボタン**（`button-primary`）: 黒塗りに白文字中央、右端に小さな矢印
- **黄線ラベル**（`section-label`）: 黄色の短い横線＋和文小見出し、下に欧文大見出し
- **白カード**（`card-white`）: 薄グレー地に置く角丸の白い説明ブロック
- **矢印付きリスト行**（`list-row-arrow`）: 欧文名＋和文小字、右に円矢印、下に細線
- **お知らせ行**（`news-row`）: 日付グレー小字＋太字タイトル＋円矢印
- **細枠リンクボックス**（`outline-box`）: 白地に灰色の細線枠、欧文見出しと短い説明中央
- **写真背景CTA**（`photo-cta-banner`）: 暗くした集合写真に半透明枠のアイコン付きボタン2つ
- **フッターアコーディオン**（`footer-accordion`）: 黒地に欧文メニュー、右に＋、白細線区切り

## Do's and Don'ts

**Do**
- 余白を広く取り、要素を詰めない
- 黄色は線と一語の強調に限定
- 見出しは欧文＋和文ラベルの組で統一
- リンクは全て円矢印で示す
- 背景に極薄の巨大シルエットを敷いて奥行きを出す

**Don't**
- カラフルなボタンを使わない
- 濃い影やグラデーションを多用しない
- 本文を大きく太くしない
- 黄色を面で大きく塗らない
- 装飾的な書体を混ぜない

## Page Structure

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

1. **ファーストビュー**（会社の雰囲気を伝える）: 青空と街並みを背にした社員集合写真全面、中央に白の短いコピーで一語を黄色
2. **ミッション**（理念を示す）: 黄線ラベル＋太字和文見出し、小さい本文2段落
3. **事業紹介**（事業への導線）: スマホモック画像＋白カードに欧文見出し・説明・黒ボタン
4. **カルチャー**（社風記事を見せる）: 傾いた角丸写真の横スライド、カテゴリ黄字＋タイトル、一覧ボタン
5. **採用**（職種別募集への導線）: 白カード内に職種4行の矢印リスト＋細枠のオープンポジション枠
6. **メンバー紹介**（働く人を伝える）: 名刺の写真＋白カード説明と黒ボタン
7. **お知らせ**（最新情報）: 日付付きニュース3行リスト、すべてみるボタン
8. **会社概要バナー**（会社情報への導線）: グレー角丸枠に黄色系イラストを両端、中央に欧文見出し
9. **CTA**（応募・問い合わせ）: 暗い写真背景に半透明枠ボタン2つ
10. **フッター**（サイト回遊）: 黒地にアコーディオンメニュー、SNS丸アイコン、ロゴ

## Imagery

- 社員の集合写真やオフィスの自然なスナップ、明るい日中光
- アプリ画面のスマホモックアップを斜めに2台重ねる
- 白い名刺など小物を斜め俯瞰で白背景に
- 黄色を主にしたフラットな3D風イラスト（グラフ・地図）
- 背景に極薄グレーの大きな人物・建物シルエット
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCはヘッダーにロゴと欧文ナビ横並び
- PCのヒーローは角丸で左右に余白
- PCは白カードと画像を左右2カラムで交互配置
- 採用職種はPCで2列グリッド
- お知らせはPCで見出し左・リスト右の2カラム
- フッターはPCで多列のサイトマップ、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-c5e4f375`（元 LP の URL から採番）
- **元 LP**: https://erevista.co.jp/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://erevista.co.jp/（公開状況により表示できない場合があります）
この 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