DESIGN.md — 赤グラデと水色イラストの事務職採用 LP（Crimson Gradient Illustrated Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、やさしい・柔らかい、清潔・爽やか、クール・先進的
• キーワード: 深紅グラデーション・淡い水色の差し色・フラットイラスト・浮遊する幾何学パーツ・角丸カード・女性向けの柔らかさ
• 地の質感: ほぼフラット。赤い面だけ斜めのグラデーションと薄い影で立体感を出す
• 形: 大きめの角丸、ピル型ボタン、円・球・紙の形の浮遊パーツ、大きな円弧の線
• 温度感: 白〜グレーの涼しい地に、暖かい赤を差すバランス

Colors

• 地は #F6F6F6 のグレーを基本にし、カードは白で一段明るく浮かせる。
• 赤は面に塗るときは左上が濃く右下が明るい斜めのグラデーションにする。
• 淡い水色はイラストの背景と浮遊パーツだけに使い、文字や面には使わない。
• 見出しは濃いグレーにして、強調したい語だけ赤くする。
• 非活性やカテゴリ違いのメニューは淡いピンクの面に、ピンクの文字を載せる。
• フッター最下部だけ、純度の高い赤の帯で締める。
• button-primary は文字 #FFF0EE × 背景 #D93F42 のコントラスト比が 4.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D42A2D、4.55:1）を使う。
• speech-bubble は文字 #D6363D × 背景 #FDF3F3 のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D42E35、4.55:1）を使う。

Typography

• セクション見出しは「赤丸＋赤い日本語ラベル」の下に英字のグレーラベルを置く。
• 大見出しの上には、導入となる一行を小さめの文字で添える。
• 強調語は赤にして、まわりより一回り大きくする。
• 本文は行間を 1.8 程度まで広く取る。
• 英字は丸みのある幾何学的なサンセリフでそろえる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。福利厚生のアイコンは 3 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 22px。
• 特長は「イラスト→見出し→赤い点線→本文」を縦に積む。
• 写真とインタビューは横スクロールのカルーセルにし、隣のカードを少しはみ出させる。
• カルーセルの下には、赤い進捗バーを置く。
• 各セクションの最後に、左寄せのピル型ボタンを置く。

Elevation & Depth

• ピル型ボタンの下に、同じ形の薄い線をずらして重ね、浮いて見せる。
• 白いカードは影をほぼ付けず、地との明るさの差だけで分ける。
• FV の写真は少し傾けて、ごく薄い影を付ける。
• 浮遊パーツには、柔らかいグラデーションと小さな影を付ける。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は小さめの角丸の長方形。イラストは大きな角丸の正方形の枠に収める
• セクション境界: 直線で区切らず、地の色をグラデーションで切り替える。背景に大きな円弧の線を通す
• 矢印は白い円の中に入れ、ボタンの右端に置く。
• 吹き出しは白い楕円にして、イラストの左上に重ねる。
• タグは白地に枠線を付けたピル型にする。

Components

• ピル型 CTA ボタン（button-primary）: 赤いグラデーションのピル型。左に白い太字、右に細い矢印を置き、下に線をずらして重ねる
• セクションラベル（section-label）: 赤い球の後ろに赤い日本語ラベル、その下にグレーの英字を置く
• 特長イラストカード（feature-illust-card）: ピンクと水色の角丸正方形にイラストを入れ、左上に吹き出しを重ねる。下に見出しと赤い点線を置く
• 吹き出しバッジ（speech-bubble）: 白い楕円の中に、短い数値や特長を赤い小さな太字で 2〜3 行書く
• 福利厚生アイコンタイル（icon-tile）: 白い角丸の正方形。中央の淡いピンクの円に赤いアイコンを入れ、下に制度名を置く
• インタビューカード（interview-card）: 角丸の写真の下にピル型タグと赤いカテゴリ、太字タイトル、赤い丸矢印、グレーの所属表記を並べる
• 赤いメニューリスト（nav-red-list）: 赤いグラデーションの帯を縦に並べる。白文字の右に丸い矢印を置き、「時給制」などは白いバッジで示す
• リンクパネル（link-panel）: 淡いグレーの角丸パネル。赤丸付きの見出しの下に線を引き、灰色の点を付けたリンクを並べる
• 丸いメニューボタン（hamburger）: 画面の右上に固定する赤い円のボタン。中に白い三本線を入れる

Do's and Don'ts

Do - 赤の面には、必ず斜めのグラデーションをかける。 - 赤いイラストには、淡い水色の差し色を組み合わせる。 - 円・紙・球などの小さなパーツを、余白に散らして動きを出す。 - 見出しは、赤い強調語を含む 2 行の大きなコピーにする。 - 余白を広く取り、要素を詰め込まない。

Don't - 黒や濃紺の面は使わない。 - 角の尖ったボタンや四角いカードにしない。 - 実写の人物写真を多用しない。主役はイラストにする。 - 赤い文字を本文の長文に使わない。 - 強いドロップシャドウは付けない。

Page Structure

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

1. ヘッダー（ブランドを示し、メニューへ誘導する）: 白地の中央にロゴを置き、下に赤い細線を引く。右上には赤い丸のメニューボタンを置く
2. ファーストビュー（働く人の理想像を伝える）: 2〜3 行の大きなコピーの下に、傾けた人物写真を置く。赤い円弧と浮遊パーツを重ね、大きな英字のサイト名とスクロール表示を添える
3. メッセージ（会社の紹介と、仲間を募る意思を伝える）: 英字ラベルと下線付きの赤い一文、大見出し、行間を広く取った短い文の列で構成する
4. コンテンツ導線（求める人材像やキャリアの頁へ誘導する）: 赤いビル街のイラストの上に人物カードを置き、白いピル型の矢印ラベルを付ける
5. 働く環境（働きやすさを 3 点で示す）: イラストカード、吹き出し、赤い強調付きの見出し、点線、本文を縦に 3 回繰り返し、最後に CTA ボタンを置く
6. オフィス写真（職場の雰囲気を見せる）: 角丸の写真を横スクロールで並べる
7. 福利厚生（制度の充実ぶりを一覧で見せる）: 人物のイラストと浮遊アイコンの下に、3 列×3 段のアイコンタイルを並べ、CTA ボタンを置く
8. 社員インタビュー（実際の社員の声へ誘導する）: 写真カードのカルーセル、赤い進捗バー、一覧へのボタンで構成する
9. 採用区分メニュー（職種別の応募入口を示す）: 淡いピンクと赤グラデーションの帯を縦に並べたリストにする
10. サイトマップ・フッター（下層ページへの導線と、会社情報を載せる）: グレーのリンクパネルを 3 枚並べ、テキストリンクの下に赤い帯と白いロゴ・コピーライトを置く

Imagery

• 人物は顔を省略したフラットなベクターイラストにする。赤い服と、えんじ色の髪の女性を描く。
• イラストの背景は、ピンクと淡い水色を上下に分けた角丸の正方形にする。
• 赤いビル街・書類・電卓・旗などのオフィス小物を、赤のグラデーションで描く。
• 実写は、自然光で明るく撮った白い服の女性や、オフィス・カフェ空間にする。
• 余白には、小さな赤い球、白い輪、紙片、大きな細い円弧を散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではヘッダーの下に、5 項目の横並びナビを出す。
• PC の FV は、写真を中央、英字のサイト名を右に置き、メッセージとビルのイラストを左右に並べる。
• 働く環境の 3 つの特長は、PC では 3 カラムで横に並べる。
• 福利厚生は、PC では左に見出しとイラスト、右に 3×3 のグリッドを置く 2 カラムにする。
• インタビューは、PC では 3 枚を横に並べ、一覧ボタンを見出しの右に置く。
• フッターのメニューとリンクパネルは、PC では 3 列のグリッドにする。

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