DESIGN.md — 濃紺×明朝の商社特化型転職エージェント LP（Navy Mincho Corporate Career Agent LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、上品・高級、情報量多め・訴求型
• キーワード: 濃紺・明朝体・ビジネス写真・白カード・赤CTA・大きなセリフ数字
• 地の質感: フラットな淡グレー地に白カード。写真は青みの寒色寄りで、淡い水色〜ラベンダーのグラデ帯をアクセントに使う
• 形: 角はほぼ直角。CTA のみピル型、番号バッジと図解は正円
• 温度感: 寒色寄りで落ち着いた知的な温度感。赤の強調文字で温度を少し足す

Colors

• 地は淡グレー、読み物は白カードに載せて区切る
• 見出しと番号バッジは必ず濃紺、文字色も濃紺で統一
• 赤は CTA ボタンと本文の強調フレーズだけに限定
• 大きなセリフ数字はくすみゴールドで格調を出す
• CTA 帯は濃紺系写真に暗いオーバーレイを敷き白文字
• 小見出し帯は水色→ラベンダーの淡いグラデで柔らげる

Typography

• 見出しは明朝、本文はゴシックで役割を分ける
• 見出し下に英字サブ見出しを小さくグレーで添える
• 見出しの一部の語を太く大きくして強調する
• 番号は欧文セリフの大きな数字＋ピリオド
• 本文の強調は太字でなく赤文字で行う
• 字間はやや広め、行間 1.8 で読み物感を出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、事業項目など画像カードのみ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は画面幅いっぱい、見出しは写真下端に重ねる
• 本文ブロックは左右約 20px の余白
• 特長ブロックは左に細い縦罫を通して連続性を出す
• 長い読み物の途中に CTA 帯を 3〜4 回挟む
• カード同士は 16〜24px 間隔で縦積み

Elevation & Depth

• 基本はフラットで影なし
• 白カードは淡グレー地との明度差で浮かせる
• FVのコピーボックスは白地を写真に重ねる程度

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンはピル型。
• 写真の切り抜き: 横長の長方形で角丸なし。写真は全幅または白カード内に配置
• セクション境界: 直線の切替。写真帯から地色へグラデーションで溶かす箇所あり
• カード・見出し帯は直角
• CTA だけピル型
• 番号バッジと図解は正円
• チェックボックス風の濃紺四角アイコン

Components

• 赤ピルCTA（button-primary）: 左に白地赤文字の「無料」小ラベル、右に矢印を置く全幅に近い赤いピルボタン
• CTA帯（cta-band）: 暗い濃紺の写真地に白い短冊の前置き文、白の明朝コピー2行、赤CTAを縦に並べる
• 濃紺帯見出し（heading-band）: 写真下端に重ねる濃紺ベタ帯に白明朝の見出し、下に英字サブ
• 番号付き特長行（number-feature）: ゴールドの大きなセリフ番号＋濃紺明朝見出し＋右端の濃紺四角下矢印、行間に細線
• 円形バッジ付きカード（trend-card）: 上辺中央に濃紺の正円バッジ（英字＋番号＋線画アイコン）を半分重ねた白カード
• グラデ小見出し帯（gradient-subheader）: 水色→ラベンダーの淡いグラデ帯に濃紺明朝の小見出しを中央配置
• チェックリスト（check-list）: 濃紺のチェックボックスアイコン＋太字項目、項目間に細い区切り線
• 円形図解（circle-diagram）: 大きな濃紺円に白い小円を3つ重ね、要素名を明朝で表示する
• フローステップ（flow-step）: 濃紺の円内に番号、縦線でつなぎ、見出し・説明・写真を並べる

Do's and Don'ts

Do - 見出しは必ず明朝体で濃紺にする - 赤は CTA と本文の強調フレーズに限定する - ビジネス写真は寒色寄りに揃える - 番号はセリフ体の大きな数字で見せる - 読み物の途中に CTA 帯を定期的に入れる - 白カードと淡グレー地で情報のまとまりを区切る

Don't - 丸ゴシックやポップな書体を使わない - 暖色や彩度の高い色を面に広く使わない - カードを大きく角丸にしない - 濃い影やギラつく装飾を付けない - 赤を見出しや大きな面に使わない

Page Structure

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

1. ファーストビュー（専門性と転職成功を一目で伝える）: 業界写真のモザイク上に白ボックスの明朝キャッチ、一語を濃紺帯で反転、サブコピーと赤CTA
2. 強みの一覧（選ばれる理由を3点で示す）: 都市写真の上に濃紺帯見出し、ゴールド番号付きの3行リストと下矢印
3. 強みの詳細（実績・体制・支援内容を裏付ける）: 全幅写真＋大番号、左縦罫に沿って見出し・本文・受賞バッジ・円形図解・チェックリスト
4. CTA帯（相談申込へ誘導）: 濃紺写真地に白短冊と白明朝コピー、赤ピルCTA
5. 想い・ビジョン（企業姿勢で信頼を得る）: 都市写真地に中央明朝見出し、半透明白カードで長文
6. 業界解説（業界の基礎知識を提供）: 円形タブ、写真＋濃紺帯見出し、枠付き図解、2カラム画像カード
7. 働き方の変化（業界の魅力を伝える）: 人物写真ヘッダー、白カード内に見出し・写真・本文、取り組み例チェックリスト
8. 採用傾向（求める人物像と採用事情を解説）: Qualities番号付き白カード、円形バッジ付きトレンドカードを縦に7枚
9. 求める人材・スキル（必要な資質を整理）: グラデ帯見出しのカード、三角形図解と角括弧付き項目リスト
10. サポート内容（具体的な支援を示す）: 濃紺グラデ帯見出し、3円図解、グラデ小見出し＋赤小見出し＋チェックリスト
11. 転職の流れ（申込後の手順を明示）: 濃紺番号円を縦線でつなぐ8ステップ、写真付き
12. よくある質問（相談内容の例示で不安を解消）: 濃紺の面にチェック付き白文字リスト、細い区切り線

Imagery

• スーツ姿の男女や握手・書類の手元など寒色トーンのビジネス写真
• コンテナ船・港湾・高層ビル群など産業スケールの風景を全幅で
• 写真端を白や地色へグラデーションで溶かす
• アイコンは細い線画、濃紺または淡い青
• 世界地図や都市の淡いテクスチャを背景に薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅約 70% の中央寄せ
• PC の強み詳細は本文と写真・図解を左右 2 カラム
• 事業項目は PC で 3 カラムグリッド
• トレンドカードは 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 行書くと起動時に読み込まれる。