DESIGN.md — 淡い水色グラデの静かで知的な採用 LP（Airy Sky Gradient Corporate Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、上品・高級、清潔・爽やか、シンプル・ミニマル
• キーワード: 淡い水色の地・シアンのぼかしグラデーション・細い明朝見出し・青みモノクロ写真・オレンジの差し色・丸い矢印ボタン
• 地の質感: 地はフラットな淡い水色。ヒーローと一部のセクションに、粒子ノイズ入りのぼかしグラデーション（シアン・グリーン・オレンジ）を敷く
• 形: 写真とカードは角丸なしの矩形。ボタンは正円とピル型。ヒーローと帯状セクションの境界はゆるい波形
• 温度感: 寒色寄りで涼しい。オレンジを少しだけ効かせて温度を足す

Colors

• 地はほぼ全面を淡い水色1色にする。白はエントリー枠など限られた面だけに使う
• シアンからグリーンのぼかしグラデーションは、ヒーローと特集帯の2〜3か所だけに使う
• オレンジは英字ラベル・番号・CTAだけ。面積は1%未満に抑える
• 見出しは濃紺、本文は灰紺。黒い文字は使わない
• 写真は彩度を落とした青みモノクロにして、地色となじませる
• 丸ボタンは地色より一段濃い水色で塗り、矢印は濃紺にする
• button-entry は文字 #F6FAFB × 背景 #FB5D1C のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CF3F04、4.58:1）を使う。

Typography

• 見出しは細い明朝。字間を広めにとり、2行に改行する
• 本文はゴシックの細字。行間を1.9前後と広くとる
• 英字のセクションラベルは小さなオレンジのセリフ体。見出しの左に縦書きで添える
• 番号（01〜05）は大きな細いセリフ体にする。写真に重ねるときは半透明のグレー
• ヒーローのキャッチだけを大きくし、ほかの見出しは控えめにそろえる
• 太字の強調はほぼ使わない。強調は色と余白で表す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは横スクロールか1列に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの間は広く空け、余白で区切る
• 見出しは左揃え。左に縦書きの英字ラベルを置く
• フルブリード写真のパートを縦に続けて、物語のように見せる
• 見出しの直後に写真、その下に丸ボタンとリンク文字を置く
• 職種リストはタブと縦積みカードで組む
• PC版では右上のメニューとEntryボタンを固定表示する

Elevation & Depth

• 影はほぼ使わない。フラットな面で構成する
• 職種カードは地色との明度差だけで浮かせる
• 写真の上の文字は暗めのトーンで読みやすくする（影は付けない）

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。人物は胸から上の縦長、風景は横長のワイド
• セクション境界: ヒーローとグラデーション帯の上下はゆるい波形。それ以外は余白で区切り、線は引かない
• 主なボタンは正円の矢印ボタンにして、右にリンク文字を添える
• CTAは小さめのオレンジのピル型
• カードの角はほぼ直角
• ぼかしグラデーションは有機的な曲線の塊として配置する

Components

• エントリーピルボタン（button-entry）: オレンジのピル型。左にEntry、右に＋か矢印を置く。画面の右下に固定する
• 丸い矢印ボタン（button-circle-arrow）: 直径56px前後の淡い水色の正円に小さな三角矢印。右に「〜をみる」のテキストリンクを添える
• 縦英字ラベル付き見出し（section-heading）: 左に縦書きの小さなオレンジの英字、右に2行の明朝見出し
• お知らせカード（news-card）: 横長のサムネイルの下に、オレンジの日付と2〜3行の本文。PCは4列
• 社員カード（member-card）: モノクロの人物写真の左上に大きな番号を重ねる。下にオレンジの小ラベルと2行のコピー
• 職種リスト行（job-list-item）: 淡い面の横長カード。左にオレンジの番号と職種名、右端に丸い矢印
• 職種カテゴリタブ（category-tabs）: 縦に並ぶ英字のセリフ体テキスト。選択中はオレンジで横に矢印、ほかは青灰
• エントリーパネル（entry-panel）: グラデーションの地の上に白い大きな枠。中央にセリフ体の大見出し、下に丸ボタン付きリンクを2つ
• 事業の円形相関図（concept-diagram）: 半透明の円を5つ環状に重ね、中央に中核事業を置く。細い線で放射状につなぐ

Do's and Don'ts

Do - 地色は淡い水色1色で通し、余白を広くとる - 写真は青みのモノクロか低彩度で統一する - オレンジは小さな英字・番号・CTAだけに使う - 見出しは細い明朝で、2行に改行して静かに見せる - リンクは丸い矢印ボタンとテキストのセットにそろえる - ぼかしグラデーションは粒子ノイズを入れて柔らかくする

Don't - 原色や高彩度の色を広い面に塗らない - 太いゴシックの大見出しにしない - ドロップシャドウや立体的なボタンを使わない - カラー写真をそのまま並べない - 四角いベタ塗りの大きなCTAボタンを置かない - オレンジを見出しや背景の面に使わない

Page Structure

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

1. ファーストビュー（企業の姿勢を象徴するキャッチで印象づける）: シアン・グリーン・オレンジのぼかしグラデーションに、白い明朝の大きなキャッチと小さな英文。下端は波形
2. ステートメント（写真の連続）（理念を短い文で段階的に伝える）: 青みのフルブリード写真を3枚縦に並べる。左上に白い短文、右下にEntryボタン
3. 採用メッセージ導線（トップメッセージへ誘導する）: グラデーション文字のキャッチと、丸い矢印ボタン付きのリンク
4. 企業理念（目指す社会像を示す）: 縦英字ラベル付き見出しと、抽象的な青いリボンのビジュアル
5. お知らせ（最新の動きを見せる）: サムネイル付きカードを4列。右上に一覧へのリンク
6. 事業紹介（事業の全体像を理解してもらう）: 左に円形の相関図、右に見出しと本文と丸ボタン
7. プロジェクト紹介（具体的な仕事を見せる）: シアンの波形グラデーション帯に、モノクロ写真と大きなオレンジの番号付き説明
8. 社員の成長ストーリー（多様なキャリアを示す）: 番号付きのモノクロ人物カードを4列、下に横長の集合写真を1枚
9. 募集職種（職種を探して詳細へ進んでもらう）: 左に縦タブ、右に淡いカードを縦に積んだ職種リスト
10. 制度・キャリア（働く環境を伝える）: モノクロ写真カードを3列。英字ラベルと名前と丸ボタン
11. 社員インタビュー導線（外部のインタビューへ誘導する）: 横長写真の右にサービスロゴと丸ボタン
12. エントリーCTA（応募と職種一覧へ導く）: グラデーションの地に白い大枠。セリフ体の見出しと丸ボタンのリンクを2つ
13. フッター（サイト全体へのナビゲーション）: グラデーションの地にカテゴリ別の小さなリンク一覧。右下にEntryボタン

Imagery

• 高層ビルを見上げる構図と人物の後ろ姿の写真。寒色寄りで低彩度に仕上げる
• 社員のポートレートは白黒。無地の背景で胸から上を撮る
• 仕事の場面（ホワイトボード・手元）は白黒で寄りに撮る
• ぼかしグラデーションはシアン・ミント・オレンジ。粒子ノイズを入れる
• 抽象的な青いリボンや半透明の円で、循環と連携を表す
• アイコンは極小の三角矢印やリンクマークなど線の細いものに限る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅およそ80%の中央寄せ。SPは左右16px余白の1カラムにする
• お知らせはPCで4列、SPでは横スクロールか1列にする
• 社員カードはPCで4列、SPでは2列にする
• 制度カードはPCで3列、SPでは1列に縦積みにする
• 職種タブはPCで左に縦並び、SPでは上部の横スクロールタブにする
• Entryボタンは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 行書くと起動時に読み込まれる。