DESIGN.md — 淡グレー地×コバルト青の採用サイト LP（Playful Blue Corporate Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、清潔・爽やか、シンプル・ミニマル、信頼・誠実
• キーワード: 写真コラージュ・浮遊カード・縦長欧文見出し・曲線リボン・余白多め・淡グレー地
• 地の質感: フラットな淡グレー地。白カードに柔らかい影を付け、紙が浮いているように見せる。
• 形: 角丸 8px 前後の矩形カードと写真。丸い矢印ボタン。最後は大きな円形で締める。
• 温度感: やや寒色寄りのニュートラル。人物写真とパステルの曲線で温かみを足す。

Colors

• 地は淡グレー #F4F4F6 で統一する。カードと円形の締めは白にして浮かせる。
• ブランド色のコバルトブルーは、欧文見出し・番号・アイコン・ENTRY だけに使う。
• 和文の見出しと本文は濃紺系のグレーにし、純黒は使わない。
• 水色・ピンク・黄色のパステルは曲線リボンの装飾だけに使う。
• 写真の上に乗せる欧文見出しは白抜きにする。

Typography

• 欧文見出しは縦長のコンデンス書体で大きく置く。写真やカードの上辺に少し重ねる。
• 和文本文は字間を 0.08〜0.1em 広げ、行間 2.0 で詩のように短く改行する。
• 欧文見出しの直下に和文の小見出しを添え、2 段組みの見出しにする。
• 番号は欧文書体で大きく入れ、総数は小さく添える（02/11 のような形）。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。FV は写真のコラージュ。
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 90px、基本単位 8px、カード内 22px（375px 幅換算）
• 左右の余白は約 30px で、左揃えを基本にする。
• カードは右端まで、または左右へ少しはみ出させて動きを出す。
• セクション間は 80〜110px 空ける。
• 理念文と締めの文は余白を大きく取り、ゆったり置く。

Elevation & Depth

• カードと写真には柔らかい影を付ける（0 6px 20px rgba(30,40,60,0.10) 程度）。
• 丸矢印ボタンにも小さな影を付ける。
• フルブリード写真の上に白カードを重ねて層を作る。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸 8px の横長矩形。FV はサイズの違う矩形をずらして並べる。
• セクション境界: 直線で区切る。写真帯はフルブリード。最後は画面幅を超える大きな白い円で締める。
• 矢印ボタンは直径約 36px の白い正円にする。
• プログレスバーはピル型の青い線枠にする。
• 曲線リボンは太めの手描き風ストロークにし、写真の背後を横切らせる。

Components

• 欧文大見出し（heading-display-en）: 青い縦長欧文の見出し。写真やカードの上辺に重ねて配置する。
• リンクカード（card-link）: 写真の上に重ねる白カード。見出し・説明文を入れ、右下に丸矢印を置く。
• 丸矢印ボタン（button-arrow-circle）: 白い正円に、青い小さな三角矢印を入れる。
• 番号付きストーリーカード（story-card）: 人物写真の左上に大きな青い番号を置く。写真の下に欧文ラベル・題名・サブ文を続ける。
• 社員スライダー（people-slider）: 白い大型カードの中に、番号/総数・写真・コメント・プログレスバーを入れる。次の写真をのぞかせる。
• 写真はみ出しナビカード（nav-card-overlap）: 白カードに欧文ラベルと和文見出しを入れる。写真をカードの外へはみ出させる。
• 締めの円形メッセージ（closing-circle）: 大きな白い円の中に、中央揃えのメッセージと青い ENTRY を置く。
• プログレスバー（progress-bar）: 細い青枠のピルの中を、青で部分的に塗る。

Do's and Don'ts

Do - 淡グレーの地と白カードの影で奥行きを出す。 - 欧文見出しはコバルトブルーで大きく、和文は控えめにする。 - 人物写真は明るく自然な表情のものを、多めに使う。 - パステルの曲線リボンで遊び心を添える。 - 余白を大きく取り、文章は短く改行する。

Don't - ビビッドな赤や黄の面を CTA に使わない。 - 本文を太字・詰め組にしない。 - カードに濃い影や太い枠線を付けない。 - 装飾リボンを文字の上に重ねない。 - 青を本文や広い面に多用しない。

Page Structure

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

1. ファーストビュー（人と商品の多様さを一目で伝える）: 大小の角丸写真をずらして並べるコラージュ。下に大きな和文の問いかけを 2 行で置く。
2. 理念ステートメント（企業の価値観を語る）: 左揃えで字間の広い本文を、段落ごとに短く改行して並べる。
3. 会社紹介（企業の未来像へ誘導する）: 欧文大見出しを写真カードの上辺に重ねる。水色の曲線を背後に通す。
4. 事業・仕事紹介（事業と仕事内容へ誘導する）: フルブリード写真に白抜きの欧文を入れ、白いリンクカードを重ねる。
5. プロジェクトストーリー（挑戦の事例を見せる）: 欧文見出しと和文サブの下に、番号付きの写真カードを縦に 3 つ並べる。
6. 社員紹介（働く人の顔を見せる）: 白い大型カード内にスライダーを置く。一覧へ進むグリッドアイコンも入れる。
7. 働き方・採用情報（制度と募集要項へ導く）: 写真がはみ出す白カードを 2 枚、縦に並べる。
8. 締めのメッセージ・エントリー（共感から応募へつなぐ）: 大きな白い円の中に、中央揃えのメッセージと青い ENTRY を置く。

Imagery

• 社員の全身・半身を明るい白背景で撮り、自然な笑顔やポーズを入れる。
• 商品を手に持つカットや、仕事中のオフィスのカットを混ぜる。
• 写真の背後に、パステルの太い曲線リボンをグラフィックで添える。
• 色味は明るく、やや寒色に寄せた高キーで統一する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 90% にする。FV はコラージュを右に、問いかけを左に置く。
• PC の事業・仕事紹介は写真帯の左右交互にカードを配置する。
• PC のプロジェクトは見出しと 3 枚のカードを 2×2 グリッドにする。
• PC の働き方と採用情報は 2 カードを横に並べ、欧文ラベルを縦書きにする。
• PC の締めの円は画面内に収まるサイズにする。

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