DESIGN.md — 青の濃淡×黄・桃の幾何学装飾の新卒採用 LP（Bold Blue Geometric Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、信頼・誠実、清潔・爽やか、クール・先進的
• キーワード: 青の濃淡ブロック・幾何学モチーフの縦列・白い角丸リンクカード・丸い写真の社員紹介・英字ラベル付き見出し
• 地の質感: フラットなベタ塗り。グラデーションや影はほぼ使わない。インタビュー背景だけは淡い記号柄を散らす
• 形: 角丸カード、正円の写真、山形の矢印、長方形の帯、輪っか
• 温度感: 青が主体のクールさに、黄・ピンク・赤の差し色で温かみと元気さを足す

Colors

• セクションごとに青の濃淡（#0780C5／#006AB8／#1893CA）を交互に塗り、境界は直線で切り替える
• 文字は青い地の上では白、白カードの上では青にする。黒文字は使わない
• 装飾モチーフはセクションごとに 1 色に固定する（濃い青の矢印、黄色の帯、ピンクの輪）
• 黄色は案内バナー・日付・装飾帯に限って使い、目立たせる役にする
• 社員バッジと写真枠は職種ごとに赤・紺・橙・紫などで色分けする
• エントリー用ボタン群は濃い青・水色・緑の 3 色を横に並べる

Typography

• 全体を太めのゴシックでそろえ、細い文字は使わない
• 見出しは「英字ラベル（小）→日本語見出し（大）→サブ文（小）」の 3 段で組む
• 英字ラベルは字間を広めに取る
• 見出しは左寄せ、ボタンの文字は中央寄せにする
• ファーストビューのキャッチは 2 行に分け、句読点まで大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC はカード一覧を 2 カラム、社員紹介を 4 カラムにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 100px、基本単位 8px、カード内 10px（375px 幅換算）
• 見出しブロックは左端から 20px の位置にそろえる
• リンクカードは横幅いっぱい（左右 20px 余白）に並べ、間隔は約 20px にする
• 装飾モチーフはカードの後ろ（右寄りか中央）に縦一列で敷く
• 社員紹介は 2 列グリッドで、1 人あたり丸写真・名前・バッジを縦に積む
• セクションの上下に 80〜100px の余白を取る

Elevation & Depth

• 影はほぼ使わずフラットにする
• 白カードは青い地とのコントラストだけで浮かせる
• 装飾モチーフはカードの下の層に置き、カードと重ねる

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: カード内のサムネイルは角丸なしの横長、社員写真は正円にして太さ 3px の色枠を付ける
• セクション境界: 直線で背景色だけを切り替える
• リンクカードは角丸 14px 前後にする
• 職種バッジは角丸 6px の小さな四角にする
• インターン案内バナーはピル型にして白い縁取りを付ける
• メインのボタンは角のない白枠線の四角にし、右側に細い矢印を添える

Components

• 写真付きリンクカード（link-card）: 白い角丸カード。左に横長の写真、右に青い太字のリンク名を置く
• 英字ラベル付き見出し（section-heading）: 小さな英字ラベル、大きな日本語見出し、サブ文の 3 段。白文字で左寄せにする
• インターン案内バナー（intern-banner）: 黄色のピル型。左に人物イラスト、中央に 2 行の案内文、右に細い矢印を置く
• エントリー用ボタン群（entry-tabs）: 3 色の四角を横に並べ、年度とボタン名を黄色の英字で 2 行に入れる
• 白枠線ボタン（button-outline）: 透明の地に白い 2px 枠線。中央に白文字、右に長い細矢印を置く
• 社員の丸写真（staff-avatar）: 白背景の正円写真に職種カラーの太い枠を付け、下に白い名前を置く
• 職種バッジ（role-badge）: 職種カラーで塗った小さな角丸四角に白文字
• お知らせ行（news-row）: 黄色の日付と黄緑のピル型ラベルの下に白文字の本文を置き、下に細い白線を引く
• 縦列の幾何学装飾（deco-column）: シェブロン矢印・黄色の帯・ピンクの輪をセクションごとに縦一列で繰り返す

Do's and Don'ts

Do - セクションごとに青の濃淡を切り替えて区切る - 各セクションに専用の幾何学モチーフを 1 種類だけ縦に並べる - リンクは写真付きの白い角丸カードに統一する - 社員は丸写真＋職種カラーのバッジで色分けする - 見出しは必ず英字ラベルと組み合わせる

Don't - 黒やグレーの背景を使わない - グラデーションや強い影でカードを立体的にしない - 1 つのセクションに複数のモチーフを混ぜない - 細い明朝体や手書き体を使わない - 青い地の上に青系の文字を置かない

Page Structure

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

1. ファーストビュー（企業の姿勢と人柄を一目で伝える）: 屋外で撮った人物写真を全面に敷き、左上に白い極太のキャッチ 2 行と英字の会社表記を置く。左下に縦書きの SCROLL を入れる
2. メッセージ・導線（採用メッセージとエントリーへ誘導する）: メインの青の地に中央の矢印列を敷き、見出し・黄色のインターン案内バナー・3 色のエントリーボタンを並べる
3. お知らせ（最新情報を伝える）: 黄色の日付、ラベル、本文を並べ、細い白線で区切る
4. 会社を知る（事業や企業概要への入口）: 濃い青の地に黄色の帯を縦に並べ、写真付きの白カードを 5 枚積む
5. 採用情報（募集要項やキャリアなど採用関連の入口）: 明るい青の地にピンクの輪を縦に並べ、白カードを 9 枚積む
6. 福利厚生（制度面の安心感を伝える）: 濃い青の地に矢印列を敷き、白カードを 4 枚積む
7. 社員紹介（働く人の顔を見せて親近感をつくる）: 記号柄を散らした青の地に、丸写真と職種バッジを 2 列で並べ、最後に白枠線の一覧ボタンを置く

Imagery

• 人物写真は自然光で撮った明るい笑顔のスーツ姿。背景は緑の木々やガラス張りのオフィスをぼかす
• 社員写真は白背景の胸から上で、正円に切り抜く
• カードのサムネイルは街並み・設備・オフィス・データ画面など、事業を連想させる青みのある写真にする
• 装飾はシェブロン矢印・長方形の帯・輪っかなど単純な図形で、ベタ塗りにする
• インタビュー背景には三角・点線・円などの小さな記号を、淡い青で散らす
• 人物イラストはスーツ姿でバンザイする明るいフラットな絵柄にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では人物写真を右上に寄せて縮め、キャッチは左側の青い地に置く
• PC ではリンクカードを 2 カラムのグリッドにし、高さを低くする
• PC では社員紹介を 4 列にする
• 幾何学装飾の縦列は PC でもセクション右寄りか中央に残す
• PC では見出しを横 1 行に広げ、コンテンツ幅を約 75% にする

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