DESIGN.md — 青×ピンク×黄のポップなイラスト採用 LP（Bright Blue Pop Illustrated Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、清潔・爽やか、親しみ・手作り感、情報量多め・訴求型
• キーワード: 新卒採用・線画イラスト・英字大見出し・数字で見せる・パステル差し色・角丸カード
• 地の質感: フラットな単色面。ドット・斜線・円の小さな幾何装飾を散らす
• 形: 大きめの角丸カード、ピル型ボタン、少し傾けた黄色の板を写真の背面に敷く
• 温度感: 明るく爽やかでやや温かい

Colors

• 地は白。データやエントリーまわりは淡い水色 #F4F9FD で区切る
• 英字の大見出しは必ず青。その下の日本語サブ見出しはピンク
• 数値はピンクで大きく、単位は濃紺で小さく添える
• 黄色は写真背面の傾いた板と、インタビュー枠の斜線ストライプに限る
• 職種カードの影色は黄・ピンク・水色・緑のパステルを順番に使う
• ENTRY は青い写真背景に白カードをのせ、最下部を濃紺で締める
• button-pill は文字 #0685DF × 背景 #FFFFFF のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0579CB、4.56:1）を使う。
• button-circle-arrow は文字 #FFFFFF × 背景 #018CEC のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#0178CB、4.62:1）を使う。
• feature-badge は文字 #FFFFFF × 背景 #F0508A のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E51460、4.56:1）を使う。
• data-card は文字 #F0508A × 背景 #FFFFFF のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E51460、4.56:1）を使う。
• entry-card は文字 #F0508A × 背景 #FFFFFF のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E51460、4.56:1）を使う。

Typography

• 見出しは英字大見出しと日本語小見出しを必ずセットにする
• 見出しの中のキーワードだけを青にし、残りは濃紺にする
• 数値は単位の約 2.5 倍の大きさにする
• セクションの背景に、薄い水色の巨大な英字を透かしで敷く
• データラベルは「DATA.01」のように青い小さな英字にする
• 本文は字間をやや広げ、行間を 1.9 程度にゆったり取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。数字と職種のカードは 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右 6% 程度の余白で置き、背面の黄色い板を少しはみ出させる
• 特長は「写真→番号バッジ＋見出し→水色本文ボックス→ボタン」の順に縦に積む
• 数字カードは白地の角丸カードを 2 列に並べ、横長の項目だけ 1 列で使う
• COMPANY や MESSAGE などのリンクは英字見出し＋右端の円形矢印にし、罫線で区切る
• コラムは横スクロールのカード列にする

Elevation & Depth

• 影はぼかさず、色付きの面を右下にずらして重ねる
• ピル型ボタンの下側に青いオフセット線を付ける
• 白カードは影なし。水色の地との差で浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 大きな角丸の矩形。背面に少し傾けた黄色の板を敷き、角に線画イラストを重ねる
• セクション境界: 直線で切り替える。背景の大きな斜めの帯と円で動きを出す
• FV のイラスト背景は上部がアーチ型
• 番号バッジはピンクの円で、上に小さな英字ラベルを付ける
• インタビュー枠は黄色の斜線ストライプの太枠
• 円形の矢印ボタンは直径 32px 程度

Components

• ピル型リンクボタン（button-pill）: 白地に青枠。中央に青文字、右にピンクの矢印。下側に青いオフセット線を付ける
• 円形矢印ボタン（button-circle-arrow）: 青い円に白い矢印。リンク行や ENTRY カードの右端に置く
• 英字＋和文の見出し（section-heading）: 青い英字の大見出しの下にピンクの和文。背景に薄い英字の透かしを敷く
• 番号バッジ（feature-badge）: ピンクの円に白い 2 桁の数字。上に小さな英字ラベル
• 数字カード（data-card）: 白い角丸カード。青のラベル、濃紺の項目名、ピンクの大きな数値、線画イラストを入れる
• 職種カード（job-card）: 白いカードに円の中の人物イラスト、職種名、受付状況。右下にパステルのオフセット影
• 本文ボックス（text-box）: 淡い水色地の角丸ボックスに本文とボタンを入れる
• エントリーカード（entry-card）: 青背景の上の白カード。アイコン、ピンクの和文、青い英字を点線で区切って縦に並べ、右に円形矢印。黄色のオフセット影を付ける

Do's and Don'ts

Do - 英字の大見出しとピンクの和文サブ見出しを毎セクションで使う - 写真には必ず傾いた黄色の板と小さな線画イラストを添える - 数値は大きなピンクで見せ、カードに 1 項目ずつ入れる - ドット・斜線・円の小さな装飾を余白に散らす

Don't - 暗い背景や重いグラデーションを本文エリアに使わない - ぼかしの強いドロップシャドウを使わない - 角の尖ったボタンや写真を使わない - 差し色を青・ピンク・黄以外に広げすぎない（職種カードのパステルは例外）

Page Structure

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

1. ファーストビュー（採用年度と短いコピーで世界観を伝える）: 青い英字の小見出しと短いコピー。アーチ型の水色背景に社員の線画イラストを並べる
2. お知らせ（最新の募集情報を伝える）: 青の英字ラベルの下に、日付と 1 行のタイトル。罫線で区切る
3. 特長（働く魅力を 3 つ示す）: 角丸写真、番号バッジ付きの 2 行見出し、水色の本文ボックス、ピル型ボタンを 3 回繰り返す
4. 数字で見る会社（社員数・平均年齢・休日などを定量で示す）: 水色の地に白い数字カードを 2 列のグリッドで並べ、ピンクの大きな数値とイラストを入れる
5. 職種紹介（募集職種を一覧で示す）: 左揃えの英字見出しとリード文。下にパステル影付きの職種カードを 2×2 で並べる
6. 社員インタビュー導線（先輩社員の記事へ誘導する）: 黄色の斜線ストライプ枠の中に告知コピー、英字見出し、ピル型ボタン
7. 会社・代表メッセージ導線（会社情報へ誘導する）: 英字見出し＋和文＋右に円形矢印のリンク行を 2 つ。下に角丸の街並み写真
8. コラム（就活向けの記事を紹介する）: 色違いの枠のサムネイルカードを横スクロールで並べ、タイトルと日付を付ける
9. エントリー（見学・インターン・募集要項へ申し込ませる）: 青い写真背景に白い英字見出し。白カードに 3 つの導線を縦に並べ、最下部は濃紺

Imagery

• 人物は濃紺の線画にフラットな塗り。青緑・黄・サーモンピンクで、ビジネスカジュアル姿
• 写真は明るく彩度高めのオフィス・人物・建物・青空の街並み
• 写真の角に、作業する人物の線画イラストをはみ出させて重ねる
• 装飾はドット格子、パステルの斜線束、半透明の円、小さな四角
• アイコンは細い線画に水色を一部塗る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は英字の巨大メインタイトルを FV 中央に置き、イラストの人数を増やす
• PC の特長は写真と本文を左右 2 カラムにし、行ごとに左右を入れ替える
• PC の数字カードは 3 列のグリッドで、一部のカードは複数の項目をまとめる
• PC の職種カードは 4 列 1 行、コラムは 3 列で一覧リンクを付ける
• PC の ENTRY は 3 つの導線を横並びの 1 枚カードにする

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