DESIGN.md — 鮮やかな青とネオン線画の新卒採用 LP（Vivid Blue Neon Line Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、信頼・誠実、力強い・インパクト
• キーワード: ロイヤルブルー・ネオン線画・筆記体の英字・白カード・テック写真・未来志向
• 地の質感: フラットな青い面に、細いグラデーションの曲線とネットワーク状の点と線をうっすら重ねる
• 形: 角丸の小さいカード、丸いアイコンボタン、自由な曲線のライン
• 温度感: クールな青の地に、ピンクからオレンジのグラデーションで温度を足す

Colors

• 地はほぼ全面をブランドブルーにし、白カードを浮かせて読ませる
• 働き方のような柔らかい話題だけ白から淡いグレーの地に切り替える
• ピンクからオレンジのグラデーションは主 CTA だけに使う
• 虹色のネオン線は装飾線と筆記体にだけ使い、文字の塗りには使わない
• 白地上の見出しと英字ラベルは青文字、青地上は白文字
• 写真カードは濃い写真の上に白文字を直接のせる
• button-primary は文字 #FFFFFF × 背景 #FA627A のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EC082C、4.53:1）を使う。

Typography

• 見出しは日本語の太字ゴシックの下に、小さい英字の大文字ラベルを添える
• カードは英字ラベルを上、日本語タイトルを下に置く
• 本文は字間を広めにとり、中央揃えで短く改行する
• 筆記体の英字は見出しの横や境界に斜めにかけ、ネオン線とつなげる
• 大きな英字だけの見出しは右寄せにし、下に小さな和文を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 72px、基本単位 8px、カード内 18px（375px 幅換算）
• コンテンツは左右に 16px ほどの余白をとった幅で揃える
• 見出しは左揃え。イントロとイベントだけ中央揃えの白い枠に入れる
• イントロの白い枠は画面からはみ出すように置き、写真カードを重ねる
• リンク一覧は英字ラベル、和文、横線、丸ボタンを 1 行に並べる
• カード同士の間隔は 12〜16px

Elevation & Depth

• 白カードに青みのある大きくぼかした影を落とす
• 写真カードは影を弱くし、写真の暗さで締める
• CTA は影をつけず、白の細い枠線で縁取る

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸 6px の長方形。カードの上部いっぱいか、カード全面に写真を敷く
• セクション境界: 境界は直線にし、ネオンの曲線と筆記体を境界にまたがせる
• 矢印ボタンは直径 36px ほどの円の中に点か矢印を置く
• CTA は角丸 6px の横長の矩形にする
• INFORMATION は細い白枠の箱にし、上辺の中央に見出しを割り込ませる

Components

• グラデーション CTA（button-primary）: ピンクからオレンジのグラデーションの横長ボタン。左に 2 行の文字、右に半透明の白い丸と矢印
• お知らせ枠（info-box）: 白い細枠の箱で、上辺中央に英字見出し。中に日付と 1 行のお知らせ、右に開閉の丸ボタン
• 写真カード（photo-card）: 全面に写真を敷き、左上に英字ラベルと 2 行の白い見出し。左下に「01 — 04」の番号、右下に丸ボタン
• 線画の職種カード（line-card）: 白いカード。右上に英字ラベル、短い説明、太字の職種名を右揃えで置き、左下に青い線画の人物、右下に淡い青の丸ボタン
• リンク一覧の行（link-row）: 青地に英字ラベルと白の和文、細い横線、半透明の丸ボタンを並べる
• 画像とテキストのタイル（image-tile）: 上に角丸の写真、下に青の英字ラベルと青の 2 行タイトル。カードの枠は付けない
• 筆記体の装飾（script-deco）: グラデーションの筆記体の英字と、そこから伸びる細い曲線。見出しや境界に重ねる
• 白い枠の見出しブロック（white-frame）: 中央揃えの白い枠。青い見出しと英字ラベルを入れ、カードを重ねる

Do's and Don'ts

Do - 地は鮮やかなロイヤルブルーで統一する - ネオンのグラデーション線を、セクションをまたいで流す - 見出しには必ず英字の大文字ラベルを添える - カードには必ず丸い矢印ボタンを付け、遷移先があることを示す - 写真は青や暗い色調のテック系か、明るい人物写真を使う

Don't - CTA 以外に暖色の塗りを使わない - 本文を長文で詰め込まない - 角丸を大きくしてポップにしない - 筆記体を本文や見出しの代わりに使わない - 背景に重い柄や濃いグラデーションを敷かない

Page Structure

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

1. ファーストビュー（企業の想いを強く印象づける）: 青地の上部にネオン線画の横顔を描き、その下に超大型の 2 行コピー、白の太字でサブコピーを置く
2. メッセージ（理念を語る）: 白文字を中央揃えにし、短い行を段落ごとに区切る。背景にはネットワーク状の点と線をうっすら敷く
3. CTA とお知らせ（マイページ登録へ誘導し、最新情報を伝える）: グラデーションのボタンの下に、白枠のお知らせボックスを置く
4. イントロダクション（業界の未来、若手の声、歴史を紹介する）: 白い枠の見出しの上に、番号付きの写真カードを縦に 3 枚重ねる（PC はスライダー）
5. 職種と事業（職種ごとの仕事を案内する）: 2 列の白い線画カードと、事業を紹介する濃色のカードを並べる
6. 働き方（制度と多様性を伝える）: 淡いグレーの地に、写真とテキストのタイルを 2 列で並べる。見出しは左上に置く
7. 採用情報（募集要項などへ案内する）: 大きな英字の見出しの下に、メッセージのカードとリンク一覧の行を並べる
8. セミナー・イベント（イベントへ誘導する）: 明るい都市写真の上に白い枠を重ね、中にイベントのカードを入れる
9. キャリア形成（育成とキャリアを紹介する）: 写真付きの白いカードを 2 列のグリッドで並べる

Imagery

• 人物の横顔を、虹色のネオンの一筆書き線画で描く
• 職種は青い細線で、仕事中の人物を線画イラストにする
• テック写真は光の軌跡、データ画面、ネットワークなどを青く暗いトーンで撮る
• 社員写真は明るい背景で、自然な笑顔の上半身を撮る
• 装飾は細い点と線のネットワーク図を、青地に半透明で重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコピーを 1 行にし、メッセージ本文を左上に小さく置く
• PC では CTA とお知らせを右側に横並びにする
• PC のイントロ写真カードは、左右が見切れる横スライダーにする
• PC の職種カードと働き方のタイルは 3 列にする
• PC の採用情報は、メッセージのカードを左、リンク一覧を右の 2 カラムにする
• PC のコンテンツ幅は 1000px 前後に収め、左右は青地のまま余白にする

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