--- version: alpha name: Hand-Drawn Line Art Pastel Circle Recruit LP description: 白地にモノクロの手描き線画を散りばめ、点線の道筋でつないだ採用サイト。各セクションは淡いパステルの円の中に見出しと短い文、黒い小ボタンを置く。遊び心はあるが落ち着いたクリエイティブ会社のトンマナ。 colors: background: '#FFFFFF' primary: '#020202' text: '#423934' cta: '#E33B43' on-cta: '#FFFFFF' tint-1: '#FCF5DC' tint-2: '#ECF6FC' accent-1: '#EAF6E2' accent-2: '#FEF3F3' secondary: '#D9A3A8' line: '#949494' dark-section: '#A9A9A9' on-dark: '#FFFFFF' background-alt: '#FFFFFF' cta-accessible: '#E12E36' typography: display: fontFamily: Alfa Slab One fontSize: 44px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Klee One fontSize: 12px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 9999px full: 999px spacing: unit: 8px card: 24px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' circle-section: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 260px button-detail: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' height: 32px button-apply: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 28px dotted-path: textColor: '{colors.line}' framed-photo: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' height: 120px rule-heading: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 32px blog-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 160px footer-link: textColor: '{colors.text}' typography: '{typography.note}' height: 28px --- # DESIGN.md — 線画イラストとパステル円の採用 LP（Hand-Drawn Line Art Pastel Circle Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 親しみ・手作り感、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: 手描き線画・パステル円・点線の動線・モノクロ+淡色・余白多め・クリエイティブ - **地の質感**: 白地に鉛筆風の黒線イラスト。円は淡色で塗り、縁がわずかに鉛筆タッチでにじむ - **形**: 正円のコンテンツ枠、角ばった黒い小ボタン、手描き風の額縁 - **温度感**: やや暖かい中間。モノクロが基調で、パステルの円が温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | ページ地色 | 67% | 画素の実測 | | `primary` | `#020202` | 見出し・ボタンの黒 | 2% | 画素の実測 | | `text` | `#423934` | 見出し・本文の文字 | 2% | 画素の主要色に補正 | | `cta` | `#E33B43` | ヘッダーの応募ボタン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `tint-1` | `#FCF5DC` | 会社紹介の円（淡いクリーム黄） | 3% | 画素の実測 | | `tint-2` | `#ECF6FC` | 仕事紹介の円（淡い水色） | 2% | 画素の実測 | | `accent-1` | `#EAF6E2` | 社員紹介の円（淡い若草） | 2% | 画素の実測 | | `accent-2` | `#FEF3F3` | 募集要項の円（淡いピンク） | 3% | 画素の実測 | | `secondary` | `#D9A3A8` | 見出しの色付き文字（くすみローズ） | 0% | 推定 | | `line` | `#949494` | 点線の動線・区切り線 | 1% | 画素の実測 | | `dark-section` | `#A9A9A9` | フッター地のグレー | 5% | 画素の実測 | | `on-dark` | `#FFFFFF` | フッター上の白文字 | 0% | 画素の主要色に補正 | | `background-alt` | `#FFFFFF` | ヘッダー帯の淡グレー | 1% | 画素の実測 | | `cta-accessible` | `#E12E36` | AA を満たす補正値（計算） | | 計算 | - 地は白一色。色面はセクションごとのパステル円だけに限定する - 円の色は4色を順番に使い、セクションの識別色にする - 見出しは「英字部分を黒、和文部分を円と同系のくすみ色」で二色に分ける - ボタンは黒地に白文字の小型。赤はヘッダーの応募ボタンだけに使う - イラストは黒線のみで、塗りは入れない - フッターは中間グレーで締め、文字は白 - `button-apply` は文字 `#FFFFFF` × 背景 `#E33B43` のコントラスト比が 4.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E12E36`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのロゴ風タイトル（立体的な太い欧文） | 欧文セリフ | Alfa Slab One | 400 | 44px | 1.1 | 0.02em | | `headline-lg` | 円の中の各セクション見出し | ゴシック | Zen Kaku Gothic New | 500 | 28px | 1.3 | 0.02em | | `headline-sm` | FVのリード見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.05em | | `body-md` | 円内の短い説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.03em | | `label-button` | 黒い小ボタン・ラベル | ゴシック | Noto Sans JP | 500 | 12px | 1.2 | 0.08em | | `note` | フッター・日付・コピーライト | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `accent` | イラスト横の手書き擬音・ナビ英字 | 手書き・筆 | Klee One | 600 | 12px | 1.3 | 0.02em | - 見出しは英字の社名部分と和文部分で色を分ける - 本文は中央揃えで短く、4〜5行に収める - FVのタイトルだけ太い装飾欧文を使い、他は細めのゴシック - 文字サイズの差は控えめにして線画を主役にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。円とイラストを縦に交互に積む - **本文ブロックの幅**: 画面幅の約 80% - **余白**: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算） - PCでは円とイラストを左右ジグザグに配置する - セクションどうしは画面を斜めに横切る点線でつなぐ - 円の直径は画面幅の約70%（SP） - ブログ一覧は線で囲んだ2カラムカード（SPは1カラム） - 余白を広くとり、密度は低くする ## Elevation & Depth - 影は使わずフラットにする - 奥行きは線画の重なりと円の淡い色だけで出す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 9999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は丸や四角の手描き風額縁に入れる。グレーの細い二重枠 - **セクション境界**: 直線では区切らず、曲がる点線でつなぐ - コンテンツ枠は正円 - ボタンは角丸なしの黒い長方形 - 見出し帯は細い二重線の横罫で挟む - 円の縁は鉛筆風に少しにじませる ## Components - **パステル円ブロック**（`circle-section`）: 淡色の正円に見出し・説明文・ボタンを中央揃えで入れる - **詳しく見るボタン**（`button-detail`）: 黒い小さな長方形。左に小さな矢印を付ける - **ヘッダー応募ボタン**（`button-apply`）: 赤地に白文字の小ボタン。ヘッダー右に固定する - **点線の動線**（`dotted-path`）: グレーの破線曲線でセクションどうしをつなぐ - **額縁写真とキャプション**（`framed-photo`）: 手描き額縁の中に人物写真。下に黒地白文字の職種ラベル - **罫線見出し帯**（`rule-heading`）: アイコン+英字見出しを細い二重線で挟み、右に短い説明を置く - **ブログカード**（`blog-card`）: 細線の枠に写真・黒いカテゴリラベル・日付とタイトル - **フッター白枠ボタン**（`footer-link`）: グレー地の上の白地黒文字の小ボタン ## Do's and Don'ts **Do** - イラストは黒の細い線画だけで描き、塗りを入れない - 円の色はセクションごとに変え、4色をローテーションする - 見出しは英字は黒、和文は淡いくすみ色にする - セクションを点線でつないで回遊する流れを見せる - 余白を広くとる **Don't** - 濃いベタ塗りの背景帯を使わない - グラデーションや強い影を入れない - ボタンをピル型や大きなものにしない - 写真を全面に敷かない - 赤を応募ボタン以外に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ナビゲーションと応募への導線）: 淡グレーの細帯。左にロゴ、中央にナビ、右に赤い応募ボタン 2. **ファーストビュー**（採用メッセージを伝える）: 太い装飾欧文タイトルを中央に置き、両側に働く人の線画。下に中央揃えの短いリード文 3. **会社紹介**（会社の考え方を示す）: クリーム色の円と、冊子を持つ手の線画を並べる 4. **仕事紹介**（制作実績を見せる）: 水色の円と、PCモニターに実績画面を写した線画 5. **社員紹介**（働く人の顔を見せる）: 若草色の円の下に、額縁写真と職種ラベルを散らして配置 6. **募集要項**（応募条件へ誘導する）: ピンクの円と、社屋の大きな線画 7. **日常・SNS**（社内の雰囲気を伝える）: 二色の見出しの下に罫線見出し帯とSNSの埋め込み 8. **ブログ**（最新記事を紹介する）: 罫線見出し帯と、細線枠のカードを2カラムで並べる 9. **フッター**（会社情報と関連リンク）: 談笑する人の線画でグレー帯へつなぎ、白文字の情報と白枠ボタン ## Imagery - 鉛筆やペンで描いたような均一な黒の細線。陰影はハッチング程度にとどめる - 仕事中・会話中の人物を自然なポーズで描く - PC・メガネ・文具・建物など仕事にまつわる小物を描く - 人物写真は明るい室内で撮った自然な笑顔。額縁で囲む - 擬音や吹き出しを手書き文字で添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは円とイラストを左右ジグザグに置き、SPでは縦に積む - SPの円の直径は画面幅の70%前後にして、イラストは円の上下に縮小して置く - 点線の動線はSPでは縦方向の緩いS字にする - ブログカードはPC2カラム、SP1カラム - ヘッダーのナビは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-f3c99b71`（元 LP の URL から採番） - **元 LP**: https://www.dig.co.jp/recruit/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（10/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。