DESIGN.md — 橙グラデと円形写真の明るい採用サイト LP（Warm Orange Blob Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、やさしい・柔らかい、信頼・誠実
• キーワード: オレンジグラデーション・有機的な丸い形・細い欧文の見出し・社員の笑顔・白とグレーの交互配置
• 地の質感: フラットな面にオレンジのグラデーションを重ね、写真にはオレンジのオーバーレイをかける
• 形: 円・しずく形・大きな弧のセクション境界と、ピル型ボタン
• 温度感: 暖色寄りで明るく前向き

Colors

• 地は白とライトグレー（#F5F5F5）をセクションごとに交互に使う
• オレンジは単色より、明るいオレンジから濃いオレンジへのグラデーションで面や帯に使う
• 見出しで強調したい語だけを濃いオレンジにする
• サブボタンは濃いグレーの塗りに白文字
• 応募CTAは緑（LINE）とオレンジ（WEB）の2色を並べる
• 写真の上にオレンジ〜黄色の半透明オーバーレイをかけて統一する
• button-entry-split は文字 #FFFFFF × 背景 #EE8B16 のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AD640D、4.56:1）を使う。

Typography

• セクション名は細い大きな欧文を置き、その下に小さな日本語ラベルとオレンジの丸アイコンを添える
• 欧文のセクション名は写真や帯に少し重ねて浮かせる
• 日本語見出しは太字で中央揃え、キーワードはオレンジにする
• 本文は小さめで行間を広く（1.9前後）とる
• 番号は細い欧文のイタリックで大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真とテキストの 2 カラム、または制度カードの 3 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに白・グレー・オレンジの帯を交互に置く
• 写真とテキストブロックは左右交互に配置し、テキストカードを写真に少し重ねる
• 仕事紹介は大きな番号＋写真＋説明＋ボタンの横並び
• 制度紹介は円形の白カードにイラストを入れて3つ並べる
• メディア一覧はサムネイル＋タイトルのリストを2列で組む

Elevation & Depth

• 影はほぼ使わずフラットにする
• テキストカードは白地で、写真に重ねて奥行きを出す
• トピックバーは細いオレンジ枠のピル型にして軽く浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 人物写真は円形・しずく形に切り抜き、事業写真は角丸なしの長方形
• セクション境界: オレンジの帯は大きな楕円の弧でくり抜き、白い面が中に入り込む形にする
• 写真の周りにオレンジのグラデーションの丸を散らす
• ボタンはすべてピル型にし、右端に丸い矢印アイコンを付ける
• 制度カードは正円に近い白い形にする

Components

• 詳しく見るボタン（button-dark）: 濃いグレーのピル型ボタン。右側に小さな矢印を付ける
• 応募CTAの2分割ボタン（button-entry-split）: 左が緑、右がオレンジのグラデーションの大きなピル型ボタンを1本につなげる
• 欧文のセクション名（section-title）: 細く大きなオレンジ系の欧文の下に、丸アイコン付きの小さな日本語ラベルを置く
• お知らせバー（topics-bar）: ファーストビュー下端に重ねるピル型の白いバー。左にオレンジのラベル、右に一覧リンク
• 番号付きの仕事紹介（number-feature）: 細いイタリックの大きな番号を写真の左上に重ね、右に見出し・説明・ボタン
• 円形の制度カード（circle-card）: 白い円の中に線画イラスト、太字の制度名、オレンジの丸矢印付きリンク
• 重ねテキストカード（overlap-text-card）: 写真の左に白いカードを重ね、強調語をオレンジにした見出しと本文・ボタンを入れる
• 記事リスト（media-list-item）: 左にサムネイル、右にタイトルとカテゴリの淡い文字

Do's and Don'ts

Do - オレンジはグラデーションで使い、丸い形をあちこちに散らす - 人物写真は笑顔のものを使い、円形に切り抜く - セクションごとに細い欧文の大見出しを置く - 背景は白とグレーを交互にしてリズムを作る - ボタンはピル型にそろえる

Don't - 角張った箱や太い枠線を多用しない - 青や紫など寒色をメインに使わない - 強い影や立体的なボタンにしない - 欧文見出しを太字にしない（ファーストビュー以外） - 本文を詰めて組まない

Page Structure

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

1. ファーストビュー（前向きな印象を伝える）: 社員の笑顔の全面写真に、オレンジの太いイタリック欧文コピーと日本語サブコピーを重ねる。右上に応募ボタン2つ、下端にお知らせバー
2. メッセージ（企業の想いを伝える）: 枠付きの手書き風見出しの下に中央揃えの本文。その下に円形の社員写真をオレンジの丸と一緒にコラージュする
3. 会社紹介（会社の役割を伝える）: グレーの地に横長の写真を置き、白いテキストカードを重ねる。濃いグレーのボタン
4. 仕事紹介（事業内容を見せる）: オレンジのグラデーション帯を大きな弧でくり抜いた白い面に、番号付きの写真＋説明を2つ交互に並べる
5. 働く環境・制度（成長支援を伝える）: グレーの地に、イラスト入りの円形カードを3つ並べる
6. 募集要項への誘導（求人情報へ送る）: 社員写真にオレンジのオーバーレイをかけ、白い欧文タイトル・メッセージ・白いピル型ボタン
7. メディア（社内の情報発信を見せる）: ブログとコラムの記事リストを2列で並べ、それぞれに一覧ボタン
8. SNS（日常の雰囲気を伝える）: グレーの地に投稿サムネイルを5列×2段のグリッドで並べる
9. 応募CTA（応募に誘導する）: 暗めの社員写真の上に白文字の説明を置き、緑とオレンジの2分割の大きなボタン
10. フッター（サイト内リンクの案内）: 白地にロゴ、SNSの紹介カード、オレンジの丸を付けたリンク一覧。最下部は濃いグレーの帯

Imagery

• 明るいオフィスや打ち合わせで、社員が自然に笑う写真
• スーツやオフィスカジュアルの若手社員を中心に撮る
• 人物写真は円・しずく形に切り抜き、オレンジの丸を添える
• 大きな写真にはオレンジ〜黄色の半透明グラデーションをかける
• 制度の説明は黒い線画にオレンジの差し色を入れたシンプルなイラスト
• 住宅・店舗の写真は自然光の入る明るい内装
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では写真とテキストの2カラムを縦積みにし、テキストカードは写真の下に少し重ねる
• 制度の円形カードは SP では1列、または2列＋1にする
• SNSのグリッドは SP では3列にする
• メディアの2列リストは SP では縦に並べる
• 応募の2分割ボタンは SP でも横並びのまま画面幅いっぱいにする
• 欧文のセクション名は SP で40〜48pxに縮める

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