---
version: alpha
name: Bold Blue Geometric Recruiting LP
description: 青を 3 段階の濃淡に分けてセクションを塗り分けた新卒採用サイトです。セクションごとに矢印・黄色の帯・ピンクの輪といった幾何学モチーフを縦に並べて装飾します。白い角丸カードに写真とリンク名を載せた一覧が中心で、社員紹介では丸い写真に色付きの枠と職種バッジを付けます。明るく元気で、きちんとした誠実さもある印象です。
colors:
  primary: '#0780C5'
  secondary: '#0069B7'
  background-alt: '#0F8FD0'
  background: '#FEFEFE'
  text: '#105896'
  on-dark: '#F9FEFD'
  accent-1: '#EEEB64'
  accent-2: '#E8749E'
  cta: '#EFEB65'
  on-cta: '#01569D'
  accent-3: '#D72C2C'
  tint-1: '#38C53B'
  dark-section: '#0069B7'
  marker: '#7CBC5B'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.25
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.5
    letterSpacing: 0.03em
  accent:
    fontFamily: Montserrat
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.12em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.7
    letterSpacing: 0.04em
  label-button:
    fontFamily: Montserrat
    fontSize: 13px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.1em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 6px
  md: 14px
  lg: 40px
  full: 999px
spacing:
  unit: 8px
  card: 10px
  section: 100px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  link-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 90px
  section-heading:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 90px
  intern-banner:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 70px
  entry-tabs:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.accent-1}'
    typography: '{typography.label-button}'
    height: 48px
  button-outline:
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 64px
  staff-avatar:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 160px
  role-badge:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 22px
  news-row:
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 100px
  deco-column:
    backgroundColor: '{colors.dark-section}'
---

# DESIGN.md — 青の濃淡×黄・桃の幾何学装飾の新卒採用 LP（Bold Blue Geometric Recruiting LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、信頼・誠実、清潔・爽やか、クール・先進的
- **キーワード**: 青の濃淡ブロック・幾何学モチーフの縦列・白い角丸リンクカード・丸い写真の社員紹介・英字ラベル付き見出し
- **地の質感**: フラットなベタ塗り。グラデーションや影はほぼ使わない。インタビュー背景だけは淡い記号柄を散らす
- **形**: 角丸カード、正円の写真、山形の矢印、長方形の帯、輪っか
- **温度感**: 青が主体のクールさに、黄・ピンク・赤の差し色で温かみと元気さを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#0780C5` | メインの青（メッセージ・インタビュー背景） | 30% | 画素の実測 |
| `secondary` | `#0069B7` | 濃い青（会社を知る・福利厚生の背景） | 20% | 画素の実測 |
| `background-alt` | `#0F8FD0` | 明るい青（採用情報の背景） | 14% | 画素の実測 |
| `background` | `#FEFEFE` | 白いカードの地 | 18% | 画素の実測 |
| `text` | `#105896` | カード上のリンク名に使う青文字 | 1% | 画素の実測 |
| `on-dark` | `#F9FEFD` | 青い地の上の見出し文字 | 1% | 画素の実測 |
| `accent-1` | `#EEEB64` | 黄色の帯装飾・日付の文字 | 2% | 画素の実測 |
| `accent-2` | `#E8749E` | ピンクの輪の装飾 | 1% | 推定 |
| `cta` | `#EFEB65` | インターン案内のバナー（黄色） | 1% | 画素の実測 |
| `on-cta` | `#01569D` | 黄色バナー上の文字 | 0% | 画素の主要色に補正 |
| `accent-3` | `#D72C2C` | 職種バッジ・写真枠の赤 | 0% | 推定 |
| `tint-1` | `#38C53B` | エントリー用ボタン群の緑 | 0% | 画素の実測 |
| `dark-section` | `#0069B7` | シェブロン（矢印）装飾の濃い青 | 3% | 画素の実測 |
| `marker` | `#7CBC5B` | お知らせラベルの黄緑 | 0% | 画素の実測 |

- セクションごとに青の濃淡（#0780C5／#006AB8／#1893CA）を交互に塗り、境界は直線で切り替える
- 文字は青い地の上では白、白カードの上では青にする。黒文字は使わない
- 装飾モチーフはセクションごとに 1 色に固定する（濃い青の矢印、黄色の帯、ピンクの輪）
- 黄色は案内バナー・日付・装飾帯に限って使い、目立たせる役にする
- 社員バッジと写真枠は職種ごとに赤・紺・橙・紫などで色分けする
- エントリー用ボタン群は濃い青・水色・緑の 3 色を横に並べる

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの大きなキャッチ | ゴシック | Zen Kaku Gothic New | 900 | 44px | 1.25 | 0.02em |
| `headline-lg` | セクションの見出し（日本語） | ゴシック | Noto Sans JP | 900 | 24px | 1.5 | 0.03em |
| `accent` | 見出しの上に置く英字ラベル | 欧文サンセリフ | Montserrat | 700 | 15px | 1.3 | 0.12em |
| `headline-sm` | カード上のリンク名・社員名 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.04em |
| `body-md` | 見出し下のサブ文・お知らせ本文 | ゴシック | Noto Sans JP | 700 | 13px | 1.7 | 0.04em |
| `label-button` | エントリーボタン・枠線ボタンの文字 | 欧文サンセリフ | Montserrat | 800 | 13px | 1.3 | 0.1em |
| `note` | 職種バッジ・日付 | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.05em |

- 全体を太めのゴシックでそろえ、細い文字は使わない
- 見出しは「英字ラベル（小）→日本語見出し（大）→サブ文（小）」の 3 段で組む
- 英字ラベルは字間を広めに取る
- 見出しは左寄せ、ボタンの文字は中央寄せにする
- ファーストビューのキャッチは 2 行に分け、句読点まで大きく見せる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、PC はカード一覧を 2 カラム、社員紹介を 4 カラムにする
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 100px、基本単位 8px、カード内 10px（375px 幅換算）
- 見出しブロックは左端から 20px の位置にそろえる
- リンクカードは横幅いっぱい（左右 20px 余白）に並べ、間隔は約 20px にする
- 装飾モチーフはカードの後ろ（右寄りか中央）に縦一列で敷く
- 社員紹介は 2 列グリッドで、1 人あたり丸写真・名前・バッジを縦に積む
- セクションの上下に 80〜100px の余白を取る

## Elevation & Depth

- 影はほぼ使わずフラットにする
- 白カードは青い地とのコントラストだけで浮かせる
- 装飾モチーフはカードの下の層に置き、カードと重ねる

## Shapes

- **角丸**: 小 6px ／ 中 14px ／ 大 40px。ボタンは角丸の長方形。
- **写真の切り抜き**: カード内のサムネイルは角丸なしの横長、社員写真は正円にして太さ 3px の色枠を付ける
- **セクション境界**: 直線で背景色だけを切り替える
- リンクカードは角丸 14px 前後にする
- 職種バッジは角丸 6px の小さな四角にする
- インターン案内バナーはピル型にして白い縁取りを付ける
- メインのボタンは角のない白枠線の四角にし、右側に細い矢印を添える

## Components

- **写真付きリンクカード**（`link-card`）: 白い角丸カード。左に横長の写真、右に青い太字のリンク名を置く
- **英字ラベル付き見出し**（`section-heading`）: 小さな英字ラベル、大きな日本語見出し、サブ文の 3 段。白文字で左寄せにする
- **インターン案内バナー**（`intern-banner`）: 黄色のピル型。左に人物イラスト、中央に 2 行の案内文、右に細い矢印を置く
- **エントリー用ボタン群**（`entry-tabs`）: 3 色の四角を横に並べ、年度とボタン名を黄色の英字で 2 行に入れる
- **白枠線ボタン**（`button-outline`）: 透明の地に白い 2px 枠線。中央に白文字、右に長い細矢印を置く
- **社員の丸写真**（`staff-avatar`）: 白背景の正円写真に職種カラーの太い枠を付け、下に白い名前を置く
- **職種バッジ**（`role-badge`）: 職種カラーで塗った小さな角丸四角に白文字
- **お知らせ行**（`news-row`）: 黄色の日付と黄緑のピル型ラベルの下に白文字の本文を置き、下に細い白線を引く
- **縦列の幾何学装飾**（`deco-column`）: シェブロン矢印・黄色の帯・ピンクの輪をセクションごとに縦一列で繰り返す

## Do's and Don'ts

**Do**
- セクションごとに青の濃淡を切り替えて区切る
- 各セクションに専用の幾何学モチーフを 1 種類だけ縦に並べる
- リンクは写真付きの白い角丸カードに統一する
- 社員は丸写真＋職種カラーのバッジで色分けする
- 見出しは必ず英字ラベルと組み合わせる

**Don't**
- 黒やグレーの背景を使わない
- グラデーションや強い影でカードを立体的にしない
- 1 つのセクションに複数のモチーフを混ぜない
- 細い明朝体や手書き体を使わない
- 青い地の上に青系の文字を置かない

## Page Structure

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

1. **ファーストビュー**（企業の姿勢と人柄を一目で伝える）: 屋外で撮った人物写真を全面に敷き、左上に白い極太のキャッチ 2 行と英字の会社表記を置く。左下に縦書きの SCROLL を入れる
2. **メッセージ・導線**（採用メッセージとエントリーへ誘導する）: メインの青の地に中央の矢印列を敷き、見出し・黄色のインターン案内バナー・3 色のエントリーボタンを並べる
3. **お知らせ**（最新情報を伝える）: 黄色の日付、ラベル、本文を並べ、細い白線で区切る
4. **会社を知る**（事業や企業概要への入口）: 濃い青の地に黄色の帯を縦に並べ、写真付きの白カードを 5 枚積む
5. **採用情報**（募集要項やキャリアなど採用関連の入口）: 明るい青の地にピンクの輪を縦に並べ、白カードを 9 枚積む
6. **福利厚生**（制度面の安心感を伝える）: 濃い青の地に矢印列を敷き、白カードを 4 枚積む
7. **社員紹介**（働く人の顔を見せて親近感をつくる）: 記号柄を散らした青の地に、丸写真と職種バッジを 2 列で並べ、最後に白枠線の一覧ボタンを置く

## Imagery

- 人物写真は自然光で撮った明るい笑顔のスーツ姿。背景は緑の木々やガラス張りのオフィスをぼかす
- 社員写真は白背景の胸から上で、正円に切り抜く
- カードのサムネイルは街並み・設備・オフィス・データ画面など、事業を連想させる青みのある写真にする
- 装飾はシェブロン矢印・長方形の帯・輪っかなど単純な図形で、ベタ塗りにする
- インタビュー背景には三角・点線・円などの小さな記号を、淡い青で散らす
- 人物イラストはスーツ姿でバンザイする明るいフラットな絵柄にする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では人物写真を右上に寄せて縮め、キャッチは左側の青い地に置く
- PC ではリンクカードを 2 カラムのグリッドにし、高さを低くする
- PC では社員紹介を 4 列にする
- 幾何学装飾の縦列は PC でもセクション右寄りか中央に残す
- PC では見出しを横 1 行に広げ、コンテンツ幅を約 75% にする

## 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-b6513aec`（元 LP の URL から採番）
- **元 LP**: https://newgrad.ntt-east.co.jp/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。