DESIGN.md — 紺×水彩ブルーのコラージュ採用 LP（Watercolor Collage Corporate Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい
• キーワード: 水彩ブラシ・写真コラージュ・紺のピルボタン・斜体カタカナ見出し・淡グレー地・インフラ企業
• 地の質感: フラットな淡グレー地に、水彩のにじみ帯とマーカーの塗りを重ねる
• 形: 角丸は控えめな矩形写真とピル型ボタン。斜めに走る水彩帯が区切りになる
• 温度感: やや寒色寄り。差し色の赤とからし色で温かさを添える

Colors

• 地は淡グレー 2 種（#F6F6F6 と #EFEFEF）を交互に敷いて区切る。
• 見出し・ボタン・リンクは紺 1 色にそろえる。
• 部門は朱赤と水色で分け、カードと職種リストの線・文字も同じ色にする。
• 水彩の水色帯は装飾だけに使い、文字の背景にはしない。
• イエローマーカーは章タイトルの下だけに使う。
• 写真の脇にサーモンやベージュの小さな矩形を置き、ずらした差し色にする。
• department-card は文字 #FEFEFE × 背景 #E2604A のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D73C22、4.57:1）を使う。

Typography

• FV のメインコピーだけ明朝にし、他はゴシックで統一する。
• 章見出しは太いゴシックに斜めのイエローマーカーを重ねる。
• サブ章の見出しは斜体の太いカタカナで、紺かシアンにする。
• 本文は字間を 0.08em 程度あけ、行間を広めにとる。
• コンセプト見出しは手書き英字と太い欧文を組み合わせる。
• 職種リストは部門色の文字にし、小さな括弧書きの接頭辞を添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。部門カードのみ 2 列、記事は横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• FV は写真を大小ばらばらに散らして配置し、中央にコピーを置く。
• 部門カードは 2 枚を正方形に近い縦長で並べる。
• 職種リストは全幅で、下線と右矢印を付けて並べる。
• サブ章はロゴ見出し・2 行リード・小ボタン・写真の順に縦積みする。
• 大きな N の透かし文字を、右寄せで背景に敷く。

Elevation & Depth

• FV の告知カードは白地にやや強い影を落とし、下辺にグラデーションの細線を引く。
• その他のカード・写真には影を付けず、フラットにする。
• 写真の背後に色付き矩形をずらして置き、奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。FV の写真は大小をつけて散らす
• セクション境界: 直線で地の色を切り替え、水彩ブラシの帯を斜めにはみ出させる
• ボタンはすべてピル型にする。
• 部門カードは角丸 10px 前後にする。
• 黒い丸の矢印アイコンは真円にする。
• 人物写真は角丸なしで裁ち落とす。

Components

• 主ボタン（button-primary）: 紺のピル型。中央に文字、右端に矢印か外部リンクのアイコンを置く。
• 小ボタン（button-small）: 各章の下に置く、紺のピル型の小さなボタン。
• マーカー見出し（heading-marker）: 紺の太字に、黄色の斜めブラシを重ねる。
• 部門カード（department-card）: 水彩グラデーションの縦長カード。中央に白文字の部門名、下に黒丸の矢印を置く。
• 職種リスト行（job-list-item）: 部門色の文字と下線を使い、右端に細い矢印を置く。
• 告知カード（notice-card）: 白地に影を付けた横長カード。下辺に多色の細線を引き、リンクは下線付きの紺にする。
• 斜体カタカナ見出し（katakana-logo-heading）: 太い斜体のカタカナ見出し。紺かシアンにし、背景に N の透かしを敷く。
• 記事カード（article-card）: 写真・太字タイトル・グレーの抜粋を縦に並べ、横スクロールで送る。

Do's and Don'ts

Do - 淡グレー地をベースにし、水彩の帯で余白に動きを出す。 - 部門ごとに朱赤と水色を一貫して使い分ける。 - 人物写真は笑顔の社員を自然光で撮ったものにする。 - ボタンは紺のピル型だけで統一する。 - FV の写真は大小・高さを変えて散らす。

Don't - 原色のベタ塗りで面を大きく埋めない。 - 影を多用しない。告知カードだけにとどめる。 - 明朝を本文に使わない。 - ボタンの色を部門色に変えない。 - 写真を角丸や円で切り抜かない。

Page Structure

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

1. ファーストビュー（事業の幅広さとビジョンを伝える）: 事業写真を散らしたコラージュと水彩帯を敷き、中央に明朝の紺コピーを置く。
2. 告知（マイページ登録へ誘導する）: 白い影付きカードに 2〜3 行の告知とリンクを入れる。
3. 仕事・職種紹介（部門と職種を一覧で見せる）: マーカー見出しの下に部門カードを 2 枚並べ、続けて部門色の職種リストと主ボタンを置く。
4. コンセプト（企業の理念を伝える）: 手書き英字と太い欧文ロゴを組み、中央揃えのリード・小ボタン・社員 2 名の写真を続ける。
5. テーマ別の社員紹介（3 回繰り返し）（専門性・可能性・やりがいを伝える）: 斜体カタカナ見出し・2 行リード・小ボタン・写真を縦に積み、N の透かしを敷く。
6. オウンドメディア（記事で企業理解を深める）: 白い帯にロゴと説明文を置き、記事カードのカルーセルと主ボタンを続ける。

Imagery

• 鉄道・バス・ビル・物流港など、事業現場の明るい日中の写真を使う。
• 社員は白背景か屋外で、笑顔の上半身〜全身を撮る。
• 作業服とスーツの社員を混ぜたグリッドのコラージュを入れる。
• 水色の水彩ブラシストロークを、画面外へはみ出すように置く。
• 部門カードは赤〜ピンク、青〜水色の水彩テクスチャにする。
• 背景には白く大きな欧文 N の透かしを敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV の写真を左右に広く散らし、告知カードは右下へ横長に置く。
• PC の職種紹介は部門カードを左右に置き、間に見出しと 2 列の職種リストを挟む。
• PC の社員紹介は写真とテキストの 2 カラムにし、章ごとに左右を入れ替える。
• PC の記事カードは横に 4 枚並べる。
• PC のコンテンツ幅は約 1000px にする。

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