DESIGN.md — 青×黄ピクセル装飾のIT採用LP（Electric Blue Pixel Tech Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: エレクトリックブルー・ピクセル装飾・切り抜き人物・インフォグラフィック・白カード・蛍光イエロー
• 地の質感: 薄いグレーの地にうっすら斜めのグラデーションをかける。白カードは影が弱い。ファーストビューはデジタルノイズ風の青い合成背景。
• 形: 角丸8〜12pxのカード、四角いピクセルブロックを散らした装飾、斜めにカットしたヒーロー下端、塗り帯の見出し。
• 温度感: クールな青を主にしつつ、黄色と笑顔の人物写真で明るく熱量を出す

Colors

• 地は薄いグレー、情報は白カードに載せる二層構造にする
• 大セクションの頭は画面幅いっぱいの青グラデ帯で区切る
• 見出しは青の塗り帯に白文字、数値は青の太字で統一する
• 黄色は主CTA・吹き出し・ピクセル装飾に絞り、面積は狭くする
• ピンクはグラフの比較色にだけ使う
• ヒーローと最終CTAは青の合成背景で揃え、最初と最後をつなげる

Typography

• 見出しは極太ゴシックで、行ごとに青い塗り帯を敷く
• 大セクションの見出しの上に、波括弧で囲んだ英字ラベルを細く置く
• 小見出しは先頭に「#」を付ける
• 数字は大きく、単位は小さくして差をはっきりさせる
• 本文は13px前後で行間を広くとり、左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。統計と導線ボタンは2カラムのグリッドにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードの左右余白は14〜16px
• カード同士の間隔は12〜16px
• 青帯見出しは画面幅いっぱいにする
• 小見出しの前に白いピクセルブロックを3〜4個添える
• 社員インタビューは横スクロールのカルーセルにし、両隣のカードを少し見せる

Elevation & Depth

• カードはごく淡い影（0 2px 8px rgba(0,0,0,0.04)）か影なし
• 切り抜き人物の足元に柔らかい落ち影を付ける
• ボタンに影は付けない

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は切り抜いて合成する。カード内の写真は上部を角丸で四角く切り、下は白に溶かす
• セクション境界: ヒーローの下端は斜めにカットし、他は青帯で直線的に区切る
• ボタンは全幅のピル型にする
• 見出し帯は角丸なしの長方形にする
• 番号バッジは青の正方形にする
• 装飾は大小の四角いピクセルブロックを散らす

Components

• エントリーボタン（button-primary）: 黄色のピル型ボタン。全幅で配置する
• サブCTAボタン（button-secondary）: 黒のピル型ボタン。カジュアル面談などの導線に使う
• アウトラインボタン（button-outline）: 白地に青い枠線のピル型ボタン。矢印アイコン付きで一覧や詳細へ誘導する
• 大セクション帯（section-band）: 全幅の青グラデ帯。波括弧の英字ラベルと白い大見出しを載せる
• #帯見出し（hash-heading）: 「#」付きの青い塗り帯の小見出し。上にピクセル装飾を置く
• 統計カード（stat-card）: 白カードに青帯ラベル、大きな数字、3Dアイコンを載せる
• 番号バッジ（number-badge）: 青い正方形に白の2桁番号。横に青い見出しを並べる
• 黄色吹き出し（speech-tag）: 職種カードの上に載せる黄色の短いキャッチ吹き出し
• 制度カード（plus-card）: 写真の下に白い帯を敷き、右端に青い「＋」ボタンを置く
• 上線付きカード（top-line-card）: 上辺の中央に青い太線を引いた白カード。線画アイコンと見出しを中央揃えにする

Do's and Don'ts

Do - 見出しは必ず青い塗り帯に白文字にする - 数値はインフォグラフィック（円グラフ・棒グラフ・地図）にする - 人物は切り抜いて躍動的なポーズで配置する - ピクセルブロックの装飾を余白に散らす - 情報は白カードにまとめ、グレーの地に浮かせる

Don't - 黄色を広い背景面に使わない - 明朝体や手書き書体を使わない - 見出し帯を角丸にしない - 暖色系の地色を使わない - 濃い影や立体的なボタンを使わない

Page Structure

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

1. ファーストビュー（熱量と社風を一瞬で伝える）: 青い合成背景に人物を切り抜いて配置。黄色の極太コピーを斜めに重ね、下端は斜めにカットする
2. メッセージ（会社のビジョンを伝える）: 英字ラベルと青帯見出しを置き、切り抜き人物とピクセル装飾、短文を続ける
3. 代表メッセージ（トップの想いを語る）: 切り抜き写真、青文字の見出し、本文、右寄せの署名の順に並べる
4. ページ内ナビ（4つのテーマへ誘導する）: 2×2の白カードにイラストと下向き矢印を入れる
5. 数字で見る会社（働く環境を定量的に示す）: 統計カードのグリッドに円グラフ・地図・バブル・棒グラフを並べる
6. 働く魅力（成長・仲間・待遇を訴求する）: 番号バッジ付きの大カードに、黄色ブロックを背にした人物写真を載せる
7. 求める人物像（求める人材像を示す）: 上線付きカード3枚。線画アイコン・見出し・発言例を中央揃えで入れる
8. 募集職種（職種と業務内容を伝える）: 黄色吹き出しを載せた写真カード。青帯の職種名と箇条書きを入れ、アウトラインボタンを置く
9. 社員インタビュー（働く人のリアルを伝える）: 青背景のポートレートカードを横スクロールで見せ、ドットのインジケーターを付ける
10. クライアントに支持される理由（技術力と事業の強みを示す）: 上線付きカードに薄い大きな番号と写真を入れる
11. 福利厚生・制度（制度の充実を示す）: 2カラムの線画アイコンタイルの後に、＋ボタン付きの写真カードを続ける
12. 文化（社風を伝える）: 写真の上に白いテキストカードをずらして重ねる
13. CTA（応募・面談へ導く）: 青い合成背景に、白い塗り帯のコピーと黄色・黒のピル型ボタンを置く
14. フッター（サイトを締めくくる）: 黒地に白のロゴ、リンク、コピーライトを置く

Imagery

• 人物は白背景で撮影して切り抜き、飛ぶ・走るなど大きな動きのポーズにする
• 背後に青いグリッチ風のCGキャラや3Dキューブを合成する
• アイコンは青を基調とした光沢のある3Dイラストにする
• 制度・人物像のアイコンは青い細めの線画にする
• オフィス写真は明るく自然光で、笑顔の対話シーンを選ぶ
• 黄色と白の四角いピクセルブロックを散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の約70%幅にコンテンツを置き、統計カードを3カラムにする
• PCのヒーローは横長にし、人物を左右に広げる
• PCのメッセージ部はテキストと写真を左右に分ける
• 魅力カードはPCで写真を右、テキストを左に並べる
• PCの人物像・理由カードは3カラム、福利厚生は4カラムにする
• PCのヘッダーにはナビと2つのCTAを常に表示する

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