DESIGN.md — シアン×斜めカットの中途採用 LP（Cyan Diagonal Corporate Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、清潔・爽やか、信頼・誠実、力強い・インパクト
• キーワード: シアン・斜めカット・大型欧文見出し・ピル型ボタン・コーラル CTA・社員写真
• 地の質感: フラットな単色の面にシアンを重ねた写真コラージュを置き、グラデーションは使わない
• 形: 平行四辺形の写真カット、斜めのセクション境界、ピル型ボタン
• 温度感: 爽やかでやや涼しく、CTA のコーラルで温かみを加える

Colors

• 地の色はシアン → 白 → シアン → グレー → シアンの順で、セクションごとに切り替える
• シアン地では文字・線・ボタンをすべて白にする
• 白地・グレー地では文字を濃いグレー (#333) にする
• コーラル色はエントリーボタンにだけ使う
• 写真の上にはシアンを重ね、コラージュの背景として使う
• 白いピル型ボタンの文字は濃いグレーにする
• button-entry は文字 #FEFBF8 × 背景 #EB6D56 のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D8371A、4.55:1）を使う。
• job-card は文字 #FFFFFF × 背景 #01AFDE のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#017FA1、4.61:1）を使う。

Typography

• 大きな欧文見出しは細めの Poppins で 2 行に分け、左寄せで置く
• 欧文見出しの右下に「— 日本語」の小さなリンクを添える
• 本文は太めのゴシックで、行間を 2.2 以上と広く取る
• ボタンの英字は Poppins を使う
• 番号付きの欧文見出しは、左肩に小さく「01.」を置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は見出しと本文の 2 カラム
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 72px、基本単位 8px、カード内 0px（375px 幅換算）
• 左右の余白はそろえて約 26px にする
• 欧文見出しの下に、幅いっぱいの細い線を引く
• 写真は左右どちらかの端まで寄せて置く
• ナビリストは横線で区切り、右端に ▶ を付ける
• ボタンは幅いっぱいに置き、間隔は 12px 前後にする

Elevation & Depth

• 影は基本的に使わず、フラットにする
• 奥行きは、色の面と斜めの重なりで出す

Shapes

• 角丸: 小 12px ／ 中 24px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: ファーストビューは平行四辺形のカット。それ以外は角丸なしの長方形を片側の端まで寄せる
• セクション境界: 直線の境界と斜めの境界を混ぜ、斜めの三角形を重ねる
• 二次ボタンは白いピル型にする
• 最後の ENTRY ボタンだけ角丸なしの長方形にする
• タグは小さな白いピル型にする
• スライダーの矢印は白い丸ボタンにする

Components

• エントリーボタン（button-entry）: コーラル地に白い英字。ファーストビューではピル型、最後のセクションでは角丸なしにする
• View More ボタン（button-view-more）: 白いピル型で、中央に英字、右端に ▶ を置く
• 欧文大見出し（section-heading-en）: 2 行の大きな英字。下に線、右に「— 日本語」のリンクを添える
• リンクリスト（nav-list）: 白い文字の項目を横線で区切り、右端に ▶ を付ける
• 職種カード（job-card）: 端まで寄せた写真、英字ラベル、職種名、本文、ボタンの順に縦に並べる
• 取引先ロゴの一覧（logo-grid）: 白地にロゴを 5 列で並べる
• お知らせの行（news-item）: 日付とタイトルを並べ、右上に白いタグを置く。行の間は線で区切る
• 社員写真のスライダー（photo-slider）: 縦長の写真を左右に少しのぞかせて並べ、白い丸の矢印を付ける。写真の下に経歴とイニシャルを置く

Do's and Don'ts

Do - シアンの面を大きく使い、白文字で統一する - セクションごとに大きな欧文見出しを置く - 写真や面を斜めにカットして動きを出す - 二次ボタンはすべて白いピル型にそろえる - エントリーボタンだけをコーラル色にする

Don't - コーラル色をエントリーボタン以外に使わない - 影や立体的なボタンにしない - セリフ体や丸ゴシックを使わない - シアン地に濃い色の文字を置かない - 本文の行間を詰めない

Page Structure

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

1. ファーストビュー（理念を伝え、応募へ誘導する）: シアンを重ねた写真コラージュの上に、白いキャッチ、英文のサブコピー、コーラルのボタンを置く
2. ビジョン（会社の方向性を説明する）: シアン地に欧文の大見出し、リード、長めの本文、リンクリスト、白いボタンを並べる
3. 実績（取引先で信頼を示す）: 白地に濃い色の欧文見出しを置き、短い文とロゴの一覧を並べる
4. 仕事紹介（職種を知ってもらう）: シアン地に写真付きの職種カードを 2 つ置き、続けてその他の職種をピル型ボタンで並べる
5. 社員紹介・対談（働く人の雰囲気を伝える）: グレー地に、番号付きの巨大な欧文見出し、写真、本文を置く
6. インタビュー（社員の経歴を見せる）: グレー地に、縦長写真のスライダーと経歴・イニシャルを置く
7. お知らせ（最新情報を伝える）: 日付とタイトルの行を線で区切り、白いタグを付ける
8. 募集 CTA（応募を促す）: 斜めの境界から始まるシアンのコラージュの上に、Join 系の大見出し、本文、コーラルの長方形ボタンを置く

Imagery

• オフィスで社員が自然に会話する様子を、明るい自然光で撮る
• 背景の写真はシアンの単色を重ね、モノトーンのコラージュ風にする
• ファーストビューの写真は平行四辺形にカットし、ずらして重ねる
• 社員の写真は縦長にし、表情が見える上半身で撮る
• 装飾は斜めの三角形の面に限る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では欧文見出しと本文を左右 2 カラムに分ける
• PC の職種カードは、写真を左、テキストを右に並べる
• PC ではその他の職種を 3 列のピル型ボタンにする
• PC のファーストビューは、斜めの写真を横に連ねる
• PC の最後の CTA は、右端に寄せた横長のコーラルの面にする

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