DESIGN.md — 鮮黄×紺の明るい教育系採用 LP（Bold Yellow and Navy Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、信頼・誠実、清潔・爽やか、シンプル・ミニマル
• キーワード: 鮮黄の大面積・紺の太ゴシック・水色背景の社員写真・言葉で語る社員・線画マスコット
• 地の質感: フラットな単色面に写真を矩形で組む。グラデーションや影はほぼ使わない
• 形: 基本は直角の矩形ブロック。カードとボタンだけ小さい角丸
• 温度感: 黄色で暖かく元気、紺と水色で引き締めた明るい中間温度

Colors

• 黄色を主役の面色にし、ページの約 3 割を黄で塗る
• 見出し・ボタン・ラベルは濃紺に統一し、黒は使わない
• 社員写真は淡い水色の背景で撮り、黄色ブロックと隣り合わせる
• 紺地のボタンには黄文字、黄地のボタンには紺文字で反転させる
• 写真帯は黄緑がかった暗いトーンに色補正し、白文字を載せる
• 白地は見出しの導入部やセクション間の余白だけに使う

Typography

• 見出しは太いゴシックを紺で、字間を広めに取る
• コピーは 1 行 7〜9 文字で改行し、2〜3 行で句点で終える
• 英字の小さいラベルを日本語見出しの上に置く
• 社員の言葉は中央揃え、下に職種と入社年を小さく添える
• 写真上の文字は白の太字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。社員カードは横スクロールの 2 列風
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• FV は写真と黄色の言葉ブロックを左右交互に半分ずつ並べる
• セクションは全幅の色面か写真帯で区切る
• 写真グリッドは 3×3 で、中央 1 マスを黄色のマスコットにする
• MORE リンクは右下に置き、右に横線を伸ばす
• 募集職種は黄地の上に写真バナーを縦に重ねる

Elevation & Depth

• 影はほぼ使わず、フラットな面の塗り分けで階層を作る
• 写真カードは影なしの矩形で置く
• スクロールで写真がフェードインする程度の軽い動きにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 直角の矩形。社員は腰上のバストアップで中央に配置する
• セクション境界: 直線。色面を切り替えるだけ
• 黄色ブロックの写真側に小さい三角を付け、吹き出し風にする
• 紺ボタンは 4px 角丸の長方形
• 社員カードは下側だけ 8px 角丸
• 小さいラベルは黄色の角丸ボックスに紺文字

Components

• 紺の READ MORE ボタン（button-primary）: 幅広の紺地に黄の英字。中央に置く
• MORE 線リンク（link-more）: 英字 MORE の右に 30px の横線。右下に置く
• 写真上の白枠ボタン（button-outline-dark）: 半透明地に白の 1px 枠と白文字、右端に山括弧
• 社員の言葉ブロック（quote-block）: 黄色の面に紺の太字コピーを 3 行。写真側に三角の切れ込み
• 社員カード（staff-card）: 上が水色背景の写真、下が黄色の言葉と職種。横スクロールで並べる
• 英字ラベル（label-eyebrow）: 見出し上の黄色の角丸ボックスに紺の小さい英字
• お知らせカード（news-card）: 白地にマスコット線画。下に日付と紺のカテゴリタグ
• 職種バナー（job-banner）: 暗く補正した写真に白の職種名を中央に置き、右下に MORE

Do's and Don'ts

Do - 黄色は彩度の高いレモンイエローを広い面で使う - 見出しは短い言葉で言い切り、句点で終える - 社員は水色の背景で笑顔のバストアップに揃える - 線画のマスコットを区切りや空いたマスに使う - 導線は MORE 線リンクと紺ボタンの 2 種類に絞る

Don't - 黄と紺以外の強い色を足さない - グラデーションや強い影を付けない - 細い明朝や手書き風の書体を使わない - 写真を丸や斜めに切り抜かない - 長い本文を詰め込まない

Page Structure

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

1. ファーストビュー（社員の言葉とメインコピーで第一印象を作る）: 写真と黄色の言葉ブロックを交互に置き、間に白地で大きな紺のコピーを挟む
2. お知らせ（説明会などの最新情報を伝える）: 黄地に英字見出しを置き、白カードを横スクロールで並べ、紺ボタンを付ける
3. 採用コンセプト（会社の考え方を一言で示す）: 暗く補正した写真コラージュに白の大きなコピーと白枠ボタンを 2 つ載せる
4. 社員の言葉一覧（職場の雰囲気を多くの社員の声で伝える）: 英字ラベル付き見出しの後ろに淡黄の大文字を置き、社員カードを 2 列で並べる
5. 社員インタビュー導入（インタビュー記事へ誘導する）: 3×3 写真グリッドの下に黄色の面。大見出しとリード文、MORE を置く
6. トップメッセージ（代表の思いを伝える）: 水色背景に紺のコピー、下に代表写真と黄色の帯、MORE リンク
7. 理念・行動指針（企業文化を象徴的に見せる）: 水色背景に紺の大きな英字ロゴ、黄色い本の写真を中央に置く
8. 制度と環境（福利厚生ページへ誘導する）: 黒板前の社員写真に白の 2 行コピーを載せ、右下に MORE
9. 募集要項（職種ごとの応募ページへ誘導する）: 黄色の面に見出しを中央揃えで置き、写真バナーを 3 つ縦に並べる
10. クロージング・フッター（コンセプトを再提示してブランドを印象づける）: 写真コラージュに白コピー、その下の黄地にマスコット付きロゴを中央配置

Imagery

• 社員ポートレートは淡い水色の無地背景で撮る。スーツ姿の笑顔で正面を向かせる
• 仕事風景は授業・面談・デスクワークを自然光で撮り、3×3 グリッドにする
• コンセプト系の写真は黄緑寄りに色を被せ、暗めに落として文字を載せる
• 紺の単線で描いたシンプルな人物マスコットを区切りやプレースホルダーに使う
• 象徴的なアイテムを水色背景で物撮りし、ブランドの黄色で見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の FV は 3 列。左右に社員写真と言葉ブロック、中央の白カードに縦書き風のコピーを置く
• PC のお知らせは見出しを左、カード 3 枚を右に横並びにする
• PC の社員カードは 4 列のグリッドで 2 段に並べる
• PC のインタビュー導入は写真グリッドを左、黄色ブロックを右に配置する
• PC のメッセージ・理念・制度は横長バナーを縦に重ね、黄色の小さい READ MORE ボタンにする
• PC の募集要項は幅 70% の中央バナーにし、職種名を 1 行にまとめる

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