DESIGN.md — 電光ブルー×幾何学線の金融系採用 LP（Electric Blue Geometric Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、信頼・誠実、シンプル・ミニマル
• キーワード: 電光ブルー一色・幾何学パターン・細線枠カード・白抜き帯見出し・鳥モチーフのアクセント
• 地の質感: フラットな白地に、細い青線の斜線・ジグザグ、グレーの線画パターン、青ドットを背景装飾として重ねる
• 形: 角丸のない直角の矩形と 1px 細枠。円形は動画サムネのみ。右下の三角矢印アイコンで統一
• 温度感: クールで知的。差し色のピンク赤で温度を少し上げる

Colors

• 色はほぼ白と青の 2 色で構成する
• 見出し・枠線・アイコン・リンクはすべて同じ青
• ピンク赤はキャッチ・鳥モチーフ・エントリーボタンだけに使う
• 本文は黒でなく濃紺にする
• フッターは青ベタにし、白カードと白文字で反転させる
• 背景パターンは淡いグレーか淡い青紫にして、文字の邪魔をしない
• button-entry は文字 #FFF1F7 × 背景 #FE3263 のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E00137、4.53:1）を使う。

Typography

• 明朝はキャッチコピーだけに使い、ほかはすべてゴシック
• セクション見出しは青ベタの帯に白抜きで中央に置く
• サブラベルは小さい青帯に白文字、その下のタイトルは淡グレー帯に青文字
• リード文は中央揃えで字間を広めにとる
• 欧文の等幅書体で番号やボタンにテック感を出す
• リンクは青文字に下線
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カルーセルは左右に隣のカードをのぞかせる
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• カードとボタンは左右 24px の余白で全幅に並べる
• リンクカードは縦に 12〜16px 間隔で積む
• アイコン付きカードは左に縦線で区切ったアイコン欄、右にラベルとタイトル
• セクションは見出し帯、中央揃えリード、カード群の順に並べる
• 一覧へのボタンは小さい枠ボタンを中央に置く

Elevation & Depth

• 影は使わない。1px の青枠で面を区切る
• 奥行きは背景パターンの重なりで出す
• 写真の上のラベルは白か青のベタ帯で浮かせる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形のまま切り抜く。動画サムネだけ円形にする
• セクション境界: 直線で切り替える。背景パターンが範囲の外まで流れ出してもよい
• 角丸はどこにも使わない
• ボタンは白地＋青 1px 枠
• 矢印は右下に置く小さな三角か外部リンクアイコン
• ジグザグ・斜線・ドット・×印などの幾何学模様を背景の端に置く

Components

• 青帯見出し（section-heading-band）: 文字幅に合わせた青ベタの帯に白い太字。中央に置く
• 細枠リンクボタン（link-card）: 白地に青 1px 枠。左に青太字のラベル、右端に三角矢印
• アイコン付き案内カード（icon-feature-card）: 左のアイコン欄を縦線で区切る。右に青帯の小ラベルと、淡グレー帯の青タイトルを置く
• 写真サムネ付きリンク（photo-thumb-link）: 左端に小さな写真を置いた横長の枠リンク
• 社員・プロジェクトカード（carousel-card）: 青枠の縦長カード。写真の下に青太字のコピー、名前、入社年を置く。下に三角の前後ボタン
• 写真バナー（photo-banner）: 全幅の写真。左下に青帯ラベルと白帯タイトルを 2 段で重ねる
• お知らせリスト（news-list）: 日付と本文を並べ、細いグレー線で区切る。リンクは青の下線付き
• 固定エントリーボタン（button-entry）: 画面下部の固定バーに置くピンク赤の矩形ボタン。欧文の太字
• フッターのグループリンク（footer-white-card）: 青ベタの上に白の矩形リンクを縦に積む

Do's and Don'ts

Do - 青は 1 色に絞り、枠・文字・帯すべてに使う - 直角と 1px 細枠で揃える - セクションごとに違う幾何学パターンを端に添える - ピンク赤の鳥モチーフを数か所に散らしてリズムを作る - 見出しの下に中央揃えで 2〜3 行のリードを置く

Don't - 角丸や影を付けない - グラデーションや多色使いをしない - ピンク赤を大きな面に使わない - 本文を真っ黒にしない - 背景パターンを文字の真下に濃く敷かない

Page Structure

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

1. ファーストビュー（企業の姿勢を一言で示す）: 線画パターンの上に、ピンク赤の明朝の大コピーと鳥モチーフを置く。下に写真サムネ付きの枠リンクを 3 本並べる
2. 動画導線・お知らせ（最新情報と動画への誘導）: 円形の動画サムネに青ラベルを添える。お知らせは日付付きで線区切りのリストにする
3. 採用コンセプト（理念を伝える）: 青帯見出しの下に青太字の中央メッセージ、その下に枠ボタンを 2 本並べる
4. 事業紹介（事業戦略と実績への導線）: リード文に続けて、アイコン付き案内カードを 2 枚置く
5. キャリア紹介（人事制度と福利厚生への導線）: アイコンカード 2 枚と、ピクセルアート風の特設バナーを置く
6. プロジェクト紹介（具体的な取り組みを見せる）: 番号ラベル付きのカードをカルーセルで見せ、ハッシュタグと一覧ボタンを添える
7. 社員紹介（人の魅力を伝える）: 写真と青コピーのカードをカルーセルにし、続けて写真バナーを 2 枚とアイコンカードを置く
8. 採用情報（募集区分への導線）: 枠リンクの下に説明文を添えて 2 本並べる
9. さらに知る（関連サイトへの導線）: 枠リンクを 3 本縦に積む
10. フッター（グループ各社と規約への導線）: 青ベタの上に白い矩形リンク、バナーの 2 列グリッド、規約リンクを並べる。下に固定エントリーバーを置く

Imagery

• 写真はオフィスで撮った自然光の社員ポートレート。スーツやオフィスカジュアルで、表情は明るい
• テック系の写真は暗めの青トーン。画面やグラフを写す
• アイコンは青の細線で描くラインアイコン（建物・人・グラフなど）
• 背景装飾はジグザグ・斜線・×印・ドット・矢羽根の幾何学パターン
• 差し色として、ピンク赤の折り紙風の鳥シルエットを置く
• 特設バナーは青紫のピクセルアート調の街並み
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 約 65% 幅のコンテンツにし、右端に固定のセクション目次を置く
• PC はアイコンカードや枠ボタンを 2 列に並べる
• PC はカルーセルで 3〜5 枚を同時に見せる
• PC ではエントリーと Menu を右上に固定する
• 背景パターンは 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 行書くと起動時に読み込まれる。