--- version: alpha name: Navy Yellow Line-Illustration Freelance Job LP description: 濃紺の外枠に生成り白のカラムを載せた求人 LP。紺の太字見出しに蛍光イエローのマーカーを引いて強調する。紺の線画イラストとアイコンで不安から解消、手順へと流れを作り、黄色のピル型 CTA で無料相談へ誘導する。 colors: primary: '#143374' background: '#FBFAF8' surface: '#FEFFFF' cta: '#FDF302' on-cta: '#0D2661' marker: '#FCF402' accent-1: '#FBFA1B' dark-section: '#0F2556' on-dark: '#F2F8FC' text-body: '#2B2B2B' tint-1: '#DDE3F2' line: '#FBFAF8' accent-2: '#FFAF51' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 900 lineHeight: 1.15 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 4px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 28px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 42px section-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 22px marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 28px worry-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px job-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 360px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 360px inverse-banner-text: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 36px faq-item: textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 170px cta-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 330px --- # DESIGN.md — 紺×蛍光イエローの線画イラスト求人LP（Navy Yellow Line-Illustration Freelance Job LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、清潔・爽やか、親しみ・手作り感、シンプル・ミニマル - **キーワード**: 濃紺の額縁・蛍光イエローマーカー・線画イラスト・白カード・英字ラベル・安心感 - **地の質感**: グラデーションや影はほぼ使わないフラットな面。紺の均一な線で描いたイラストに黄の差し色を入れる - **形**: 角丸の大きい白カード、紺のピル型ラベル、ピル型の黄色ボタン、V 字の矢印シェブロン - **温度感**: 紺が主役のややクールな配色。黄色と肌色イラストで親しみを足している ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#143374` | 外枠背景・見出し文字・ラベル | 20% | 画素の実測 | | `background` | `#FBFAF8` | メインカラムの生成り地 | 31% | 画素の実測 | | `surface` | `#FEFFFF` | カード・ABOUT セクションの白 | 32% | 画素の実測 | | `cta` | `#FDF302` | CTA ボタンの黄色 | 1% | 画素の実測 | | `on-cta` | `#0D2661` | CTA ボタン上の文字 | 0% | 画素の主要色に補正 | | `marker` | `#FCF402` | 見出し下の蛍光マーカー | 1% | 画素の実測 | | `accent-1` | `#FBFA1B` | 紺地 CTA 帯の黄色見出し | 0% | 画素の実測 | | `dark-section` | `#0F2556` | フッターの濃い紺 | 4% | 画素の実測 | | `on-dark` | `#F2F8FC` | 紺地上の白文字 | 0% | 画素の実測 | | `text-body` | `#2B2B2B` | 本文の濃いグレー | 3% | 推定 | | `tint-1` | `#DDE3F2` | 案件カードの項目ラベル地 | 0% | 画素の実測 | | `line` | `#FBFAF8` | FAQ の区切り線 | 0% | 画素の主要色に補正 | | `accent-2` | `#FFAF51` | イラストの肌色・オレンジ髪 | 0% | 画素の実測 | - 外枠は全面を紺にし、中央の生成り白カラムを額縁のように浮かせる - 見出しは紺の太字にして、要点の語だけ蛍光イエローのマーカーを下半分に引く - CTA 帯はカラムを紺に切り替え、黄色の見出し・白の本文・黄色ボタンでまとめる - 黄色は CTA・マーカー・アイコンの差し色だけに使い、面積を小さく保つ - ABOUT の要約文は紺の帯に黄色文字を載せた反転テキストにする - フッターはさらに一段濃い紺にして締める ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し | ゴシック | Zen Kaku Gothic New | 900 | 40px | 1.15 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.6 | 0.03em | | `headline-md` | カード見出し（マーカー付き） | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em | | `headline-sm` | 案件タイトル・FAQ の質問 | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.05em | | `accent` | ABOUT・FLOW などの英字ラベル、STEP 番号 | 欧文サンセリフ | Montserrat | 700 | 12px | 1.2 | 0.02em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.0 | 0.1em | | `note` | コピーライト・補足 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | - 見出しはすべて紺の太字で中央揃えにする - 数字（秒・分・金額）は周りより一回り大きくして目立たせる - 英字ラベルは紺の角丸ボックスに白抜きで、日本語見出しの上に置く - 本文は左揃えで行間を 1.8 前後と広めにとる - マーカーは文字の下半分に引く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。紺の外枠の内側に幅約 90% のカラムを置き、その中にさらにカードを並べる - **本文ブロックの幅**: 画面幅の約 78% - **余白**: セクション間 64px、基本単位 8px、カード内 28px（375px 幅換算） - 外枠カラムは画面の左右に約 18px の紺を残す - カードは縦に積み、間隔は約 28px - セクションの区切りや手順の間に紺の V 字シェブロンを入れる - 見出しの直下にリード文を 1〜2 行入れる - CTA 帯は外枠と同じ紺地で、カラムの白を一度途切れさせる ## Elevation & Depth - 影はほぼ使わず、生成り地の上の白カードで階層を出す - 案件カードは影ではなく紺の太い枠線（約 3px）で目立たせる - ボタンにも影を付けないフラットな表現にする ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 写真はカラム幅いっぱいの長方形で、紺のオーバーレイをかける。イラストは背景なしの切り抜き - **セクション境界**: 直線で色を切り替える。カラム上端だけ大きな角丸にする - 白カードは角丸約 16px - STEP 番号と英字ラベルは紺のピル型か小さい角丸 - Q アイコンは紺の正円 - 案件カードは角丸約 16px の紺枠 ## Components - **黄色ピル CTA**（`button-primary`）: 幅約 75% の黄色いピル型ボタン。文字は紺で中央に置き、右端に › 矢印を付ける - **英字セクションラベル**（`section-label`）: 紺の小さい角丸ボックスに白い英字を入れ、見出しの上に置く - **マーカー見出し**（`marker-heading`）: 紺の太字見出しの下半分に蛍光イエローの帯を敷く - **悩み・特長カード**（`worry-card`）: 白の角丸カード。上に線画アイコン、中央にマーカー見出し、下に本文を置く - **案件カード**（`job-card`）: 紺の太枠の白カード。紺の太字タイトルの下に、灰色チップ付きの報酬・地域・職種の行を並べる - **ステップカード**（`step-card`）: 紺のピルに STEP 番号を入れ、その下に線画アイコン、見出し、説明を中央揃えで置く。カードの間に V 字矢印を入れる - **紺帯の反転テキスト**（`inverse-banner-text`）: 1 行ずつ紺の帯に黄色い太字を載せて積み上げる要約コピー - **FAQ 項目**（`faq-item`）: 紺の丸い Q アイコンと紺の太字の質問、その下に本文の回答を置く。項目の間は薄い灰色の線で区切る - **紺地 CTA 帯**（`cta-band`）: 紺地に黄色の 2 行見出し、白の説明文、黄色のピルボタンを置く ## Do's and Don'ts **Do** - 紺・生成り白・黄の 3 色を軸にする - 強調したい語は蛍光マーカーでだけ目立たせる - イラストとアイコンは紺の均一な線で描き、黄色を差し色にする - カードはたっぷりの余白をとって中央揃えにする - CTA は紺地の帯の中に黄色いピル型で置く **Don't** - 赤やグラデーションの派手なボタンを使わない - カードに濃い影や立体的な装飾を付けない - 写真を多用しない。主役は線画にする - 黄色を広い面の背景に使わない - 見出しを細字や明朝にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの対象と手軽さを伝える）: 紺のピル型リード、極太の紺見出し、指アイコンと白文字の英字帯を置く。その下に人物の線画を 3 人並べ、数字入りのマーカー文を 3 行重ねる 2. **悩みの提起**（利用者の不安に共感する）: V 字矢印のあとに 2 行の問いかけ見出しと頭を抱える人物の線画を置き、マーカー見出し付きの白カードを 3 枚並べる 3. **解決・特長**（不安を一つずつ打ち消す）: 喜ぶ人物の線画のあと、アイコン付きの白カードを 3 枚並べ、それぞれ悩みに対応させる 4. **サービス紹介**（サービスの定義と姿勢を伝える）: 白地に英字ラベルと引用符付きの見出しを置く。紺帯に黄色文字の要約を 4 行重ね、その下に本文段落を 3 つ置く 5. **事例・案件例**（具体的な条件で信頼を得る）: 紺のオーバーレイをかけた作業写真を置き、紺枠の案件カードを 3 枚縦に並べる 6. **CTA**（無料相談へ誘導する）: 紺地の帯に黄色見出し、白い説明文、黄色のピルボタンを置く 7. **利用の流れ**（手順の少なさで安心させる）: STEP ピル付きのカードを 4 枚、V 字矢印でつないで並べる 8. **特典・制度**（継続して利用するメリットを示す）: 黄色アイコンと見出しを横に並べた白カードを並べ、金額は黄色マーカーで大きく見せる 9. **よくある質問**（不安を最後に解消する）: Q の丸アイコンと太字の質問、回答を線で区切って 5 問並べる 10. **CTA・フッター**（最後のひと押しと会社情報を示す）: 同じ紺の CTA 帯のあと、濃紺のフッターに白抜きロゴと中央揃えのリンクを置く ## Imagery - 人物は紺の均一な線で描くフラットな線画にし、肌はクリーム色、髪はオレンジなどで部分的に塗る - 感情（悩み・喜び）が伝わる上半身のポーズにし、キラキラなどの記号を添える - アイコンは紺の太い線で描き、一部を黄色で塗る（時計・封筒・書類・握手など） - 写真は PC 作業の手元を使い、紺の半透明オーバーレイでトーンをそろえる - PC の余白には、紺地に溶け込むアイソメトリックのデバイスイラストを置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でもメインカラムは幅約 430px に固定し、両側は紺の背景を広く見せる - PC の左側にはロゴ、特長を白カード 3 つ、黄色の CTA を固定サイドバーとして置く - PC の右側には縦書きのキャッチとアイソメトリックのイラストを置く - PC では見出しを 1 行にまとめ、イラストは小さめにする - フッターは 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-21630fc9`（元 LP の URL から採番） - **元 LP**: https://anken-erabi.com/lp/02 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。