DESIGN.md — 青線×パステル面のイラスト新卒採用 LP（Pastel Section Cards Illustrated Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、やさしい・柔らかい、ポップ・元気、清潔・爽やか
• キーワード: パステル面の切り替え・太い青の角丸枠・点線区切り・線画イラスト・大きな欧文見出し・丸い矢印ボタン
• 地の質感: フラットで影がない。ベタ塗りのパステル面と白い面だけで作る
• 形: 角丸 16〜24px の大きなカード、楕円の矢印ボタン、ギザギザ円の番号バッジ
• 温度感: 明るく爽やか。青の冷たさをパステルの暖色で和らげる

Colors

• 地は淡いグレーにし、その上に大きな角丸セクションを置く。
• セクションの面は白・青・水色・薄緑・クリームの順に変えて、内容の区切りを見せる。
• 見出し・枠線・矢印ボタンは主色の青 1 色でそろえる。
• 赤はエントリーボタンにだけ使う。
• イラストの背景はピンク・青紫・黄の柔らかい形で囲む。
• 本文は黒、ラベルとリンク名は青にする。

Typography

• セクションの見出しは、大きな英字 1 語の下に和文の小見出しを添える 2 段構成にする。
• 英字は丸みのある幾何学的なサンセリフ体を使う。
• 本文は中央揃えで短く改行し、行間を 2 前後と広くとる。
• リンクカードのタイトルは、小見出しと大見出しの 2 行にする。
• 見出しの文字色は青にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦に積む
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 10px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは左右 3% ほどの余白をとった角丸ブロックにし、ブロック同士は 8〜10px 空ける。
• セクションの内側は上下 60〜80px と余白を広くとる。
• 関連するリンクカードは点線でつなげ、ひとまとまりのリストに見せる。
• カード名の白ラベルはカードの左下に置き、イラストに少し重ねる。
• 矢印ボタンはカードの右側中央に置く。

Elevation & Depth

• 影は使わない。
• 奥行きは、太い線と面の色の差だけで表す。

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 22px。ボタンはピル型。
• 写真の切り抜き: 写真は太い青枠で囲んだ角丸に収め、左上の角だけロゴ用に切り欠く。イラストは枠からはみ出させてよい
• セクション境界: 角丸ブロックの間に地のグレーをすき間として見せる。カード同士の区切りは青の点線
• リンクカードは青い 3px 枠の角丸 14px にする。
• 矢印ボタンは青で塗った横長の楕円にする。
• 番号はギザギザ円の線で囲む。
• ラベルは白い角丸 8px の面にする。

Components

• イラスト付きリンクカード（card-link-illust）: 青枠の角丸カード。線画イラストを全面に置き、左下に白ラベルで 2 行のタイトル、右側に矢印ボタンを置く。
• 楕円の矢印ボタン（button-arrow）: 青で塗った横長の楕円に白い矢印を描く。外部リンクの場合は斜め矢印にする。
• 番号付きセクション見出し（section-heading-numbered）: 弧状の英字ラベルとギザギザ円の番号を置き、その下に大きな英字と和文の小見出しを続ける。
• 点線区切りのリンクリスト（list-link）: 白い青枠ボックスの中に、項目名と楕円の矢印ボタンを横に並べ、項目の間を点線で区切る。
• 白い楕円のバッジ（badge-go）: パステル面の行に置く短い英字の白バッジ。
• エントリーボタン（button-entry）: リンクリストの最下段に置く赤い全幅の帯。左に白文字、右に手のアイコンを置く。
• 日付バッジ（date-badge）: ファーストビューに置く青い円形バッジに日付を入れ、横にメッセージ帯を並べる。
• ハンバーガーボタン（menu-button）: 右上に固定する青い角丸の正方形に、白い 2 本線を描く。

Do's and Don'ts

Do - セクションごとにパステルの面の色を変え、角丸ブロックとして独立させる。 - 線と矢印は青 1 色に統一する。 - 人物は線画イラストで描き、表情を明るくする。 - 関連するカードは点線でつないで 1 組にまとめる。 - 英字の大見出しと和文の小見出しをセットで使う。

Don't - ドロップシャドウやグラデーションのボタンを使わない。 - 赤をエントリー以外に使わない。 - 濃い面を何度も使わない（濃い面は青の導入部 1 か所だけ）。 - 明朝体や細すぎる書体を使わない。 - カードを四角い角のままにしない。

Page Structure

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

1. ファーストビュー（職場の雰囲気と日付入りのメッセージで第一印象をつくる）: 青枠の角丸に社員の集合写真を収め、英字のサイト名を流れる帯として重ねる。左下に日付バッジを置く。
2. キービジュアル（スローガンとサイト名を伝える）: 白い角丸ブロックに青のコピーを置き、前を向く人物や階段を上る人物のイラストを散らす。
3. 導入メッセージ（サイトの目的と、読者が抱く疑問を提示する）: 青のベタ面に白文字で見出しと本文を置き、最下部に基礎情報へのリンクカードを入れる。
4. コンテンツ 01（グループのつながりを伝える記事へ誘導する）: 水色の面に番号付き見出しとリードを置き、イラスト付きリンクカード 4 枚を点線でつないで並べる。
5. コンテンツ 02（社風や文化を伝える）: 薄緑の面に番号付き見出しを置き、リンクカードを 1 枚入れる。
6. コンテンツ 03 採用情報（募集要項・選考・FAQ へ誘導する）: クリームの面に、点線区切りの白いリンクリストを置く。
7. 各社サイトへの誘導・CTA（各社の採用サイトとエントリーへ誘導する）: 青枠ボックスの行をパステル色で塗り分け、それぞれに白いバッジを付ける。最下段に赤いエントリー帯を置く。
8. フッター（コピーライトを表示する）: 白い角丸ブロックに小さな文字で入れる。

Imagery

• 人物はスーツやオフィスカジュアル姿の線画イラストにする。黒い主線に紺・水色・ベージュでフラットに着色する。
• 人物の背後には、ピンク・青紫・黄・水色の不定形な丸い面を敷く。
• 階段・電球・トロフィーなどのモチーフで、成長や挑戦を表す。
• 写真は明るいオフィスで撮った自然な集合写真を 1 枚だけ使い、青枠で囲む。
• イラストはカード枠から少しはみ出させて動きを出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、以下は推奨。
• PC では最大幅 1100px ほどで中央に寄せ、角丸ブロックの構成はそのまま保つ。
• リンクカードは 2〜3 カラムのグリッドにする。
• 英字の大見出しは 96px 前後に拡大する。
• ファーストビューは写真を横長にし、メニューは上部に横並びで出す。

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