DESIGN.md — 黒地にピクセル柄が映えるゲーム会社採用インタビューLP（Pixel Pop Game Recruit Interview LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、シンプル・ミニマル、ポップ・元気
• キーワード: ピクセル・黒パネル・色分けイニシャル・Q&A長文・線ボタン・大型欧文透かし
• 地の質感: フラットで光沢なし。黒パネルの上だけに、半透明のピクセルブロック柄を散らす。
• 形: 角丸なしの四角が基本。SNSボタンだけ円形にする。
• 温度感: グレーと黒で落ち着いたクールなトーン。人物色のピンク・紫・青・オレンジで温かみを足す。

Colors

• 地は明るいグレーに統一し、紹介とまとめのブロックだけ黒パネルにする。
• 黒パネルには、ピンク・紫・青・オレンジ・緑の半透明ピクセル柄を散らす。
• 4人それぞれに固定の色を割り当て、イニシャルを常にその色で示す。
• オレンジは黒パネルの強調見出しにも使う。
• ボタンは塗らない。白地に黒い線枠だけで作る。
• 大型の欧文透かしは、白で背景のグレーに溶け込ませる。

Typography

• 見出しも本文も太めのゴシックで、詰まり気味に組む。
• 質問見出しの頭には「Q1.」形式の番号を付ける。
• イニシャルは本文の左に縦位置を揃えて置き、本文の行頭を揃える。
• 画面幅からはみ出す大型の欧文を、背景装飾として使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。回答はイニシャル列と本文列の 2 列。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は全幅で配置し、質問ブロックの区切りにする。
• 黒パネルは左右に約 5% の余白を残して置く。
• 回答と回答の間は 32px 前後空ける。
• 人物紹介は左に顔写真、右にテキストの横並びにする。

Elevation & Depth

• 影は使わない。完全にフラットにする。
• 奥行きは、黒パネルとグレー地の明暗差だけで出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの矩形。顔写真は縦長の矩形にする。
• セクション境界: 直線で区切る。全幅の写真と大型欧文で区切る。
• 角丸は付けない。
• SNSボタンだけ円形にする。
• ボタンには線を横切る矢印を添える。

Components

• 白ラベル（label-tag）: 写真や黒パネルの上に置く、白地に黒文字の矩形ラベル。
• ピクセル柄の黒パネル（pixel-panel）: 黒地にカラフルなピクセル柄を散らし、人物紹介やメッセージを載せる。
• 人物紹介行（member-row）: 顔写真の右に、色付きイニシャル・所属・経歴を並べる。
• 色分け回答（qa-answer）: 左に人物色のイニシャル、右に本文を置く回答ブロック。
• 線ボタン（button-outline）: 白地に黒の 2px 枠を付け、右端に枠をはみ出す矢印線を添える。
• シェアボタン（share-circle）: 濃いグレーの円形 SNS アイコンを横に並べる。
• 大型欧文透かし（bg-watermark）: 画面幅からはみ出す白の巨大な欧文を、背景に敷く。
• 大型引用符（quote-mark）: まとめパネルの角に、白の極太の引用符を置く。

Do's and Don'ts

Do - 人物ごとの色を全セクションで固定する。 - 長文は行間を広めにとり、イニシャル列で区切る。 - 質問ブロックの間に全幅写真を挟んで、リズムを作る。 - ボタンは線枠と矢印でミニマルに作る。

Don't - 角丸やドロップシャドウを使わない。 - ボタンを色で塗りつぶさない。 - ピクセル柄をグレー地に置かない。黒パネル限定にする。 - 人物色以外の派手な色を本文に使わない。

Page Structure

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

1. ファーストビュー（記事の種類と職種を伝える。）: 談笑写真を全幅で敷き、白ラベルと白い太字タイトルを重ねる。
2. 登場人物紹介（話し手を把握させる。）: ピクセル柄の黒パネルに、顔写真と経歴を 4 行並べる。
3. シェア（拡散を促す。）: テキストの横に円形の SNS ボタンを 3 つ置く。
4. Q&A（複数）（仕事のリアルを伝える。）: Q番号付きの見出しの下に、色分けイニシャルと回答を 4 人分並べる。
5. 区切り写真（読み疲れを和らげる。）: 白壁の前の人物写真を全幅で置き、下に大型欧文の透かしを敷く。
6. メッセージ（応募者への一言で締める。）: 引用符付きの黒パネルに、オレンジの見出しと 4 人のコメントを載せる。
7. 関連記事ナビ（他職種の記事へ回遊させる。）: 前・トップ・次の 3 つの線ボタンを横に並べる。
8. クロージング（ブランドの印象を残す。）: 集合写真にロゴと白のコピーを重ねる。
9. 外部リンク・フッター（関連サイトへ誘導する。）: 大きな線ボタン 2 つの下に、ロゴ・住所・コピーライトを置く。

Imagery

• 白壁と木の机の前で、自然光のもと談笑する人物写真。
• 顔写真は白背景で、胸から上を縦長に切り取る。
• 装飾は、テトリス風のピクセルブロックを半透明の多色で散らす。
• 笑顔の自然な瞬間を、横長の構図で撮る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は全幅の FV にグローバルナビを横並びで置く。
• PC はカードをグリッドで 2〜3 列にする。
• PC は文章と写真を左右 2 カラムで組む。
• 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 行書くと起動時に読み込まれる。