DESIGN.md — 淡いミント×蜂蜜色グラデの人材企業 LP（Warm Gradient Corporate Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、上品・高級、親しみ・手作り感、ナチュラル
• キーワード: ぼかしグラデーション・金茶の明朝・手書きコピー・笑顔の人物写真・小さな人物イラスト・余白多め
• 地の質感: 水彩のようにぼけたミント・クリーム・蜂蜜色のグラデーション。紙のような柔らかさ。
• 形: 大きめ角丸の写真とカード、片側だけ大きくカーブするセクション角、ピル型ボタン。
• 温度感: 暖色寄りでやわらかい。ミントで清潔感を添える。

Colors

• 地は白を基本に、セクションごとにミント→クリーム黄のぼかしグラデを大きく敷く。
• 見出し英字は金茶、日本語見出しと本文は茶系で黒は使わない。
• 鮮やかな橙〜黄グラデは問い合わせ帯だけに限定する。
• CTA は白ピルとアプリ緑ピルの 2 つを並べる。
• アクセントのハニー色は丸ボタンや番号に小面積で使う。
• button-primary は文字 #F59A1E × 背景 #FFFFFF のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#AB6608、4.53:1）を使う。
• button-line は文字 #FFFFFF × 背景 #06C654 のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#04883A、4.58:1）を使う。

Typography

• 見出しは英字セリフ＋日本語明朝の 2 段構成。
• 英字見出しの上に極小の英字ラベルを置く。
• 本文は細めゴシックで行間 2.0、字間広め。
• 手書き風コピーは FV と採用部分の 2 か所だけに使う。
• 背景透かし英字は白に近い淡色で大きく流す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は左右 2 カラムの非対称配置が中心。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 余白を大きく取り、要素を左右にずらして配置する。
• 本文ブロックは幅を狭めて中央〜右寄せにする。
• 写真に白カードを重ねてずらす。
• 人物イラストは見出しや角の余白に小さく添える。

Elevation & Depth

• カードはごく薄い影（0 4px 20px rgba(0,0,0,0.06)）。
• 写真にはほぼ影を付けない。
• グラデーション面の重なりで奥行きを出す。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。FV は大きな角丸フレーム、SNS 写真は正方形の小さな角丸。
• セクション境界: セクションの片側の角を大きなカーブにして次の面へつなぐ。直線の境界も併用。
• ボタンは完全なピル型。
• 吹き出しは細線の楕円で手書き風に傾ける。
• View More は文字＋短い線＋淡い円で表す。

Components

• FV 角丸写真＋手書きコピー（hero-photo-frame）: 大きな角丸の人物写真の左下に白い面を食い込ませ、手書き風キャッチを重ねる。
• 英字＋明朝見出し（section-heading）: 小英字ラベル、金茶の英字見出し、日本語明朝見出しを縦に積む。
• 事業リスト（丸アイコン付き）（business-list）: 淡い丸アイコンと英小ラベル＋事業名を縦に並べ、選択中は細線を伸ばす。
• 手書き風吹き出し（speech-bubble）: 細線の楕円吹き出しを斜めに置き短いひと言を入れる。
• 写真に重なる白カード（quote-card）: 写真下端に白カードを重ね、明朝の一文と下線、小さな補足を中央揃えで置く。
• 詳細リンク（link-more）: 小さな英字＋横線＋淡いハニー色の円。
• 白ピル問い合わせボタン（button-primary）: 橙グラデ上の白ピル、橙文字とアイコン。
• 緑ピルのアプリ連携ボタン（button-line）: 白ピルと横並びの緑ピル、白文字とアイコン。
• SNS 写真の横並び（sns-grid）: 小さな角丸の正方形写真を横一列に並べ、右下にハニー色の丸ボタンを重ねる。

Do's and Don'ts

Do - 地はぼかしグラデーションでやわらかく切り替える。 - 見出しは英字セリフと日本語明朝を組み合わせる。 - 文字色は茶系で統一する。 - 笑顔で自然光の人物写真を大きな角丸で使う。 - 小さな人物イラストを余白にアクセントとして置く。 - 余白は広めに取り、要素を非対称にずらす。

Don't - 純黒の文字や太いゴシック見出しを使わない。 - 原色の強い色を問い合わせ帯以外に広げない。 - 角張った四角ボタンにしない。 - 要素を詰め込まない。 - 濃い影や枠線で区切らない。

Page Structure

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

1. ファーストビュー（企業の人柄と前向きな印象を伝える）: 笑顔の人物写真を大きな角丸で配置し、手書き風キャッチを左下に重ねる。右上にメニューボタン。
2. 理念・コンセプト（大切にしている価値観を示す）: クリーム黄グラデの上に英小ラベル＋明朝 2 行見出し、右寄せの本文。下に大きな透かし英字と人物イラスト。
3. 事業紹介（事業領域を一覧で見せる）: 左ミント地に事業リスト、右白地に選択中の事業の写真カードと番号、吹き出しを添える。
4. メッセージ写真（働く雰囲気を伝える）: 全幅のチーム写真の下端に白い引用カードを重ねる。
5. 採用（求める人物像と採用情報への導線）: 黄グラデ地に手書きコピーと人物イラスト、右に英字見出しと本文、詳細リンク。下角をカーブさせる。
6. SNS（日常の様子を見せる）: 英字見出しと吹き出し、正方形写真を横一列に並べる。
7. 会社概要（企業情報への導線）: 淡いグラデのカードに英字＋明朝見出しと本文、右下に角丸写真をはみ出させる。
8. 問い合わせ CTA（相談・連絡を促す）: 上角カーブの橙〜黄の鮮やかなグラデ帯に白の英字見出し、白ピルと緑ピルのボタンを並べる。
9. フッター（ロゴとナビゲーション）: 淡いクリームグラデ地に左ロゴ、右に小さなテキストリンク。

Imagery

• 自然光のオフィスで笑顔の若い社員を撮った明るい写真。
• 背景はぼけたガラスや窓で、色温度はやや暖かめ。
• フラットで小さな全身人物イラスト（ミント・黄・茶系、線なし）。
• 水彩のようにぼかした色の円を重ねたグラデーション背景。
• 大きな淡い透かし英字を装飾にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムで、左右 2 カラムは縦に積む。
• 事業リストは横スクロールかアコーディオンにする。
• FV 写真は縦長の角丸にし、手書きコピーは下部に重ねる。
• SNS 写真は横スクロールか 3 列グリッドにする。
• CTA ボタンは縦に並べて幅いっぱいにする。
• 大きなカーブの角は半径を小さめ（40px 程度）に調整する。

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