DESIGN.md — 赤橙グラデと笑顔アーチの採用 LP（Red-Orange Gradient Smile Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感
• キーワード: 赤橙グラデーション・笑顔アーチ・写真上の帯コピー・白地と色面の交互・細枠矢印ボタン
• 地の質感: フラットな単色・グラデ面に写真を載せる。影はほぼ使わない
• 形: 四角が基本。手描き風の太い曲線アーチと矢印を装飾に使う
• 温度感: 暖色で熱量が高く、明るい

Colors

• 地は白。冒頭・エピソード・採用情報・エントリーは赤→橙のグラデーション面にする
• グラデーションは縦（上が赤、下が橙）か横（左が赤、右が橙）のどちらか
• 写真上のコピーは赤橙ベタ帯に白い太字で載せる
• 英字ラベルとボタン枠線は赤系の単色
• 色面の上では文字・枠線を白にする
• 青や緑などの寒色は使わない
• copy-band は文字 #FFFFFF × 背景 #EB440C のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D83E0B、4.55:1）を使う。
• button-outline-arrow は文字 #E13916 × 背景 #FFFFFF のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DC3816、4.55:1）を使う。
• button-primary は文字 #FEF3E3 × 背景 #DE3515 のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D23214、4.55:1）を使う。
• gradient-panel は文字 #FFFFFF × 背景 #FF6201 のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CA4D00、4.59:1）を使う。

Typography

• 和文見出しの直下に小さな英字ラベルを赤橙で置く
• 本文は字間を広め、行間 2 以上でゆったり組む
• メッセージは短い文ごとに改行する
• コピーは 1 行ずつ帯に分けて段差のある積み方にする
• 英字は大文字・太字・字間広め
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅か片側に寄せる
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は全幅にし、下の白い本文ボックスを右側で写真に食い込ませて段差を作る
• セクション見出しは中央、下にアーチを置く
• 本文とボタンは左寄せ、左余白は 24px
• READ MORE は幅 6 割程度で左寄せ
• セクション間は 100px 前後あける

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真と白ボックスの重なりで出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角か、角丸 12px。人物写真は下端を笑顔アーチ形に切り抜く
• セクション境界: 直線で切り替える。白と色面をそのまま接する
• ボタンは角なしの細枠長方形
• 笑顔アーチは両端が上向き矢印の太い曲線
• 写真枠の下辺を笑った口の形に湾曲させる

Components

• 笑顔アーチ見出し（smile-heading）: 和文見出しと英字ラベルの下に、両端が矢印の赤いU字アーチを重ねる
• 写真上の帯コピー（copy-band）: 写真左下に、行ごとの赤橙ベタ帯と白い太字を積む
• READ MORE 枠ボタン（button-outline-arrow）: 赤い細枠の長方形。右端から点と線が外へ伸びる
• エントリーボタン（button-primary）: 赤→橙の横グラデ、白い英字。隣に赤枠のサブボタンを並べる
• 笑顔フレーム写真（hero-photo-smile）: 角丸写真の下辺を白い笑顔アーチで縁取る
• 番号タブ（number-tabs）: 大きな細身の数字を横に並べる。選択中は赤い下線
• 社員カード（member-card）: 写真、赤い役職、太字の氏名、灰色の入社年、枠ボタンの順
• グラデ情報パネル（gradient-panel）: 写真の下に重なる赤橙グラデの箱。中は白文字と白枠ボタン

Do's and Don'ts

Do - 見出しには必ず笑顔アーチのモチーフを使う - 笑顔の社員写真を大きく使う - 白地と赤橙グラデ面を交互にしてリズムを作る - コピーは帯で区切った短文にする - ボタンは細枠と引き出し線で軽く見せる

Don't - 寒色や暗い色の面を入れない - ボタンをピル型にしない - 影やグラデのボタンを多用しない（グラデは主 CTA だけ） - 本文を詰めた行間で組まない - 無表情な写真や物撮りだけで構成しない

Page Structure

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

1. ファーストビュー（理念コピーで印象づける）: 赤グラデ地。笑顔フレーム写真の下に、白帯に黒文字のコピーを 2 段積む
2. メッセージ（会社の想いを語る）: 縦グラデ地。英字見出し、短い白線、太字の白い短文を連ねる
3. 会社紹介（会社の姿勢を伝える）: アーチ見出し、全幅写真、帯コピー、白い本文ボックス、枠ボタンの順
4. 事業紹介（事業内容を伝える）: 会社紹介と同じ型。店舗写真に帯コピーを載せる
5. エピソード（社員の動画に誘導する）: 横グラデの全幅面。白い筆記体ロゴと笑顔アーチ、白枠ボタン
6. 社員紹介（働く人を見せる）: 番号タブで切り替えるカルーセル。写真を赤アーチで抱える
7. キャリア（研修や成長を伝える）: 集合写真に帯コピー、本文、枠ボタン
8. 採用情報（募集要項へ誘導する）: 写真に横グラデの箱を重ね、白文字と白枠ボタン
9. エントリー（応募させる）: 大きな英字見出しを色面の上端にまたがせる。グラデ面に白い外部リンクボタン
10. フッター（締めと導線）: 大きな笑顔アーチと小さなコピー、ロゴ、グラデの主ボタンと赤枠ボタンを横に並べる

Imagery

• 作業着姿の社員が自然に笑う瞬間を撮る
• 店舗や整備場の現場を明るく撮る
• 人物は寄りか腰上で、会話している場面を選ぶ
• 装飾は手描き風の赤い笑顔アーチ（両端矢印）を使う
• 写真は彩度を高めにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文を中央の狭い幅に置き、メッセージを中央寄せにする
• PC の写真は左右に寄せ、白い本文ボックスを反対側の下に重ねる
• PC のエピソードはロゴと説明を横に並べる
• PC の採用情報は写真とグラデ面を左右 2 分割
• 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 行書くと起動時に読み込まれる。