--- version: alpha name: Fresh Lime Green Career Support LP description: ほぼ黒の深緑とライムグリーンを軸に、白と淡い若草色の地を交互に使った転職・学習支援サービスの LP。白カードと柔らかい影、英字の小見出し、句点で終わる太字ゴシック見出しで、清潔で信頼できる印象を作る。 colors: primary: '#84CC3B' secondary: '#4A7F1E' cta: '#82D134' on-cta: '#111A0C' background: '#FEFEFE' background-alt: '#F4FBE9' surface: '#FFFFFC' dark-section: '#0B1306' on-dark: '#FAFEF9' text: '#0F1209' text-body: '#55594F' line: '#EBEBE3' tint-1: '#F4FDE4' text-muted: '#9A9A92' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.06em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.15em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-sm: fontFamily: Montserrat fontSize: 36px fontWeight: 800 lineHeight: 1.0 rounded: sm: 6px md: 10px lg: 14px full: 999px spacing: unit: 8px card: 20px section: 80px 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.md}' height: 52px sticky-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 54px eyebrow-label: textColor: '{colors.secondary}' typography: '{typography.accent}' height: 16px photo-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 440px number-badge: backgroundColor: '{colors.dark-section}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 48px result-block: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 195px pill-tag: backgroundColor: '{colors.tint-1}' textColor: '{colors.secondary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 30px compare-table: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 560px faq-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 85px browser-mock: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.md}' height: 200px --- # DESIGN.md — 深緑×ライムの清潔な転職支援 LP（Fresh Lime Green Career Support LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 清潔・爽やか、信頼・誠実、クール・先進的、シンプル・ミニマル - **キーワード**: 深緑・ライムグリーン・白カード・英字ラベル・オフィス写真・無料訴求 - **地の質感**: フラットな面に淡い影。濃色セクションは中央が少し明るい深緑のビネット - **形**: 角丸8〜12px のカード、円形の番号バッジ、ピル型タグ - **温度感**: やや爽やかで落ち着いた中間温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#84CC3B` | ブランド緑（強調語・番号・線） | 2% | 画素の実測 | | `secondary` | `#4A7F1E` | 見出し強調語の濃い緑 | 1% | 推定 | | `cta` | `#82D134` | 主 CTA ボタン | 1% | 画素の実測 | | `on-cta` | `#111A0C` | CTA 上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 基本の白地 | 30% | 画素の実測 | | `background-alt` | `#F4FBE9` | 淡い若草色の交互地 | 25% | 画素の実測 | | `surface` | `#FFFFFC` | カード面 | 15% | 画素の実測 | | `dark-section` | `#0B1306` | 比較表・結論・最終CTA・フッターの深緑地 | 12% | 画素の実測 | | `on-dark` | `#FAFEF9` | 濃色地上の文字 | 1% | 画素の実測 | | `text` | `#0F1209` | 見出し文字 | 3% | 画素の実測 | | `text-body` | `#55594F` | 本文 | 3% | 推定 | | `line` | `#EBEBE3` | 区切り線・カード枠 | 0% | 画素の主要色に補正 | | `tint-1` | `#F4FDE4` | ピルタグの淡緑面 | 0% | 画素の実測 | | `text-muted` | `#9A9A92` | 注釈・打消し価格 | 0% | 推定 | - 地は白と淡い若草色をセクションごとに交互に切り替える - 濃い深緑は結論ブロック・比較表・最終CTA・フッターに限定する - 見出しの1語だけをライムまたは濃い緑で色替えする - ライムは CTA・番号・チェックアイコン・英字ラベル前の短線に使う - 濃色地の上ではライムを強調語に使い、白文字と組む - 比較表は自社列だけを少し明るい緑面にして目立たせる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.35 | 0.02em | | `headline-lg` | セクション見出し（句点止め） | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.4 | 0.04em | | `headline-md` | カード見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.45 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.06em | | `accent` | 英字の小見出しラベル | 欧文サンセリフ | Montserrat | 700 | 11px | 1.2 | 0.15em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.03em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | | `headline-sm` | 番号の大数字・金額 | 欧文サンセリフ | Montserrat | 800 | 36px | 1.0 | 0.0em | - 見出しは極太ゴシックにし、句点「。」で言い切る - 見出しの上に、短い緑線と大文字の英字ラベルを置く - 本文は行間を約2倍と広めにし、灰緑の文字色にする - 数字（番号・金額）は欧文太字で大きくする - 見出しはセンター揃えと左揃えをセクションごとに使い分ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは縦積み - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約14px で、カードはほぼ全幅に置く - セクションの上下には80〜100px の余白をとる - 特長はカード＋記号（＋・＝）でつないで式のように見せる - ステップは大きな番号と細い区切り線で並べる - 比較表は横スクロールにする ## Elevation & Depth - カードは淡い緑みの大きなぼかし影（0 10px 30px rgba(60,90,20,.08)）をつける - 結論ブロックの深緑カードには、やや強い影をつける - CTA ボタンはライムの柔らかい発光影をつける - 画面モックは薄い枠と影でブラウザ風に浮かせる ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 14px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸8px の横長長方形で、カード上部に収める - **セクション境界**: 直線で背景色だけを切り替える - CTA ボタンは角丸8px の長方形にする - タグ・バッジはピル型にする - 番号は円形の塗りバッジにする - FAQ の開閉アイコンは淡緑の円に＋を入れる ## Components - **主 CTA ボタン**（`button-primary`）: ライムの面に黒太字と右矢印を置く。発光影つき - **追従 CTA バー**（`sticky-cta`）: 画面下に固定するほぼ全幅のライムボタン - **英字ラベル**（`eyebrow-label`）: 短い緑線＋大文字英字。見出しの上に置く - **写真カード**（`photo-card`）: 白カードの中に角丸写真・太字見出し・本文を入れる。中央揃え - **円形番号**（`number-badge`）: 直径約48px の円にライムの欧文数字を入れる。白地では深緑、または緑塗りに黒字 - **結論ブロック**（`result-block`）: 深緑のカードに白見出しを置き、数字だけライムにする - **ピルタグ**（`pill-tag`）: 淡緑の面に濃緑の太字を入れる。カテゴリや増加額の表示に使う - **比較表**（`compare-table`）: 深緑地で、自社列を明るい緑面にする。丸印＋短文で横スクロール - **FAQ 行**（`faq-row`）: 太字の質問、右に＋円、下に細線 - **画面モック**（`browser-mock`）: 灰色バーに3つの丸を並べたブラウザ枠。中にサービス画面を表示する ## Do's and Don'ts **Do** - 白と若草色の地を交互にしてリズムを作る - 見出しの1語だけを緑にして要点を示す - 英字ラベル＋句点止めの見出しで、各セクションを統一する - 写真は明るいオフィスで自然光のトーンにそろえる - 無料や金額は大きな欧文数字で見せる - 注釈は灰色の小さな文字で必ず添える **Don't** - 赤や橙など、緑系以外の強調色を使わない - 濃色セクションを連続させない（要所だけに置く） - カードに太い枠や濃い影をつけない - 明朝体や丸ゴシックを混ぜない - ボタンをピル型や細い線だけのボタンにしない - 写真に強いフィルターや派手な加工をかけない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（無料の価値を一言で伝える）: 暗い緑を重ねたオフィス写真の上に、白の極太見出しを置き最後の語をライムにする。ピルバッジとチェック4項目、注釈を添える 2. **無料の理由**（無料への疑問を解消する）: 白地。写真カード2枚を＋と＝でつなぎ、深緑の結論ブロックで締める 3. **無料で使える内容**（提供機能を具体的に見せる）: 若草色の大枠の中に、円番号＋見出し＋画面モックを3つ並べる。最後に打消し価格→0の比較カード 4. **サービス紹介・対象者**（共感を得る）: 若草地に左揃えの見出しを置く。写真カード4枚で悩み型の見出しを並べる 5. **今必要な理由**（時代背景で動機づける）: 白地。深緑の円番号つき写真カードを3つ並べる 6. **選ばれる理由**（強みを示す）: 若草地。小番号＋大見出し＋本文＋写真を区切り線で3つ並べる 7. **ご利用の流れ**（手順を簡潔に示す）: 白地。大きなライム数字と短い見出しを細線で区切って4段にする 8. **他社比較**（優位性を示す）: 深緑地の比較表。自社列を明るくし、ライムの丸印をつける 9. **追加特典**（成約後の価値を伝える）: 若草地。ピルラベルつきの白カード2枚を下矢印でつなぐ 10. **学習ツール紹介**（サービス内容を見せる）: 白地。左揃えの見出しの下に、緑太字の強調文・ピルタグ群・ブラウザモックを置く 11. **キャリア事例**（成果のイメージを伝える）: 線画人物アイコン＋前職→新職＋打消し年収→大きな年収＋増加額ピルのカードを並べる 12. **よくある質問**（不安を解消する）: 白地。細線区切りのアコーディオンに＋円アイコンをつける 13. **最終CTA・フッター**（申込を促す）: 深緑のビネット地に白とライムの見出し、ライムのボタンを置く。フッターは黒緑地で英字見出しのメニュー ## Imagery - 明るい自然光のオフィスで、観葉植物と木のデスクを入れる - スーツやジャケット姿の20〜30代男女が、相談やPC作業をしている自然なシーン - 小物に緑のノートや植物を入れ、ブランドの緑となじませる - サービス画面はブラウザ枠つきのスクリーンショットで見せる - 事例の人物は細い線画で、服の一部だけをライムで塗る - FV 写真には深緑の半透明レイヤーを重ねて文字を読みやすくする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーにナビとライムの小さい CTA を並べる - PC の FV は左に文字、右に人物写真を置き、チェック項目は2列にする - 無料の理由は、カード2枚＋結論ブロックを横一列の式にする - 対象者は4列、時代背景と事例は3列のカードグリッドにする - 選ばれる理由は写真と文字を左右交互に置く - 比較表とステップは 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-14b649fc`（元 LP の URL から採番） - **元 LP**: https://agent.paset.co.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/）からご連絡ください。