DESIGN.md — 白地×丸写真とパステル円の採用サイト LP（Playful Circle Character Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 親しみ・手作り感、シンプル・ミニマル、やさしい・柔らかい、ポップ・元気
• キーワード: 円の重なり・縦書き見出し・手書き風太字・線画キャラクター・パステル・余白たっぷり
• 地の質感: フラットな白地。影やグラデーションは使わない。
• 形: 正円が基本。写真・ラベル・ボタン・動画背景まですべて円で作る。
• 温度感: 白とチャコールが中心で、淡い水色・緑・黄・ピンク・紫を差し色に使う。温度はやや暖かめでやさしい。

Colors

• 地は白一色にし、セクションの区切りは色ではなく余白でつくる。
• 各コンテンツには固有のパステル色の円を 1 色ずつ割り当てる（水色・緑・黄・ピンク・紫）。
• ボタンと見出しはチャコール 1 色にそろえ、原色の CTA は使わない。
• 暗い面は動画セクションだけ。大きな円で囲み、文字は白にする。
• 青と緑はキャラクターだけに使い、面には広げない。

Typography

• 見出しは縦書き（writing-mode: vertical-rl）で 2〜3 行に分けて組む。
• 見出しと導入文は太めの手書き風書体にし、ラベルとキャプションは細いサンセリフで差をつける。
• 導入文は左揃えにし、行間 2.4 前後で詩のように短く改行する。
• 英字ラベルと日本語サブは 2 段で中央揃えにする。
• 文字色はチャコールの 1 色に統一する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円写真と縦書き見出しを左右交互に置く。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 110px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真円、パステル円、黒丸ボタンを斜めに重ねて 1 ユニットにする。
• 縦書き見出しは写真円の反対側に置き、セクションごとに左右を入れ替える。
• 社員の円写真はジグザグに散らす（SP は 3 列、上下にずらす）。
• セクションの間は 100px 以上あけて、白を広く残す。

Elevation & Depth

• 影は使わない。重なりの順番だけで奥行きを出す。
• 黒丸ボタンの外側に、パステル色の太い輪を付けて浮きを表す。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 9999px。ボタンはピル型。
• 写真の切り抜き: 写真はすべて正円で切り抜く。動画だけは角の立った長方形にする。
• セクション境界: 直線の区切りはなし。動画セクションは画面いっぱいの大きな円にする。
• ボタン・ラベル・写真はすべて正円にする。
• 円は少しずつ重ねて、リズムを出す。
• 装飾として線画の大きな「？」マークを斜線入りで置く。

Components

• 黒丸ボタン（button-circle）: 約 75px の黒い正円に 2 行の英字。外側にパステル色の輪を付ける。
• エントリー大丸ボタン（entry-circle）: 約 130px の黒い円。中に区分名と ENTRY を 2 段で入れ、2 つ並べる。
• パステル見出し円（label-circle）: 直径約 190px のパステル円。英字ラベル、日本語サブ、キャラクターを縦に並べる。
• 円形写真（photo-circle）: 直径約 230px の正円写真。ラベル円と重ねて配置する。
• 縦書き見出し（vertical-heading）: 太い手書き風の文字を 2〜3 列の縦書きで組む。
• 社員の丸アイコン（staff-avatar）: 直径約 110px の円写真。下に部署名と入社年を中央揃えで入れる。
• 暗い大円の動画枠（dark-circle-video）: チャコールの巨大な円の中に、白い見出し・動画・丸サムネを入れる。
• スクロール誘導（scroll-indicator）: 小さな黒い点と、細い英字の 2 行表記。

Do's and Don'ts

Do - 写真は必ず正円で切り抜き、パステル円と重ねる。 - セクションごとにパステル色を変えて、内容を色で見分けられるようにする。 - 見出しは縦書きの手書き風太字にする。 - 線画キャラクターを各ラベル円に入れて、統一感を出す。 - 白い余白を広く取って、詰め込まない。

Don't - 四角いカードや角丸カードを並べない。 - 鮮やかな原色のボタンやグラデーションを使わない。 - 影や立体的な装飾を付けない。 - 見出しを硬いゴシックの横書きにしない。 - 文字量の多い説明ブロックを置かない。

Page Structure

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

1. ファーストビュー（親しみやすいブランドの印象をつくる）: 小さなサイト名、2 行の大きな手書き風キャッチ、人物とキャラクターの線画、スクロール誘導を白地に置く。
2. メッセージ（事業を身近な言葉で紹介する）: 語りかける短文を、行間を広く取って左揃えで段落ごとに並べる。
3. 会社紹介（会社概要へ誘導する）: 縦書き見出し、設備の円写真、水色ラベル円、黒丸ボタンを組み合わせる。
4. 仕事紹介（仕事内容へ誘導する）: 左右を反転し、作業風景の円写真と緑のラベル円を置く。
5. 社員紹介（多様な社員を見せる）: 黄色のラベル円の下に、社員の丸アイコンをジグザグに散らす。
6. 座談会（社風を伝える）: 集合写真の円とピンクのラベル円、縦書き見出しを置く。
7. 採用情報（募集要項へ誘導する）: 社員の集合写真の円と紫のラベル円、黒丸ボタンを置く。
8. コンセプトムービー（動画で興味を深める）: 暗い大円に白い見出し、動画、丸サムネ、？の線画、キャラクターを配置する。
9. エントリー（応募へ誘導する）: キャッチを再び表示し、区分別の大きな黒丸ボタンを 2 つ並べる。
10. フッターナビ（各ページへ回遊させる）: パステル円のラベルを 2 列のグリッドに並べる。

Imagery

• 写真は自然光の明るい実写にし、作業着やスーツの社員が笑顔で写るものを選ぶ。
• 設備の写真は青空の下で撮り、淡い寒色トーンにする。
• キャラクターは黒い線画のゆるいもの。白い体に緑と青の差し色を入れる。
• 人物イラストは均一な太さの黒線とフラットな塗りで描く。
• 装飾として斜線入りの大きな「？」の線画を使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも 1 カラムを中央に置き、ユニットを左右交互にする構成はそのまま使う。
• PC は円写真を約 1.3 倍に大きくし、ラベル円を写真の横に重ねる。
• PC では社員アイコンを右側に 3 列でまとめ、見出しを左に置く。
• PC は左上にロゴ、右上に黒丸のメニューボタンを固定する。
• 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 行書くと起動時に読み込まれる。