DESIGN.md — 水色×黄緑グラデの爽やか通信系採用 LP（Pastel Gradient Network Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、クール・先進的、やさしい・柔らかい、シンプル・ミニマル
• キーワード: パステルグラデーション・大きな角丸パネル・ネットワーク線の地紋・細字ゴシック・白ピルボタン・欧文の巨大透かし文字
• 地の質感: 淡いグレー地に点と線のネットワーク模様を薄く敷き、パネルは水色→ミント→黄緑の縦グラデーション。
• 形: 角丸40px前後の大パネル、ピル型ボタン、ひし形に切り抜いた写真、曲線のリボン装飾。
• 温度感: やや涼しめ。黄緑で少し温かみを足す。

Colors

• 地は淡グレー、セクションは角丸パネルの縦グラデ（水色→ミント→黄緑）で区切る
• グラデは同系パステルのみで、彩度の高い色を面に使わない
• 青紫は小さいドット・英字ラベル・ボタン内ドットに限定する
• キャッチは一部の語だけ水色→青のグラデ文字にする
• 最終CTA帯だけ水色→濃紺の濃いグラデで締める
• ボタンとカードは白で、パステル上に浮かせる

Typography

• 見出しは細め（400）で大きく、軽さを出す
• 見出しの上に青紫ドット＋小さな英字ラベルを置く
• 本文は行間2倍超でゆったり組む
• 背景に細い欧文を画面幅超えで白く透かす
• 数字は青で大きく、分母は小さく黒で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC はテキストと写真の 2 カラム
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 32px（375px 幅換算）
• パネルは画面両端を約12px残して全幅配置
• パネル内は左揃えで左右約28pxの余白
• 見出し→説明→ボタン→写真の順で縦に積む
• 写真は画面外にはみ出す配置を一部使い動きを出す

Elevation & Depth

• 影はほぼ使わず、白と淡色のコントラストで浮かせる
• カードに極薄い影（0 4px 16px rgba(0,0,0,0.04)）程度
• エントリーカードは半透明白で背景を少し透かす

Shapes

• 角丸: 小 12px ／ 中 16px ／ 大 44px。ボタンはピル型。
• 写真の切り抜き: 角丸16pxの矩形、仕事紹介はひし形の角丸切り抜きを重ねる
• セクション境界: 大きな角丸パネルの上端カーブで切り替え、直線の色切替も併用
• パネル上角は44px前後の大きな角丸
• ボタンは完全なピル型
• 写真には必ず角丸をつける
• 曲線のリボン装飾を背景に流す

Components

• 白ピル遷移ボタン（button-pill）: 左に文字、右に縦線と青紫の小ドット。幅約230px
• ドット付き英字ラベル（section-label）: 青紫の丸ドット＋小さな英字を見出しの上に置く
• グラデ角丸パネル（gradient-panel）: 水色〜黄緑の縦グラデで上角を大きく丸めたセクション面
• 丸型ドットボタン（circle-arrow）: 白い円の中央に青紫ドット。カード右下に置く
• 社員スライダー（people-slider）: 大きな数字の現在枚数、左右矢印、縦長角丸写真、職種ドット、一言、縦線付き所属
• 区切り線リンクリスト（link-list）: 文字と右端ドット、下に細いグレー線
• エントリーカード（entry-card）: 濃紺グラデ帯上の白半透明カード、青い大きな英字見出し
• お知らせバー（news-bar）: 白い角丸バーに日付・カテゴリ・タイトル

Do's and Don'ts

Do - パステルグラデは同系色のなめらかな変化にとどめる - 見出しは細字で大きく、余白を多くとる - ボタンはすべて白ピル＋右端ドットで揃える - 背景にネットワークの点と線を薄く敷く - 写真は明るく青系の作業着や白いオフィスを選ぶ

Don't - 濃い原色の面や赤系の強調を使わない - 太すぎる見出しや装飾書体を使わない - 写真を角丸なしの矩形で置かない - 強い影や立体ボタンにしない - ラベルの青紫を大きな面に広げない

Page Structure

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

1. ファーストビュー（企業の姿勢を一言で伝える）: 2行キャッチの一部をグラデ文字に。下に角丸写真を大小ずらして配置
2. お知らせ（最新情報を示す）: 白い角丸バーを1本
3. メッセージ（事業の意義を語る）: 巨大な欧文透かし、短い見出し、行間広めの本文、ピルボタン、アイソメトリックの街イラスト
4. 会社紹介（会社概要へ誘導）: 水色グラデの角丸パネル、ボタン2つと街並み写真
5. 数字で見る（規模を数字で示す）: 白カード内に説明文と青い数字ビジュアル
6. 仕事紹介（職種を見せる）: 黄緑地、ひし形写真のコラージュ
7. 社員紹介（働く人の魅力を伝える）: 白い大角丸パネル内のスライダー
8. 働く環境（制度・福利厚生を案内）: ミント→水色グラデ、大きな角丸写真と説明
9. 採用情報（募集要項とよくある質問へ）: 白地に黄緑リボン、写真と区切り線リスト
10. エントリーCTA（応募を促す）: 水色→濃紺グラデ帯に白カード、下に欧文透かし

Imagery

• 明るい白基調のオフィスやサーバールームを自然光で撮る
• 青い作業着の社員を作業中の横顔や笑顔で撮る
• 社員の写真は背景をぼかした胸上の縦長構図
• 街・電波塔・クラウドをアイソメトリックの水色イラストで描く
• 点と線のネットワーク模様を白で薄く重ねる
• 黄緑の太い曲線リボンを背景に流す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はテキストと写真を左右 2 カラムに分ける
• FV の写真は PC で横一列の大小モザイクになる
• 社員スライダーは PC で 5 枚程度を横に並べ、中央を大きくする
• エントリーは 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 行書くと起動時に読み込まれる。