DESIGN.md — 白黒×虹色リボンの技術系採用 LP（Monochrome Tech Recruiting LP with Iridescent Ribbons）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、シンプル・ミニマル、力強い・インパクト
• キーワード: 白黒基調・虹色流体リボン・モノクロ都市写真・巨大欧文見出し・未来の技術・バナーグリッド
• 地の質感: 白い余白の多いフラットな面に、光沢のある 3D リボンと CG 合成画像を重ねる
• 形: 角のない四角い写真・バナーと、ピル型ボタン、円形アイコンボタンの組み合わせ
• 温度感: ややクールだが虹色アクセントで明るく前向き

Colors

• 地は白、文字とボタンは黒・チャコールのモノトーンで統一する
• 彩りは虹色リボン画像とバナー画像に任せ、UI 部品には有彩色を使わない
• 青はロゴの一字・手書き風コピー・ハッシュ記号など点で使う
• 後半は夜空風の濃紺〜黒グラデーション地にカラフルなバナーを並べる
• ナビグリッドとフッターはチャコール地に白文字
• circle-label は文字 #1A8CBF × 背景 #FEFFFE のコントラスト比が 3.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#177DAB、4.6:1）を使う。
• banner-card は文字 #FAFCF9 × 背景 #21BAD9 のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#177F94、4.52:1）を使う。

Typography

• セクション見出しは細めの巨大欧文＋小さな太字和文の 2 段構成
• 本文は行間 2.0 前後で広く取る
• リード文は中央揃え、事業説明は左揃え
• 強調語だけ手書き風の青文字にして遊びを入れる
• 欧文小文字ラベルは字間を広く取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ナビのみ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 余白を大きく取り、画像とテキストを交互に配置する
• 白い本文パネルを写真の上に重ねてずらす
• バナーは横幅 76% 程度で縦に詰めて並べる
• ナビグリッドは細い白線で 4 分割
• インタビューは横スクロールのカルーセル

Elevation & Depth

• 影はほぼ使わずフラット
• 白パネルを写真に重ねることで奥行きを出す
• カルーセルの中央カードを大きく、左右を小さくぼかして遠近感を出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真・バナーは角丸なしの長方形、CG 素材は切り抜きで白地に配置
• セクション境界: モノクロのビル群シルエットや虹色リボンで切り替え、直線で区切る
• ボタンはピル型（黒塗りまたは黒枠の白）
• 矢印付きの円形アイコンボタンをバナー右下に置く
• 事業分野は細線円のラベルを引き出し線でつなぐ

Components

• 黒ピル型主ボタン（button-primary）: 黒地に白太字の 2 行テキスト、右端に細い矢印、左にはみ出す円形アイコン
• 黒枠ピル型ボタン（button-outline）: 白地に黒細枠、中央に 2 行テキストと右矢印
• 下線矢印リンク（link-underline）: テキストの下に細い黒線を引き右端に矢印
• 巨大欧文見出し（heading-en）: 細身の大きな欧文の下に小さな太字和文
• 動画メッセージバナー（video-banner）: 写真に白太字見出しと白円の再生ボタンを重ねる
• 分野ラベル円（circle-label）: 白地に色付き細線の円、中に分野名と小さな山括弧
• コンテンツバナー（banner-card）: シアン・黄色・写真など色違いの長方形バナー、右下に円形矢印ボタン
• ナビグリッド（nav-grid）: チャコール地 2×2 の白線区切り、白文字と白円矢印
• ハッシュタグ（hashtag-list）: 青い＃記号と黒文字の職種タグを中央に縦並び

Do's and Don'ts

Do - 白黒モノトーンの UI に虹色リボン画像で彩りを足す - 見出しは大きな細身の欧文を主役にする - 余白は広く、本文行間はゆったり取る - ボタンはピル型か円形に統一する - 後半は濃色地にカラフルなバナーを並べてメリハリを付ける

Don't - ボタンや見出しに有彩色の塗りを使わない - カードに影や大きな角丸を付けない - 本文を詰めた行間にしない - 明朝や丸ゴシックを混ぜない - 写真を多色フィルターで加工しない

Page Structure

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

1. ファーストビュー（企業ロゴと未来志向の世界観を示す）: 灰色の大きなロゴ、中央揃えの短いコピーと手書き風強調語、ロボット・車・ロケットの CG 合成画像
2. ビジュアル帯（技術の未来感を演出し SNS へ誘導）: 虹色リボンとモノクロビル群の画像、右に円形の SNS バッジ
3. 理念・リード（会社の想いを伝える）: 中央揃えの短い文を広い行間で 5 行、下に黒ピル型主ボタン
4. 職場写真（働く人の雰囲気を見せる）: 全幅のオフィス写真
5. トップメッセージ動画（代表の言葉へ誘導）: 写真に白太字見出しと円形再生ボタンを重ねたバナー
6. 事業紹介（事業領域と技術力を伝える）: 写真に重ねた白パネルに巨大欧文見出し・本文・下線リンク、分野ラベル円付きの CG 画像
7. 社員インタビュー（社員の人柄と職種を紹介）: 縦長ポートレートのカルーセル、矢印、ハッシュタグ、黒枠ピルボタン
8. コンテンツバナー群（研修・Q&A・福利厚生・家族向け情報へ誘導）: 夜空グラデーション地に色違いの長方形バナーを縦に並べる
9. ナビグリッド（理念・FAQ・募集要項などへ案内）: チャコール地 2×2 グリッド、白文字と白円矢印
10. エントリー CTA（応募を促す）: 白地に短いコピーと巨大欧文、黒円矢印ボタン、両端に虹色リボン
11. フッター（ロゴで締める）: チャコール地に白ロゴと字間広い欧文ラベル

Imagery

• 光沢のある虹色の 3D 流体リボンを画面端から流し込む
• 高層ビル群はモノクロ写真で地平線として使う
• ロボット・スポーツカー・ロケット・PC などの CG を切り抜き合成
• 社員写真は明るいオフィスで自然な表情、彩度控えめ
• 研修バナーはアイソメトリックのフラットイラスト
• 背景に星空〜地球のような濃紺グラデーション
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV で合成画像とビル群を横長に一体化し、ロゴを全幅に
• PC の事業紹介は左に本文、右に CG 画像の 2 カラム
• PC のバナー群は 2 列グリッドで研修バナーを縦 2 段分の大きさに
• PC のナビグリッドは 4 列横並び
• 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 行書くと起動時に読み込まれる。