DESIGN.md — 淡い水色×深紅の線画イラスト採用 LP（Pale Aqua Illustrated Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、シンプル・ミニマル、親しみ・手作り感、信頼・誠実
• キーワード: 淡い水色・深紅アクセント・線画イラスト・インフォグラフィック・余白多め・角丸なし
• 地の質感: 影もグラデーションも使わないフラットな面。白カードと淡い水色の地を重ねて奥行きを出す
• 形: 角丸なしの四角いカードと、円形のアイコン・ボタンの組み合わせ
• 温度感: やや寒色寄りだが、手描き風の線画と淡いピンクで親しみを出す

Colors

• 地は白と淡い水色を交互に使い、水色地の上には白カード、白地の上には水色カードを置く
• 深紅は英字見出し・数値・丸ボタン・箇条書きの丸だけに使い、面積は2%以下にする
• インフォグラフィックのグラフは淡いピンクとくすんだローズの2段階で表す
• イラストの差し色はセクションで分け、水色（Value）とピンク（Feature）にする
• 本文はチャコールを使い、純黒は避ける
• 影やグラデーションは使わない

Typography

• セクション見出しは赤い英字の下に、斜線付きのグレーの日本語小見出しを添える
• 本文は字間を0.1em前後広げ、行間を2.0にとってゆったり見せる
• 数字は赤の極太欧文で大きくし、単位は小さく添える
• 理念文のような長い見出しは太字のまま行間を2.0にする
• Value・Feature・STEP の番号はグレーまたは赤の小さい欧文にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。実績サムネイルとアイコン一覧だけ 2 カラム
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約25pxで統一する
• カードは間隔約40pxで縦に積む
• 写真は画面幅いっぱいか、片側だけ裁ち落としで配置する
• インフォグラフィックのカードは中央揃えにし、見出し→数字→イラストの順に並べる
• セクションの切り替えは背景色の面だけで行う

Elevation & Depth

• 影は使わない
• 奥行きは白カードと水色地の色差だけで作る
• アコーディオンは細い区切り線で仕切る

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。横長か正方形に近い比率で切る
• セクション境界: 直線の色面で切り替える
• カードとボックスは角丸なしの四角にする
• ボタンとアイコンの背景は正円にする
• フローの区切りには細いV字の矢印を使う
• Featureカードは番号ラベルを左上にはみ出させる

Components

• 英日2段見出し（section-heading）: 赤い太字の英字見出しの下に、斜線とグレーの日本語を添える
• 番号付き指針カード（value-card）: 淡い水色の四角に、左上の番号・中央の線画・中央揃えの太字2行を置く
• 特長カード（feature-card）: 白カードの左上に赤の英字番号をはみ出させ、赤い大きな数値とイラストと本文を載せる
• 制度アコーディオン（accordion）: 白カードの中で、項目名と右端の赤い丸＋ボタンを区切り線で並べる
• 丸プラスボタン（button-plus）: 直径約40pxの赤い正円に白い細い＋を置く
• 数字インフォグラフィック（stat-card）: 白カードに、見出し→赤い大きな数字→淡いピンクのグラフや線画を並べる
• 円アイコン業種一覧（icon-list）: 白い正円の中に細い線のアイコンを置き、右にラベルを添えて2列に並べる
• 外部リンク帯（link-bar）: ボックス下端の灰水色の帯に、太字のテキストと赤い外部リンクアイコンを置く
• 選考ステップ（step-card）: 水色ボックスの中に白いカードを置き、グレーの STEP 番号と太字を並べ、V字矢印でつなぐ
• 赤丸箇条書き（bullet-list）: 赤い丸の行頭記号を付けた2行程度の文を縦に並べる

Do's and Don'ts

Do - 赤は見出しと数字に絞り、点で効かせる - イラストは黒い細線＋1色の差し色で統一する - 数値は大きな赤字＋淡いピンクのグラフで見える化する - 白と水色の地を交互にしてリズムを作る - 本文は字間・行間を広くとる

Don't - カードに角丸や影を付けない - 赤を背景の広い面に使わない - 多色のフルカラーイラストを混ぜない - 見出しを明朝や装飾書体にしない - 文字を詰めて情報を詰め込みすぎない

Page Structure

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

1. ファーストビュー（働き方の価値観を一言で伝える）: 水色地に太字の短文キャッチを4行で縦に積み、白い四角の上に線画の人物と黒い円のスイッチ装飾を置く
2. 企業理念（会社の目指す姿を示す）: 白地に英日2段見出しを置き、太字の理念文と行間の広い本文を続ける
3. 行動指針（大切にする価値観を5つ示す）: 番号付きの水色カードを縦に並べ、中央に線画アイコンを置く
4. 写真の区切り（働く人の実在感を出す）: 画面幅いっぱいの横長のオフィス写真を置く
5. 特長（働きやすさを数値で訴求する）: 水色地にリード見出しを置き、白い特長カード4枚に赤い大きな数値とピンク系の線画を載せる
6. やりがい説明（仕事の充実感を伝える）: 写真の後に太字の見出しと長めの本文を続ける
7. 福利厚生（制度を折りたたんで一覧にする）: 白カードの中に、赤い丸＋ボタン付きのアコーディオンを3段並べる
8. 数字で見る会社（会社の規模や実態を可視化する）: 白い数字カードを縦に並べ、グラフ・円・人型アイコンで表す。最後に時点の注記を右寄せで添える
9. 仕事内容（事業内容と実績ジャンルを示す）: 片側を裁ち落とした写真、見出しと本文、水色ボックスの円アイコン一覧とリンク帯の順に置く
10. 自社コンテンツ（社内の創作の場を見せる）: 下線付きの小見出しと本文を置き、サムネイルに日付と外部リンクアイコンを付けて2カラムで並べる
11. 求める人物像（マッチする人材を示す）: 英日2段見出しの下に、下線付きの小見出しと赤丸の箇条書き6項目を並べる
12. 採用フロー（選考の流れを示す）: 水色ボックスにステップ4つの白カードをV字矢印でつなぎ、最後に注釈を置く
13. 募集要項（応募情報を案内する）: 中央揃えの太字見出しと短い一文で締める

Imagery

• イラストは均一な太さの黒い線画で描く。人物はシンプルにデフォルメし、差し色は1〜2色の平塗りにする
• 差し色は水色（Valueのアイコン）と淡いピンク〜ローズ（特長と数値）を使い分ける
• 写真は明るく自然光のオフィスやカフェで撮り、手元・PC・会話する人物を中心にする
• 写真は彩度を控えめにし、白っぽいトーンでまとめる
• 業種アイコンは白い円の中に置く細い線のピクトグラムにする
• グラフは棒・ドーナツ・人型ピクトを淡いピンクとローズで平面的に描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVを、白と水色の格子状のブロックに複数の人物イラストを配置した横長構成にする
• PCでは英日見出しを左に、本文を右に置く2カラムにする
• PCでは行動指針カードを横4〜5列、特長カードを2×2で互い違いに並べる
• PCでは数字カードを幅違いのグリッドで3段に組む
• PCでは写真と本文を左右に分け、写真を画面端まで裁ち落とす
• PCでは採用フローのステップを横一列に並べ、＞矢印でつなぐ

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