--- version: alpha name: Indigo Gradient HR SaaS LP description: 濃紺から紫へのグラデーションと、黒・薄グレーの面を交互に使う BtoB 採用 SaaS の LP。小さな英字ラベルと大きな薄い英字透かしを見出しに添え、黒い四角ボタンと黒丸の矢印ボタンで落ち着いた先進感を出している。 colors: primary: '#132E9C' secondary: '#8955FE' accent-1: '#4848C1' cta: '#010101' on-cta: '#F7FBF8' background: '#FFFFFF' background-alt: '#ECF0F1' dark-section: '#000000' on-dark: '#FFFFFF' text: '#02040E' text-muted: '#7A7A7A' line: '#DCD4D5' surface: '#FEFEFE' accent-2: '#DC7C43' typography: display: fontFamily: Oswald fontSize: 84px fontWeight: 700 lineHeight: 1.0 headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 8px 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.sm}' height: 56px button-sub-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px link-arrow-circle: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px section-label: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px pillar-columns: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 300px feature-tile: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 110px stat-block: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 260px cta-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 440px faq-row: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 52px list-item-thumb: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 140px --- # DESIGN.md — 藍紫グラデと黒の採用支援SaaS LP（Indigo Gradient HR SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: クール・先進的、信頼・誠実、シンプル・ミニマル、情報量多め・訴求型 - **キーワード**: 藍→紫グラデーション・黒ボタン・英字ラベル見出し・透かし英字・薄グレー地・SaaS画面モック - **地の質感**: フラットな面に、ぼかした藍紫のグラデーションと柔らかい影のカードを重ねる - **形**: 角丸が小さい四角カードと黒い四角ボタン、黒丸の矢印アイコン - **温度感**: クールで知的。紫が少し柔らかさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#132E9C` | ブランドの藍色・グラデ起点 | 5% | 画素の実測 | | `secondary` | `#8955FE` | グラデ終点の紫 | 2% | 画素の実測 | | `accent-1` | `#4848C1` | 見出し強調文字の青紫 | 0% | 画素の実測 | | `cta` | `#010101` | 主CTAボタンの黒 | 2% | 画素の実測 | | `on-cta` | `#F7FBF8` | CTA上の白文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 33% | 画素の実測 | | `background-alt` | `#ECF0F1` | 交互セクションの薄グレー地 | 25% | 画素の実測 | | `dark-section` | `#000000` | 実績数値・メディア紹介の黒帯 | 9% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒帯上の白文字 | 1% | 画素の実測 | | `text` | `#02040E` | 見出し・本文の黒 | 3% | 画素の主要色に補正 | | `text-muted` | `#7A7A7A` | 日時や補足のグレー文字 | 0% | 推定 | | `line` | `#DCD4D5` | リスト区切り線 | 0% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | グレー地上の白カード | 6% | 画素の実測 | | `accent-2` | `#DC7C43` | 受付中バッジのオレンジ | 0% | 画素の実測 | - 白とごく薄いグレー(#ECF0F1)のセクションを交互に並べる - 藍→紫のグラデはファーストビュー、CTA枠、製品紹介の上部だけに使う - 主ボタンはグラデにせず黒の面に白文字 - 実績数値やメディア紹介は黒帯で全幅にし、数値の下に青→紫のグラデ線を引く - 見出しの強調語は青紫の文字にする - バッジは受付中ならオレンジ、アーカイブなら薄紫 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 実績の大きな数値 | 欧文サンセリフ | Oswald | 700 | 84px | 1.0 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.02em | | `headline-md` | 番号付き特長の小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em | | `headline-sm` | カード・リストの見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.0em | | `note` | 注釈・日時 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 英字ラベル・透かし英字・番号 | 欧文サンセリフ | Montserrat | 500 | 12px | 1.4 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | - 見出しの上に、青紫の丸点＋小さな英字ラベルを置く - 見出しの右後ろに、極薄の大きな英字を透かしで重ねる - 特長は青紫の 01〜05 の番号を見出しの上に置く - 本文は左揃え、行間 1.8 で詰めない - 実績数値は縦長の太い欧文書体で、%だけ小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ロゴ・カードは横スクロール、アイコン特長は 2×2 グリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は 16px でそろえる - セクションは背景色を切り替えて区切る - リストは上下に細い区切り線を引く - 一覧への導線として、各セクションの最後に中央寄せで『一覧を見る＋黒丸矢印』を置く - CTA 枠はグラデ背景の上に白い箱を重ね、少し内側に入れて縁取りに見せる ## Elevation & Depth - 白カードには薄く広い影を付ける(0 4px 16px rgba(0,0,0,.08)) - FAQ の行は白い面に弱い影 - 黒帯とグラデ帯は影なしのフラット ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は円形、事例写真は角丸なしの長方形、製品はノートPCモックアップに収める - **セクション境界**: 直線で背景色を切り替える - 主ボタンは角丸 4px の黒い四角 - サブボタンは白いピル型 - 矢印ボタンは直径 40px の黒丸 - ラベルバッジは角を立て、青→紫のグラデ ## Components - **黒の主CTA**（`button-primary`）: アイコン付きの全幅の黒ボタン。資料請求・問い合わせに使う - **白ピルのサブボタン**（`button-sub-pill`）: FV 上で 2 つ横に並べる白いピル。外部リンクアイコン付き - **一覧を見るリンク**（`link-arrow-circle`）: 太字テキストの右に黒丸の矢印を置く - **英字ラベル見出し**（`section-label`）: 丸点・英字ラベル・日本語見出しの組み合わせ。右に透かし英字を重ねる - **頭文字の縦カラム**（`pillar-columns`）: 英字の頭文字を5本の縦長カラムに並べ、青→紫に色を変えていく。白アイコン付き - **タグ付き機能カード**（`feature-tile`）: 左上にグラデの英字タグを付けた白カード。中央にアイコンと短い説明 - **実績数値**（`stat-block`）: 黒地に巨大な白い数値と、その下の青→紫グラデ線と説明 - **グラデ縁CTAボックス**（`cta-box`）: グラデ帯の上の白い箱に、見出し・一言・黒ボタン2段を入れる - **FAQ行**（`faq-row`）: 白い行の左に Q と縦線、右に＋アイコン - **サムネ付きリスト**（`list-item-thumb`）: 左にサムネ、右に状態バッジ・タイトル・日時を並べ、区切り線で分ける ## Do's and Don'ts **Do** - 見出しには必ず英字ラベルと透かし英字を添える - グラデは藍→紫の一方向にそろえる - 主CTAは黒、強調文字は青紫に限る - 製品はノートPCやスマホのモックで見せる - セクション末に一覧への導線を置く **Don't** - CTA ボタンを原色やグラデにしない - 暖色を大きな面に使わない（バッジ程度にとどめる） - 大きな角丸や丸みの強い書体を使わない - 本文を中央揃えで長く続けない - 装飾的な区切り（波形など）を入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの価値と主CTAを示す）: 藍紫グラデの背景に白の見出し、大きなロゴ、黒の資料請求ボタン、白ピル2つ、PC画面モック 2. **導入企業ロゴ**（実績で信頼を得る）: 白地にロゴを2段並べ、導入社数の注釈を添える 3. **サービス概念の説明**（カテゴリの定義を伝える）: グレー地に英字ラベル見出しと本文、マルチデバイスのモック 4. **必要性**（導入理由を示す）: グラデのアイコンと太字の短文を4行、区切り線で並べる 5. **できること（特長）**（機能を体系的に見せる）: 頭文字の縦カラム、01〜05 の番号付き特長、機能カード、図解やグラフ 6. **サポート体制**（運用の負担が少ないことを示す）: 円形の背景に置いたフラットイラストと中央揃えの短文を、区切り線で3つ並べる 7. **実績数値**（効果を数字で示す）: 黒帯に巨大な数値とグラデ線 8. **中間CTA**（資料請求・問い合わせを促す）: グラデ縁の白い箱に黒ボタン2段 9. **導入事例**（社会的証明）: 写真付き白カードの横スクロール 10. **セミナー・資料一覧**（見込み客の接点を増やす）: サムネ付きリストとバッジ 11. **オウンドメディア紹介**（専門性を伝える）: 黒帯にグラデ文字のロゴと記事カードの横スクロール 12. **よくある質問**（不安を解消する）: 白い FAQ 行の開閉式アコーディオン 13. **関連サービス**（他サービスへ誘導する）: グラデ帯の画面モックに白カードを重ねる 14. **最終CTA**（最後のひと押し）: 藍色の帯に白い大見出し、白い箱に黒ボタン2段 ## Imagery - SaaS の管理画面をノートPC・スマホのモックに入れ、少し俯瞰で見せる - 人物はスーツやオフィスカジュアルの自然な笑顔。円形に切り抜く - 紫・黄・ピンクのフラットなイラストで人物を描く。背景は白い円 - アイコンは青→紫グラデの線と面の組み合わせ - 背景は藍から紫のぼかしグラデで、光が滲むように見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューを左にテキスト、右にモックの2カラムにする - PC は見出しを左、本文や図を右に置く2カラム構成が多い - PC の必要性アイコンは4列横並び、サポートは3列 - PC では実績数値を横に2つ並べ、CTA は見出しとボタンを左右に分ける - 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-51265407`（元 LP の URL から採番） - **元 LP**: https://mytalent.jp/brand/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。