DESIGN.md — 紺×パステル地の斜線モチーフ採用 LP（Corporate Navy and Pastel Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、クール・先進的、清潔・爽やか、やさしい・柔らかい
• キーワード: 二本斜線マーク・細線の円・筆記体英字・斜体の英字見出し・紺の情報ブロック・パステル地の切替
• 地の質感: フラットな単色の面に、写真と半透明のパステル円を重ねる。FV の下端は筆で掃いたような紺のかすれ。
• 形: 写真は角のない四角形。ボタンは角丸ピルか四角い紺のバー。装飾は線の円と平行四辺形の斜線。
• 温度感: クールな紺と青が基調。クリームと黄色で暖かさを足した中間の温度。

Colors

• 地の色はセクションの群ごとに白→クリーム→淡い水色→白と切り替える。
• 英字見出しは青を基本とし、働く系セクションだけ黄にする。
• 主な情報の面は紺の塗りに白文字で、強く引き締める。
• テーマ別の小見出しは青・緑・紫→橙など、テーマごとに違う色の下線や文字グラデをつける。
• ピル型ボタンの枠は桃→黄のグラデ線にする。
• カード右下の小さな矢印箱は、カテゴリごとに紫・緑・橙・桃・青で色を変える。

Typography

• セクション見出しは、斜体の太い英字＋小さな和文の前置き＋太字の和文大見出しの 3 段にする。
• 英字見出しの左上か左には、黒い二本斜線マークを必ず添える。
• 写真の端に筆記体英字を半分かぶせて動きを出す。
• 本文は行間を 2.0 前後と広くとり、字間も少し空ける。
• 写真上のキャッチは白地の帯に紺文字を敷き、1 行ずつ置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 1 列、採用区分は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は画面端まで寄せるか、左右どちらかへずらして非対称に置く。
• テキストリンクは右端に円付き矢印をつけ、本文の下に置く。
• 写真カードは下端に紺のラベル帯を重ね、その上に黄のタグを載せる。
• 装飾の円は本文の背後にはみ出させ、セクションの境界をまたがせる。
• ニュースは日付・タグ・リンクを並べ、細い区切り線でリストにする。

Elevation & Depth

• 影はほぼ使わない。浮かせるのは FV のニュースバーだけで、白いピル型にやわらかい影をつける。
• 奥行きは影でなく、写真と色面のずらし重ねで出す。
• パステルの塗り円や線の円を背景層に置いて層を作る。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 30px。ボタンはピル型。
• 写真の切り抜き: 角のない長方形。一部は平行四辺形の斜め切り抜きにし、色線のアクセントをつける。
• セクション境界: 基本は直線で地の色を切り替える。FV の下端だけ筆で掃いたような紺のかすれにする。
• カード・写真・帯は角丸にしない。
• ボタンは白地のピル型に、グラデの枠線をつける。
• 二本斜線マークは平行四辺形を 2 本並べて作る。
• 円の装飾は 1px の細線と、淡い塗りの 2 種類を使う。

Components

• 斜線付き英字見出し（section-heading）: 二本斜線マーク、斜体の英字、和文の前置きと大見出しを組み合わせる
• グラデ枠ピルボタン（button-pill）: 白地に桃→黄のグラデ枠をつけ、中央に紺の文字、右端に細い矢印を置く
• 円矢印リンク（text-link-circle）: 太字のラベルの右に、細線の円に重ねた矢印を置く
• 紺帯ラベルの写真カード（photo-card）: 大きな写真の右下に紺の帯（白文字と矢印）を重ね、その上に黄のタグを載せる
• ニュース行（news-item）: 灰色の日付と色枠の小さなタグ、下線付きの青いリンクを並べ、下に区切り線を引く
• FV 浮遊ニュースバー（news-bar）: 白いピル型に影をつけ、左に青い見出し、右に上下の矢印を置く
• 採用区分カード（category-card）: 紺の箱に色付きの斜体英字と白い和文を入れ、右下に色付きの四角い矢印を置く
• 紺のメッセージブロック（message-block）: 写真に白い帯のキャッチを重ね、下に紺の面と白い本文を続ける

Do's and Don'ts

Do - 見出しには必ず二本斜線マークを添える。 - 地の色はセクション群ごとにクリームと淡い水色を切り替える。 - 写真は左右にずらして重ね、筆記体英字を一部かぶせる。 - 人物写真は明るく自然な笑顔で、青みのトーンにそろえる。 - 細線の円をランダムな位置に配置し、軽さを出す。

Don't - カードや写真を大きく角丸にしない。 - 濃い影や立体的なボタンを使わない。 - 強調色を同じ面に何色も並べない（色分けはテーマ単位で行う）。 - 本文の行間を詰めない。 - 紺以外の濃い色で大きな面を塗らない。

Page Structure

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

1. ファーストビュー（企業の姿勢を示す）: 社員の写真を全面に敷き、白い細枠で囲んだ短いキャッチを置く。斜線マーク、筆かすれの下端、浮遊ニュースバーを添える。
2. トップメッセージ（経営者の言葉で方向性を伝える）: 人物写真に白い帯のキャッチを重ね、紺の面に本文を入れる。横にサブ写真と円矢印リンクを置く。
3. ニュース（最新の採用情報を知らせる）: 日付・色タグ・リンクを並べた区切り線付きのリストにする。
4. 働く（座談会）（社員の多様さを見せる）: クリーム地に黄の英字見出しを置き、紺帯ラベルの写真カードを縦に並べる。
5. 社員の声（インタビューへ誘導する）: 人物のバストアップをグリッド状に敷き、筆記体英字とピルボタンを重ねる。
6. 採用メッセージ（人を大切にする考えを伝える）: 右寄せの黄色い英字見出しの下に、本文と人物写真を左右に並べ、円矢印リンクを置く。
7. 活躍するフィールド（事業領域をテーマ別に紹介する）: 淡い水色地に 3 テーマを置く。テーマごとの色の小見出し、筆記体英字、写真のずらし重ね、パステル円で構成する。
8. 異業種からの転職訴求（中途人材を呼び込む）: 明るい人物写真の上に斜体の英字見出しを置く。下部に斜めに切り抜いた写真を色線つきで並べ、ピルボタンを添える。
9. 採用情報（採用区分ごとのエントリーへ導く）: 紺の区分カードを 2 列グリッドに並べ、カードごとに色の違う矢印箱をつける。

Imagery

• オフィスで働く社員を自然光で撮り、笑顔の会話シーンにする。
• 人物写真は青みでやや明るく、淡い色調に寄せる。
• インフラや街のテーマには、水・都市の俯瞰・空の写真を使う。
• 背景のぼけた単色壁の前で、スーツ姿のバストアップをそろえて撮る。
• 装飾は二本斜線、細線の円、パステルの塗り円、筆記体英字だけにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文の幅をおよそ 70% にし、テキストと写真を左右 2 カラムで交互に並べる。
• PC では写真カードと採用区分を 3 列にする。
• PC では社員の声の人物を 1 行に横並びにする。
• PC では画面右端にエントリーの縦ボタンを固定し、グローバルナビを横に並べる。
• 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 行書くと起動時に読み込まれる。