---
version: alpha
name: Sky Gradient Friendly Housing Recruit LP
description: 濃い青から水色、ミントへ流れる縦グラデーションのファーストビューが特徴の住宅メーカー新卒採用サイト。細身の欧文セリフ見出しとフラットな人物イラストを組み合わせ、温かく誠実な印象を出している。下層は薄いグレー地に写真と青い角型ボタンを並べ、最後は濃紺の帯でエントリーへ誘導する。
colors:
  primary: '#2C62BE'
  secondary: '#8DD4E0'
  cta: '#0090CF'
  on-cta: '#FEFEFE'
  background: '#FAFAFA'
  background-alt: '#F6F6F6'
  surface: '#FEFEFE'
  tint-1: '#E3F6F9'
  text: '#333333'
  accent-1: '#217BAE'
  accent-2: '#0CA3AC'
  accent-3: '#D08A9B'
  dark-section: '#1B3D6B'
  line: '#CCCFD5'
  cta-accessible: '#007CB3'
  accent-2-accessible: '#0A8188'
typography:
  display:
    fontFamily: Marcellus
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.08em
  accent:
    fontFamily: Montserrat
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.08em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.06em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.04em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.2em
rounded:
  sm: 4px
  md: 16px
  lg: 32px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  pill-company:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 44px
  button-external:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 32px
  news-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 500px
  tag-category:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 18px
  heading-en-ja:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 60px
  link-circle-arrow:
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 44px
  photo-tile:
    typography: '{typography.headline-md}'
    height: 170px
  entry-band:
    backgroundColor: '{colors.dark-section}'
    typography: '{typography.display}'
    height: 200px
---

# DESIGN.md — 青空グラデと人物イラストの住宅採用 LP（Sky Gradient Friendly Housing Recruit LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: 清潔・爽やか、信頼・誠実、やさしい・柔らかい
- **キーワード**: 空色グラデーション・フラット人物イラスト・細身欧文セリフ・家型の写真切り抜き・地域密着・余白多め
- **地の質感**: 細かいノイズが乗ったなめらかなグラデーション。下層はフラットな薄グレーの面。
- **形**: 上角が大きく丸い面、ピル型のボタン、五角形の家型に切った写真、角なしの青い長方形ボタン。
- **温度感**: 爽やかでやや涼しい。人物イラストの暖色が温かさを足している。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#2C62BE` | ブランドの青・リンク・見出し | 6% | 画素の実測 |
| `secondary` | `#8DD4E0` | グラデーション下側の水色 | 7% | 画素の実測 |
| `cta` | `#0090CF` | 事業カード内の外部リンクボタン | 3% | 画素の実測 |
| `on-cta` | `#FEFEFE` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `background` | `#FAFAFA` | ページの地 | 35% | 画素の実測 |
| `background-alt` | `#F6F6F6` | 事業内容セクションの薄グレー地 | 13% | 画素の実測 |
| `surface` | `#FEFEFE` | ニュースカード・特徴カードの白 | 8% | 画素の実測 |
| `tint-1` | `#E3F6F9` | グループ各社ピル型ボタン | 3% | 画素の実測 |
| `text` | `#333333` | 見出し・本文の濃い墨色 | 4% | 推定 |
| `accent-1` | `#217BAE` | 英字ラベル・特徴見出しの青 | 0% | 画素の実測 |
| `accent-2` | `#0CA3AC` | ニュースの会社タグのティール | 0% | 画素の実測 |
| `accent-3` | `#D08A9B` | お知らせタグのピンク枠 | 0% | 画素の実測 |
| `dark-section` | `#1B3D6B` | エントリー帯の濃紺 | 3% | 画素の実測 |
| `line` | `#CCCFD5` | ニュース見出し下の区切り線 | 0% | 画素の実測 |
| `cta-accessible` | `#007CB3` | AA を満たす補正値（計算） |  | 計算 |
| `accent-2-accessible` | `#0A8188` | AA を満たす補正値（計算） |  | 計算 |

- ファーストビューは上の濃い青から下のミントへ縦グラデーションにし、薄グレーの地へ溶け込ませる。
- 本文の地は #FAFAFA 系の薄グレー、カードは白にしてごく弱い影で浮かせる。
- 外部リンクボタンは彩度の高い青のベタ塗りに統一する。
- 英字の小見出しは明るい青、日本語の見出しは濃い墨色で二段に組む。
- タグはピンク枠・紫枠・ティールのベタで種別を色分けする。
- 最後のエントリー帯だけを濃紺の面にして、ページの締めにする。
- `button-external` は文字 `#FEFEFE` × 背景 `#0090CF` のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#007CB3`、4.59:1）を使う。
- `tag-category` は文字 `#FEFEFE` × 背景 `#0CA3AC` のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#0A8188`、4.62:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビュー・セクションの大きな英字ロゴ風見出し | 欧文セリフ | Marcellus | 400 | 64px | 1.0 | 0.02em |
| `headline-lg` | セクションの日本語見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.05em |
| `headline-md` | 事業名などカードの見出し | 明朝 | Noto Serif JP | 500 | 20px | 1.4 | 0.08em |
| `accent` | 見出し上の英字ラベル | 欧文サンセリフ | Montserrat | 600 | 15px | 1.2 | 0.08em |
| `body-md` | 本文・リード文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.06em |
| `note` | ニュースの日付・タグ | ゴシック | Noto Sans JP | 500 | 11px | 1.5 | 0.04em |
| `label-button` | ボタンのラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.08em |
| `headline-sm` | 縦書きのキャッチコピー | ゴシック | Zen Kaku Gothic New | 500 | 30px | 1.5 | 0.2em |

- 大きな英字見出しは細身でコントラストのあるセリフ体にし、一部の文字だけ筆記体風にしてもよい。
- 英字見出しのすぐ下に日本語見出しを小さく添える。
- 本文は行間 2.0 前後で広めにとり、字間も少し開ける。
- 事業の見出しは明朝にして、ほかのゴシックと差をつける。
- コンセプト文はカギ括弧型の線で囲み、縦書きにする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。グループ各社ボタンだけ 2 列
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
- 事業写真は画面幅いっぱいに置き、その下に余白付きのテキストとボタンを置く。
- ニュースは白い角丸カードにまとめ、左右に約 20px の余白をとる。
- コンセプトは縦書きコピーと家型写真を左右に散らして配置する。
- コンテンツ紹介は全幅の写真タイルを縦に積み、左下に白文字のラベルを置く。
- 各セクションの間は 80px 前後の広い余白をとる。

## Elevation & Depth

- ニュースカード・特徴カードには、ぼかし 20px 程度・ごく薄い影を付ける。
- ピル型ボタンは影なしのフラットにする。
- 写真タイルの文字は下部に暗いグラデーションを敷いて読みやすくする。

## Shapes

- **角丸**: 小 4px ／ 中 16px ／ 大 32px。ボタンはピル型。
- **写真の切り抜き**: コンセプトの写真は屋根形の五角形で切り抜く。事業写真は全幅の角なし長方形、About の写真は角丸 12px。
- **セクション境界**: ファーストビューと About の面は上角だけを大きく丸める。ほかは直線で、地色の切り替えで区切る。
- グループ各社への誘導はピル型ボタンにする。
- 事業の外部リンクボタンは角なしの長方形にし、外部リンクアイコンを付ける。
- 円形の線枠に矢印を入れたボタンを、下線付きリンクと組み合わせる。

## Components

- **グループ各社ピル型ボタン**（`pill-company`）: 淡いミントの面に濃い文字。2 列のグリッドで並べる。
- **外部リンクボタン**（`button-external`）: 青のベタ塗りに白文字と外部リンクアイコン。幅は約 80%で中央に置く。
- **ニュースカード**（`news-card`）: 白い角丸カード。英字セリフの見出しの下に線を引き、日付・タグ・下線付きタイトルを並べる。
- **種別タグ**（`tag-category`）: ピンクや紫の枠線だけのピル型タグと、ティールのベタ塗りの会社名タグ。
- **英字ラベル付き見出し**（`heading-en-ja`）: 中央揃え。青い英字ラベルの下に、太字の日本語見出しを置く。
- **円形矢印リンク**（`link-circle-arrow`）: 下線付きの青い文字リンクと、青い線の円に矢印を入れたボタン。
- **コンテンツ写真タイル**（`photo-tile`）: 全幅の写真の左下に、太字の白文字ラベルを置く。
- **エントリー帯**（`entry-band`）: 濃紺の面に白い英字セリフの大見出しを置く。PC ではグラデーションのカードを並べる。

## Do's and Don'ts

**Do**
- ファーストビューは青からミントへのグラデーションにし、フラットな人物イラストを散りばめる。
- 英字のセリフ見出しと日本語のゴシックを対にして使う。
- 写真は家型や角丸で切り抜き、余白を広くとって配置する。
- ボタンの色は青系だけでまとめる。

**Don't**
- 赤やオレンジのベタ塗りの強い CTA は使わない。
- 地を真っ白にしすぎず、薄いグレーを保つ。
- 太いゴシックの英字見出しは使わない。
- 本文の行間を詰めない。

## Page Structure

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

1. **ファーストビュー**（コンセプトを英字ロゴで印象づける。）: 上角を丸めたグラデーションの面に大きな英字セリフ、日本語の副題、人物イラストを置き、scroll の縦線を添える。
2. **グループ各社一覧**（地域ごとの会社へ誘導する。）: ドット調の日本地図を背景に、ピル型ボタンを 2 列で並べる。
3. **ニュース**（インターンなどの最新情報を伝える。）: 白い角丸カードに、色分けしたタグ付きのリストと一覧リンクを入れる。
4. **コンセプトメッセージ**（働く想いを物語で伝える。）: 縦書きのカギ括弧コピー、家型に切った人物写真、長めの本文を組み合わせる。
5. **会社紹介**（会社の概要を伝える。）: 上角を丸めたグラデーションの面に、英字見出し・角丸写真・円形矢印リンクを置く。
6. **事業内容**（事業の幅を示す。）: 全幅写真、明朝の見出し、本文、青い外部リンクボタンを 1 組にして繰り返す。
7. **コンテンツ紹介**（インターン・仕事の流れ・FAQ へ誘導する。）: 白文字ラベルを乗せた全幅の写真タイルを縦に並べる。
8. **特徴**（技術力や強みを伝える。）: 建物の写真を背景に白いカードを重ね、青い明朝の見出しと『もっと見る』で文章を折りたたむ。
9. **エントリー/ログイン**（応募・ログインへ誘導する。）: 濃紺の帯に白い英字の大見出しと、卒業年度別のグラデーションカードを置く。

## Imagery

- 人物イラストは輪郭線なしのフラット調。紫・オレンジ・緑の服で、足元に薄い影を付ける。
- 社員写真は明るい室内での自然な笑顔。家型の五角形で切り抜く。
- 建物写真は青空と緑が入った晴天の外観。
- 地図はティール系のドットで描いた日本列島にする。
- グラデーションにはうっすらノイズを乗せる。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はファーストビューを横長にし、英字ロゴとイラストを左右に広げる。
- PC はグループ各社ボタンを 5 列に並べる。
- PC の事業内容は写真とテキストを左右交互の 2 カラムにする。
- PC のコンテンツ紹介は写真タイルを 3 列に並べる。
- PC のコンセプトは縦書きコピー・本文・写真を 3 列に配置する。
- PC のエントリーはグラデーションのカードを 2 列のグリッドにする。

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