DESIGN.md — 黒地×ティール光彩の採用サイト LP（Dark Teal Gradient Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、力強い・インパクト、ラグジュアリー・ダーク
• キーワード: ダークモード・ティールグラデーション・英字小文字見出し・線画イラスト・斜め切り写真・互い違い配置
• 地の質感: フラットな黒地。写真と、発光したような線画イラストだけで奥行きを出す
• 形: 直角の写真に、ピル型ボタンと矩形のアウトラインボタンを組み合わせる。斜めに切った写真帯も使う
• 温度感: クールな黒とティールが主体。最後だけ温かい黄橙に切り替える

Colors

• 地はほぼ黒の #191919 で統一し、文字は白
• 強調はティールのグラデーション（左が明るく右が深い）だけに絞る
• ヒーローの下端にティールの細いラインを引いて区切る
• 線画イラストもティールで発光しているように見せる
• 最後の採用情報セクションだけ黄橙のグラデーション面にし、文字は黒にする
• 写真は自然な色のまま使い、色の加工はしない
• button-primary は文字 #FFFFFF × 背景 #3DABA9 のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2E8280、4.54:1）を使う。

Typography

• セクション名は英字の小文字を大きく太く置き、右下に日本語の小ラベルを白帯に載せて添える
• 番号は細い斜体のアウトライン文字にして、写真の端に重ねる
• メッセージ本文は短く改行し、中央揃えで行間を広くとる
• カードのタイトルは斜体ゴシックで 2〜3 行にまとめる
• ボタンの文字は字間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左寄せと右寄せを交互に置く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 100px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真は片側の端まで裁ち落とし、反対側に余白を残して交互に配置する
• 番号と「詳細へ＋矢印線」は写真の余白側に置く
• 人物とブログはカルーセルにし、次のカードを少しはみ出させて見せる
• 各セクションの最後に中央揃えの一覧ボタンを置く
• 見出しの上下には 60px 以上の余白をとる

Elevation & Depth

• 影は使わず、すべてフラットにする
• 奥行きは写真と見出しの重なりや、線画の発光感で出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。キャリアの帯だけ平行四辺形に斜めに切る
• セクション境界: 基本は境界のない黒の連続。斜めに切った写真帯と、黄橙面への直線的な切り替えを使う
• 一覧ボタンはティールグラデーションのピル型
• サブボタンは白線の矩形アウトラインに右向きの矢印
• 「詳細へ」は小さな文字の下に、先端が折れた矢印線を引く
• 人物カードは左側に白い縦線を引く

Components

• 一覧ボタン（button-list）: ティールのグラデーションを敷いたピル型ボタン。文字は黒で、右にグリッド型のアイコンを付ける
• グラデーション矩形ボタン（button-primary）: ティールのグラデーションを敷いた角ばった横長ボタン。右端に矢印を付ける
• 白線ボタン（button-outline）: 黒地に白い 1px の枠線を引いた矩形ボタン。右に矢印を付ける
• 英字見出し＋和文ラベル（section-title）: 大きな小文字の英字見出しの右下に、白帯に黒文字の日本語ラベルを重ねる
• 番号付き特集カード（feature-card）: 片側を裁ち落とした写真に、アウトラインの斜体番号と「詳細へ」の矢印線を重ねる。下に斜体のタイトルを置く
• 人物カルーセルカード（person-card）: 横長の写真の下に、左に白い縦線を引いたテキストブロック（部署名・一言・入社年）を置く
• ハッシュタグ群（hashtag-cloud）: 斜体の小さなハッシュタグを中央揃えで数行に並べる
• カルーセル操作（carousel-nav）: 左右に細い矢印線を置き、中央にドット 3 つを並べる

Do's and Don'ts

Do - 地は黒で統一し、強調色はティールのグラデーションだけにする - 英字の小文字見出しに日本語の小ラベルを必ず添える - 写真は左右交互に裁ち落として、リズムを作る - ティールの線画イラストを写真に重ねて世界観を出す - 最後の CTA セクションだけ黄橙の面にして変化をつける

Don't - 白や淡色の背景のセクションを途中に挟まない - カードに角丸や影を付けない - ティール以外の色をボタンに使わない - 英字見出しを大文字だけで組まない - 本文を長い段落で詰め込まない

Page Structure

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

1. ファーストビュー（企業の姿勢を印象づける）: 笑顔の社員写真を全面に敷き、中央に白い縦書きの大きなコピーを置く。白線の乾杯イラストを重ね、下端にティールの線を引く
2. メッセージ（仕事の意義を伝える）: ティールの線画を置き、中央揃えの短い白文字を並べる。背景に暗い写真を重ね、下に 2 種類のボタンを置く
3. 特集（職種や制度の記事へ誘導する）: 英字見出しとハッシュタグ群の後に、番号付きの写真カードを左右交互に 3 つ並べ、最後に一覧ボタンを置く
4. 社員紹介（働く人を見せる）: カルーセルで人物カードを並べ、左に縦線を引いたテキストを添える
5. キャリアストーリー（成長事例へ誘導する）: 斜めに切った寒色の写真帯に、大きな英字見出しと説明、「詳細へ」を重ねる
6. ブログ（最新情報を伝える）: 番号付きのサムネイルカードをカルーセルで並べる。日付と下線付きのタイトルを添え、一覧ボタンを置く
7. 採用情報 CTA（募集要項へ誘導する）: 黄橙のグラデーション面に写真を置き、黒い英字見出しと日本語の説明、「詳細へ」を重ねる

Imagery

• 社員の自然な笑顔を、明るめのオフィスや街並みでスーツ姿で撮る
• 製品やグラスは、ティールの発光線で描いた線画イラストにする
• 白い線画アイコンを写真の上に大きく重ねる
• キャリアの帯は高い位置から見下ろした人物の写真を、寒色かつ低彩度にして使う
• ブログのサムネイルは濃紺地に手書き風の英字を載せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左上にロゴと縦に並ぶナビを固定する
• PC のメッセージは、線画・本文・写真を横に並べた 3 要素の構成にする
• PC の英字見出しは縦向きに回転させ、和文ラベルを縦書きで添える
• PC の特集は大きなカード 1 枚と小さなカード 2 枚のグリッドにする
• PC の社員紹介は、左にテキスト・右に写真の横長リストにする
• PC のブログは 3 列で、右端のカードをはみ出させる

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