DESIGN.md — 青×黄の立体幾何ポップな新卒採用 LP（Pop Geometric Blue Yellow Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、クール・先進的、清潔・爽やか
• キーワード: 立体幾何学・切り抜き人物・青と黄・円形モチーフ・グラデーション・躍動感
• 地の質感: 光沢のある3Dオブジェ風の球・半円・四分円。面はフラットでノイズなし。
• 形: 円・半円・四分円・三角の組み合わせ。カードは小さめ角丸、リンクは正円。
• 温度感: 爽やかで明るい寒色ベースに黄で温度を足す

Colors

• 地は白、情報カードはブランド青ベタに白文字。
• 黄はコピーの英字・CTA・球体など目立たせたい点だけに使う。
• 下部セクションは青→水色→黄の縦グラデーションで面を切り替える。
• 写真円は暗めのオーバーレイを敷き白文字を載せる。
• 赤やピンクなど暖色系は使わず、青系＋黄の2系統に限定。

Typography

• 英字は幾何学的サンセリフで大きく、和文は控えめなゴシックで添える。
• キャッチの一部の漢字・かなは線画風に太い青の幾何ブロック文字で装飾。
• 英字見出しは白か黄、グラデ面の上では白。
• 本文は短く2行以内に収める。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、円形リンクはジグザグ配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• FVは人物と幾何オブジェをグリッド状に敷き詰めたコラージュ。
• コピーはFV下部に左寄せで重ねる。
• FVとお知らせの間に縦の細線を置いて視線を下へ誘導。
• お知らせカードは幅いっぱいに縦積み、間隔8px。
• 円形リンクは左右交互にずらして浮遊感を出す。
• 右下にCTAボタンを縦に2つ固定。

Elevation & Depth

• カードは影なしのフラット。
• 幾何オブジェは3Dレンダ風の陰影で立体感を出す。
• 固定CTAは左側だけ角丸のタブ型で画面右端に密着。

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は背景を抜いた切り抜き、建物・シーン写真は正円トリミング
• セクション境界: 大きな円弧（ドーム状）でグラデ面が立ち上がる
• 円と四分円を基本モチーフにする。
• カードは小さい角丸の長方形。
• CTAは左上下のみ角丸で右端にくっつける。

Components

• お知らせカード（info-card）: 青ベタに英字小ラベル＋白文字2行、右に黄の矢印。
• 円形写真リンク（circle-link）: 直径約150pxの正円写真に暗いオーバーレイと白の太字ラベル。
• 黄色の球体見出し（sphere-label）: 光沢のある黄色の球に濃紺の英字を載せたメッセージ導線。
• 固定エントリーボタン（button-entry）: 右下固定の黄色タブ。太い英字と外部リンクアイコン。
• 固定マイページボタン（button-mypage）: エントリー下に重ねる青タブ、白文字。
• 英字＋和文の重ねコピー（hero-copy）: 黄の大英字の上に幾何ブロック文字の和文キャッチを重ねる。
• 縦の誘導線（divider-line）: 中央に水色の細い縦線を60px程度。

Do's and Don'ts

Do - 青・水色・黄の3色で幾何オブジェを構成する。 - 社員は全身切り抜きで、ジャンプやポーズなど動きのある姿にする。 - 英字見出しは大きく、和文リードは小さく添える。 - 円形モチーフをFVから下部まで繰り返す。 - CTAは右下固定で常に見えるようにする。

Don't - 暖色系や彩度の低い色を主役にしない。 - カードに強いドロップシャドウを付けない。 - 写真を四角いまま大きく並べない。 - 長文の本文ブロックを置かない。 - 明朝体や手書き書体を使わない。

Page Structure

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

1. ファーストビュー（個性と未来を打ち出す世界観提示）: 幾何オブジェと切り抜き社員のコラージュ＋英字と和文の重ねコピー、下に年度入りロゴ表記。
2. 誘導線（視線を下へ流す）: 白地中央に水色の縦細線。
3. お知らせ（イベント・更新情報の告知）: 青ベタのカードを2枚縦積み。
4. メッセージ導線（トップメッセージへの入口）: 黄色の球体に英字ラベル、背後に青い円弧が立ち上がる。
5. コンテンツ一覧（企業理解コンテンツへの導線）: 青→黄グラデ面に白の大英字見出しとリード、円形写真リンクをジグザグ配置、背景に社屋写真を透過。
6. 固定CTA（エントリー・マイページへの誘導）: 右下に黄と青のタブ型ボタンを縦に並べ固定。

Imagery

• 社員はスーツ・オフィスカジュアルで全身を撮り、背景を切り抜く。
• ジャンプ・指差し・PCを持つなど一人ずつ違うポーズ。
• 3Dレンダ風の光沢ある球・半円・四分円・アスタリスク形を配置。
• 社屋や商談シーンは寒色寄りに補正し正円で切り抜く。
• グラデ面の背景に建物写真を半透明で重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはFVを左にコピー、右に幾何コラージュの2分割にする。
• PCではお知らせカードを1行の横長バーにし中央に細く並べる。
• 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 行書くと起動時に読み込まれる。