DESIGN.md — 生成り地×パステルグラデの採用サイト LP（Pastel Gradient Editorial Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、クール・先進的
• キーワード: 生成り・パステルグラデーション・円弧と楕円の切り抜き・細い線・欧文と明朝・編集誌風
• 地の質感: フラットな生成り地。淡いグラデーションの面と、0.5〜1px のグレーの細い線を重ねる
• 形: 大きな円弧、楕円、スタジアム形、逆三角形。ボタンは大きめのピル型
• 温度感: ややあたたかい中間色。写真の暖色の照明と、寒色寄りのパステルを混ぜる

Colors

• 地の色は生成りに統一する。純白は使わない
• セクションの境目は、ピーチや淡い紫の非常に淡いグラデーション帯にする
• ボタンはピンク→水色、またはピーチ→ライラックの横グラデーションにし、文字は墨色にする
• 強い原色は使わない。鮮やかな色は写真の中だけにとどめる
• 線や輪郭は中間グレーの細線にする
• 濃い面は丸ボタンと矢印ボタンだけに使う

Typography

• 欧文の小文字ラベルと明朝の和文見出しを、上下に 2 段で組む
• 和文はすべて明朝体で統一する
• 欧文は細めのサンセリフにする
• 太字は使わず、文字の大きさの差で階層をつける
• 本文は行間 2.0 で、ゆったり組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は画面端まで裁ち落とす
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
• テキストは左寄せにし、左右に 30px 前後の余白を取る
• 大きな写真は画面幅いっぱい、または片側だけ裁ち落として円弧で切り抜く
• ボタンは写真の下端に少し重ねて配置する
• セクションの間を広く空け、余白でゆとりを出す
• 下層ページへのリンクカードは縦に 3 枚並べる

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは、写真とボタンの重なりと細線で表現する
• 写真カードの上には、下側だけ暗くなるグラデーションを敷いて白文字を載せる

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 大きな円弧、正円、スタジアム形（両端が半円）に切り抜く。リンクカードは角丸なしの長方形
• セクション境界: グレーの細い水平線、または淡いグラデーションの面
• 写真の一辺を大きな円弧で切り抜き、反対側は画面端で裁ち落とす
• 逆三角形や扇形の線・グラデーション面を装飾として添える
• ボタンは高さ約 46〜66px のピル型にし、細い枠線をつける
• スライダー矢印は角丸なしの濃灰の正方形にする

Components

• グラデーションのピル型ボタン（button-gradient-pill）: ピンクと水色の横グラデーションに細いグレーの枠線。ラベルは左寄せか中央、右端に小さな矢印を置く
• 採用情報のピル型ボタン（button-cta-peach）: ピーチからライラックへのグラデーション。ページ最下部の主導線に使う
• 欧文と和文の 2 段見出し（section-label）: 欧文小文字のラベルの下に、明朝の和文見出しを組む
• 写真リンクカード（photo-link-card）: 横長の写真に、左下の白文字タイトルと右下の丸い矢印アイコンを重ねる
• 社員の所属ラベル（name-tag）: 黒い帯に白文字で、所属・入社年・氏名を 3 段に積む
• スライダー矢印（slider-arrow）: 濃灰の正方形に白い矢印。2 つを並べる
• 丸いハンバーガーボタン（menu-circle）: 右上に固定する、濃灰の正円のメニューボタン
• 線のピル型見出し枠（outline-pill-label）: 細線のピル枠に欧文のセクション名を入れ、下の写真に重ねる

Do's and Don'ts

Do - 生成りの地と大きな余白を保つ - 写真を円弧・正円・スタジアム形で切り抜き、画面端で裁ち落とす - ボタンは淡いグラデーションのピル型にそろえる - 欧文ラベルと明朝見出しを組み合わせる - 細いグレーの線で幾何学的な装飾を加える

Don't - 濃い原色のボタンや、太いゴシック体は使わない - ドロップシャドウや立体的な装飾をつけない - 純白の背景で塗りつぶさない - テキストを詰め込みすぎない - 写真を小さな四角いサムネイルだけで並べない

Page Structure

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

1. ファーストビュー（企業の姿勢を印象づける）: 巨大な欧文コピーと明朝のキャッチを置き、下に円弧で切り抜いた社員写真のスライダーを重ねる。背景はクリーム色で、細いグリッド線を引く
2. 企業を知る（トップメッセージなど、理解を深めるコンテンツへ誘導する）: 淡いピーチの地に、写真リンクカードを縦に 3 枚並べる
3. 事業と仕事（事業部門と職種を紹介する）: 2 段見出しとリード文の下に、スタジアム形・円弧形の大きな写真を置き、グラデーションのピル型ボタンを重ねる
4. 社員のキャリア（先輩社員のストーリーを伝える）: 逆三角形のグラデーション装飾を添え、正円の人物写真に所属ラベルをつけたスライダーにする
5. 福利厚生（制度を紹介する）: 線のピル枠の見出しと、スタジアム形の写真、ピーチのグラデーションボタンを縦に重ねる
6. 採用情報 CTA（募集要項へ誘導する）: 細線で区切った中央の欧文見出しの下に、集合写真と採用情報のピル型ボタンを置く

Imagery

• オフィスや劇場で撮影した、自然光と暖色照明の社員写真
• 人物はジャケット姿で、自然な笑顔や腕組みのポーズにする
• 劇場内部など、文化施設の豪華な空間を広角で撮る
• 淡いパステルのグラデーション面と細線の幾何学図形を装飾にする
• イラストは使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左側に固定ナビ（ロゴ・丸いメニュー・テキストリンク）を置き、右側に巨大な欧文と円弧の写真を並べる
• PC の企業を知るセクションは、左にカード一覧、右に大きなプレビュー写真の 2 分割にする
• PC は写真とテキストを左右交互にずらして配置し、円弧の重なりを強める
• 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 行書くと起動時に読み込まれる。