DESIGN.md — 空色×若葉の爽やかインフラ企業採用 LP（Bright Sky Blue Infrastructure Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい、ポップ・元気
• キーワード: 空色・葉型モチーフ・大きな曲面・笑顔の社員・アイソメ街イラスト・白カード
• 地の質感: フラットな単色面。グラデーションは控えめで、白カードに淡い影
• 形: 大きく弧を描くセクション境界、葉の形に切り抜いた写真、角丸カード
• 温度感: 爽やかで明るい寒色寄り。若葉色とオレンジで温かみを足す

Colors

• 地は淡い水色で統一し、主要セクションだけ空色の大ブロックに切り替える
• 白カードは水色地・空色地のどちらにも乗せて情報をまとめる
• 応募の主CTAだけオレンジ黄にして、ページ内で最も目立たせる
• 若葉色と淡い水色は葉型装飾とラベルにだけ使う
• 見出しは黒ではなく濃紺グレーで柔らかくする
• 数値データは濃い青で大きく見せる
• button-entry は文字 #FFFFFF × 背景 #FFB401 のコントラスト比が 1.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9D6E00、4.5:1）を使う。
• button-more は文字 #00A2FF × 背景 #FFFFFF のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#007BC2、4.55:1）を使う。
• nav-card は文字 #00A2FF × 背景 #FFFFFF のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#007BC2、4.55:1）を使う。
• stat-card は文字 #2D90C3 × 背景 #FFFFFF のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#277EAA、4.52:1）を使う。

Typography

• 見出しは太字ゴシックで2行に分け、行間はゆったり取る
• FVのキャッチは縦書きで写真の横に置く
• 見出しの上に葉アイコン付きの小ラベルを空色で添える
• 数値は欧文で大きくし、単位は小さく添える
• 本文は行間1.9前後で短い段落に区切る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは SP で 1〜2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは大きな曲面で切り替え、角に弧を残す
• 見出しは左寄せ、締めのCTAだけ中央揃え
• カード群の右下にサブボタンを置く
• イラストや写真はブロックからはみ出させて動きを出す
• インタビューは横スライダーで1枚ずつ見せる

Elevation & Depth

• 白カードに淡い青みの影（0 4px 16px rgba(0,100,180,0.08)）
• 部門カードは下端に若葉色の太い差し色の影を付ける
• ボタンは影を付けずフラットにする

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 人物は葉型・しずく型に切り抜く。大写真は角丸の長方形
• セクション境界: 画面幅を超える大きな弧のカーブで切り替える
• カードは角丸12px前後
• ボタンとラベルはピル型
• 葉型装飾を角に重ねて置く
• セクションの角は40px以上の大きな丸みにする

Components

• 応募CTAボタン（button-entry）: オレンジ黄のピル型。右端に矢印を付ける
• サブ導線ボタン（button-more）: 白のピル型。見出しと補足の2段。右端に空色の丸矢印
• アイコン導線カード（nav-card）: 白カード中央に空色の丸アイコンと見出しを置き、3枚並べる
• 部門紹介カード（team-card）: 上に写真、若葉色のラベル、部門名と短い説明。段差を付けて並べる
• 社員インタビューカード（interview-card）: 大写真に手書き風ボードの一言、横に吹き出し状の白パネルと朱色ボタン
• 数値データカード（stat-card）: 上部に空色ピルの項目名、イラストと大きな数値、下に一言
• 見出し上ラベル（section-label）: 葉アイコンと短いカテゴリ名を空色で添える
• 制度タグ（tag-badge）: 人物写真に重ねる若葉色・水色の角丸タグ

Do's and Don'ts

Do - 淡い水色地と空色ブロックを交互に使う - 人物写真は笑顔で作業着姿、葉型に切り抜く - 葉型の装飾を若葉色と水色で角に配置する - 主CTAはオレンジ黄のピル型1種類に絞る - 数値は大きな欧文とイラストで直感的に見せる

Don't - 黒や濃い灰色の大きな面を使わない - 直線的な四角いセクション境界にしない - CTA以外に暖色を広く使わない - 文字を詰め込みすぎない - 暗い写真や無表情の写真を使わない

Page Structure

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

1. ファーストビュー（企業の明るさと人の魅力を伝える）: 社員2人の大写真を角丸で配置し、縦書きキャッチと葉型の小写真、街の写真を左に添える
2. 企業メッセージ（地域インフラを支える使命を伝える）: 左に2行見出しと短い段落、右にアイソメトリックの街イラスト。下にアイコン導線カード3枚
3. 仕事・チーム紹介（3つの部門を紹介する）: 空色の大曲面ブロックに白カード3枚を段差配置。右下にサブボタン
4. 社員インタビュー（働く人の声で共感を作る）: 大写真と吹き出しパネルの横スライダー。矢印とドットで操作
5. 働く環境（福利厚生やキャリアを伝える）: 白い大パネルに葉型切り抜きの人物4人と制度タグを波状に並べる
6. 数字で見る（安心感をデータで示す）: 濃い水色地に数値カード5枚を3列で並べ、右上にビジネスイラスト
7. 締めのCTA（応募を促す）: 街並みの写真に空色を重ね、中央に白い2行見出しとオレンジ黄の応募ボタン
8. フッター（サイト内導線と会社情報）: 空色地に白文字でロゴ、住所、リンクを列で並べる

Imagery

• 社員は作業着やヘルメット姿で自然光の屋外、笑顔で撮る
• 写真は明るく彩度高めで、青空と緑を入れる
• 街やインフラ設備はアイソメトリックのフラットイラストで描く
• 葉型の半透明装飾を若葉色・水色で重ねる
• 締めは地域の街並みの俯瞰写真に空色を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPではFV写真を全幅にし、縦書きキャッチを写真の上に重ねる
• メッセージのイラストは本文の下に置く
• 部門カードは段差をなくして1列に積む
• データカードはSPで2列、PCで3列
• インタビューはSPで1枚表示のスワイプにする
• フッターのリンク列は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 行書くと起動時に読み込まれる。