DESIGN.md — 生成り×紺×ティールの公務員採用 LP（Pastel Gradient Public Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、クール・先進的
• キーワード: 生成りの地・濃紺の帯・パステルオーロラ・斜め切りの写真・ティールのピル型ボタン・タグ付きサムネイルグリッド
• 地の質感: フラットな単色面に、FV だけ虹色のぼかしグラデーションを重ねる。影はほとんど使わない
• 形: 写真は斜めにカットした平行四辺形と角丸。ボタンとタブはピル型または上だけ角丸
• 温度感: やや涼しい。紺とティールで締め、生成りでやわらげる

Colors

• 地は生成り・濃紺・淡い水色・白をセクションごとに切り替え、帯にする
• お知らせ一覧は濃紺地に白文字。リンクは下線つきの白
• 行動ボタンはティールの塗りに白文字で統一する
• 紺地のサブボタンは白い枠線だけのピル型。生成り地では墨色の枠線にする
• 黄色は NEW バッジだけに使う
• パステルの虹グラデーションは FV だけに使う
• button-primary は文字 #ECFEFE × 背景 #019392 のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#018180、4.53:1）を使う。
• keyword-tab は文字 #019392 × 背景 #FFFFFF のコントラスト比が 3.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#018180、4.54:1）を使う。
• badge-status は文字 #ECFEFE × 背景 #019393 のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#018181、4.53:1）を使う。

Typography

• 字間は 0.05〜0.1em とやや広めにとり、端正に見せる
• 見出しは太字のゴシック。明朝は使わない
• 英字ラベルは日本語見出しの補助として小さく添える
• リード文は短い行を改行で積み上げ、行間は 1.8 以上にする
• 日付は欧文の数字で表し、本文より一段小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。サムネイルは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 20px
• サムネイルは 2 列で、間隔は約 16px
• お知らせは日付・タイトルの組を縦に積み、組の間は約 24px
• セクションの区切りは背景色の切り替えで示す
• ボタンは横幅いっぱいのピル型を縦に並べる

Elevation & Depth

• 基本はフラットで、影は使わない
• カルーセルの写真だけ、薄いドロップシャドウで浮かせる
• FV の写真はグラデーション面に重ね、奥行きを出す

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: FV は平行四辺形の斜め切り。キービジュアルは片側の角だけ大きく角丸にする。サムネイルは角丸なしの矩形
• セクション境界: 背景色が直線で切り替わる。FV の下端だけ斜めのラインにする
• タブは上だけ角丸にする
• 職種タグはサムネイルの左上に置き、右下だけ角丸にする
• 丸いバッジ（円形の回転テキスト）を FV に 1 つ置く

Components

• ティールのピル型ボタン（button-primary）: 英字の VIEW MORE と右向き矢印。写真の上に重ねて置く
• 枠線だけのピル型リンク（button-outline）: 横幅いっぱい。左に文字、右に矢印。紺地では白い線、生成り地では墨色の線にする
• キーワードタブ（keyword-tab）: 横スクロールで並ぶ上だけ角丸のタブ。選択中はティール地に白文字
• タグ付きサムネイル（thumb-card）: 写真の左上に職種タグを置き、写真の下に中央揃えの太字キャプション
• NEW バッジ（badge-new）: 黄色のピル型。日付の左に置く
• 受付状態バッジ（badge-status）: ティールのピル型に白文字。日付の右に置く
• お知らせ行（news-item）: 日付の下に、下線つきの白いリンク文字を並べる
• 職種タイル（occupation-tile）: 写真に暗いオーバーレイを敷き、白抜きの職種名とボタンを重ねる。下部に対象者の帯

Do's and Don'ts

Do - FV は斜めに切った人物写真をパステルグラデーションと組み合わせる - セクションごとに地の色を切り替え、リズムを作る - 行動ボタンはティールのピル型に統一する - 英字の小見出しを日本語見出しの上や横に添える - サムネイルには分類タグを付け、一覧として見やすくする

Don't - 原色の赤や派手なゴールドを強調色に使わない - 虹グラデーションを FV 以外に多用しない - 明朝体や手書き書体を混ぜない - 濃い影や立体的なボタンにしない - 生成り地に白いカードを重ねて境界をぼかさない

Page Structure

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

1. ヘッダー（サイト名とメニューの提示）: 左に紋章とサイト名、右に白い角丸の MENU ボタン
2. ファーストビュー（世界観と使命感を伝える）: 人物写真 2 枚を斜めに配置し、中央にパステルのオーロラ帯と大きな白抜きコピー。英字 3 行と動画の丸バッジを添える
3. キーワード一覧（関心別に記事へ誘導する）: 横スクロールのタブと、タグ付きサムネイルの 2 列グリッド
4. お知らせ・イベント（最新の採用情報を伝える）: 濃紺の帯に日付と下線リンクを縦に並べ、NEW・受付状態バッジを付ける。最後に白枠のピル型ボタン 2 本
5. メッセージ（組織の理念と共感の訴求）: 角丸に切った都市写真、紋章ロゴ、太字の 2 行見出しと短い詩的な行の積み上げ、枠線ボタン
6. 写真カルーセル（働く姿を見せる）: 白地に、影付きの写真が横に流れる
7. 職種紹介（職種別の入口）: 淡い水色地に英字見出しとアイコン。暗い写真タイルを 2 列と 1 列で配置し、ティールのボタンを重ねる
8. 特集・インタビュー（深掘りコンテンツへの誘導）: 淡い緑やピーチの地に、左が見出しと説明、右が写真コラージュ
9. フッター（問い合わせ先と SNS）: 生成り地にティールのボタン、電話番号、SNS アイコン

Imagery

• 自然光の明るい屋外や屋内で、制服とオフィスカジュアルの若手職員が笑顔か真剣な表情で写る
• FV はピンク・水色・黄色・ミントが溶け合う、ぼかしのオーロラグラデーション
• 職種写真は業務中の様子を寄りで撮り、白抜き文字を載せるため暗めのオーバーレイを敷く
• 青空の都市景観の写真で、未来感と公共性を出す
• アイコンはオレンジの線画など、シンプルで細い線のもの
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV の写真を左右に分けて重ね、右端に縦書きのクイックリンクを固定する
• PC のサムネイルは 4 列グリッド
• PC のお知らせとイベントは、縦線で区切った左右 2 カラムにする
• PC のメッセージは左に写真、右にテキストの 2 カラム
• 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 行書くと起動時に読み込まれる。