--- version: alpha name: Fresh Green Career Change Recruitment LP description: 鮮やかな緑を主役に、青緑・青のグラデーション帯と淡い水色の地を交互に重ねた転職エージェント向け LP。太いゴシックの見出しと緑の手書き風下線で親しみを出し、オレンジの CTA で申込へ誘導する。実績数字、事例タブ、ステップ、多段フォームまで情報を順に積み上げる訴求型の構成。 colors: primary: '#39C96A' secondary: '#139C92' accent-1: '#095CD6' cta: '#FE6C02' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F2F7FB' tint-1: '#DFF3E7' dark-section: '#42526D' surface: '#F0F0F0' text: '#010101' marker: '#F7F945' accent-2: '#D9301A' text-muted: '#979C99' cta-accessible: '#C55301' primary-accessible: '#258746' secondary-accessible: '#0F7E76' typography: display: fontFamily: Noto Sans JP fontSize: 38px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.45 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Roboto fontSize: 48px fontWeight: 900 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px 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.md}' height: 80px button-secondary: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 64px pill-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 52px brush-underline: textColor: '{colors.primary}' typography: '{typography.display}' height: 16px case-tabs: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 540px stat-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 260px voice-bubble: backgroundColor: '{colors.background-alt}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 270px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 80px form-step: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 650px --- # DESIGN.md — 爽やかグリーン×ブルーの転職支援 LP（Fresh Green Career Change Recruitment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、ポップ・元気 - **キーワード**: 鮮やかグリーン・青グラデ帯・太ゴシック見出し・筆風の緑下線・オレンジCTA・人物写真とイラストの併用 - **地の質感**: フラットな面にやわらかなグラデーションと光のぼかしを重ねる。ボタンは軽い縦グラデと影で立体感を出す - **形**: 角丸 4〜8px の四角いカードとボタン。吹き出しはピル型。セクション境界は斜めや緩いカーブ - **温度感**: 明るく、やや涼しい。誠実さの中に前向きな元気さがある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#39C96A` | ブランドグリーン（帯・ボタン・強調文字） | 15% | 画素の実測 | | `secondary` | `#139C92` | 青緑（CTA 帯・企業側カード） | 6% | 画素の主要色に補正 | | `accent-1` | `#095CD6` | 濃い青（ネットワーク訴求のグラデ帯） | 5% | 画素の実測 | | `cta` | `#FE6C02` | 主 CTA のオレンジ | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 18% | 画素の実測 | | `background-alt` | `#F2F7FB` | 淡い水色グレーの地 | 13% | 画素の実測 | | `tint-1` | `#DFF3E7` | 淡いミントの地（Q&A導線・フォーム周り） | 7% | 画素の実測 | | `dark-section` | `#42526D` | 悩み提起のスレートネイビー帯 | 7% | 画素の主要色に補正 | | `surface` | `#F0F0F0` | フォーム枠の薄いグレー | 6% | 画素の実測 | | `text` | `#010101` | 見出し・本文の黒 | 4% | 画素の実測 | | `marker` | `#F7F945` | 濃色帯上の強調イエロー | 1% | 画素の実測 | | `accent-2` | `#D9301A` | 必須ラベルの赤 | 0% | 推定 | | `text-muted` | `#979C99` | 非選択タブのグレー | 1% | 画素の主要色に補正 | | `cta-accessible` | `#C55301` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#258746` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#0F7E76` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い水色グレーを交互に使い、緑ベタ帯は 1〜2 か所に絞る - 緑は見出しの強調語、下線、ボタン、タブ、ステップ番号に使う - CTA だけをオレンジにして、緑系の中で目立たせる - 数字訴求は濃い青から水色へのグラデ帯に白文字で載せ、要点は黄色で強調する - 悩み提起はスレートネイビーの帯に白文字と緑のチェックを組み合わせる - 対比カードは緑（求職者）と青緑（企業）で塗り分ける - `button-primary` は文字 `#FFFFFF` × 背景 `#FE6C02` のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C55301`、4.55:1）を使う。 - `button-secondary` は文字 `#FFFFFF` × 背景 `#39C96A` のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#258746`、4.53:1）を使う。 - `pill-label` は文字 `#FFFFFF` × 背景 `#39C96A` のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#258746`、4.53:1）を使う。 - `stat-circle` は文字 `#FFFFFF` × 背景 `#39C96A` のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#258746`、4.53:1）を使う。 - `voice-bubble` は文字 `#139C92` × 背景 `#F2F7FB` のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#0F7E76`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューや解決の大見出し | ゴシック | Noto Sans JP | 900 | 38px | 1.3 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.45 | 0.04em | | `headline-md` | リード見出し・強調コピー | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.04em | | `headline-sm` | カード見出し・ステップ名 | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.75 | 0.03em | | `note` | プロフィール・注意書き | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `accent` | 実績数字・CASE・STEP 番号 | 欧文サンセリフ | Roboto | 900 | 48px | 1.1 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.3 | 0.05em | - 見出しは中央揃えで 2〜3 行に分け、キーワードだけ一回り大きくする - 強調語は緑か黄色の文字色にし、二重引用符で囲んで目立たせる - 最重要の見出しには緑の筆風カーブ下線を引く - 数字は大きな欧文太字にし、単位は小さく添える - 本文は 14px 前後、行間 1.75 で読みやすくする - 白い帯にのせた白抜き文字のラベルで見出しの前置きをする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。2 択ボタン・対比カードだけ 2 列 - **本文ブロックの幅**: 画面幅の約 91% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は 16〜20px - セクション内は見出し→リード→カード→ボタンの順で中央揃え - 事例カードは白地に細い緑の線と影をつける - ステップは縦に並べ、カード同士を細い線でつなぐ - 吹き出しの声カードは横スクロールで並べる ## Elevation & Depth - ボタンは下方向に 2〜4px のやわらかい影 - 事例カードやフォームは薄い影で地から浮かせる - TOP ボタンは白い円形にふんわり影 - 写真やグラフィックの背景には光のぼかしを敷く ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は切り抜きで背景になじませる。アバターとイラストは円形にトリミング - **セクション境界**: 斜めカットと緩いカーブ。単色帯の切り替えもある - 主ボタンは角丸 6px 程度の横長長方形にし、右端に丸い矢印アイコンを置く - 見出しラベルはピル型の吹き出しにし、下に小さな三角をつける - ステップ番号は緑グラデの円にアイコンを入れる - タブは角丸の四角で、選択中のものだけ緑にして三角をつける ## Components - **オレンジ主 CTA**（`button-primary`）: 上に小さな補足文、下に大きな太字。右端に丸い矢印 - **緑サブボタン**（`button-secondary`）: 縦グラデの緑ボタン。下向き矢印か右矢印の丸アイコンつき - **吹き出し見出しラベル**（`pill-label`）: 緑かネイビーのピル型にして、下に三角をつける - **筆風下線**（`brush-underline`）: 大見出しの下に引く、緑の太いカーブ線 - **事例タブとカード**（`case-tabs`）: CASE タブを 3 つ並べ、白カードにアバター・前職→現職の矢印比較・緑の小見出し帯を入れる - **実績数字サークル**（`stat-circle`）: 白か緑グラデの円の中に、ラベルと大きな数字を置く - **声の吹き出しカード**（`voice-bubble`）: 淡い水色の吹き出しに青緑の太字で声を書き、下に円形イラストを置く - **ステップカード**（`step-card`）: 緑の円アイコン、STEP 番号、縦線区切り、項目名の順に並べ、細い緑枠で囲む - **多段入力フォーム**（`form-step`）: グレーの枠に Step 表示を置く。項目ごとに赤い必須ラベルと白い入力欄を並べ、最後にオレンジの次へボタン ## Do's and Don'ts **Do** - 緑とオレンジの役割分担を守る（緑はブランドと誘導、オレンジは申込） - 見出しは太いゴシックにし、強調語を大きく緑にする - 悩みは緑チェックで 3 つ箇条書きにする - 数字実績は大きく見せ、媒体のスクリーンショットを端末モックに入れて添える - 白地と淡い水色地を交互に置いて、セクションを区切る - 人物は明るいオフィスで撮った、笑顔のビジネス写真にする **Don't** - CTA を緑や青にしない - 明朝体や細い書体を見出しに使わない - 暗い背景を多用しない（濃色はネイビー帯と青帯だけ） - 角丸を大きくしすぎてポップに寄せない - 本文を左右いっぱいに詰め込まない - 強調色を黄色・緑・オレンジ以外に増やさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと電話番号の提示）: 白地。左にロゴ、右に緑の電話番号と受付時間 2. **ファーストビュー**（サービスの価値を一言で伝える）: 緑帯のリードの下に、人物写真 2 名と白座布団の大見出しを置く。中央に円形バッジ 3. **CTA**（早期の申込誘導）: 青緑グラデ帯にリード文を載せ、オレンジの大ボタンを置く 4. **疑問への導線**（知りたい内容へジャンプさせる）: ミント地に、緑ボタンを 2 列でアンカーリンクとして並べる 5. **悩みの提起**（ターゲットの不安への共感）: ネイビー帯。ピル見出しの下に緑チェックで不安を 3 つ並べ、右に考え込む人物を置く 6. **解決提示**（サービスの考え方を示す）: 緑の吹き出しラベル、筆風下線の大見出し、笑顔の人物を置き、緑と青緑の対比カードで双方のニーズを示す 7. **実績・ネットワーク**（信頼性の裏付け）: 青グラデ帯に黄色強調のコピー、白い円の実績数字、端末モック、取引先ロゴの横並び 8. **追加ネットワーク**（紹介先の幅広さを示す）: 緑の大きな強調文と大きな円に入れた数字。媒体名ラベルつきの PC モックを 2 つ 9. **転職事例**（成功イメージの具体化）: CASE タブと白カード。アバター、前職→現職の比較、きっかけと感想 10. **担当者紹介**（人による安心感）: 緑ベタ地に白座布団のラベル、円形の顔写真、白カードのメッセージとプロフィール 11. **スタッフの声**（転職後の前向きな実感の共有）: 緑地に黄色の強調見出し。吹き出しと円形イラストを横スクロールで並べる 12. **サポート内容**（支援の流れを示す）: 淡い水色地。緑帯のリードの下に、STEP カード 4 つを線でつなぐ 13. **申込フォーム**（無料相談の登録）: ミント地に緑の見出し。グレー枠の 3 段階フォームの最後にオレンジの次へボタン 14. **フッター**（著作権表示）: グレーの帯に小さな白文字。右下に円形の TOP ボタン ## Imagery - 20〜30 代のスーツ姿の男女を、明るいオフィスで自然光の下、笑顔や電話中のポーズで撮る - 人物は背景を飛ばした切り抜きにし、淡い水色の光ぼかしと合成する - 事例と声にはフラットなビジネスパーソンのイラストを使い、円形背景に胸から上を描く - 媒体や Web サービスはノート PC やタブレットのモックに入れて見せる - 背景には街並み写真をうっすら敷き、青グラデと重ねる - アイコンは白い線画にして緑の円に入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 960px 前後に収め、写真の帯だけを全幅に広げる - ファーストビューは人物 2 名を左右に分け、中央に見出しを置く - PC の悩みリストは 1 行の横長にし、人物を右に置く - 事例カードは PC で横長 2 列にし、比較を右側に置く - 声カードは PC で 5 つを 1 行に並べ、ステップは 4 列横並びにする - フォームは PC で項目名を左、入力欄を右に置く 2 列にする ## 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-27a2dc70`（元 LP の URL から採番） - **元 LP**: https://www.jt-tsushin.jp/agent - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。