DESIGN.md — 青×白と黒帯見出しの製造業採用 LP（Corporate Blue Recruit Portal LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、クール・先進的、清潔・爽やか、シンプル・ミニマル
• キーワード: コーポレートブルー・黒帯見出し・角丸写真・縦書き英字ラベル・フラットイラスト・大きなベタボタン
• 地の質感: グラデや影のないフラットなベタ塗り。写真は青みのある明るい色調
• 形: 写真は片側だけ角丸を大きく取る。ボタンは角丸なしの長方形。事業紹介は吹き出し型の円
• 温度感: やや寒色寄りで清潔、落ち着いた温度感

Colors

• 地は白を基本に、お知らせ欄は淡い青グレー、事業紹介は淡いグレーで区切る
• 行動を促すボタンはすべて濃いコーポレートブルーのベタ塗り
• 見出しは写真上でも白地でも黒帯＋白文字で統一する
• 小見出しは青文字で字間を広く取る
• 青緑・水色はイラスト内に限定し、UIには使わない
• 赤や黄など暖色の強調色は使わない

Typography

• 見出しは黒帯の上に白文字を置き、帯は文字幅ぴったり
• 小見出しは字間を0.3em程度まで広げて青文字にする
• 英字は幾何学的なサンセリフで、ラベル的に小さく添える
• ボタン文字の前に白い▶を付ける
• 本文は14px前後で行間を広く取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真→小見出し→本文→ボタンを縦に積む
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は片側の画面端まで広げ、反対側は余白を残す
• 写真の左右を交互に寄せてリズムを作る
• ボタンは本文と同じ幅いっぱい、高さ約60px
• 黒帯見出しは写真の上辺にかぶせる
• 事業紹介は淡いグレーの面で囲み、下端を緩やかな弧にする

Elevation & Depth

• 影は一切使わない
• 重なりは写真に黒帯見出しをかぶせる処理だけで表現する
• 面の違いは背景色の切り替えで示す

Shapes

• 角丸: 小 0px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 横長の長方形で、画面内側の角だけ大きく丸める
• セクション境界: 基本は直線。事業紹介の下だけ大きな弧で区切る
• ボタンは角丸なしの長方形
• 事業カテゴリは下向きの三角が付いた吹き出し型の円
• 写真の内側の端に白い細帯で縦書き英字ラベルを添える

Components

• 主ボタン（button-primary）: 濃い青のベタ塗りに白い▶＋英字ラベル。各セクションの最後に置く
• 補足付きボタン（button-sub-caption）: 見出しラベルの下に小さな和文補足を2段で入れた青ボタン
• 黒帯見出し（heading-black-band）: 黒いベタ帯に白い太字。写真の角にかぶせるか中央に置き、下に英字サブを添える
• 片角丸の写真（photo-card-rounded）: 画面端まで寄せた写真。内側の角を丸め、縦書き英字ラベルを添える
• お知らせ欄（news-list）: 白いタブ風の英字見出しと、淡い青グレー地に日付＋本文の一覧
• 吹き出し円（bubble-category）: 青い円にアイコン＋白文字のカテゴリ名、下に三角の尻尾
• FVコピー帯（fv-copy-band）: 写真の上に白帯で大コピーとサブコピーを置き、白い英字ボタンを添える

Do's and Don'ts

Do - CTAは濃い青の長方形で統一する - 見出しは必ず黒帯＋白文字にする - 写真は青みのある明るい色調にそろえる - 小見出しは青文字で字間を広く取る - 写真・本文・ボタンのまとまりを等間隔で繰り返す

Don't - ボタンをピル型や暖色にしない - ドロップシャドウやグラデのボタンを使わない - 装飾的な手書き書体を使わない - 見出しに青い帯やアンダーラインを使わない - 写真の四隅を全部丸めない

Page Structure

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

1. ファーストビュー（企業の姿勢を一言で伝える）: 働く人物写真のスライダー全面に白帯の大コピー、白い英字ボタン、ドットのページ送り
2. お知らせ（最新情報と指針への導線）: 白タブの英字見出し、淡い青グレー地に日付の一覧、明るめの青ボタン
3. イベント案内（インターン・説明会への誘導）: 片角丸の写真に黒帯見出し、青い小見出し、本文、青ボタン
4. 募集職種（職種一覧への誘導）: 写真を反対側に寄せ、同じ型を繰り返す
5. 社員紹介（働く人の姿を見せる）: 人物写真に2行の黒帯見出しと縦書き英字ラベル
6. 事業紹介（4つの事業領域を理解させる）: 黒帯見出し、青い吹き出し円4つ、フラットな街並みイラスト、青地に白文字の事業リスト、説明とボタン。下端は弧
7. 働き方（育成・環境の情報へ誘導）: 黒帯見出し＋英字サブ、補足付きの青ボタンを2つ並べる
8. 採用情報（選考・募集要項へ誘導）: 黒帯見出し＋英字サブ、大きな青ボタン1つ

Imagery

• 作業服や青い服の社員が設備や画面に向かう実写。青みの強い明るめの色調
• スーツの人物をオフィス街で撮った自然な笑顔のポートレート
• 手元のアップなど被写界深度の浅いイメージカット
• 風車・工場・電車・自販機を描いた青緑系のフラットな街並みイラスト
• 細線のモノトーンアイコンを吹き出し円の上部に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは写真と文章を左右2カラムにし、写真の左右を交互に入れ替える
• PCのFVは横長写真2枚を並べ、コピーを左上に置く
• PCのお知らせは英字見出しと一覧を横に並べる
• PCの事業紹介は吹き出し円にリストを入れ、イラストの上に弧状に配置する
• PCの働き方ボタンは2つを横に並べる
• PCではコンテンツ幅を約85%に抑えて中央に寄せる

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