--- version: alpha name: Navy Mincho Corporate Career Agent LP description: 濃紺の帯見出しと明朝体で知的・誠実さを出し、赤のピル型 CTA で行動を促す転職支援 LP。淡いグレー地に白カード、ビジネス写真、細い縦ラインと大きなセリフ数字で読み物の格調を保つ。 colors: primary: '#0D0D4D' background: '#FAFAFA' surface: '#FEFEFD' cta: '#C42A2B' on-cta: '#FFFFFF' accent-1: '#C0393B' text: '#333333' accent-2: '#989168' dark-section: '#2B2346' tint-1: '#D5E2F3' line: '#C7D1D9' text-muted: '#8C919E' background-alt: '#EDEFEE' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.1em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 21px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Cormorant Garamond fontSize: 30px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 20px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px cta-band: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-lg}' height: 260px heading-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 44px number-feature: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 70px trend-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 300px gradient-subheader: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 36px check-list: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 38px circle-diagram: backgroundColor: '{colors.primary}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 180px flow-step: textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 200px --- # DESIGN.md — 濃紺×明朝の商社特化型転職エージェント LP（Navy Mincho Corporate Career Agent LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、上品・高級、情報量多め・訴求型 - **キーワード**: 濃紺・明朝体・ビジネス写真・白カード・赤CTA・大きなセリフ数字 - **地の質感**: フラットな淡グレー地に白カード。写真は青みの寒色寄りで、淡い水色〜ラベンダーのグラデ帯をアクセントに使う - **形**: 角はほぼ直角。CTA のみピル型、番号バッジと図解は正円 - **温度感**: 寒色寄りで落ち着いた知的な温度感。赤の強調文字で温度を少し足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0D0D4D` | 見出し帯・番号バッジ・見出し文字の濃紺 | 8% | 画素の実測 | | `background` | `#FAFAFA` | ページ地の淡グレー | 45% | 画素の実測 | | `surface` | `#FEFEFD` | 本文カードの白 | 20% | 画素の実測 | | `cta` | `#C42A2B` | 主CTAボタンの赤 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#C0393B` | 本文中の強調テキスト赤 | 0% | 推定 | | `text` | `#333333` | 本文の濃いグレー | 3% | 推定 | | `accent-2` | `#989168` | 大きな番号数字のくすみゴールド | 0% | 画素の実測 | | `dark-section` | `#2B2346` | CTA帯・サポート見出し帯の濃紺写真地 | 8% | 画素の主要色に補正 | | `tint-1` | `#D5E2F3` | 小見出し帯の水色〜ラベンダーグラデ | 2% | 画素の実測 | | `line` | `#C7D1D9` | リスト区切り線・縦罫 | 0% | 画素の主要色に補正 | | `text-muted` | `#8C919E` | 英字サブ見出しのグレー | 0% | 画素の主要色に補正 | | `background-alt` | `#EDEFEE` | 切替用のやや濃いグレー地 | 8% | 画素の実測 | - 地は淡グレー、読み物は白カードに載せて区切る - 見出しと番号バッジは必ず濃紺、文字色も濃紺で統一 - 赤は CTA ボタンと本文の強調フレーズだけに限定 - 大きなセリフ数字はくすみゴールドで格調を出す - CTA 帯は濃紺系写真に暗いオーバーレイを敷き白文字 - 小見出し帯は水色→ラベンダーの淡いグラデで柔らげる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVキャッチ・大セクション見出し | 明朝 | Shippori Mincho | 700 | 36px | 1.35 | 0.1em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 600 | 28px | 1.4 | 0.08em | | `headline-md` | カード見出し・帯見出し | 明朝 | Noto Serif JP | 600 | 21px | 1.5 | 0.05em | | `headline-sm` | 小見出し・チェックリスト項目 | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.05em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `accent` | 大きな番号数字・英字サブ見出し | 欧文セリフ | Cormorant Garamond | 600 | 30px | 1.0 | 0.05em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 500 | 16px | 1.0 | 0.1em | - 見出しは明朝、本文はゴシックで役割を分ける - 見出し下に英字サブ見出しを小さくグレーで添える - 見出しの一部の語を太く大きくして強調する - 番号は欧文セリフの大きな数字＋ピリオド - 本文の強調は太字でなく赤文字で行う - 字間はやや広め、行間 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-1f16b4fb`（元 LP の URL から採番） - **元 LP**: https://www.kcgcareer.com/service/trading_lp/career-change-support/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。