DESIGN.md — 白×赤アクセントの水色グラデIT採用LP（Clean Red Accent Corporate Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、清潔・爽やか、信頼・誠実、シンプル・ミニマル
• キーワード: 白地・赤の一点強調・水色のぼかしグラデ・角丸写真カード・円形矢印ボタン・巨大な透かし英字
• 地の質感: フラットな面に、大きく淡いブラー状のグラデーション（水色・薄ピンク）を背景に流す。影はほぼ使わない。
• 形: 16px前後の角丸カード、円形の矢印アイコンボタン、波状の曲線でゆるく区切るセクション境界
• 温度感: やや寒色寄りで、赤のアクセントが熱を足す

Colors

• 地は白と淡いグレー#F1F1F6を交互に使い、所々に水色〜ピンクの大きなぼかしを流す。
• 赤は見出しの頭文字・キーワード・本文中の一語・リンク文字に限定して使う。
• 見出しは「赤のキーワード＋黒の述語」の2色構成にする。
• 写真カードは下部に暗いグラデをかけ白文字を載せる。
• ページ末尾だけを赤の面にし、内側のボタンは明るい朱色で示す。
• アイコン円は朱色の花形・角丸面に白アイコン。
• footer-top-button は文字 #FCFDFE × 背景 #FA6056 のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E81507、4.54:1）を使う。

Typography

• 見出しは和文太ゴシックで、強調語だけ赤にする。
• 英字見出しは頭文字1字だけ赤にする。
• カードは和文タイトルの下に小さな英字ラベルを添える。
• 本文は短く改行し、行間は1.9〜2.1にする。
• FVの背景に、画面からはみ出す巨大英字を淡い青紫の透かしで置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は見出し左・カード右の2カラム、写真カード3列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右余白は約16px、カードは全幅に近い。
• セクションは見出し→説明文→カード群の順。
• カードは縦に12px程度の間隔で積む。
• インタビューは横スクロールカルーセルで、次のカードを端に少し見せる。
• 一部のセクションは白い大きな角丸パネルで包む。

Elevation & Depth

• 影はほぼなく、面の色差と角丸で区切る。
• 写真カードは下部に暗いグラデーションをかけて文字を読ませる。
• 募集要項のリストは白パネルを写真の上に重ねて浮かせる。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸16〜20pxの長方形。FVは縦長の角丸写真を3枚並べ、メッセージは大小2枚を重ねる
• セクション境界: 基本は直線で地の色を切り替える。所々に水色の緩い波カーブを入れる
• 矢印ボタンは直径約44pxの円で、細線または白線にする。
• 外部リンクには円の中に外部リンクアイコンを入れる。
• アイコンは朱色の花形の面に白い線画アイコンを置く。
• 「もっと見る」リンクは手描き風の赤い楕円で囲む。

Components

• 写真リンクカード（photo-link-card）: 全幅の角丸写真。左下に白い和文タイトルと英字ラベル、右下に白線の円形矢印ボタンを置く
• アイコン付きグレーカード（icon-link-card）: 淡いグレーの角丸カード。右上に朱色の花形アイコン、左にタイトルと英字、右下に円形矢印を置く
• 円形矢印ボタン（circle-arrow）: 細いグレーの線で描いた円の中に黒い矢印を入れる。写真の上では白線・白矢印にする
• 2色の「〜を知る」見出し（section-heading）: キーワードを赤、続く述語を黒にした大きな太字見出し
• 職種ラベル（job-label）: 黒地に白文字の小さな帯。インタビュー写真の下に置く
• 手描き楕円リンク（view-more-circle）: 英字の「もっと見る」と矢印を、赤い手描き風の楕円線で囲む
• 募集要項リスト（apply-list）: 白い角丸パネルに、赤い太字の項目名と外部リンクの円ボタンを細線区切りで縦に並べる
• 外部メディアカード（media-card）: 白カードの中に、ロゴ見出し・ロゴ画像枠・タイトル・説明文・外部リンクボタンを置く
• フッターのTOPボタン（footer-top-button）: 赤地の上に置く朱色の角丸横長バー。白い英字を左寄せで入れる

Do's and Don'ts

Do - 赤は強調語・頭文字だけに絞る。 - 写真カードはすべて角丸にし、円形矢印で遷移を示す。 - 背景には淡い水色とピンクの大きなぼかしを流す。 - 和文タイトルには必ず英字ラベルを添える。 - 社員写真は自然光のオフィスで、笑顔の会話シーンを使う。

Don't - 赤で広い面や段落全体を塗らない（フッター以外）。 - 濃い影や立体的なボタンを使わない。 - 角の立った写真を混ぜない。 - 暖色系のベージュなどを地に使わない。 - 見出しに装飾書体や明朝を使わない。

Page Structure

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

1. ファーストビュー（企業の姿勢を短いコピーで伝える）: 白帯に2行の太字コピーを置き、2行目を赤にする。下に縦長の角丸写真3枚と巨大な透かし英字を配置し、スライダーのインジケーターを付ける
2. メッセージ（企業の理念を語る）: 頭文字が赤の英字見出し、2行のリード、大小2枚の重ね写真、行間の広い太字本文。最後の一語を赤にする
3. 会社を知る（トップメッセージ・会社紹介・文化へ誘導する）: 2色見出しと説明文のあと、写真リンクカードを3枚縦に積む
4. 事業を知る（事業内容を紹介する）: 白い大きな角丸パネルの中に、見出し・説明・グレーのロゴカードを入れる
5. 仕事を知る（職種紹介へ誘導する）: グレー地に見出し・説明・写真リンクカード1枚
6. 働く環境（文化・福利厚生へ誘導する）: 朱色の花形アイコン付きグレーカードを2枚
7. 社員インタビュー（人柄と仕事を伝える）: 水色グラデ地で横スクロール。角丸のポートレート、黒の職種ラベル、経歴、太字のタイトル。手描き楕円の「もっと見る」と左右の矢印を付ける
8. 外部メディア（公式ブログ等へ誘導する）: グレー地に白い角丸カードを2枚。それぞれロゴ枠と外部リンクボタンを持つ
9. 選考の流れ（応募までの流れを示す）: 白から水色への波カーブで区切り、写真リンクカード1枚を置く
10. 募集要項CTA（応募ページへ送る）: 集合写真の角丸パネルに白い見出しと説明を重ね、下部に白い募集リストのパネルを重ねる
11. フッター（サイトを締める）: 赤の全面にTOPバーと白いロゴ、英字のサイト名を置く

Imagery

• 明るいオフィスで社員同士が自然に会話する様子を、浅い被写界深度で撮る。
• インタビューは胸から上の正面ポートレートにし、背景はガラス窓のぼけにする。
• 高層ビルを見上げた青空の写真で、先進性を表す。
• 写真の下部は暗くし、白文字を載せられるようにする。
• 背景に大きくぼかした水色・ピンクの抽象的なグラデーションを置く。
• アイコンは単色の線画を、朱色の花形の面に乗せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは見出し＋説明を左、カードを右に置く2カラムにする。
• PCは写真リンクカードを3列に並べる。
• PCのインタビューは4枚を横に並べ、左右の矢印でスライドする。
• 外部メディアカードはPCで2列にする。
• 募集要項はPCで左下に白いリストを置き、右に集合写真を見せる。
• FVの透かし英字はPCで横長に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 行書くと起動時に読み込まれる。