DESIGN.md — オレンジ×紺の明るい採用サイト LP（Warm Orange Hero Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 親しみ・手作り感、信頼・誠実、清潔・爽やか、シンプル・ミニマル
• キーワード: 採用・笑顔の人物写真・大きな英字見出し・オレンジのアクセント・手描きの曲線・余白が多い
• 地の質感: フラットな面に薄いグレーの波形シェイプを重ね、写真の上に白い手描き線を入れる
• 形: ピル型の濃紺ボタン、角丸の写真、ゆるい波形のセクション背景
• 温度感: 暖かめ。オレンジで温度感を出し、紺で締める

Colors

• 地色は白と薄グレー #F4F4F4 を波形で交互に切り替える
• オレンジはロゴ、見出し横の小さなアイコン、ENTRY帯のグラデーションだけに使う
• 英字見出しとボタンは濃紺で統一し、オレンジのボタンは作らない
• ENTRY帯はオレンジから黄色への斜めグラデーションに白文字
• クリーム色は図解や人物カードの背景にして暖かさを出す
• header-entry は文字 #FFFFFF × 背景 #FE7A0D のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C05701、4.56:1）を使う。

Typography

• 見出しは大きな英字と小さな日本語ラベルを組み合わせる
• 日本語ラベルの前には小さなオレンジのアイコンを付ける
• 本文は行間 2.0 前後でゆったり組む
• リード見出しは太字の短い 2 行にする
• 英字見出しの右上にオレンジのマークを添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はテキストと写真の 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション間は 80px 以上空ける
• 写真の帯は画面幅いっぱいに横並びで敷く
• テキストブロックは左寄せにし、写真を右や端に散らす
• 見出し→リード→本文→ボタンの順に縦に並べる

Elevation & Depth

• 基本は影なしのフラット
• 人物写真カードにごく薄い影を付けてもよい
• ボタンにも影は付けない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。人物写真は縦長に切り抜いて帯状に並べる
• セクション境界: 薄グレーのゆるい波形で地色を切り替える
• ボタンは完全なピル型にし、右端に白い円の矢印を付ける
• 図解は円を重ねたやわらかい形にする
• 直線で区切らず、曲線の背景で流れを作る

Components

• 濃紺のピルボタン（button-primary）: 濃紺のピル型に白文字。右端に白い円の矢印アイコンを付ける
• グレーのサブボタン（button-sub）: 薄グレーのピル型に濃色文字と小さな矢印。外部リンクやインタビューへの導線
• ヘッダーの応募ボタン（header-entry）: 右上に固定するオレンジのピルボタンと、白い丸のメニューボタン
• 英字大見出し（section-title）: 小さな日本語ラベルの下に濃紺の大きな英字。右上にオレンジのマーク
• 人物写真の帯（photo-strip）: 角丸の写真を隙間なく横一列に並べ、働く人の笑顔を見せる
• 社員インタビューのカルーセル（voice-carousel）: クリーム色グラデーションの背景に人物写真。右に部署タグ・見出し・名前・ボタン。下にドットと矢印
• 部署タグ（tag-dept）: クリーム色の小さな角丸ラベル
• ENTRY 誘導帯（entry-band）: 左は写真に白い英字見出し、右はオレンジのグラデーションに白文字の誘い文と濃紺のボタン

Do's and Don'ts

Do - 見出しは大きな英字と小さな日本語ラベルの組み合わせで統一する - オレンジは小さなアイコンと応募帯に絞り、ポイントとして使う - 働く人の自然な笑顔写真をたくさん使う - 白い手描き線や波形で、やわらかい動きを出す - 余白を多めにとり、本文はゆったり組む

Don't - 赤や原色の強い CTA を増やさない - セクションを直線や濃い罫線で区切らない - 本文を詰めて情報量の多い作りにしない - 人物写真をイラストに置き換えない - 明朝体を使わない

Page Structure

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

1. ファーストビュー（仕事の象徴的な場面とメッセージで興味を引く）: 画面幅いっぱいの働く人の写真に白い手描きの線を重ね、右側に白文字のキャッチを置く
2. 企業メッセージ（仕事の意義を伝える）: 中央に太字のリードと長めの本文。周りに小さな角丸写真を散らし、下にピルボタン
3. 写真の帯（職場の雰囲気を見せる）: 多様な職種の人物写真を横一列に並べる
4. 仕事紹介（事業と職種の全体像を見せる）: 左に英字見出しと説明、右にクリーム色の円を重ねた事業の図解
5. 写真の帯（お客様や暮らしとのつながりを見せる）: 暮らしの場面の写真を横に並べる
6. 社員インタビュー（先輩社員の声で親近感を出す）: 中央に英字見出し。人物カードのカルーセルと一覧ボタン
7. 店舗写真（企業の実在感を出す）: 建物の写真を画面幅いっぱいに敷く
8. 働く環境（福利厚生や育成を伝える）: 左に英字見出し・リード・ボタン 2 つ、右に角丸の写真
9. 応募の誘導（応募につなげる）: 左は写真に白い英字、右はオレンジのグラデーションに誘い文と濃紺ボタン
10. フッター（サイト内の移動と関連リンク）: 街並みの写真の下に、ロゴ・住所・SNS、英字ナビ、グレーのサブボタンを並べる

Imagery

• 自然光の明るい職場で、制服やエプロンの人物を笑顔で撮る
• 人物は腰から上を中心に、背景に売場や事務所を少し入れる
• インタビューの人物は単色背景で正面を向いた立ち姿
• 写真の上に白い手描き風の曲線や放射状の線を重ねる
• 街や建物は青空の下で明るく撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにし、写真は本文の上か下に置く
• 英字見出しは SP で 40〜44px に縮める
• 写真の帯は SP で横スクロールにするか 2〜3 枚に絞る
• ENTRY 帯は SP で写真を上、オレンジの面を下に縦に積む
• フッターのナビは SP で 2 列にする

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