--- version: alpha name: Sky Blue Gradient Corporate Recruit LP description: 白地に水色〜青紫のグラデーション面と、社員のオフィス写真を重ねる採用サイト。背景には大きな欧文の白抜き文字を敷き、白カードを写真に重ねて見出しと丸ボタンを置く。全体は爽やかで、前向きなトーン。 colors: primary: '#68A0E2' secondary: '#4773B0' background: '#FFFFFF' background-alt: '#E1E9FE' tint-1: '#E1E7FF' text: '#2E2E2E' text-muted: '#737891' line: '#E2E8FB' cta: '#FD5B8B' on-cta: '#FFFFFF' accent-1: '#44D18C' accent-2: '#68A0E2' surface: '#FFFFFF' cta-accessible: '#EA0347' accent-1-accessible: '#218655' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 64px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.02em headline-sm: fontFamily: Montserrat fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 48px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-career: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-arrow: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px heading-bg-word: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 120px overlap-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 200px member-card: backgroundColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 140px news-bar: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 28px fixed-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — 空色グラデと白カードの新卒採用 LP（Sky Blue Gradient Corporate Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 清潔・爽やか、クール・先進的、信頼・誠実、ポップ・元気 - **キーワード**: 空色グラデーション・白カードの重ね・大きな白抜き欧文・社員の自然な写真・丸矢印ボタン - **地の質感**: フラットな面とやわらかな線形グラデーション。写真の上に青の半透明オーバーレイをかける - **形**: 写真は角丸 8px 前後。セクションの上辺だけを大きな角丸にする。ボタンはピル型で右端に丸矢印を付ける - **温度感**: やや寒色寄り。ピンクと緑を CTA のアクセントに使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#68A0E2` | ブランドの青・グラデーション面 | 9% | 画素の主要色に補正 | | `secondary` | `#4773B0` | 見出しラベルの濃い青 | 1% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 39% | 画素の実測 | | `background-alt` | `#E1E9FE` | 淡い水色のセクション地 | 8% | 画素の実測 | | `tint-1` | `#E1E7FF` | 淡い青紫のグラデーション地 | 6% | 画素の実測 | | `text` | `#2E2E2E` | 見出し・本文の文字 | 3% | 画素の実測 | | `text-muted` | `#737891` | 日付・注釈の文字 | 1% | 画素の主要色に補正 | | `line` | `#E2E8FB` | 背景欧文の白抜き文字の輪郭・区切り線 | 2% | 画素の主要色に補正 | | `cta` | `#FD5B8B` | 新卒エントリーボタン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#44D18C` | キャリア採用ボタンの緑 | 0% | 画素の実測 | | `accent-2` | `#68A0E2` | 丸矢印アイコンの水色 | 0% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | 写真に重ねる白カード | 6% | 画素の実測 | | `cta-accessible` | `#EA0347` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#218655` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡い水色・淡い青紫を交互に使い、セクションを切り替える - 大きな面は左上の水色から右下の青紫へ流れるグラデーションにする - 写真の背景には青の半透明オーバーレイをかけ、色調をそろえる - セクションのラベル（英字）は濃い青、見出しは濃いグレーにする - ピンクと緑は応募 CTA だけに使う - 背景に敷く大きな欧文は白か淡い線だけで描き、主張させない - `button-entry` は文字 `#FFFFFF` × 背景 `#FD5B8B` のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#EA0347`、4.56:1）を使う。 - `button-career` は文字 `#FFFFFF` × 背景 `#44D18C` のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#218655`、4.56:1）を使う。 - `fixed-entry` は文字 `#FFFFFF` × 背景 `#FD5B8B` のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#EA0347`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ（白帯に乗せる） | ゴシック | Noto Sans JP | 900 | 30px | 1.5 | 0.04em | | `headline-lg` | セクションの見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.03em | | `accent` | 背景に敷く大きな白抜き欧文 | 欧文サンセリフ | Montserrat | 800 | 64px | 1.0 | 0.02em | | `headline-sm` | 英字のセクションラベル | 欧文サンセリフ | Montserrat | 700 | 13px | 1.4 | 0.08em | | `body-md` | 本文・リード文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.03em | | `note` | ニュースの日付・社員カードの所属 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `label-button` | 丸矢印付きボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.04em | - 見出しの上に英字ラベルを小さく置き、2 段で組む - FV のキャッチは 1 行ずつ白帯に乗せ、写真の上に置く - 背景の欧文は見出しより背面に置き、一部が写真に隠れてもよい - 本文は行間 2.0 と広めにとり、短い行で改行する - 見出しは 1〜2 行に収め、太字は 700 以上にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は写真とテキストカードの 2 カラムを重ねて配置 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 写真と白カードは少しずらして重ね、奥行きを出す - 左右に配置を振り分け、セクションごとに写真の位置を入れ替える - 大きな欧文は見出しの真上か背面に置く - ボタンは各セクションの末尾に左寄せで 1〜2 個置く - CTA ブロックはグラデーションの枠の中に白い箱を入れて作る ## Elevation & Depth - 白カードはごく薄い影（0 4px 16px rgba(60,100,180,0.08)）だけにする - 動画サムネイルは青の太枠で囲み、影は付けない - ボタンには影を付けず、白地のボタンは細い枠線だけにする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 48px。ボタンはピル型。 - **写真の切り抜き**: 横長の長方形を角丸 8px で切り抜く。一部の写真は画面の端まで裁ち落とす - **セクション境界**: セクション上辺の左右を大きな角丸（48px 前後）にした面で切り替える - ボタンはピル型で、右端に水色の丸矢印アイコンを付ける - 社員カードは上に写真、下に青いグラデーションの帯を置く - FV の右上には縦に並ぶピル型の固定ボタンを置く ## Components - **新卒エントリーボタン**（`button-entry`）: ピンクのピル型。左に英字と小さな日本語、右に矢印を置く - **キャリア採用ボタン**（`button-career`）: 緑のピル型。エントリーボタンと横に並べる - **丸矢印付きサブボタン**（`button-arrow`）: 白地のピル型に細い枠線を付け、右端に水色の丸矢印アイコンを置く - **背景欧文付き見出し**（`heading-bg-word`）: 大きな白抜きの欧文を敷き、その上に英字ラベルと日本語見出しを重ねる - **写真に重ねる白カード**（`overlap-card`）: 写真の角に重ねた白い箱に、ラベル・見出し・短文・ボタンを入れる - **社員カード**（`member-card`）: 人物写真の下に青いグラデーションの帯を付け、所属・名前・職種タグを白文字で入れる - **ニュース帯**（`news-bar`）: FV 下に重ねる白いピル型の帯。ラベル・日付・1 行のお知らせと一覧ボタンを並べる - **固定エントリーボタン**（`fixed-entry`）: 右上に固定する縦並びのピル型ボタン。ピンクと青の 2 つを置く ## Do's and Don'ts **Do** - 写真は自然光のオフィスで、笑顔で協働する若手社員を写す - セクションごとに写真とカードの左右を入れ替え、リズムを作る - グラデーションは水色から青紫の範囲に収める - 各セクションの末尾に丸矢印ボタンを置き、詳細ページへ誘導する - 背景の大きな欧文はセクション名と同じ単語にする **Don't** - 濃い黒や原色の赤を広い面に使わない - ピンクと緑を CTA 以外に使わない - 影や立体的な装飾を強くしない - 本文を詰めて組まない（行間 2.0 前後を保つ） - イラスト主体にせず、実写の社員写真を主役にする ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（職場の雰囲気とメッセージを一目で伝える）: 社員の集合写真を全面に敷き、青いグラデーションを重ねる。キャッチは 4 行の白帯に乗せ、下にニュース帯を置く 2. **理念メッセージ**（会社の価値観を語る）: 左に短い行の本文を縦に並べ、右に人物写真で中を埋めた大きな欧文ロゴを置く 3. **動画紹介**（動画で社風を伝える）: 淡い青紫の地に三角の装飾を置く。中央に青枠の動画、右に縦に並ぶサムネイルを配置する 4. **代表メッセージ**（会社の想いを伝える）: 大きな欧文を背景に敷き、写真を重ねた青いグラデーション面に見出しと丸ボタンを入れる 5. **写真ギャラリー**（日常の様子を見せる）: 角丸の写真を横 2 段に並べ、ずらして配置する 6. **社風**（文化・制度へ誘導する）: 上辺を角丸にした水色の地に、大きな写真と白カードを重ねる 7. **事業紹介**（仕事内容へ誘導する）: 左に写真、右下に白カードを重ね、背後に大きな欧文を敷く 8. **社員紹介**（先輩社員の声へ誘導する）: 縦書きの大きな欧文を左に置く。バナーと 4 人の社員カードを並べ、下にボタンを 2 つ置く 9. **応募 CTA**（エントリーを促す）: 青いグラデーションの枠の中に白い箱を入れ、見出しの下にピンクと緑のボタンを並べる 10. **ニュース**（最新のお知らせを伝える）: オフィス写真の帯に白い箱を重ね、日付と本文の一覧を細い線で区切る 11. **フッター**（ページトップへ戻る）: 白地の中央にロゴとページトップへのリンクを置く ## Imagery - 明るい窓際のオフィスで、パソコンを囲んで談笑する若手社員を撮る - 写真は彩度を控えめにし、白と青が基調の清潔な色調にする - 背景の写真には青の半透明オーバーレイをかける - 大きな欧文の文字の中に人物写真を切り抜いて入れる装飾を使う - 三角の大きな幾何学図形を、淡い青で背景に置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP は写真を全幅にし、白カードは写真の下に少し重ねて縦に積む - 背景の欧文は SP では 48〜64px に縮め、はみ出す部分は切る - 社員カードは SP では 2 列にする - CTA の 2 ボタンは SP では縦に並べる - 固定エントリーボタンは 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-9cc367a5`（元 LP の URL から採番） - **元 LP**: https://www.ill.co.jp/recruit/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（8/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。