DESIGN.md — 空色グラデと紺の士業採用サイト LP（Sky Blue Corporate Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、清潔・爽やか、クール・先進的
• キーワード: 空色グラデーション・紺の欧文見出し・社員ポートレート・都市景観・白カードの重なり・細い円形矢印
• 地の質感: 質感のないフラットな面に、淡いグラデーションと半透明の写真を重ねる。
• 形: 角丸は小さめのカードと、斜めや曲線の空色帯。ボタンは文字と細線の丸い矢印だけで組む。
• 温度感: やや寒色寄りの爽やかなトーン。人物の笑顔で冷たさを和らげる。

Colors

• 地は白と、淡い空色のグラデーション（#DCF2FC〜#F0F8FB）を交互に使う。
• 欧文の大見出しはすべて紺 #135886 で統一する。
• 強調したい和文の語だけを水色にして、文字を大きくする。
• 濃い面は、紺を半透明で重ねた写真セクションとエントリー帯の 2 か所に限る。
• エントリー帯は青のグラデーションに白文字。暖色は使わない。
• カードは白地に薄い影をつけ、空色の地から浮かせる。

Typography

• 欧文の大見出しは細めのウェイトで、和文の小ラベルを右か下に添える。
• 背景に巨大な欧文をごく淡い色で敷き、透かしにする。
• 本文は行間 2.0 前後で、字間をやや広めにとる。
• 和文の見出しは太字にして、強調語だけ水色で大きくする。
• ボタンは文字と丸い矢印の組み合わせにして、塗りは使わない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 1〜2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は画面端まで寄せ、テキストの白ボックスを写真に半分重ねる。
• 写真とテキストの左右配置を、セクションごとに入れ替える。
• コースの案内は写真の上に色を重ねた 3 列のタイルにする（SP は縦積み）。
• 社員紹介は横スクロールのカルーセルにする。
• 環境紹介は 2×2 のアイコンカードにする。
• 最後は Q&A へのボタンとエントリー帯で締める。

Elevation & Depth

• 白カードには薄い影（0 4px 16px rgba(0,0,0,.08)）をつける。
• 写真に重ねる白ボックスは影なしのフラットにする。
• 影を強くしたり、何重にも重ねたりしない。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。人物写真はポートレートで大きくトリミングし、ヒーローの下端は斜めにカットする。
• セクション境界: 斜めの直線や緩い曲線で切り替え、空色の斜め帯を背景に差し込む。
• 矢印アイコンは細線の正円にする。
• カード左上に紺の短い縦線を入れることがある。
• タグは白地に紺文字の小さな四角にする。

Components

• 欧文＋和文の見出し（section-heading）: 紺の細い欧文を大きく置き、横に小さな和文ラベルを添える。
• Learn more リンク（link-arrow）: 欧文の文字の右に、細線の丸と矢印を並べる。
• お知らせカード（news-card）: 白カードにバナーを並べ、日付・カテゴリタグ・一行タイトルのリストを載せる。
• コース選択タイル（course-tile）: 写真に青緑〜紺を重ね、アイコン・欧文ラベル・和文タイトル・丸矢印を中央に置く。
• 写真重ねテキストボックス（overlap-textbox）: 写真の端に白いボックスを重ね、見出し・リード・本文・リンクを入れる。
• 社員インタビューカード（person-card）: 空色の地に縦長の人物写真を置き、入社区分のタグ、番号、イニシャルを添える。
• 制度紹介カード（icon-card）: 白カードに、丸い空色地のイラスト・欧文タイトル・和文の小見出しを並べる。
• エントリー帯（entry-banner）: 青のグラデーション地に、白の欧文 ENTRY・補足・丸矢印リンクを置く。
• Q&A ボタン（button-qa）: 写真の上に白い長方形を置き、紺文字と右端に丸矢印を入れる。

Do's and Don'ts

Do - 欧文の大見出しは細めの Montserrat 系にし、紺で統一する。 - 写真の上に白ボックスを重ね、奥行きを出す。 - 空色の淡いグラデーションと斜め帯を地に使う。 - 人物は笑顔のスーツ姿で、自然な仕事風景を撮る。 - ボタンは丸矢印付きのテキストリンクにして、軽く見せる。 - セクションの余白は広めにとる。

Don't - 赤や橙などの暖色をボタンや面に使わない。 - 角丸の大きいポップなカードにしない。 - 太い黒ゴシックの欧文見出しは使わない。 - 写真に派手な枠や装飾をつけない。 - 文字を詰めた情報過多のレイアウトにしない。 - ピル型の塗りボタンを多用しない。

Page Structure

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

1. ファーストビュー（コンセプトと働く人の印象を伝える）: 社員の写真をコラージュし、空色のグラデーションを重ねる。中央に白の欧文コピーと和文サブコピーを置き、下端は斜めにカットする。
2. お知らせ（最新情報とタイアップを伝える）: 白カードにバナーを横に並べ、日付付きのニュースリストを載せる。
3. 代表メッセージ（理念と想いを伝える）: 空色の地に都市の写真を薄く重ね、筆記体の装飾を敷く。左に見出し、右に本文を置く。
4. 成長環境（未経験からでも成長できると訴える）: 写真を 2 枚並べ、曲線で白地に切り替える。大きな欧文見出しを置き、円グラフとイラストで業務の幅を図解する。
5. コース紹介（経歴別の入口を示す）: 色を重ねた写真タイルを 3 つ並べ、アイコンと丸矢印を付ける。
6. 会社を知る（数字と動画で会社を理解してもらう）: 淡い空色の地に、インフォグラフィックと動画への導線カードを 2 枚置き、その下に CM 動画を 2 本並べる。
7. 事業・仕事内容（仕事の中身と強みを伝える）: 大きな写真に白のテキストボックスを重ね、左右を入れ替えて 2 ブロック並べる。
8. 社員インタビュー（働く人のリアルを見せる）: 縦長ポートレートのカードを横スクロールで並べ、新卒・中途のタブを付ける。
9. 働く環境（研修・福利厚生を伝える）: 写真の横に 2×2 のイラストアイコンカードを置き、背景に空色の斜め帯を入れる。
10. 法人情報・拠点（規模と拠点を示す）: 都市写真に紺を重ね、白の欧文見出しを置く。下に白カードを重ね、地図のイラストで拠点を示す。
11. Q&A・エントリー（応募へ導く）: 社員の後ろ姿の写真に白の Q&A ボタンを載せ、最後に青のグラデーションのエントリー帯を置く。

Imagery

• スーツ姿の社員が笑顔で働く自然光の写真を使う。オフィスや和室など、場面には幅を持たせる。
• 高層ビルや都市の景観を、青みに寄せて背景に使う。
• 写真には空色〜紺の半透明オーバーレイをかける。
• 制度や業務は、青系の線画に淡い彩色をした人物イラストで説明する。
• 円グラフなどの図解は青のグラデーションで描く。
• 背景には、淡い色の巨大な欧文や筆記体を装飾として敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では写真とテキストを左右に並べる。SP では写真を上、白ボックスを下に縦積みし、少し重ねる。
• コースのタイルは、PC の 3 列から SP では縦 3 段にする。
• 制度紹介カードは SP でも 2×2 を保つか、1 列にする。
• 欧文の大見出しは、PC の 60px 前後から SP では 36〜40px に縮める。
• 社員カードは SP では 1.2 枚が見える横スクロールにする。
• エントリー帯は SP では全幅にし、文字とリンクを縦に積む。

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