DESIGN.md — 白×シアンの爽やかIT企業採用 LP（Clean Cyan Italic Recruiting Site）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、クール・先進的、信頼・誠実、シンプル・ミニマル
• キーワード: 採用・社員の素顔・斜体欧文見出し・シアンブルー・余白多め・透かし文字
• 地の質感: フラットで光沢なし。自然光の明るい写真に、薄グレー面と白カードを重ねる
• 形: 角丸なしの矩形カードと写真。ボタンだけピル型
• 温度感: やや寒色寄り。写真の人物で温かみを足す

Colors

• 地は白と薄グレー #F1F2F4 をセクションごとに交互に使う
• ブルーは欧文見出し・ボタン・リンク矢印に絞って使う
• リンクタイル 3 連は白→中間ブルー→濃いブルーの段階で並べる
• フッターだけ濃いチャコールで締め、文字は白、小見出しはブルーにする
• 透かし欧文は地より少しだけ濃いグレーにして、主張させない
• button-primary は文字 #FFFFFF × 背景 #02A3D5 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#0280A8、4.51:1）を使う。
• nav-tiles は文字 #FFFFFF × 背景 #01A2D8 のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#017EA8、4.61:1）を使う。

Typography

• セクション見出しはブルーの太字斜体の欧文 1 語にする
• 欧文見出しの下に、日本語の小さなサブラベルをブルーで添える
• 日本語リードは太字で 2 行、下に短いブルーの線を引く
• 本文は小さめにし、行間を 2.0 前後と広く取る
• ボタンとラベルは大文字の欧文で、字間を広げる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真とテキストを 2 カラムで左右交互に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真とテキストカードを少しずらして重ね、奥行きを出す
• 左右交互（ジグザグ）にレイアウトする
• テキストカードの中のリンクは 2 列の下線リストにする
• Entry カードは写真の上に白い面を重ね、中央揃えにする
• 余白は大きめに取り、詰め込まない

Elevation & Depth

• 影はほぼ使わず、面の色の差と重ねで階層を作る
• 白カードは写真の上か薄グレー地の上に置き、境界はフラットにする

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。人物は胸から上か全身を縦長でトリミング
• セクション境界: 直線で区切る。面の色の切り替えと、要素のずらし重ねで境界を作る
• ボタンだけを完全なピル型にする
• リンク末尾には小さなブルーの丸矢印アイコンを付ける
• カードと写真は角を立てた矩形にする

Components

• ピル型 MORE ボタン（button-primary）: ブルー地に白文字の小さなピル型ボタン。左に矢印を付ける
• 斜体欧文見出し（heading-italic-en）: ブルーの太字斜体の英単語に、日本語の小さなサブラベルを添える
• 透かし欧文（watermark-text）: セクションの背景に、極細の巨大な英語フレーズを薄く敷く
• 下線リンクリスト（link-list）: ブルーの小さな文字に下線を引き、右端に丸矢印アイコンを付ける。2 列で並べる
• 社員インタビューカード（interview-card）: 縦長の人物写真の下の白い面に、タイトルとイニシャル・入社年を置く
• 3 連リンクタイル（nav-tiles）: 白・中間ブルー・濃いブルーの 3 色の面に、日本語見出しと欧文サブラベルを置く
• エントリーカード（entry-card）: 写真の上に白い面を重ね、斜体欧文見出し・短い案内文・リンク 2 つを中央に揃える
• チャコールフッター（footer）: ロゴ・所在地とサイトマップを、濃い地に白文字で置く

Do's and Don'ts

Do - 社員の自然な表情の写真を大きく使う - ブルーは見出し・ボタン・リンクに限って使う - 写真とカードを左右交互にずらして重ねる - 斜体欧文見出しと日本語リードを必ずセットで置く - 余白と行間を広く取る

Don't - 暖色系の強い色を差し色にしない - ボタン以外を角丸にしない - ドロップシャドウを強くかけない - 本文を太字や大きな文字で詰め込まない - 透かし文字を濃くして可読性を下げない

Page Structure

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

1. ファーストビュー（職場の雰囲気と企業の姿勢を伝える）: 社員が働く写真を全面に敷き、左下に白抜きの 2 行キャッチと小さな補足文を置く。右上にピル型のエントリーボタンを置く
2. 代表メッセージ（トップの考えで共感を得る）: 左に代表の写真、右に斜体欧文見出しを重ねた日本語リード・本文・ボタンを置く
3. 会社紹介（事業内容を概説する）: 薄グレー地に透かし文字を敷き、白カードと人物写真を重ねる。カード内に下線リンクリストを置く
4. 社員インタビュー（働く人の実像を見せる）: 縦長の写真カードを 3 枚横に並べ、下に MORE ボタンを置く
5. エントリー誘導（応募を促す）: オフィス写真の上に白いエントリーカードを中央に重ねる
6. 仕事紹介（業務内容を伝える）: 写真を左、テキストを右に置き、斜体欧文見出しを重ねる
7. 社風・文化（教育体制や文化を伝える）: 左にテキストカード、右に写真を置き、左右を反転させる
8. リンクタイル（詳細ページへ誘導する）: 3 色の段階ブルーのタイルを横に並べる
9. エントリー（再掲）（最後にもう一度応募を促す）: オフィス写真の上に白カードを重ねる
10. フッター（会社情報とサイトマップ）: チャコール地にロゴ・住所・サイトマップを置き、最下部に黒い帯のコピーライトを置く

Imagery

• 明るい自然光のオフィスで、社員が自然に笑っている写真
• 白や淡い色の服で、背景も白っぽく、全体を明るいトーンにする
• PC 作業や会話などの仕事風景を、斜めの構図で切り取る
• 装飾はイラストを使わず、薄い透かし欧文と細い線だけにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では写真→テキストカードの縦積みにし、重ねは少し残す
• インタビューカードは SP では横スクロールか 1 列にする
• 3 連リンクタイルは SP では縦に 3 段で積む
• 透かし文字は SP では 60px 程度に縮める
• 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 行書くと起動時に読み込まれる。