DESIGN.md — 深い青×明朝縦書きの公的技術職採用 LP（Civic Blue Mincho Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、上品・高級、清潔・爽やか、シンプル・ミニマル
• キーワード: 深い青・明朝縦書き・現場ドキュメンタリー写真・大きな余白・淡い青グラデーション・公共の使命感
• 地の質感: フラットな白と淡い青のグラデーション地。影や質感は使わない
• 形: ほぼ角丸なしの四角形。写真の切り抜きは矩形。数値だけ白い正円
• 温度感: やや寒色寄りで落ち着いた、誠実で静かな温度感

Colors

• 地は白と、ごく淡い青のグラデーションを交互に使う
• 情報系セクション（数値・要項）は薄グレー地 #F3F4F8 で区切る
• 強調色は深い青 1 色だけ。告知帯・CTA・矢印・数値に使う
• キャリアの段階は同系の青を淡→濃で表す
• 本文は真っ黒にせずグレー。見出しだけ墨色にする
• 暖色はなし。写真の中の色だけに任せる

Typography

• 物語やコンセプトは明朝で書き、縦書きで見せる
• 情報系の見出しはゴシック。頭に「›」を付け、下に小さな英字を置く
• 字間は広め（0.1〜0.2em）にして静かな印象にする
• 本文は行間 2.0 前後でゆったり組む
• 番号は太い欧文の大数字。小さな「POINT」を左に添えて写真の下端に重ねる
• 数値は明朝の青文字で大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と文を左右交互に並べる 2 カラム
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 100px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 24px
• 写真は本文と同じ幅で全幅寄りに置く
• セクションの間は 80〜120px と大きく空ける
• 社員インタビューは写真タイルを横にスクロールさせる
• 要項表は見出しセルを白、値セルを罫線のみにした 2 列表にする

Elevation & Depth

• 影はほぼ使わずフラットにする
• CTAカードは白い細枠を内側に入れて、写真から浮かせる
• 最終CTAの写真はやや暗くしてカードを目立たせる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。横長 3:2 を基本に、縦長を 2 枚並べることもある
• セクション境界: 直線で区切る。地の色の切り替えとグラデーションだけで分ける
• ボタンとカードは四角
• 統計数値だけ白い正円に入れる
• キャリアの段階は右端が矢印形の帯で表す

Components

• 告知帯（notice-band）: FV直下の全幅の青帯。採用案内やイベント日程を中央揃えで縦に並べる
• CTAカード（button-primary）: 白の細い内枠がある青い四角カード。2行の見出しと小さなリンク文
• イベントカード（event-card）: 青カードの中に、日付と会場を白い帯で入れる
• ›付きの見出し（heading-arrow）: 「›」とゴシックの大見出しを並べ、下に小さな英字ラベルを置く
• POINT番号（point-number）: 写真の下端に、太い欧文の大きな数字を重ねる
• 数値の円（stat-circle）: 薄グレー地に白い正円。小さなラベルと青い大きな数値を入れる
• キャリアの矢印帯（career-arrow）: 段階が進むほど長く濃くなる青い矢印帯。上に明朝の見出しと下線を置く
• インタビュー写真タイル（interview-tile）: 青みをかけた人物写真に、引用符付きの明朝コピーと職種名を白文字で重ねる
• FAQ行（faq-item）: 太い欧文の「Q.」と質問文を並べ、下に淡い青罫線を引く
• 募集要項の表（spec-table）: 左は白セルに中央揃えの項目名、右は下罫線だけの値セル

Do's and Don'ts

Do - コンセプト文は明朝の縦書きで、余白を大きく取って置く - 強調色は深い青 1 色に絞る - 写真は現場や記録写真を使い、色を少し抑えたトーンにそろえる - 英字の小見出しを日本語見出しの下に添える - ボタンは青い四角カードにし、白い細枠を入れる

Don't - ピル型ボタンやポップな暖色を使わない - 影の強いカードやグラデーションのボタンにしない - 本文を詰めて組まない - イラストや絵文字で軽い印象にしない - 見出しに太いゴシックの極太体を使わない

Page Structure

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

1. ファーストビュー（職の魅力を一言で伝える）: 現場で働く人物の全面写真に、白い明朝の縦書きキャッチを重ねる。右端に縦書きのSCROLLを置く
2. 告知帯（採用案内とイベントへ誘導する）: 全幅の青帯に、案内リンクとイベント日程を中央揃えで縦に並べる
3. コンセプト（組織の使命と募集の趣旨を語る）: 白地に明朝の縦書き文を右から左へ組み、余白を広く取る
4. 歴史ストーリー（歴史と実績で信頼をつくる）: 淡い青グラデ地に、記録写真・明朝の小見出し・本文の組を繰り返す
5. 使命メッセージ（職種の採用へ話をつなぐ）: 中央揃えの明朝文を数段に分けて置く
6. 職種紹介（職種の特長を3点で示す）: 中央の見出しと英字。写真の下にPOINT番号、明朝の小見出し、本文を置く
7. 紹介動画（動画で職場の雰囲気を伝える）: 本文幅の16:9の動画を埋め込む
8. 職員と仕事（働く人の声を見せる）: 縦書きの見出しと説明文の横に、引用コピー付きの人物写真タイルを並べる
9. キャリア形成（成長の道筋を示す）: 3段階の見出しと、淡→濃に伸びる青い矢印帯で表す
10. ワークライフバランス（働きやすさを数値で証明する）: 薄グレー地に白い円の統計を3つ並べ、職場写真を添える
11. 募集要項（条件を正確に伝える）: 薄グレー地に2列の表を置く
12. よくある質問（不安をなくす）: 白地に「Q.」と質問文、淡い青の罫線を並べる
13. 最終CTA・フッター（応募へ誘導する）: 設備の写真を全面に敷き、白い縦書きコピーと青いCTAカードを縦に積む。下にロゴと英字の名称を置く

Imagery

• 作業着やヘルメット姿の職員を現場で撮った、自然光のドキュメンタリー写真
• モノクロや色あせた記録写真で歴史を見せる
• 設備や配管など、無機質な施設の写真を背景に使う
• 人物のポートレートは青いフィルターをかけ、白文字を重ねる
• 彩度はやや抑え、寒色寄りのトーンにそろえる
• イラストや装飾はほぼ使わず、写真と余白で見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFV下の告知を、横並びの青カードのスライダーにする
• PCのストーリーは写真と文を左右交互に配置する
• PCのPOINTはずらしたグリッドに配置する
• PCの職員タイルは2列のグリッドにし、縦書きの見出しを左に固定する
• PCのキャリア矢印は右肩上がりの階段状に並べる
• PCの統計は横3列。写真は横5枚を帯状に並べる

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