DESIGN.md — 紺×水色の誠実なIT企業採用 LP（Navy and Sky Blue Corporate Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 濃紺・水色・斜め切り写真・英字ラベル・アイソメ図解・手描き棒人間
• 地の質感: フラットな白地。影やグラデーションはほぼ使わない。写真と図解で情報を見せる。
• 形: 四角が基本で角丸は小さい。写真を平行四辺形に切ったり、円形バッジや下向き矢印の帯を使ったりしてリズムを出す。
• 温度感: やや寒色寄りで落ち着いている。黄色の差し色とイラストで少し温かみを足す。

Colors

• 地は白で統一し、色面はカード・帯・バッジに限る
• 大見出しとCTAは濃紺に揃える
• 水色は縦ラベル、小見出し帯、図解の円に使う
• 淡い水色は研修フローの矢印やつなぎ線だけに使う
• 黄色はNewsラベル、職種バッジ、グラフの強調だけに少し使う
• コラムなどの特別な導線にはクリーム地を使う
• vertical-tag は文字 #F7FDFD × 背景 #60C3E0 のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1E7E9B、4.53:1）を使う。
• subhead-bar は文字 #F7FDFD × 背景 #60C3E0 のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1E7E9B、4.53:1）を使う。

Typography

• セクションの頭は英字大文字ラベルに［和訳］を小さく添える
• その下に紺の太字で和文大見出しを置く
• 本文は行間2.0前後でゆったり組む
• 研修フローとキャリアパスの補足は縦書きにする
• リストは■を先頭に付け、＜＞で小タイトルを付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と文章の 2 カラムや横並びの表にする
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• 左右の余白は約12pxで、写真はほぼ全幅
• ラベル→見出し→写真→本文の順で積む
• 業界とサービスは左の水色縦ラベル付きのブロックにまとめる
• 会社概要は枠線で囲んだ表にする
• キャリアパスは円バッジを左右交互にジグザグに並べ、矢印でつなぐ

Elevation & Depth

• 影は基本使わずフラットにする
• インタビューカードだけごく薄い影を付ける
• 奥行きは色面と罫線で出す

Shapes

• 角丸: 小 0px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: ファーストビューは平行四辺形の斜め切りでモザイク状に並べる。本文中は長方形
• セクション境界: 直線。区切りは余白と色帯で付ける
• カードや帯は角を立てる
• インタビュー見出しのタブだけ上側を角丸にする
• 図解のラベルは正円にする
• 研修フローの帯は下端を下向きの矢印形にする
• CTAボックスの上辺中央に半円の切り欠きを入れる

Components

• 英字セクションラベル（section-label）: 英字大文字の横に［和訳］を小さく添え、その下に紺の大見出しを置く
• お知らせ帯（news-bar）: 左に黄色の「News」ラベル、右にグレー地で日付と告知を置く
• アイコン付き業界カード（industry-card）: 紺の帯にアイコンと業界名を載せ、その下に例を中央揃えで3行並べる
• 水色縦ラベル（vertical-tag）: 左端に縦書きのカテゴリ名を入れ、ブロック全体を左からくくる
• 水色帯小見出し（subhead-bar）: 全幅の水色帯に◆と白い太字を載せる
• 研修フロー矢印帯（flow-arrow）: 淡い水色の縦帯に縦書きテキストを入れ、下端を矢印形にする
• キャリア段階の円バッジ（career-badge）: 紺の正円に白文字の役職名と、黄色で現在位置を示す階段グラフを入れる
• 社員インタビューカード（interview-card）: 横スクロールの写真カード。下に黄色の職種バッジと入社年を置く
• 採用エントリーボックス（button-primary）: 紺のボックスに白い大見出しを載せ、白ボタンを2つ並べる。ボタンには紺丸の矢印アイコンを付ける

Do's and Don'ts

Do - 見出しは紺、補助は水色という2段階の青で整理する - 英字ラベル＋和文見出しの型をどのセクションでも繰り返す - 写真は青系のオフィス写真や実際の働く姿でそろえる - 黄色はごく小さい面積で差し色に使う - 複雑な内容は図解やフローにして見せる

Don't - 暖色の大きな面を使わない - 角丸の強いポップなボタンにしない - 濃い影やグラデーションの装飾を入れない - 文字の書体を何種類も混ぜない - 写真に過度なフィルターをかけない

Page Structure

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

1. ファーストビュー（社員の雰囲気とメッセージを伝える）: 斜め切りの社員写真をモザイク状に並べ、白地の帯に紺のキャッチを重ねる
2. お知らせ（説明会の告知を目立たせる）: 黄色のNewsラベルとグレーの帯を組み合わせる
3. 事業紹介（会社の事業内容を伝える）: 英字ラベル、大見出し、全幅の都市写真、長めの本文の順に置く
4. 取引業界とサービス（実績と技術の幅を示す）: 水色の縦ラベルでくくった業界カードと、紺のサービスカードを縦に並べる
5. 課題解決の図解（提供価値を視覚化する）: アイソメトリックのイラストに水色の円ラベルを置き、点線でつなぐ
6. 会社概要（基本情報を示す）: 枠線で囲み、罫線で区切った2列の表にする
7. 研修制度（未経験でも安心できることを伝える）: 写真と本文の後に、縦書きの研修フロー表と水色帯の小見出しを並べる
8. キャリアパス（成長の道筋を見せる）: 紺の円バッジをジグザグに並べ、淡い水色の矢印と手描きの棒人間、縦書きの枠で補足する
9. トップのコラム（経営者のメッセージへ誘導する）: クリーム地に人物写真と万年筆の線画を置き、下に紺の帯、その下に番号付きのリストを並べる
10. 社員インタビュー（働く人を紹介する）: 水色のタブ見出しの下に、横スクロールの写真カードを並べる
11. エントリーCTA（新卒・中途の応募へ誘導する）: 紺のボックスを2つ並べ、白ボタンで年度を選べるようにする

Imagery

• 写真はオフィスで自然に笑う社員。青や白の服装で寒色にそろえる
• 抽象的なビジネス写真（都市夜景のネットワーク線、付箋のホワイトボードなど）を使う
• 図解は水色と紺のアイソメトリックの線画イラストにする
• キャリアパスは紺の線で描いたゆるい手描きの棒人間にする
• アイコンは紺地に白い線のシンプルな業界アイコンにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは幅約1000pxで中央寄せにする
• PCの事業紹介は写真を左、文章を右の2カラムにする
• PCの業界カードは5つを横一列に並べる
• PCの研修フローは横向きのガントチャート風にする
• PCのキャリアパスは右肩上がりの階段グラフにする
• PCのコラムは左にバナー、右にリストを置く。CTAは横に2つ並べる

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