DESIGN.md — 方眼グリッドと青灰の技術系新卒採用 LP（Pixel Grid Tech Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、信頼・誠実、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 方眼グリッド・ピクセル装飾・極太縦書きコピー・細線カード・青灰ベース・職種カラー5色
• 地の質感: フラットで、薄い方眼の線とピクセル状の小さな四角だけを質感にする。影やグラデーションは使わない
• 形: 角丸なしの四角と 1px の黒線が基本。円はアイコン台座とエントリーボタンに限って使う
• 温度感: 落ち着いた寒色。職種カラーで少しだけ明るさを足す

Colors

• 地の色は白と淡い青灰を交互に切り替え、セクションの区切りにする
• 濃い青は動画紹介とエントリーの帯だけに使い、行動につながる場所の目印にする
• 職種ごとの5色は、アイコン・カードの枠・タグにだけ使う。本文には使わない
• 文字は黒と濃いグレーに絞り、色で強調しない
• カードは白面に 1px の黒線を引き、影は付けない
• ピクセル状の四角い装飾は、職種カラーか淡い青灰で小さく散らす
• job-card は文字 #25A1DA × 背景 #FEFEFE のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#1D7EAA、4.51:1）を使う。
• button-primary は文字 #EFFDFF × 背景 #3B82F0 のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1A6DED、4.53:1）を使う。

Typography

• セクション見出しは、細長い大きな英字の下に日本語の小見出しを添える2段構成にする
• 英字見出しの右横に、ピクセル状の四角を階段のように並べた装飾を置く
• ファーストビューの極太コピーは縦書きの2列にし、文字の間に人物写真を食い込ませる
• 導入文は中央揃えにし、短い行で改行して詩のように見せる
• 本文は左揃えで、行間を 1.8 前後にとる
• 番号付きの小見出しは 01〜05 の数字をグレーで頭に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。データ欄とインタビュー欄は横スクロールのカルーセルにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 20px
• セクション見出しの下に、2〜3行のリード文を置く
• 制度のカードは縦に積み、カードの間を 12px 空ける
• ミッション欄の写真は大小の四角をずらしてコラージュ風に重ねる
• FAQ は全幅のアコーディオンを縦に並べる
• 最後に濃い青の帯でエントリーボタンを置く

Elevation & Depth

• 影は使わない。カードの奥行きは 1px の黒枠だけで表す
• 写真はカード枠より手前に重ねたり、はみ出させたりしてレイヤー感を出す
• 背景の方眼とピクセル装飾は最背面に置く

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 人物は背景を切り抜いて置く。ほかの写真は角のない四角で切る
• セクション境界: 直線で区切り、背景色を切り替える
• カード・FAQ・タブは角丸なし
• エントリーボタンだけをピル型にする
• アイコンの台座は円形にする
• タグは小さい角丸か、左に円アイコンを付けた帯にする

Components

• 英字＋日本語のセクション見出し（section-heading）: 細長い大きな英字と、日本語の小見出しを組み合わせる。右横にピクセルの四角を装飾として置く
• お知らせカード（info-card）: 黒枠の白いカード。日付・タグ・タイトルを1件ずつ並べ、右上に一覧ページへのリンクを置く
• 職種カード（job-card）: 職種カラーの太い枠の中に線画イラストを入れ、横スクロールで見せる。下に円形の職種アイコンを5つ並べる
• インタビューカード（interview-card）: 写真の左下に職種カラーのタグを重ね、その下に見出し・イニシャル・入社年を置く
• データカード（data-card）: 左上にネイビーのタブ見出しを付けた黒枠のカード。中に円グラフや大きな数字を入れる
• 制度カード（system-card）: 円形のアイコン台座と見出しを横に並べ、本文と■付きのリストを続ける
• FAQ アコーディオン（faq-item）: 淡い青の面に黒枠を引いた行。質問を太字で書き、右端にネイビーの丸い＋を置く
• エントリーボタン（button-primary）: 濃い青の帯の上に置く、白枠付きの明るい青のピル型ボタン。外部リンクを示すアイコンを添える

Do's and Don'ts

Do - 背景には薄い方眼と、ピクセル状の四角い装飾を使う - 見出しは英字と日本語の2段構成にそろえる - カードは白面に 1px の黒枠を引いた四角にする - 職種ごとの色を、アイコン・枠・タグで一貫して使い分ける - 白と青灰の地を交互に置いて、長いページにリズムを出す

Don't - カードに影や大きな角丸を付けない - グラデーションや装飾的な書体を使わない - 職種カラーを広い面や本文に使わない - ファーストビューの極太コピーを小さく、または横書きにしない - 暖色系の地を使わない

Page Structure

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

1. ファーストビュー（勢いのあるメッセージで若い応募者を引き込む）: 方眼地に縦書きの極太コピーを2列で置き、切り抜きの社員写真を散らす。英字のサブコピーを斜めに添える
2. 導入メッセージ（会社の想いを短い言葉で伝える）: ファーストビューを薄く残した上に、中央揃えの短い行の文章を重ねる
3. お知らせ（採用の最新情報を伝える）: 青灰の地に黒枠カードを置き、日付・タグ・タイトルを3件並べる
4. ミッション（事業の使命を示す）: 大きな見出しの背景に白抜きの英字を敷き、01〜05 の番号付き項目と写真のコラージュを並べる
5. 職種紹介（5つの職種を見せる）: 色付き枠の線画カードを横スクロールで見せ、下に円形の職種アイコンを並べる
6. 社員インタビュー（先輩社員の声を見せる）: 写真に職種タグを重ねたカードを横スクロールで並べる
7. 動画紹介（動画へ誘導する）: 濃い青の帯に白文字の見出しを置き、白い角丸カードを再生ボタン付きで見せる
8. 数字で見るデータ（働く環境を数字で示す）: タブ見出し付きのカードに円グラフや大きな数字を入れ、横スワイプで見せる
9. 制度紹介（福利厚生や研修制度を伝える）: アイコン付きの黒枠カードを縦に積み、■付きのリストで項目を書く
10. よくある質問（応募前の不安を解消する）: 淡い青のアコーディオンを10行並べる
11. エントリー CTA（応募へ誘導する）: 方眼柄を入れた濃い青の帯に、白文字の見出し・ピル型ボタン・社員の集合写真を置く

Imagery

• 社員の全身写真を背景から切り抜き、作業着や機材を持った自然な立ち姿で見せる
• 現場や業務の写真は四角に切り、大小をずらして重ねたコラージュにする
• 職種イラストは黒い線画に、職種カラーを1色だけ差す
• アイコンは単純な線画にし、円の中に収める
• 背景の装飾は方眼と、ドット絵のような四角の集まりにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では極太コピーを横書き2行にし、写真やピクセル装飾を周りに散らす
• PC では左上に縦のメニュー、右上にピル型の外部リンクボタンを置く
• PC のミッション欄は、左に見出しと写真、右に番号付きの項目を置く2カラムにする
• PC のインタビュー欄は3列のグリッドにする
• PC の FAQ と制度カードは、中央寄せで幅を約 75% に絞る
• 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 行書くと起動時に読み込まれる。