DESIGN.md — 紺×暖色ぼかしの IT 企業採用 LP（Warm Gradient Blur Corporate Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、やさしい・柔らかい、信頼・誠実、シンプル・ミニマル
• キーワード: ぼかしグラデーション・濃紺ボタン・欧文×和文見出し・角丸写真の重ね・縦の細罫線・余白多め
• 地の質感: フラットな淡グレーの地に、大きくぼかした暖色と寒色の光の玉が漂う。すりガラスのような柔らかさがある。
• 形: 6〜10px の角丸矩形が基本。ボタンは角丸矩形とピル型の両方を使う。左右に細い縦線を引いてフレームにする。
• 温度感: 基調はクールなグレーと紺。オレンジのぼかしで温度を足す。

Colors

• 地は淡グレー #F0F0F0 を基本にする。リズムをつけるため、黒帯と紺帯を挟む。
• 暖色（オレンジ・ピーチ）と寒色（水色・青）のぼかし玉を背景に置く。不透明度は低めにする。
• ナビ用ボタンはすべて濃紺の面に白文字で統一する。
• 最終のエントリー帯だけ、ブルー・グリーン・ティールの3色ボタンを使って行動を促す。
• キャッチの強調語は、青から水色へのグラデーション文字にする。
• 暗い地の上の文字は白にする。暗い地にも、薄い大きな欧文を透かしで置く。
• button-entry は文字 #F8FEFE × 背景 #1BA0AF のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#16808C、4.58:1）を使う。
• button-sub-color は文字 #F8FEFE × 背景 #608FD3 のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#3A74C8、4.57:1）を使う。

Typography

• 見出しは「アイコン付きの欧文小ラベル」と「大きな和文見出し」の2段で組む。
• 本文は行間 2.2〜2.4 と字間 0.1em で、ゆったりと組む。
• 欧文は幾何学的なサンセリフに統一する。
• 大きな欧文は右寄せにするか、薄い透かしとして背景に使う。
• キャッチの強調語だけ、グラデーション色を付ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビボタンは 2 列グリッド。
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• 画面の左右約 20px の位置に細い縦罫線を通し、内側を本文枠にする。
• 写真は 2〜3 枚をずらして重ね、左右交互に配置する。
• ナビボタンは 2×2 グリッド。間隔は約 10px。
• 社員紹介は横スライダーにし、両隣のカードを少し見せる。
• セクションの間は大きく空けて、静かなリズムを作る。

Elevation & Depth

• 影はほぼ使わない。フラットにする。
• 奥行きは、背景のぼかし玉と写真の重なりで出す。
• 白カードは影なしで、地との色差だけで区切る。

Shapes

• 角丸: 小 6px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸矩形。FV は平行四辺形風に斜めに切った角丸フレームで、2 枚を並べる。
• セクション境界: 直線で地の色を切り替える。波や斜めの区切りは使わない。
• ナビボタンは角丸 6〜8px の矩形にする。
• 一覧へ誘導するボタンはピル型にする。
• 矢印は細線の →、または円で囲んだ矢印にする。
• 背景には、ロゴ由来の同心円弧のモチーフを白い透かしで大きく置く。

Components

• 濃紺ナビボタン（button-nav）: 中央に白太字のラベル、その下に細い→を置く。2列で並べる。
• ENTRY主ボタン（button-entry）: 横幅いっぱいのティールの面。大きな欧文と、白丸で囲んだ矢印を置く。
• 色付きサブボタン（button-sub-color）: ブルーとグリーンの2列。文字の下に白丸矢印を置く。
• 一覧ピルボタン（button-pill）: 濃紺のピル型で、右端に→を置く。
• 2段見出し（section-heading）: ロゴ由来の円弧アイコンと欧文ラベルの下に、大きな和文見出しを置く。
• 社員スライドカード（staff-card）: 角丸の写真の横にイニシャルを縦書きし、下の白カードに一言を載せる。
• スライダー操作（slider-control）: 左右に紺の丸矢印ボタン、間に細いプログレスバーを置く。
• 写真リンクカード（link-card）: 角丸写真に白の欧文を重ね、下にタイトルと丸矢印を置く。

Do's and Don'ts

Do - 背景に大きなぼかし玉を数個置き、温かみを出す。 - 見出しは必ず欧文ラベルと和文の2段にする。 - ボタン色は濃紺に統一し、最後の CTA だけ多色にする。 - 写真は自然光のオフィスと人物にし、角丸でずらして重ねる。 - 左右の細い縦罫線で、紙面のようなフレーム感を出す。

Don't - 鮮やかな原色を大面積で塗らない。 - ボタンに強い影やグラデーションをつけない。 - ぼかし玉の上に本文を置くときは、ぼかしを濃くしすぎない。 - 装飾的な手書き書体や明朝を混ぜない。 - セクション間の余白を詰めない。

Page Structure

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

1. ヘッダー（企業とグループのロゴを示す）: 左右にロゴを置き、下に細線と欧文の小ラベルを入れる。
2. ファーストビュー（理念キャッチで第一印象をつくる）: 大きな和文キャッチ（強調語はグラデーション）、斜め角丸の写真 2 枚、欧文スローガンの順に置く。
3. メッセージ（事業と価値観を語る）: 行間の広い長文。背景にぼかし玉を置き、末尾は右寄せの欧文社名と重ね写真 3 枚で締める。
4. 仕事紹介（事業分野へ誘導する）: 水色のぼかし地にリードと重ね写真を置き、紺ナビボタンを 2×2 で並べる。
5. 社員紹介（人の魅力を伝える）: 縦書きイニシャル付きのカードを横スライダーで並べ、下にピル型の一覧ボタンを置く。
6. 環境・制度（働く環境を見せる）: 黒帯にオフィス写真のタイルを並べ、透かしの欧文、白見出し、2×2 ボタンを置く。
7. 会社紹介（姿勢と地域との関わりを伝える）: オレンジのぼかしと円弧の透かしを背景に、見出しとボタン 2 つを置く。
8. 特集リンク（対談などのコンテンツへ誘導する）: 欧文を重ねた写真カードに、タイトルと丸矢印を添える。
9. エントリー（応募を促す）: 紺帯に白見出しを置き、ブルー・グリーンのボタンとティールの横長 ENTRY ボタンを並べる。
10. フッター（サイト内の回遊と企業情報）: 中央にロゴ、グリーンの短線付きリンクを 2 列で並べ、コーポレートサイトのバナーとコピーライトを置く。

Imagery

• 明るい自然光のオフィスで撮った、社員の笑顔や会話のシーン。
• スーツやビジネスカジュアルの若手社員の、ポートレートや半身カット。
• 地域のインフラ（列車・駅・改札・都市ビル）の、青空の下の写真。
• 背景に、オレンジ・ピーチ・水色の大きなガウスぼかしの円を重ねる。
• ロゴ由来の同心円弧の線を、白や半透明で大きく背景に配置する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、メッセージは左に本文、右に欧文と写真の 2 カラムにする。
• PC の FV は、左にキャッチ、右に大きな斜め角丸写真を置く。
• PC のナビボタンは、小さなピル型を 2 列にする。
• PC の環境セクションは、左に写真グリッド、右にテキストの 2 カラムにする。
• PC のエントリーは、左に見出し、右にボタン群を置く。
• PC のフッターは、リンクを横に多列で並べる。

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