DESIGN.md — 虹色クロス×深緑の技術者採用 LP（Prismatic Cross Gradient Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、ポップ・元気、力強い・インパクト
• キーワード: 交差・プリズム・ネオングラデーション・英字極太見出し・モノクロ写真・余白多め
• 地の質感: フラットな白と淡グレー面に、半透明で重なる立体的なグラデーションバーを乗せる
• 形: 角丸の大型パネル、六角形の写真切り抜き、角のない矩形グラデーションボタン
• 温度感: クールだが彩度の高い多色で若々しい

Colors

• 地は白と淡グレーパネルの2色で静かに保つ
• セクション英字見出しは毎回違うグラデーション（シアン→青、ピンク、緑、オレンジ）を当てる
• 各セクションのボタン色は見出しのグラデーションと揃える
• 多色のネオンは装飾バーと見出しに限り、本文は墨色のみ
• ページ終盤は蛍光グリーン→深緑へ切り替えて締める
• 人物写真はモノクロ寄りかグレー調で多色装飾と衝突させない
• button-gradient は文字 #FFFFFF × 背景 #0A7AED のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#0A75E3、4.5:1）を使う。
• recruit-card は文字 #FFFFFF × 背景 #14955C のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#128552、4.66:1）を使う。
• play-badge は文字 #FFFFFF × 背景 #23EC6B のコントラスト比が 1.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#575757、4.57:1）を使う。

Typography

• 英字見出しは極太のスクエア系サンセリフにグラデーションの文字塗り
• 英字見出しの下に斜線アイコン＋日本語サブ見出しを添える
• FVと冒頭メッセージのみ明朝で詩的に
• 本文は小さめ・行間広めで余白を活かす
• 数字ラベルは英字と同じ書体で太く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、カードは横スクロール
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算）
• 英字見出しとパネルを左右交互に配置して動きを出す
• 淡グレーパネルは画面端に寄せ片側だけ余白を残す
• 見出しはパネルからはみ出して重なる
• カード群の下に区切り線と前後ボタンを置く
• CTAボタンは本文ブロックの下に左寄せで置く

Elevation & Depth

• 影はほぼ使わず面の色差で階層をつける
• 装飾バーは半透明の重なりで奥行きを出す
• 採用カードはグラデーション塗りのみで影なし

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は六角形や矩形で切り抜き、プロジェクト写真は横長矩形
• セクション境界: 直線。パネルの角丸で区切り、終盤は全幅のグラデーション帯
• ボタンは角のない横長矩形に右外側へ細い矢印
• パネルは大きな角丸
• 前後送りボタンは小さなピル型の深緑
• 交差するX字の立体バーをFVとエントリー帯に配置

Components

• グラデーション矩形ボタン（button-gradient）: セクション色の横グラデーション矩形に白文字、外側右に細矢印
• 英字グラデ見出し（section-title）: 極太英字に縦グラデーション、下に斜線＋日本語サブ見出し
• 淡グレー角丸パネル（panel-soft）: 画面端に寄せたコンテンツ背景面
• 社員カード（people-card）: 上部に色帯の職種タグ、白背景の人物写真、下にネオン枠の掛け合わせラベル2段
• 掛け合わせ枠ラベル（cross-label）: ピンク枠と緑枠の2つの矩形を斜線で結び掛け算を表す
• 採用情報カード（recruit-card）: 緑グラデの角丸カードに英小見出し・日本語見出し・説明・右矢印
• ニュース行（news-row）: 日付を大きな数字で、NEWバッジ、タイトル、右矢印、下線区切り
• 再生円バッジ（play-badge）: 動画サムネに重ねる緑の円形PLAYボタン

Do's and Don'ts

Do - 英字見出しはセクションごとに色を変える - 装飾バーは交差・重なりで立体感を出す - 白とグレーの余白を広くとり多色を引き立てる - 掛け合わせを表す2連枠ラベルを繰り返す - 終盤はグリーン系で統一して締める

Don't - 本文に多色を使わない - ボタンを丸いピル型にしない - ドロップシャドウを多用しない - 暖色ベタ地の背景セクションを作らない - 写真に強いフィルターや多色加工をかけない

Page Structure

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

1. ファーストビュー（コンセプトを印象づける）: 左に明朝の2行キャッチ、右に交差するネオン立体バーとモノクロ人物写真の合成
2. メッセージ（企業の思いを語る）: 中央寄せの短い明朝文を10行ほど並べ、最後にロゴ
3. 会社紹介（会社概要へ誘導）: 左に六角形写真コラージュ、右に淡グレーパネルと英字見出し・リード・ボタン
4. ニュース（最新情報）: 左にピンク英字見出し、右にニュース行1件とピンクボタン
5. イベント（イベント案内）: 緑英字見出しと右寄せパネル、ネオンバーの装飾
6. 社員紹介（人を知る）: オレンジ英字見出し、横並び社員カードのカルーセル
7. プロジェクト紹介（仕事内容を伝える）: 番号付き写真カードのカルーセルと対談動画サムネ
8. 働く環境（制度・環境紹介）: アイソメトリックイラスト、写真付き2カラムカード
9. 採用情報（募集要項・FAQ・エントリー）: 淡グレーパネル内に緑グラデカードを縦積み、FAQは番号付き行
10. CTA（エントリーを促す）: 蛍光グリーン全幅帯に巨大英字とロゴ、交差バー装飾
11. フッター（導線とパンフレット）: 深緑地にライトグリーンのボタン、パンフレット告知面、4列サイトマップ

Imagery

• 透明感のある四角柱バーをX字に交差させ、虹色グラデで描く
• 人物写真はモノクロや低彩度で清潔感ある背景
• 社員は白背景の上半身ポートレートで笑顔
• 職場・技術はドローンやサーバー室など先端的な被写体
• 働く環境は淡色アイソメトリックイラスト
• 動画サムネは2人並びの対談写真に斜めの帯
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは英字見出しを40〜48pxに縮め左寄せ
• 左右交互配置はSPで縦積みにし、写真を上に
• カード群はSPで横スクロール1.2枚表示
• パネルは画面端まで広げ片側の角丸を残す
• フッターの4列はSPで2列
• FVの交差バーはSPで写真の背面に縮小配置

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