DESIGN.md — ティール×レモンの幾何学柄 採用サイト LP（Teal and Lemon Geometric Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、シンプル・ミニマル
• キーワード: ティール・レモンイエロー・菱形モチーフ・白カード・採用・オフィス写真
• 地の質感: フラットな面に薄い影。背景に半透明の菱形と細い線の菱形を散らす
• 形: 角丸 8px 前後のカードとボタン。装飾は 45 度回転させた正方形
• 温度感: やや寒色寄りで爽やか。黄色を差して親しみを出す

Colors

• 地はごく薄いグレー、内容は白カードに載せる
• ブランド色ティールは強調ボックス・事業内容ボタン・枠線に使う
• 応募導線はレモンイエロー、面談導線はティールで色分けする
• 強調語はティール面上で黄色マーカー＋濃色文字にする
• 見出し帯や表見出しは落ち着いたブルーグレーを使う
• SNS 帯は各サービスのブランド色を淡くして使う
• button-casual は文字 #FFFFFF × 背景 #6FCDCD のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2D8282、4.54:1）を使う。
• highlight-box は文字 #FFFFFF × 背景 #4CBABB のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#318182、4.57:1）を使う。
• button-service は文字 #FFFFFF × 背景 #4CBABB のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#318182、4.57:1）を使う。
• sns-header は文字 #FFFFFF × 背景 #8B95A1 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#6C7885、4.5:1）を使う。

Typography

• 見出しは中央揃えの太字ゴシックで、装飾線は付けない
• 本文は小さめにして行間を 2 程度に広げる
• 英字ラベルはティール色の太いサンセリフにする
• 長い本文は左揃え、キャッチや強調は中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビアイコンと写真は 2 カラム、SNS ボタンは 2 列
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 50px、基本単位 8px、カード内 14px（375px 幅換算）
• 白カードは左右 15px 程度の余白で並べる
• カード同士の間隔は 10px 前後
• 見出しの上にアイコンを置いてセクションを始める
• 会社概要は見出し行と内容行を縦に交互に積む表にする

Elevation & Depth

• 白カードはごく薄いぼかし影で地から浮かせる
• ボタンは影なしで、枠線か塗りで区別する
• PC は本文全体を大きな白パネルに収め、薄い影を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は角丸の小さい長方形。FV は全幅写真に菱形の色面を重ねる
• セクション境界: 直線。区切りは白カードの境界と背景の菱形装飾で表す
• ボタン・カードは角丸 8px 程度で統一する
• 右端に丸い矢印アイコンを置く
• 装飾は 45 度回転の正方形（塗りと線）を重ねる

Components

• リンク一覧カード（card-link-list）: グレーの見出し帯の下に、区切り線付きのリンク行を並べ、各行の右端に丸い矢印を置く
• アイコンナビタイル（icon-nav-tile）: 2 列の白タイル。線画アイコンの下にラベルを置く
• 面談導線カード（button-casual）: ティールの大きなカード。吹き出しアイコン、太字タイトル、説明文、右端の白丸矢印で構成する
• エントリー導線カード（button-primary）: レモンイエローの大きなカード。書類アイコン付きで濃い色の文字
• 想いの強調ボックス（highlight-box）: ティールの面に白文字。キーワードを黄色マーカーで囲む
• 理念カード（value-card）: 淡いティール地にティールの枠線。アイコン、英字見出し、短文を中央揃えで置く
• 事業内容ボタン（button-service）: 全幅のティール塗りボタンに白文字を中央揃えで置き、縦に積む
• 枠線リンクボタン（button-outline）: 白地にティールまたはグレーの枠線、右端に丸い矢印を置く
• SNS 種別帯（sns-header）: 各サービスの色の全幅帯に、白いロゴとサービス名を左揃えで置く

Do's and Don'ts

Do - 色はティール・黄・ブルーグレーの 3 系統に絞る - セクションの冒頭にフラットな線画アイコンを置く - 菱形の装飾は背景に淡く散らす - 導線ボタンには必ず丸い矢印を付ける - 写真は明るいオフィスで、スーツ姿の社員が笑顔の自然な場面にする

Don't - 濃い色やグラデーションの重い背景は使わない - ピル型や大きな角丸のボタンにしない - 黄色を本文の文字色に使わない - 装飾的な明朝や手書きの書体は使わない - 強い影や立体的な表現は付けない

Page Structure

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

1. ヘッダー（ロゴと応募導線を常に表示する）: 白地の左にロゴ、右に黄色の小さなボタンとハンバーガーメニュー
2. ファーストビュー（働く人の雰囲気とメッセージを伝える）: 社員 3 人の写真に、ティールと黄色の菱形を重ね、下部に白い 2 行のキャッチを置く
3. 募集職種・お知らせ（求人と最新情報へ案内する）: 見出し帯付きの白カードにリンク行を並べる
4. ナビタイル・応募導線（主要ページと応募へ誘導する）: アイコンタイルを 2×2 で置き、その下にティールの面談カードと黄色のエントリーカードを並べる
5. 会社を知る（事業概要と求める人物像を示す）: アイコン、見出し、本文の後に、ティールの強調ボックスを置く
6. 企業理念（ビジョン・ミッション・バリューを示す）: 淡いティールの枠付きカードを 3 枚縦に積む
7. 代表メッセージ（トップの想いで信頼を得る）: ティール枠のカードに代表の写真と長文を入れ、署名を右揃えにする
8. 会社概要（基本情報を示す）: グレーの見出し行と淡グレーの内容行を交互に積む表。下に枠線ボタンを置く
9. 事業内容（手がける事業を一覧で示す）: ティールの全幅ボタンを縦に並べる
10. フォトギャラリー（職場の雰囲気を伝える）: 2 列のグリッドに社員とオフィスの写真を並べる
11. SNS 一覧（外部の発信へ誘導する）: サービス色の帯の下に、グレー枠のリンクボタンを 2 列で並べる
12. フッター（サイト内リンクと最終導線）: テキストのリンク一覧、ブルーグレーと黄色の導線ボタン、ロゴ、枠線ボタンを置く

Imagery

• 明るい自然光のオフィスで、スーツ姿の社員が談笑する写真にする
• FV は人物を大きく入れ、下半分にティールの斜めの色面をかぶせる
• 装飾はフラットな菱形を使い、塗り・細線・半透明を重ねる
• アイコンはグレーの線画に黄色を少し差したフラットなイラストにする
• 代表の写真は無地の背景のバストアップにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左に固定の白いナビパネルを置き、導線ボタンも左に並べる
• PC は本文を中央の大きな白パネルにまとめ、地にティールと黄色のぼかしを敷く
• 職種とお知らせは 2 列、ナビタイルは 4 列、導線カードは 2 列にする
• 理念カードは 3 列、事業内容ボタンは横並びで折り返す
• 代表メッセージは本文を左、写真を右に分け、写真ギャラリーは 4 列にする

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