DESIGN.md — 空色×紺の斜め幾何学の採用サイト LP（Bright Blue Geometric Corporate Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、清潔・爽やか、信頼・誠実
• キーワード: スカイブルー・斜めカット・光の破片・英字大見出し・紺のピルボタン・チーム写真
• 地の質感: 淡い水色のグラデーション地に、ぼかした三角形やネオン調の光の帯を重ねる。写真はクリアで明るい。
• 形: 平行四辺形にカットした写真、斜めのセクション境界、角丸が大きいピル型ボタン、角のない白カード。
• 温度感: やや寒色寄りで爽やか。人物の笑顔で温かみを足す。

Colors

• 地は淡い水色を基本にし、環境・制度セクションとフッターだけ空色の面で反転させる。
• 空色地の上は白カード（説明）と濃紺カード（箇条書き）を上下に組み合わせる。
• ボタンはすべて濃紺のピル型にし、右端に黄色の小さなドットを置く。
• 黄色〜黄緑は光の破片や見出し下線などのごく小さな面積に限る。
• 英字見出しは水色〜濃紺のグラデーション、日本語見出しは濃紺で書く。
• 暖色系の大きな面は使わない。
• tag-pill は文字 #FEFFFF × 背景 #0295DC のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#027DB9、4.52:1）を使う。
• entry-block は文字 #FEFFFF × 背景 #0597E0 のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#047CB8、4.58:1）を使う。
• footer-nav は文字 #FEFFFF × 背景 #0A9BD5 のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#087FAE、4.5:1）を使う。

Typography

• 見出しは英字（細めの幾何学サンセリフ）と日本語の小さな太字ラベルを縦に並べて組む。
• 英字見出しは水色→濃紺のグラデーション文字にする。
• 背景装飾として極太の縦長英字を画面幅からはみ出させ、半透明で重ねる。
• 本文は小さめのサイズで行間を広く取る。
• FV のキャッチは白抜き太字にし、黄緑の下線を引く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内は左揃え。
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 26px。
• セクション頭は英字の大見出し→日本語ラベル→リード文の順に並べる。
• 写真は 2 枚を少しずらして配置し、高さにリズムをつける。
• 環境セクションは白カード＋濃紺カードを 1 組にして縦に 3 組重ねる。
• ボタンは横幅いっぱいのピル型を縦に並べる。

Elevation & Depth

• 基本はフラットで、影はほとんど使わない。
• スライダーの左右矢印は白丸に柔らかい影をつける。
• インタビューカードの白い文字枠にだけ薄い影をつける。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 写真は平行四辺形や台形に斜めカットする。人物は平行四辺形の青い背景から上半身が出るように置く。
• セクション境界: セクションの上下を斜めの直線で切り替える（数度の傾き）。
• カードの角は丸めない。
• ボタンとタグは完全なピル型にする。
• リンクカードの右下に青い三角を置き、白い矢印を載せる。
• 装飾にぼかした三角形・光の帯を散らす。

Components

• 濃紺ピルボタン（button-primary）: 横幅いっぱいの濃紺ピル。白文字は左寄せ、右端に黄色ドットを置く。
• 英字＋日本語見出し（section-heading）: 細い英字の大見出しの下に小さな日本語の太字ラベルを置く。
• FV の募集帯（fv-recruit-bar）: 写真下端に重ねる濃紺グラデのピル帯。左に法人名、右に濃紺の小ボタンを置く。
• 白＋濃紺の制度カード（culture-card-pair）: 上は白地に水色見出しと本文、下は濃紺地にチェックの箇条書き、線画イラスト、タグを置く。
• ハッシュタグピル（tag-pill）: 明るい青の小さなピルに白文字で「#キーワード」を書く。
• 社員インタビュースライダー（interview-slider）: 平行四辺形の青背景に人物を置き、下に白い文字枠と青丸の番号を重ねる。左右に白丸の矢印を置く。
• 写真リンクカード（photo-link-card）: 暗めにした写真に半透明の英字、縦書きの日本語ラベル、白い説明文を重ねる。右下に青い三角と矢印を置く。
• エントリーブロック（entry-block）: 青グラデの大きな帯にエントリーと矢印。下に白い小カードを 3 つ並べ、それぞれに英字・日本語・矢印を置く。
• フッターナビ（footer-nav）: 青グラデ地に、カテゴリ見出しとリンクの行（右に小さな矢印）を並べ、白い細線で区切る。

Do's and Don'ts

Do - セクション境界と写真は斜めにカットする。 - 英字の大見出しと日本語ラベルを必ずセットで置く。 - ぼかした三角形や光の帯を余白に散らし、動きを出す。 - 制度の説明は白カード＋濃紺の箇条書きカードの組で見せる。 - 人物写真は明るく、笑顔の自然なものを使う。

Don't - 暖色や彩度の高い赤・オレンジを大きく使わない。 - カードを角丸にしない（ピル型はボタンとタグだけ）。 - セクション境界を水平な直線だけで区切らない。 - 明朝体や手書き風の書体を使わない。 - 黄色を面として広く使わない。 - 影を重くつけない。

Page Structure

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

1. ファーストビュー（企業の姿勢と採用サイトであることを伝える）: 空色のグラデ上部に白い太字キャッチと英文を置く。その下に集合写真を置き、巨大な英字を重ね、下端に濃紺の募集ピル帯をのせる。
2. 特長（事業と働き方の魅力を説明する）: 淡い水色地に英字見出し、紺のリード、本文を並べ、斜めカットの写真 2 枚をずらして配置する。
3. ワイド写真（職場の雰囲気を見せる）: 全幅のオフィス写真を斜めに切り、光の破片を重ねる。
4. 社員紹介（働く人を知ってもらう）: 英字見出しとピルボタンの下に、平行四辺形の人物スライダーと番号を置く。
5. 環境・制度（働きやすさを具体的に示す）: 斜めに入る空色の面に、白カードと濃紺の箇条書きカードの組を 3 つ並べ、最後にピルボタンを 2 つ置く。
6. 仕事紹介（業務内容と成長環境を伝える）: 写真の帯のあとに淡い地で英字見出し、リード、本文、ピルボタン 2 つを並べる。
7. 会社紹介（会社概要と数字への導線を作る）: 写真リンクカードを 2 枚、縦に並べる。
8. エントリー CTA（応募へ誘導する）: 写真の上にグラデの英字コピーを置き、青いエントリー帯と白い小カード 3 つを重ねる。
9. フッター（会社情報とサイトナビを載せる）: 青グラデ地の中央にロゴと住所を置き、カテゴリ別のリンクリストを細線で区切る。

Imagery

• オフィスでスーツやジャケット姿の社員が自然に笑う写真。明るく、やや青みのある色調にする。
• 人物は青い六角形柄の背景に上半身で切り抜く。
• 装飾は空色・水色・黄緑のぼかした三角形と、ネオン調の光の帯。
• 制度カードには濃紺地に溶け込む青系の線画イラスト（人物・時計・端末）を添える。
• 写真上の英字は半透明の白で大きく重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにナビを横並びにし、右上に濃紺のエントリー四角ボタンを固定する。
• PC の FV は写真を全面に敷き、キャッチと募集帯を左上に置く。
• PC の特長と仕事は左テキスト・右写真の 2 カラムにする。
• PC の制度カードは白カードと濃紺カードを左右交互に、ずらして配置する。
• PC の社員紹介は人物を斜めのグリッドで横一列に並べる。
• PC のフッターは左に会社情報、右にナビを 5 列で並べる。

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 行書くと起動時に読み込まれる。