--- version: alpha name: Fresh Yellow-Green Gradient Recruitment LP description: クリーム色の地に黄色から若草色へのグラデーションを帯・見出しラベルに使った、明るく親しみやすい転職支援 LP。冒頭に登録フォームを置き、黄色の太いボタンと線画イラストのステップでやさしく案内する。 colors: primary: '#FED000' on-cta: '#222222' cta: '#F49A02' secondary: '#52C384' background: '#FEFBEA' surface: '#FEFEFE' background-alt: '#F6F6F6' tint-1: '#FFE984' tint-2: '#7BE89D' text: '#121010' text-body: '#4A4A4A' accent-1: '#E8352C' accent-2: '#5E7480' line: '#CCCCCC' cta-accessible: '#A36701' secondary-accessible: '#2E8454' accent-1-accessible: '#E6231A' typography: display: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em 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: Oswald fontSize: 22px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 64px 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.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 42px button-submit: backgroundColor: '{colors.cta}' textColor: '{colors.surface}' rounded: '{rounded.sm}' height: 32px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 34px section-title-lines: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 30px step-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 28px form-box: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 1500px badge-required: backgroundColor: '{colors.accent-1}' textColor: '{colors.surface}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 14px job-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 480px faq-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 190px --- # DESIGN.md — 黄色×若草グラデの爽やか転職支援 LP（Fresh Yellow-Green Gradient Recruitment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、ポップ・元気 - **キーワード**: 黄×緑グラデーション・クリーム地・線画イラスト・フォーム先出し・笑顔の人物写真・やさしい案内 - **地の質感**: フラットな面のみ。影はほとんど使わず、グラデーション帯と薄い罫線で区切る - **形**: 角丸 8px 前後の長方形ボタンとラベル。写真の片側を大きく丸く切り抜く - **温度感**: 暖かく明るい。黄の元気さと緑の安心感を合わせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FED000` | 主ボタン・ブランドの黄 | 3% | 画素の実測 | | `on-cta` | `#222222` | 黄ボタン上の文字 | 0% | 推定 | | `cta` | `#F49A02` | フォーム送信ボタンのオレンジ | 0% | 画素の実測 | | `secondary` | `#52C384` | 若草緑。見出しの横線・サブボタン・強調文字 | 1% | 画素の実測 | | `background` | `#FEFBEA` | クリーム色の基本地 | 30% | 画素の実測 | | `surface` | `#FEFEFE` | カード・FAQ・入力欄の白 | 24% | 画素の実測 | | `background-alt` | `#F6F6F6` | 求人一覧・FAQ の薄グレー地 | 16% | 画素の実測 | | `tint-1` | `#FFE984` | メッセージ帯の淡黄面 | 8% | 画素の実測 | | `tint-2` | `#7BE89D` | グラデーションの緑端 | 5% | 画素の実測 | | `text` | `#121010` | 見出し文字 | 1% | 画素の実測 | | `text-body` | `#4A4A4A` | 本文・フォームラベル | 2% | 推定 | | `accent-1` | `#E8352C` | 必須バッジの赤 | 0% | 推定 | | `accent-2` | `#5E7480` | 任意バッジのグレー青 | 0% | 推定 | | `line` | `#CCCCCC` | 入力枠・点線区切り | 0% | 推定 | | `cta-accessible` | `#A36701` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#2E8454` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#E6231A` | AA を満たす補正値（計算） | | 計算 | - 地はクリーム・白・薄グレーをセクションごとに交互に切り替える - フォーム背景とラベルは黄→若草緑の斜めグラデーションで目立たせる - 主ボタンは黄の塗りに黒文字、送信だけオレンジで区別する - 緑は見出し両脇の短い横線と強調語、サブボタンに限定する - 必須は赤、任意はグレー青の小バッジで色分けする - キャッチの強調語は黄と緑で一語ずつ色を分ける - `button-submit` は文字 `#FEFEFE` × 背景 `#F49A02` のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A36701`、4.63:1）を使う。 - `button-secondary` は文字 `#FEFEFE` × 背景 `#52C384` のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#2E8454`、4.58:1）を使う。 - `badge-required` は文字 `#FEFEFE` × 背景 `#E8352C` のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E6231A`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.3 | 0.02em | | `headline-lg` | メッセージの短い標語（黄緑グラデ文字） | ゴシック | Noto Sans JP | 700 | 28px | 1.3 | 0.04em | | `headline-md` | 横線付きのセクション見出し | ゴシック | Noto Sans JP | 700 | 19px | 1.4 | 0.04em | | `headline-sm` | ステップ名・カードタイトル・FAQ 分類 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `body-md` | 本文・フォームラベル | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em | | `note` | 注釈・日付・タグ | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 英字のスローガン・STEP 表記 | 欧文サンセリフ | Oswald | 500 | 22px | 1.2 | 0.04em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.04em | - 見出しは太いゴシックで中央揃えにする - セクション見出しの両脇に緑の短い横線を置く - 本文は 13px 前後で行間を広めにとる - キャッチの強調語だけ黄・緑の色文字にする - 求人の項目名は太字、値は通常の太さで左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。フォームの選択肢だけ 2 列 - **本文ブロックの幅**: 画面幅の約 91% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は約 16px - セクションの上下に 50〜70px の余白をとる - フォームは淡いクリーム色の箱に入れ、グラデーション地の上に置く - ステップはラベル帯・見出し・イラスト・説明文を縦に積む - 一覧の最後に幅 60% の黄ボタンを中央に置く ## Elevation & Depth - 影は基本なし。面の色の差で階層をつける - カードと FAQ は白の面を薄グレー地に置くだけにする - 入力欄は 1px のグレー枠のみ ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 40px。ボタンは角丸の長方形。 - **写真の切り抜き**: ファーストビュー下の白パネルは上の角を大きく丸め、メッセージ写真は左上を大きな円弧で切る。カード写真は角丸 8px - **セクション境界**: 直線で切り替え、地の色の差で区切る - ボタンとラベル帯は角丸 8px の長方形 - タグは細い枠線のピル型 - 必須・任意のバッジは角丸 2px の小さな四角 ## Components - **黄の主ボタン**（`button-primary`）: 幅いっぱいか 60% 幅の黄色い長方形。黒い太字を中央に置く - **フォーム送信ボタン**（`button-submit`）: オレンジの小さめボタンに白文字 - **緑のサブボタン**（`button-secondary`）: フッターの企業向け導線。緑の塗りに白い太字 - **横線付き見出し**（`section-title-lines`）: 中央の見出し文字の両脇に緑の短い線を置く - **グラデのステップ帯**（`step-label`）: 黄→緑の横グラデの帯に STEP 番号を太字で入れる - **登録フォーム**（`form-box`）: クリーム色の箱に白い入力欄。選択肢は 2 列のチェック枠。ラベル横に必須・任意バッジを付ける - **必須バッジ**（`badge-required`）: 赤地に白い小さな文字 - **求人カード**（`job-card`）: 角丸写真の下にタイトルと項目一覧。点線で区切り、ピル型タグを添える - **FAQ カード**（`faq-card`）: 上部に黄緑グラデの分類見出し、下の白い面に Q と A を並べる ## Do's and Don'ts **Do** - 黄→若草緑のグラデーションは帯・ラベル・背景面に繰り返し使う - イラストは黒の線画に黄だけで塗る - フォームはファーストビューの直後に置き、すぐ登録できるようにする - 見出しは中央揃えにし、両脇に緑の線を付ける - 写真は明るい笑顔の人物を使う **Don't** - 濃い色や黒の背景セクションを使わない - 強い影や立体的なボタンを使わない - 黄と緑以外の鮮やかな色を増やさない - 本文を詰めすぎない - イラストを多色のフルカラーにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとメニューを示す）: 白地の左にロゴ、右にハンバーガーメニュー 2. **ファーストビュー**（対象者と無料支援を伝える）: 笑顔の人物写真に、上角を丸めた白いパネルを重ねる。大見出し、色分けしたサブ見出し、一行説明、黄ボタンを置く 3. **メッセージ**（理念を短く伝える）: クリーム地にグラデ文字の標語と一文。英字スローガンと手のアイコンを添える 4. **登録フォーム**（すぐ会員登録してもらう）: 黄緑グラデの地にクリーム色のフォームの箱を置き、最後にオレンジの送信ボタン 5. **ご利用の流れ**（登録後の手順で安心させる）: グラデのSTEP帯、見出し、線画イラスト、説明文を 5 段積む 6. **支援内容**（サポートの中身を共感的に語る）: 淡黄の面に、角を円弧で切った写真と 3 段落の本文 7. **求人一覧**（実際の求人を見せる）: 薄グレー地に写真付きの求人カードを縦に 3 件並べ、黄ボタンで一覧へ誘導する 8. **企業向け情報**（コラム記事で信頼を得る）: グラデのラベルの下に記事カードを並べる。日付、タイトル、タグを付ける 9. **よくある質問**（不安を解消する）: グラデの分類見出しが付いた白カードに Q と A を 1 問ずつ入れる 10. **運営会社・フッター**（運営元を示し、企業向けへ誘導する）: 白地に会社ロゴと情報を中央揃えで置き、黄ボタンを添える。下段の薄グレー地に緑ボタンとコピーライト ## Imagery - 人物写真は明るいオフィスや屋外で撮った笑顔の自然光写真 - 求人写真はビジネスカジュアルの人物を横長に切る - ステップのイラストは黒い線画に黄一色の塗り。手書き風の英字を添える - 記事サムネイルは白地に緑の人物ピクトと太いゴシックの見出し、左右に緑の縦線 - ハートと両手のアイコンでやさしさを表す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーにナビゲーションと黄の登録ボタンを横に並べる - PC のファーストビューは左にテキスト、右に円形に切った人物写真 - ステップは PC で 5 列に横並びにする - 求人と記事は PC で 3 列のカードにする - 支援内容は PC で左に本文、右に写真の 2 カラム - フォームと FAQ は PC で中央の約 75% 幅に収める ## 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-71042806`（元 LP の URL から採番） - **元 LP**: https://deaf-works.jp/ - **解析に使った画像**: 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/）からご連絡ください。