--- version: alpha name: Blue Corporate Recruiting Branding Service LP description: 鮮やかな青地に白カードを重ね、黄色の資料請求帯で行動を促す BtoB 採用ブランディング支援の LP。紺のフラットイラストと鉤括弧型の見出し装飾、明朝の斜体ロゴ風見出しで、信頼感と先進性を両立している。 colors: primary: '#458CF4' background: '#FFFFFF' background-alt: '#ECF2FE' secondary: '#91BAFA' cta: '#F0C845' on-cta: '#1F3F5F' text: '#0C354E' text-body: '#222222' accent-1: '#407EDA' tint-1: '#ECF2FE' line: '#C4D1D9' on-primary: '#FDFDFC' dark-section: '#333333' primary-accessible: '#156EF1' typography: display: fontFamily: Shippori Mincho fontSize: 50px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.02em accent: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Noto Serif JP fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 18px full: 999px spacing: unit: 8px card: 28px 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}' height: 72px cta-band: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.accent}' height: 260px heading-bracket: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 100px card-worry: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 150px card-feature: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 440px badge-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 48px card-step: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 340px badge-circle: textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px table-compare: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 520px --- # DESIGN.md — 青×黄のフラットイラスト採用支援 LP（Blue Corporate Recruiting Branding Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、クール・先進的、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 鮮やかな青・白カード・黄色の CTA 帯・鉤括弧の見出し装飾・フラットイラスト・紺の文字 - **地の質感**: フラットな単色面。影はごく薄く、グラデーションは使わない - **形**: 角丸 16px 前後のカード、角丸なしの横長 CTA 帯、カギ括弧状の L 字線 - **温度感**: クールな青が基調。黄色で温かみを少し足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#458CF4` | ブランド青。FV・特徴・メソッド部分の地 | 15% | 画素の実測 | | `background` | `#FFFFFF` | カード・基本の白地 | 28% | 画素の実測 | | `background-alt` | `#ECF2FE` | 悩み・実績セクションの淡い青地 | 18% | 画素の実測 | | `secondary` | `#91BAFA` | ブランディング説明の中間青地 | 8% | 画素の実測 | | `cta` | `#F0C845` | 資料請求ボタン・CTA 帯の黄色 | 4% | 画素の実測 | | `on-cta` | `#1F3F5F` | 黄色ボタン上の紺文字 | 0% | 推定 | | `text` | `#0C354E` | 見出しの紺 | 2% | 画素の実測 | | `text-body` | `#222222` | 本文の黒 | 3% | 推定 | | `accent-1` | `#407EDA` | 本文内の強調語・事例見出しの青 | 1% | 画素の実測 | | `tint-1` | `#ECF2FE` | ステップカードの淡青面 | 2% | 画素の実測 | | `line` | `#C4D1D9` | 比較表・区切りの灰青 | 1% | 画素の実測 | | `on-primary` | `#FDFDFC` | 青地上の白見出し | 1% | 画素の実測 | | `dark-section` | `#333333` | フッターの濃いグレー | 2% | 画素の実測 | | `primary-accessible` | `#156EF1` | AA を満たす補正値（計算） | | 計算 | - 地色は鮮青→白→淡青→中間青→淡青→鮮青→黄→白→淡青の順に切り替え、セクションの区切りにする - 鮮青の地には必ず白カードを載せ、文字は白カードの上で読ませる - 黄色は CTA ボタンと CTA 帯、イラストのアクセントだけに使う - 見出しは紺、本文は黒、強調語だけ青にする - 淡青は悩みカードの背景とステップカードの面に使う - フッターだけ濃いグレーにして締める - `badge-label` は文字 `#FDFDFC` × 背景 `#458CF4` のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#156EF1`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のサービス名ロゴ風見出し（白・斜体） | 明朝 | Shippori Mincho | 700 | 50px | 1.2 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 28px | 1.5 | 0.05em | | `headline-md` | 事例タイトル・特徴カードの見出し | ゴシック | Noto Sans JP | 700 | 26px | 1.45 | 0.02em | | `accent` | 解決提示・CTA 帯の明朝見出し（下線つき） | 明朝 | Noto Serif JP | 700 | 30px | 1.45 | 0.08em | | `headline-sm` | 悩みカード・ステップの小見出し | ゴシック | Noto Sans JP | 700 | 19px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 2.0 | 0.03em | | `note` | 図版の注釈・肩書き | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.02em | | `label-button` | CTA ボタン（上段は小さい明朝のリード、下段は太字） | 明朝 | Noto Serif JP | 700 | 19px | 1.4 | 0.05em | - 見出しはゴシック太字、感情に訴えたい一文だけ明朝にする - 強調したい語だけ一回り大きくして青にし、助詞は小さく黒のまま残す - 本文は行間を 2.0 前後と広めにとる - FV のサービス名は明朝の斜体で白抜きにする - 数字は大きな明朝の金色で実績を見せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は悩み・効果を 3 カラム、特徴をカードとイラストの左右交互で並べる - **本文ブロックの幅**: 画面幅の約 89% - **余白**: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算） - カードは左右 20px の余白を取って画面幅いっぱいに置く - 特徴カードにはイラストを上に重ね、番号を左上か右上の角から飛び出させる - 事例は社名リンク→見出し→実施内容ラベル→本文→画像→サムネイル列の順 - 比較表は SP で横スクロールにし、操作ヒントを重ねて見せる - フォームは淡青地の上に置き、ラベルと入力欄を縦に積む ## Elevation & Depth - 白カードにはごく薄い影（0 2px 8px rgba(0,40,100,0.08)） - 青地上のカードは影なしで、色の差だけで浮かせる - スクロールヒントは半透明の紺パネル ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 18px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしまたは小さい角丸の長方形。人物は白背景の上半身写真 - **セクション境界**: 基本は直線で切り替え、解決提示の後だけ下向き三角の切り欠きを入れる - CTA は角丸なしの横長長方形で、右端に下向きシェブロンを置く - 見出しは左上と右下の L 字線（カギ括弧）で囲む - ステップ同士は × や下矢印でつなぐ - FV の要素は白い円形の線囲みバッジを 3 つ並べる ## Components - **資料請求ボタン**（`button-primary`）: 黄色の横長ボタン。上段に小さい明朝のリード、下段に太字の行動文言、右端に下向きシェブロンを置く - **CTA 帯**（`cta-band`）: 画面幅いっぱいの黄色帯。明朝 2 段で行動を呼びかけ、下にシェブロンを置く - **カギ括弧の見出し**（`heading-bracket`）: 見出しの左上と右下に細い L 字線を置いて囲む。青地では白線を使う - **悩みカード**（`card-worry`）: 白の角丸カード。カギ括弧つきの小見出しの下に 2 行の説明を置き、末尾を青太字で強調する - **番号つき特徴カード**（`card-feature`）: 青地の上に白カードを置く。角に淡青の大きな明朝斜体の数字を重ね、見出しは青と黒の 2 色にする - **実施内容ラベル**（`badge-label`）: 青い四角に白文字のラベル。右側に青文字で内容を 2 行で書く - **ステップカード**（`card-step`）: 淡青の角丸面。左上に番号、中央に紺の見出し、紺・青・黄の線画アイコン、下に拡大アイコンを置く - **円形サービスバッジ**（`badge-circle`）: 白い円の線囲みに白文字。3 つを横に並べ、線でつなぐ - **比較表**（`table-compare`）: 自社の列を青ヘッダーと淡青の列で目立たせる。行見出しは灰青地に縦書き、評価は ○△× で示す ## Do's and Don'ts **Do** - 青地には必ず白カードを重ねてコントラストを確保する - 見出しはカギ括弧の装飾で統一する - 強調語は青太字にして、文中で 1〜2 か所に絞る - イラストは紺のスーツ人物と黄色の差し色のフラットタッチでそろえる - CTA はページの冒頭・中盤・末尾の 3 か所に黄色で置く **Don't** - 黄色を見出しや本文の装飾に多用しない - グラデーションや強い影を使わない - 写真の上に直接本文を載せない - ボタンをピル型にしない - 赤やオレンジなど別系統の強い色を加えない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービス概要と実績を一目で伝える）: 青地に白のキャッチと明朝斜体のロゴ見出しを置き、円形バッジ 3 つ、金の月桂樹つき実績数字、人物が道を見上げるイラストを配置する 2. **CTA**（最初の資料請求の導線）: 白地に黄色の横長ボタンを置く 3. **取引企業**（信頼性を示す）: 紺の見出しの下に、ロゴを横一列にスライド表示する 4. **悩みの提起**（企業と担当者の悩みに共感する）: 淡青地にアイコンつきの小見出しを置き、白い悩みカードを 3 枚ずつ 2 グループ並べる 5. **解決の提示**（サービスで解決できると宣言する）: 下線つきの大きな明朝見出しを置き、その下で下向き三角に切り欠いて中間青のセクションへつなぐ 6. **サービス説明**（ブランディングの考え方を説明する）: 中間青地に中央揃えの本文を置き、一般的な方法と自社の方法を比べる図を 2 枚並べる 7. **効果**（導入メリットを列挙する）: 白の横長カードを 6 枚並べ、左にカギ括弧つきの見出し、右に線画アイコンを置く 8. **実績**（事例で説得する）: 淡青地に事例を 3 件並べる。各事例は 2 色の見出し、実施内容ラベル、本文、制作物の画像とサムネイル列で構成する 9. **特長**（4 つの強みを示す）: 青地に雲のイラストを散らし、番号つきの白カードとイラストを交互に置く 10. **メソッド・担当者紹介**（人と手順で信頼を伝える）: 大きな白カードの中にコンサルタントの写真・肩書き・青い名前・経歴を並べ、続けて 5 ステップのフローを置く 11. **CTA 帯**（中盤の資料請求の導線）: 全幅の黄色帯に明朝で 2 段のコピーを置き、下にシェブロンを添える 12. **他社比較**（優位性を示す）: 白地に中央揃えのリード文を置き、自社の列を強調した比較表を横スクロールで見せる 13. **資料請求・フォーム**（コンバージョン）: 淡青地に青い資料紹介カードと黄色ボタンを置き、その下に入力フォームを続ける 14. **フッター**（会社情報）: 濃いグレー地に白文字で、リンクカードを 3 つ並べる ## Imagery - 紺のスーツ人物を主役にしたフラットなベクターイラスト。差し色は黄色・肌色・サーモンにする - 青地には白い雲と小さな星を散らして空のような奥行きを出す - アイコンは紺の線画に青と黄の塗りを部分的に入れる - 人物写真は白いスタジオ背景で撮った上半身にし、柔らかい影を入れる - 制作事例は端末やカンプ画像を淡いグレー面に載せ、下にサムネイルを並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC の FV はテキストとバッジ・CTA を左、イラストを右に置く 2 カラムにする - PC では悩みカードと効果カードを 3 カラムのグリッドにする - PC の特徴は白カードとイラストを左右交互に配置する - PC の担当者紹介は 3 人を横並びにする - PC のステップは 2 枚＋3 枚の横並びにし、比較表はスクロールなしで全列を表示する - PC の本文幅は 800px 前後に抑え、中央に寄せる ## 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-d231519d`（元 LP の URL から採番） - **元 LP**: https://www.jaythree.com/saiyo-compass - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。