--- version: alpha name: Steel Blue Executive Career LP description: くすんだスチールブルーと濃紺を主に、ライトグレーの地に白カードを重ねたハイクラス転職支援のLP。CTAだけを深い赤のグラデーションにして目立たせる。斜めのカットや薄い斜線テクスチャで知的で引き締まった印象にし、番号付きの理由・声・事例・流れ・FAQを順に並べる訴求型の構成。 colors: primary: '#5392B3' secondary: '#111C33' cta: '#B41503' on-cta: '#FFFFFF' background: '#FFFFFE' background-alt: '#DDDDDD' surface: '#E9E9E9' text: '#272727' text-body: '#444444' accent-1: '#4780A0' dark-section: '#3C4451' line: '#DDDAD7' tint-1: '#EEE9AB' on-dark: '#FFFFFF' typography: display: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 30px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 2px md: 4px lg: 6px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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.sm}' height: 56px number-tab: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 44px heading-bar: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 48px reason-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px voice-row: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 64px case-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 320px step-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 60px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 52px signup-form: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 220px --- # DESIGN.md — 鋼青×濃紺×赤CTAのハイクラス転職LP（Steel Blue Executive Career LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、クール・先進的、上品・高級、情報量多め・訴求型 - **キーワード**: ハイクラス・知的・ビジネス写真・斜めカット・白カード・赤CTA - **地の質感**: フラットな面に淡い斜線のグレーテクスチャ。写真の上には濃紺の半透明オーバーレイをかける - **形**: 角丸が小さい長方形のカード。セクション境界は斜めカットと下向きの三角。番号はリボン型のタブ - **温度感**: 寒色寄りでクール。CTAの赤だけが暖色の差し色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5392B3` | セクション帯・見出し帯のスチールブルー | 12% | 画素の実測 | | `secondary` | `#111C33` | 濃紺の見出しバー・番号タブ | 7% | 画素の主要色に補正 | | `cta` | `#B41503` | 主CTAボタンの深い赤 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFE` | カード・基本の地 | 25% | 画素の実測 | | `background-alt` | `#DDDDDD` | ライトグレーのセクション地 | 18% | 画素の実測 | | `surface` | `#E9E9E9` | 声セクションの淡いグレーのパネル | 5% | 画素の実測 | | `text` | `#272727` | 見出しの文字色 | 1% | 画素の実測 | | `text-body` | `#444444` | 本文 | 2% | 推定 | | `accent-1` | `#4780A0` | 強調文字・リンクの青 | 0% | 画素の主要色に補正 | | `dark-section` | `#3C4451` | 写真に重ねる濃紺のオーバーレイ帯 | 6% | 画素の実測 | | `line` | `#DDDAD7` | 区切り線・カードの枠 | 1% | 画素の主要色に補正 | | `tint-1` | `#EEE9AB` | フォーム入力欄の淡い黄 | 0% | 画素の実測 | | `on-dark` | `#FFFFFF` | 青帯・濃紺帯の上の白文字 | 1% | 画素の主要色に補正 | - 地はライトグレーとスチールブルーの帯を交互に置き、内容は白カードに載せる - 見出し帯と番号タブは濃紺。青帯の上の見出しは白抜きにする - 赤はCTAボタンだけに使う。左に濃い赤の『所要時間』ラベルを付ける - 本文中の強調は青い太字にする。色マーカーは使わない - 写真の背景には濃紺の半透明を重ね、文字は白で載せる - フッター最下段は黒の細い帯 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し（青の帯の上に白抜き） | ゴシック | Noto Sans JP | 700 | 28px | 1.4 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.03em | | `headline-md` | 理由カードの2行見出し（2行目は青で大きく） | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `headline-sm` | 声・事例・FAQの小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em | | `note` | 属性・出典・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | REASON・CASE・Stepのラベルと大きな番号 | 欧文サンセリフ | Montserrat | 600 | 30px | 1.1 | 0.05em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.03em | - 全体をゴシック1書体で組み、太さの違いで階層を作る - 番号や英字ラベルは欧文サンセリフにし、細めの字で大きく置く - 見出しは中央揃え、本文は左揃え - 年収などの数字は単位より大きく太くする - 本文の強調は青の太字にし、下線は付けない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央寄せの 2〜3 カラムカード - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードを地の色の上に浮かせて置き、中身をまとめる - 理由の詳細は1件ずつ大きなカードにし、上中央に番号タブを付ける - セクションの合間にCTA帯を何度も挟む - 声は『アイコン＋見出し＋本文』の横長の行を縦に並べる - 流れは縦の線でつないだステップ番号のリストにする ## Elevation & Depth - 白カードには影をほとんど付けず、地の色との差で浮かせる - CTAボタンには弱いドロップシャドウを付ける - 写真の背景は濃紺のオーバーレイで沈めて奥行きを出す ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。 - **写真の切り抜き**: 長方形。FVやセクションの写真は斜めにカットした平行四辺形で切り抜く - **セクション境界**: 斜めカットと、中央の下向き三角（V字） - ボタンは角丸の小さい長方形にする - 番号タブは下端が尖ったリボン型 - 人物アイコンは円形のイラスト ## Components - **所要時間ラベル付き赤CTA**（`button-primary`）: 左に濃い赤の時間ラベル、右に白い円の矢印。横に長い赤のグラデーションボタン - **番号リボンタブ**（`number-tab`）: カード上端の中央に置く濃紺のタブ。英字ラベルの下に大きな番号を入れる - **濃紺の見出しバー**（`heading-bar`）: 問いかけ型の見出しを白抜きで載せる横長の帯 - **理由の3連カード**（`reason-card`）: 青の地の上に白カード。小ラベル・大きな番号・青い見出し・短い説明を入れる - **お客様の声の行**（`voice-row`）: 円形アイコン・太字の見出し・属性を左に、本文を右に置く白い横長ボックス - **年収アップ事例カード**（`case-card`）: 顔写真の円・見出しの下に、黒の帯（転職前）と青の帯（転職後）を三角でつなぐ。下に『もっと読む』のボタン - **ステップの流れ**（`step-list`）: 縦の線と丸でつないだ濃紺の番号ラベルに、太字の見出しと説明を添える - **FAQアコーディオン**（`faq-item`）: 白いボックスの左に青いQ、右に＋を置く - **メール登録フォーム**（`signup-form`）: 白いカードに見出し・淡い入力欄・注意のリンク・赤い送信ボタン・ログインのリンクを入れる ## Do's and Don'ts **Do** - 青・濃紺・グレーの寒色で全体をまとめ、赤はCTAだけに使う - 第三者評価のバッジ（金のメダル）をFVとCTA帯に繰り返し置く - 理由・事例・ステップには番号を付けて順に見せる - 写真はスーツ姿のビジネスパーソンにし、濃紺を重ねて使う - 本文の要点を青い太字で強調する **Don't** - 丸みの強いピル型やポップな配色にしない - 赤をCTA以外の見出しや装飾に使わない - 派手なグラデーションや強い影を多用しない - 手書き風フォントやイラスト調の装飾を入れない - 白カードを使わずに文字を直接テクスチャに載せない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの価値と実績を伝え、すぐ登録させる）: 斜めに切った人物写真、青い帯の上の白抜きの大見出し、金のバッジ、右に登録フォームのカード 2. **取引企業のロゴ**（信頼性を示す）: 白地にロゴを4列×3段のグリッドで並べる 3. **課題の提起**（なぜ情報の質が大事かを示す）: 青の帯の見出し、濃紺の問いかけバー、グレーのボックスの本文、下向きの三角 4. **サービスの紹介**（企業側の情報に強いことを示す）: 平行四辺形の写真と、青い強調を入れた本文の2カラム 5. **強みの概要**（3つの理由を一覧で見せる）: 青の地に白カードを3枚並べ、番号を大きく入れる 6. **中間CTA**（登録を促す）: 濃紺を重ねた写真の背景に、白い見出しと赤CTA 7. **理由の詳細**（各理由を図やグラフで裏付ける）: グレーの斜線テクスチャの地に大きな白カード。番号タブ、2行の見出し、本文と写真や図、チャット風の吹き出し、棒グラフ 8. **実績バナーとCTA**（満足度No.1を訴えて登録させる）: 青の地に濃紺のバナー（メダル＋人物）、白い見出し、赤CTA 9. **お客様の声**（利用者の実感を伝える）: 淡いグレーのパネルに白い横長の行を5つ縦に積む。下にCTA 10. **キャリアアップ事例**（年収アップの具体例を見せる）: 青の地に2列の事例カード。転職前後の年収を帯で比べ、『もっと読む』を付ける 11. **登録の流れ**（手順を示して不安をなくす）: 青の地の白カードに5つのステップを縦に並べ、隅に写真を斜めに入れる 12. **よくある質問**（疑問を解消する）: グレーの地にQ付きのアコーディオンを6つ 13. **最終CTA**（登録で締める）: 暗い写真の背景の左に白い見出し、右に登録フォームのカード 14. **フッター**（会社情報と規約）: 白地にロゴ、リンク、注釈。最下段は黒の帯 ## Imagery - スーツ姿の30〜50代の男女が商談・面談する様子を、明るいオフィスの自然光で撮る - 背景の写真は彩度を落とし、濃紺〜青の半透明を重ねる - 人物アイコンは線のシンプルなイラストにし、淡い青の円に入れる - グラフは青のバーとグレーで描くフラットな横棒グラフ - 地には淡いグレーの斜めの帯のテクスチャを敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文幅を約720pxで中央寄せにする。SPは画面幅の90% - FVはPCでは写真の右にフォームを置く。SPでは写真・見出し・フォームを縦に積む - 理由の3連カードと事例の2列カードは、SPでは1列にする - 声の行はPCでは見出しと本文の左右2列。SPでは上下に積む - CTAボタンはSPでは横幅いっぱい、PCでは幅を約360pxにする ## 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-bc05bdcc`（元 LP の URL から採番） - **元 LP**: https://www.jac-recruitment.jp/entry/02/org-04/?pdm=1769567287147 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。