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

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

Overview

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

Colors

• ファーストビューは上の濃い青から下のミントへ縦グラデーションにし、薄グレーの地へ溶け込ませる。
• 本文の地は #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

• 大きな英字見出しは細身でコントラストのあるセリフ体にし、一部の文字だけ筆記体風にしてもよい。
• 英字見出しのすぐ下に日本語見出しを小さく添える。
• 本文は行間 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。