DESIGN.md — 青グラデと菱形モチーフの採用 LP（Clean Blue Gradient Corporate Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、クール・先進的、シンプル・ミニマル
• キーワード: 青シアングラデ・菱形モチーフ・淡い水色地・線画アイコン・年表・オフセット影カード
• 地の質感: フラットで質感なし。写真に青のグラデをかぶせて透明感を出す。
• 形: 角はほぼ直角。菱形・小さな正方形を散らし、カードは色付きのオフセット影で立体感を出す。
• 温度感: クールでさわやか。オレンジの CTA だけが暖色。

Colors

• 地は淡い水色 #F3F8FC と白を交互にしてセクションを区切る。
• 見出し・数字・線は青に揃え、シアンは影や装飾に使う。
• 暖色はオレンジの CTA だけにする。
• FV は青からシアンへの斜めグラデーションを写真に重ねる。
• 注釈やサブボタンは薄いグレーの面に置く。
• button-primary は文字 #FEF9EA × 背景 #FEAC34 のコントラスト比が 1.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A56201、4.59:1）を使う。

Typography

• 本文はゴシックで中央揃えを基本にし、長い文は左揃えにする。
• 手書き書体は FV のキャッチだけに使う。
• 数字は欧文サンセリフで大きく、単位は小さく添える。
• 見出しは太字で小さめにし、下に二色の短い線を引く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC は中央固定幅で 2〜3 カラムのカード並び
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約 12px の余白を残して画面幅いっぱいに置く。
• インタビューカードは写真の右下にテキスト箱を重ねる。
• セクション見出しは中央に置き、下に約 24px の余白をとる。
• CTA は白帯の上に中央 1 つだけ置く。

Elevation & Depth

• カードは影なしのフラットな白面。
• インタビューカードはシアンや青のオフセット影（右下 6px）を付ける。
• CTA とサブボタンには薄いドロップシャドウを付ける。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: FV は菱形に切り抜いた写真をコラージュする。インタビュー写真は横長の長方形。
• セクション境界: 直線で区切り、角にカギ形の線と小さな正方形を飾る。
• 角丸は 4px 以内に抑える。
• 装飾は菱形と正方形を散らしたピクセル風にする。
• カード見出しの下に青い横線を左から伸ばす。

Components

• オレンジ CTA（button-primary）: 横長でやや角丸のオレンジのボタン。白の太字で中央に置く。
• グレーのサブボタン（button-sub）: 薄グレーの面に小さな説明と青いリンク文字を 2 行で入れる。
• 二色下線の見出し（heading-underline）: 中央の太字見出しの下に、シアンと青の短い線を並べる。
• 縦型の年表（timeline）: 点線の縦線に年号を並べ、白い吹き出しの中に大きな数字と線画イラストを入れる。
• 線画付きの注力カード（focus-card）: 白いカードの上に青い線画イラストをはみ出させ、見出しの下に青線を引く。
• 社員インタビューカード（interview-card）: 写真の右下に白いテキスト箱を重ね、シアンか青のオフセット影を付ける。
• FAQ アコーディオン（faq-item）: 青い横線で区切った行。質問を左に、細い＋アイコンを右に置く。
• 注釈ボックス（note-box）: 薄グレーの面にグレーの小さな文字で注記を入れる。

Do's and Don'ts

Do - 青・シアン・白を主役にし、オレンジは CTA だけにする。 - 菱形と小さな正方形の装飾を余白に散らす。 - イラストは青系の線画と淡い塗りで統一する。 - 淡い水色と白のセクションを交互にする。 - 実績は大きな数字で見せる。

Don't - CTA 以外に暖色を使わない。 - 大きな角丸やピル型ボタンにしない。 - 見出しを大きくしすぎない。 - 濃い影や立体的なグラデーションボタンを使わない。 - 装飾フォントを本文に使わない。

Page Structure

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

1. ファーストビュー（職場の雰囲気とメッセージを一目で伝える）: 青からシアンのグラデの写真背景に、菱形の社員写真を散らし、白い手書き風キャッチを置く。
2. 呼びかけ（応募への誘い）: 白地の中央に青い一文と下線を置き、周りに菱形を散らす。
3. 会社紹介（事業の概要を伝える）: 淡い水色の地に、下線付き見出しと 2 行の中央揃えの文を置く。
4. 沿革（成長性を数字で示す）: 縦の年表に大きな青い数字と線画を並べる。
5. 注力分野（今後の事業の方向性を伝える）: 線画イラスト付きの白いカードを 4 枚、縦に並べる。
6. 締めのメッセージと CTA（職種一覧へ誘導する）: 中央揃えの短い文の後、白帯にオレンジのボタンを 1 つ置く。
7. 社員インタビュー（働く人のリアルを伝える）: オフセット影付きの写真カードを縦に並べ、最後に「もっと見る」リンクを置く。
8. 運営会社（信頼性を示す）: 白地に親会社のロゴ、説明文、グレーのサブボタン、関連サービスのロゴを並べる。
9. よくある質問（応募前の不安を解消する）: 青い線で区切った＋アイコン付きのアコーディオン。
10. 最終 CTA とフッター（最後の応募導線と注記）: オレンジのボタン、グレーの注釈ボックス、グレーのフッターリンクを置く。

Imagery

• 社員写真は明るいオフィスで撮った自然な笑顔のバストアップにする。
• FV 写真は菱形に切り抜き、青いグラデの上に重ねてコラージュする。
• イラストは青系の細い線画に淡い水色の塗りを入れ、人物やデバイスをモチーフにする。
• ピクセル風の小さな正方形を、角や余白にアクセントとして置く。
• ロゴは白地に横一列で並べる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文を中央の固定幅（約 60%）の淡い水色パネルに収める。
• PC の年表は横向きのアイソメトリックな棒グラフ図にする。
• PC の注力カードは 2 列、インタビューカードは 3 列に並べる。
• PC の FV は横長にし、キャッチを左に、写真を左右に散らす。
• PC の会社紹介は文とロゴを左右 2 カラムに分ける。

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