DESIGN.md — 紺×赤×水色のIT企業中途採用LP（Navy and Red Corporate Tech Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、クール・先進的
• キーワード: 紺の帯見出し・赤い角ボタン・水色の吹き出し・斜めカットの写真・アイコン円・求人カード
• 地の質感: フラットな単色面が中心。FVとバナー帯だけ緑〜紺のグラデーションと斜めのストライプを使う
• 形: 見出しとボタンは角張った長方形。吹き出しやカードは小さめの角丸。アイコンと人物写真は正円
• 温度感: クールな寒色が基調。赤とピンクで温かみと行動のきっかけを加える

Colors

• 地色は白を基本にする。セクションごとに水色・ピンク・グレーへ切り替えてリズムを作る
• 見出し帯・番号バッジ・ポジションボタンは紺の単色で揃える
• 赤は主CTA・アイコン円・見出しのキーワードだけに使う
• 水色は悩みの吹き出しとカード面に使い、紺の文字を載せる
• グラデーションはFVとバナー帯だけにする（緑→紺）
• 下部の外部リンクバナーは黄色や赤の別トーンを使ってよい
• icon-circle-feature は文字 #1A1A1A × 背景 #D70127 のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#FE1A42、4.51:1）を使う。

Typography

• 全体をゴシック体で統一する。見出しは太字700以上
• FVコピーは極太にし、キーワードだけを紺〜緑のグラデーション文字にする
• 帯見出しは左に大きな水色の数字を置き、その横に白い太字の見出しを続ける
• 本文は12px前後で小さめにし、行間1.8で読みやすくする
• セクション見出しは中央揃え、本文は左揃え
• 英字ラベルは小さく、字間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。求人カードと働きやすさは縦積み
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約16pxでそろえる
• 悩みの吹き出しは人物イラストと左右交互に並べる
• 番号付きのメリット見出しは横幅いっぱいの紺帯にする
• CTAボタンは中央に置き、幅は画面の約半分にする
• 求人カードは白地で、名前・赤い短線・説明・枠線ボタンを縦に並べる
• ポジション紹介のカードは左端に紺の太い縦線を入れる

Elevation & Depth

• 基本はフラットで影を使わない
• ポジション紹介の白カードだけ、グレー背景の上に大きくぼかした影を落とす
• メリット一覧のボックスはグレーの細い枠線と小さな角丸だけで区切る

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: FVの人物写真は斜めにカットした平行四辺形・六角形で重ねる。社員の顔写真は正円で切り抜く
• セクション境界: 直線で地色を切り替える。FVは斜めのストライプ装飾で区切る
• CTAボタンは角丸なしの長方形で、右端に矢印を置く
• 吹き出しは角丸20px程度。人物の側に小さな丸い尻尾を付ける
• アイコンは赤い正円の中に白い線画で描く
• ポジションのリンクボタンは角丸8pxの紺色

Components

• 赤の主CTA（button-primary）: 角張った赤いボタン。白い太字を2行で中央に置き、右に細い矢印を付ける
• 番号付き紺帯見出し（heading-numbered-band）: 紺の帯を横幅いっぱいに敷き、左に水色の大きな数字、右に白い太字の見出しを2行で置く
• 悩みの吹き出し（worry-bubble）: 水色の角丸吹き出しに悩み文を入れる。紺の線画の人物イラストと左右交互に配置する
• メリット目次ボックス（merit-list-box）: グレー枠の白ボックス。紺の丸数字の横に、下線付きのメリット文を3つ並べる
• 赤い円のアイコン付き特長（icon-circle-feature）: 赤い正円に白い線画のアイコンを入れ、その下に太字の見出しと説明文を置く
• ポジション紹介カード（position-card）: 影付きの白カードで左端に紺の縦線を入れる。黒いラベル、職種名、紺のリンクボタン、メッセージ、正円の顔写真を並べる
• 求人カード（job-card）: 水色の地の上に白カードを置く。職種名の下に赤い短線を引き、説明文と黒い枠線の「詳細」ボタンを続ける
• アコーディオンボタン（accordion-toggle）: 濃いグレーの帯ボタン。白文字を中央に置き、右に下向きの矢印を付ける
• チェック付き制度リスト（check-list）: 水色のボックスに紺の丸いチェックアイコンを置き、太字の見出しと説明文を並べる

Do's and Don'ts

Do - 見出し帯とボタンは角張らせて、誠実な企業らしさを出す - 赤はCTAとアイコンに絞って使い、目立たせる - 数値の根拠には※の注釈を小さく添える - セクションの合間にCTAを繰り返し置く - 人物イラストは紺1色の線画でそろえる

Don't - ピル型やポップな丸いボタンにしない - 赤を本文や広い面に使いすぎない - グラデーションをFVとバナー以外に広げない - 装飾フォントや手書き体を混ぜない - カードに強い影を多用しない（影はポジション紹介のカードだけ）

Page Structure

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

1. ファーストビュー（地方在住のまま好条件で働けることを一言で伝える）: 白〜水色の地に斜めのストライプを敷く。紺の帯ラベルと極太コピーを置き、右側に斜めにカットしたビジネス人物写真を重ねる
2. 募集職種バナー（複数のポジションを入口として見せる）: 緑→紺のグラデーション帯に白い見出しを置き、横長のバナー画像を3枚縦に並べる
3. CTA（募集ポジションへ誘導する）: 赤い角ボタンを中央に置く
4. 悩みの提起（転職を考える人の不安に共感する）: 水色の吹き出し5つと線画の人物を左右交互に並べ、最後に解決を示す太字の一文で締める
5. メリット目次（3つのメリットを先に要約する）: グレー枠のボックスに紺の丸数字と下線付きの文を並べる
6. メリット1（案件の質を実例で見せる）: 番号付きの紺帯見出しの下に本文を置き、水色カードで案件例を縦に並べる
7. メリット2（評価制度の透明性を伝える）: 水色のボックスにチェック付きの制度リストを4項目並べ、最後にCTAを置く
8. メリット3（教育・研修制度を紹介する）: 紺帯見出し、本文、グレーのアコーディオンボタンの順に並べる
9. 働きやすさ（成長企業は厳しいという不安を和らげる）: ピンク地に赤い円のアイコン特長を4つ縦に並べる
10. 注目ポジション紹介（部門責任者のメッセージで具体的に訴求する）: グレーの写真背景に影付きの白カードを置く。左に紺の縦線、正円の顔写真、肩書を入れる
11. 求人一覧（募集中の職種を一覧で見せる）: 水色の地に地域見出しを置き、白い求人カードと枠線の詳細ボタンを並べる
12. 関連バナー・フッター（キャンペーンや関連コンテンツへ誘導する）: 黄色・赤のバナーを3枚並べ、ロゴとコピーライトを小さく置く

Imagery

• スーツ姿のビジネスパーソンを明るいオフィスで撮った笑顔の写真。斜めにカットして重ねる
• 人物イラストは紺の単色の線画。困った表情で悩みを表す
• アイコンは白い線画のピクトグラムを赤い円の中に入れる
• 社員の写真は胸から上を、正円で切り抜く
• バナーにはアイソメトリックの小さなイラストや斜めの帯を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約900pxのコンテンツ幅をとり、左右に余白を設ける
• 募集職種のバナーは横3列に並べる
• 悩みの吹き出しは3＋2の雲形に散らして配置する
• 案件例カード・働きやすさ・求人カードは3〜4列のグリッドにする
• ポジション紹介のカードは、文章を左、顔写真を右に置く横組みにする
• FVは横長にして、コピーを左、写真を右に置く

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