--- version: alpha name: Soft Mint Lavender Career Support LP description: 白とグレージュの地に、ミントとラベンダーの淡いグラデーションを重ねた女性向け転職支援 LP。大きな細身セリフの英字見出しを透かしで置き、数字を大きく見せる実績カードや、悩み吹き出しと解決ボックスの対比で安心感を出す。CTA は藍紫の帯の上に白カードを置き、緑のピルボタンで LINE 相談へ誘導する。 colors: primary: '#14C2A5' secondary: '#7B85BD' cta: '#53AF6E' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F1F0EB' tint-1: '#B7E9E0' tint-2: '#EADCF5' surface: '#EEF0FD' text: '#2A2A2A' text-muted: '#59626A' accent-1: '#BCA7CD' dark-section: '#17254C' line: '#DECAB2' cta-accessible: '#3D8351' secondary-accessible: '#858EC2' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em accent: fontFamily: Playfair Display fontSize: 44px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 26px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Montserrat fontSize: 9px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 2px lg: 4px 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-line: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px cta-band: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 260px point-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 130px worry-circle: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 105px solution-box: backgroundColor: '{colors.background}' typography: '{typography.body-md}' height: 300px voice-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 460px faq-item: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 36px sticky-bar: backgroundColor: '{colors.dark-section}' typography: '{typography.label-button}' height: 70px --- # DESIGN.md — ミント×ラベンダーの淡色転職支援 LP（Soft Mint Lavender Career Support LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: やさしい・柔らかい、清潔・爽やか、信頼・誠実、シンプル・ミニマル - **キーワード**: 淡いミント・ラベンダーグラデ・透かし英字見出し・大きな数字・LINE 相談・女性向け - **地の質感**: マットでフラット。背景にぼかした色玉や線画イラストを薄く散らし、空気感を出す - **形**: 角丸はほぼ使わない直線的な枠と細線フレーム。ボタンだけピル型、悩みは正円で囲む - **温度感**: やや涼しげ。ミントとラベンダーの寒色寄りパステルを、温かい人物写真で中和する ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#14C2A5` | ブランドのミント。数字強調や見出し帯に使う | 3% | 画素の実測 | | `secondary` | `#7B85BD` | CTA 帯の藍紫。見出し帯にも使う | 6% | 画素の実測 | | `cta` | `#53AF6E` | LINE 相談ボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の地色 | 32% | 画素の実測 | | `background-alt` | `#F1F0EB` | サポート・お客様の声のグレージュ地 | 9% | 画素の実測 | | `tint-1` | `#B7E9E0` | お客様の声カードの面 | 8% | 画素の実測 | | `tint-2` | `#EADCF5` | 職種紹介セクションのラベンダー地 | 6% | 画素の実測 | | `surface` | `#EEF0FD` | 解決ボックス内の薄い面 | 2% | 画素の実測 | | `text` | `#2A2A2A` | 見出し・本文の濃い文字 | 4% | 画素の実測 | | `text-muted` | `#59626A` | 補足本文 | 2% | 画素の実測 | | `accent-1` | `#BCA7CD` | ポイント番号のラベンダー数字 | 0% | 画素の実測 | | `dark-section` | `#17254C` | 固定追従バーの濃紺 | 1% | 画素の実測 | | `line` | `#DECAB2` | 締めのメッセージ枠のベージュ線 | 0% | 画素の実測 | | `cta-accessible` | `#3D8351` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#858EC2` | AA を満たす補正値（計算） | | 計算 | - 地は白とグレージュを交互に置き、セクションの区切りを色面で示す - ミントとラベンダーはグラデーションで混ぜて、英字見出しや帯、矢印に使う - 強調したい本文はミントの太字で示す。もう一つの話題ではラベンダー寄りの青紫を使う - CTA は必ず藍紫の全幅帯の中に白カードを置き、緑のボタンを載せる - 濃い色は追従バーの濃紺だけにして、全体はパステルで明るく保つ - `button-line` は文字 `#FFFFFF` × 背景 `#53AF6E` のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#3D8351`、4.6:1）を使う。 - `cta-band` は文字 `#2A2A2A` × 背景 `#7B85BD` のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#858EC2`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー（キーワードは枠で囲む） | ゴシック | Zen Kaku Gothic New | 700 | 34px | 1.5 | 0.1em | | `accent` | 透かしの英字セクション名とポイント番号 | 欧文セリフ | Playfair Display | 400 | 44px | 1.1 | 0.02em | | `headline-lg` | セクションの日本語見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.6 | 0.05em | | `headline-md` | メリット見出し・導入の明朝コピー | 明朝 | Noto Serif JP | 400 | 26px | 1.8 | 0.08em | | `headline-sm` | カード見出し・Q の質問文 | ゴシック | Noto Sans JP | 700 | 15px | 1.7 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.05em | | `note` | 英字ラベル・名前や年齢 | 欧文サンセリフ | Montserrat | 400 | 9px | 1.4 | 0.1em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | - セクション名は大きな細身セリフの英字をグラデーションで薄く置き、下に日本語の太字見出しを重ねる - 実績の数字だけ 2〜3 倍の大きさにして、色をミントかラベンダーにする - メリットの番号は細身サンセリフの大きな 2 桁数字にし、横に明朝の見出しを置く - 本文は小さめの 12px で行間を広く取る - 英字の小ラベルは角かっこで挟んで添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央寄せの 1 カラムで、ポイントと声だけ 3 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - カードは左右 12〜16px の余白を残して全幅に近い幅にする - 悩みは正円 3 つを横に並べる - CTA ブロックは同じ型でページ内に 3〜4 回繰り返す - メリットは番号、見出し、本文 2 段落の順に縦に積む - 見出しと本文の間は 24px 前後あける ## Elevation & Depth - 影はほとんど使わず、フラットな面と枠線で階層を作る - 声のカードは白い太枠の中に色面を入れて浮かせる - 背景のぼかし色玉で奥行きを出す ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンはピル型。 - **写真の切り抜き**: 四角の全幅か、カード上部の横長。相談者のアイコンだけ正円 - **セクション境界**: 直線で色面を切り替える。下向きの三角矢印で話をつなぐ - ポイントカードは太い淡色フレームの四角にする - FV のキーワードは細い四角枠で囲む - 締めのメッセージは四隅を斜めに切った額縁枠にする - FAQ の開閉ボタンは小さな正方形で、中に＋を置く ## Components - **LINE 相談ボタン**（`button-line`）: 緑のピル型ボタン。左に LINE アイコン、白の太字 - **CTA 帯ブロック**（`cta-band`）: 藍紫の全幅帯の上に白カード。かっこで挟んだ見出し、短い説明、緑の強調コピー、ボタンの順に並べる - **実績ポイントカード**（`point-card`）: 淡いミントかラベンダーの太枠に、セリフの POINT 番号と大きな数字を入れる - **悩み円**（`worry-circle`）: 細い黒線の正円の中に、悩みを短い 2 行で書く - **悩み解決ボックス**（`solution-box`）: 色帯の見出し付きの枠ボックス。下にロゴ入りタブと薄い色面の解決文を置く - **お客様の声カード**（`voice-card`）: 白枠の中に上は写真、下はミントの面。VOICE 番号、太字の見出し、本文、右下に名前と年齢 - **FAQ 行**（`faq-item`）: グラデーションの Q 四角と質問文、右端に＋の正方形ボタン - **追従 CTA バー**（`sticky-bar`）: 画面下に固定する濃紺のバー。かっこ付きのコピーと緑のボタン ## Do's and Don'ts **Do** - 英字のセクション名はミントからラベンダーへの淡いグラデーションで大きく置く - 実績は数字だけを大きく色付けし、単位や前後の言葉は小さくする - 悩みは人物アイコンと明朝の吹き出し文で出し、すぐ下に解決ボックスを置く - CTA は同じデザインのまま繰り返し、迷わせない - 写真は明るく自然光で、笑顔の女性を使う **Don't** - 原色や濃いグラデーションを広い面に使わない - 角丸の大きいカードや強い影を使わない - 本文を太字だらけにしない。強調は 1 段落に 1 か所まで - 黒い背景のセクションを入れない（濃い色は追従バーだけ） - 派手な装飾フォントは使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（対象者とサービスを一目で伝える）: 明るいオフィスで笑う女性の写真の上に、枠付きキーワードの大きなコピーと月桂樹の実績バッジを置く 2. **悩みの提起**（対象者の不安に共感する）: 明朝の大きな見出し、悩みの正円 3 つ、縦のグラデーション帯、かっこ枠の応援メッセージ 3. **ポイント**（実績を数字で示す）: 淡い太枠のカードを 3 つ縦に並べ、セリフの番号と大きな数字を入れる 4. **CTA**（LINE 相談へ誘導する）: 藍紫の帯に白カードと緑のピルボタン 5. **メリット**（転職で得られるメリットを説明する）: 写真の帯見出しのあと、大きな番号、グラデーション下線付きの明朝見出し、本文を 3 回繰り返す 6. **サポート内容**（支援の中身を伝える）: 全幅写真とグレージュの地に、透かしの英字と短い本文 7. **不安の解消**（よくある不安に答える）: 線画イラストを散らしたミントの地に、人物アイコンと吹き出し、三角矢印、解決ボックスを並べる 8. **職種紹介**（働ける仕事の例を示す）: ラベンダーの地に番号と職種名、写真のスライダーを置く 9. **お客様の声**（体験談で信頼を高める）: グレージュの地に、写真とミントの面を組んだ声カードを 3 枚、最後に額縁枠のメッセージ 10. **よくある質問**（最後の疑問を解消する）: ぼかし色玉の背景に、Q 四角と＋ボタンのアコーディオン 11. **最終 CTA**（申し込みを後押しする）: 藍紫の CTA 帯と、濃紺の追従バー ## Imagery - 20〜30 代女性の明るい笑顔の写真。白やベージュの服で、自然光のオフィスやカフェで撮る - 相談している場面は暖色の室内で、横顔を入れて対話感を出す - 背景は白飛び気味のハイキーにして、淡い配色になじませる - 地には服や小物の細い線画イラストを薄いミントで散らす - ミントやラベンダーのぼかし円を背景の飾りに置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 60% 幅のコンテンツにし、左右に余白とぼかし色玉を見せる - PC の FV は写真を全幅にし、右側に LINE 相談カードを重ねる - PC ではポイントと声のカードを 3 列に並べる - PC ではメリットを番号と本文の 2 列にする - PC は右上に追従 CTA を置く。SP は画面下の固定バーにする ## 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-9940ab0f`（元 LP の URL から採番） - **元 LP**: https://novel-group.co.jp/career-tag/occupation/nightwork - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。