DESIGN.md — 水色×六角形の爽やかな採用サイト LP（Airy Sky Blue Hexagon Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、クール・先進的、信頼・誠実、やさしい・柔らかい
• キーワード: 淡い水色・六角形モチーフ・英字大見出し・人物写真・紺のピルボタン・透明感
• 地の質感: ぼかしたグラデーションと半透明の六角形を重ね、ガラスのような軽い質感にする
• 形: 六角形の装飾、角丸の写真とカード、ピル型ボタン
• 温度感: やや寒色寄り。人物の笑顔で温かさを足す

Colors

• 地は淡い水色と白を交互に使い、セクションを分ける
• 主張したい帯（やりがい・社員の声・締めCTA）は青の面で塗る
• ボタンは紺を基本にし、最重要のエントリーだけ橙〜マゼンタのグラデにする
• 英字見出しは青、和文見出しは濃紺で色を分ける
• 六角形の装飾は青の不透明度10〜40%で重ねる
• button-entry は文字 #FFFFFF × 背景 #F5A623 のコントラスト比が 2.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A56A08、4.5:1）を使う。
• voice-card は文字 #FFFFFF × 背景 #49A7DD のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#217CB1、4.58:1）を使う。
• step-icon は文字 #FFFFFF × 背景 #49A7DD のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#217CB1、4.58:1）を使う。
• photo-caption-band は文字 #FFFFFF × 背景 #49A7DD のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#217CB1、4.58:1）を使う。
• badge-circle は文字 #FFFFFF × 背景 #49A7DD のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#217CB1、4.58:1）を使う。
• business-circle は文字 #FFFFFF × 背景 #49A7DD のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#217CB1、4.58:1）を使う。

Typography

• 英字大見出しの上に、アイコン付きの小さな和文ラベルを置く
• 和文の見出しは字間を広めにとり、2行に分ける
• 本文は行間2.0で、ゆったり組む
• 英字は細めのウェイトで大きく使う
• 番号（01・02）は青の英数字で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は左右2カラムや3カラムのカードを使う
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 職種紹介は大写真・小写真・文章を非対称に組む
• 社員の声は横スクロールのカルーセルにする
• インタビューは写真の上に白抜きの帯見出しを重ねる
• セクションの間に六角形の装飾をはみ出させる

Elevation & Depth

• 影はほとんど使わずフラットにする
• カードは影ではなく面の色で区別する
• ぼかしたグラデーション光で奥行きを出す

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。一部は楕円やカプセル型で切り抜く
• セクション境界: 大きな角丸で区切った面の切り替え。直線のみ
• 写真の角に六角形のパーツを重ねる
• ボタンはピル型で右端に矢印の丸を付ける
• カードは角丸大きめにする

Components

• 紺のピルボタン（button-primary）: 紺の地に白文字、右に矢印付きの白い丸
• エントリーボタン（button-entry）: 橙〜マゼンタのグラデのピル型。最重要の行動だけに使う
• 英字大見出しのセット（section-heading）: アイコン付きの小ラベル＋青の英字大見出し＋和文の中見出し
• 社員の声カード（voice-card）: 青地に白文字。VOICE番号と丸い顔写真、角に六角形の装飾
• やりがい3ステップ（step-icon）: 青帯の上に線画アイコン、番号、点線のつなぎ線
• 写真上の帯見出し（photo-caption-band）: インタビュー写真の上に青の帯で白文字の見出しを2行重ねる
• 丸い実績バッジ（badge-circle）: 青い円に白文字で実績を示し、周りに英字を円形に回す
• 事業の円配置図（business-circle）: 中央のロゴの周りに青い円を5つ並べ、番号と事業名を置く

Do's and Don'ts

Do - 淡い水色の地と半透明の六角形で透明感を保つ - 英字の大見出しと和文の中見出しをセットにする - 人物写真は自然光で明るく、笑顔のものを使う - ボタンは紺のピル型にそろえる - 余白をたっぷりとる

Don't - 濃い影や重いグラデを使わない - 暖色を広い面に使わない（エントリーボタンだけにする） - 角ばった四角い写真をそのまま並べない - 本文の行間を詰めない - 六角形以外の幾何学装飾を混ぜない

Page Structure

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

1. ファーストビュー（企業の姿勢を一言で伝える）: 水色地に巨大な半透明の六角形。左に2行のキャッチ、右に英字の副題と丸いバッジ
2. 採用メッセージ（採用する理由を語る）: 左に英字見出し＋本文、右にMVVと代表メッセージへのカプセル型写真リンク
3. 集合写真（職場の雰囲気を見せる）: 角丸の横長の大きな写真を全幅で置く
4. やりがい（仕事の魅力を3つ示す）: 青の帯に白文字。線画アイコン付きの3ステップ
5. 事業紹介（事業の全体像を示す）: 地図柄の地に、ロゴを中心にした5つの円の配置図
6. 職種紹介（職種ごとの仕事を説明する）: 白地に英字の職種名、大小の写真、手書き風の英字、紺ボタンを非対称に配置して3回繰り返す
7. 社員の声（働く人のリアルな声を見せる）: 青い角丸カードの横スクロール。左右に丸い矢印ボタン
8. インタビュー（先輩社員の詳しい話へ誘導する）: 左に見出しとボタン、右に写真＋青い帯見出しのカードを縦に3枚
9. CTA（応募へ導く）: 青グラデの帯に白い英字大見出し。紺の募集要項ボタンとグラデのエントリーボタンを並べる
10. フッター（会社情報とサイトマップ）: 水色地にロゴ、住所、地図ボタン、細い線で区切ったリンク一覧

Imagery

• 明るいオフィスや現場で、自然光の中で笑顔で話す社員の写真
• 制服やヘルメット姿で働く様子の写真を職種ごとに使う
• 写真の角に青い六角形のパーツを重ねる
• 細い線の単色アイコン（人・階段・手）を使う
• 背景には大きな半透明の六角形とぼかした光を置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは1カラムにし、職種紹介は写真→見出し→本文→ボタンの順に縦に並べる
• 英字大見出しはSPで34px前後に縮める
• 3ステップはSPで縦に並べる
• 社員の声のカルーセルはSPで1.2枚見えにする
• インタビューカードはSPで全幅にする
• ヘッダーのナビは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 行書くと起動時に読み込まれる。