--- version: alpha name: Illustrated Literary Recruiting LP description: クリーム色と白の地に、ミントグリーンのピル型ボタンと線画イラストを散らした出版社系の新卒採用 LP。明朝の大見出しと欧文小見出しで知的さを出し、波形の境界と多色のイラストで親しみを足している。 colors: primary: '#18BFA1' background: '#FFFFFF' background-alt: '#FFF6E5' cta: '#1ABEA2' on-cta: '#EBFEFF' dark-section: '#3C72CC' on-dark: '#E7F7FE' text: '#222222' line: '#333333' accent-1: '#F5E965' text-muted: '#A5A198' surface: '#FEFEFE' tint-1: '#EBE4D4' cta-accessible: '#12816E' primary-accessible: '#11846F' typography: display: fontFamily: Klee One fontSize: 48px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 32px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 14px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-lg: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 400 lineHeight: 2.4 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em note: fontFamily: Cormorant Garamond fontSize: 11px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 90px 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.full}' height: 60px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 330px link-list-item: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 170px news-item: textColor: '{colors.text}' typography: '{typography.body-md}' height: 100px tab-underline: textColor: '{colors.text}' typography: '{typography.body-md}' height: 40px quote-balloon: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 120px notebook-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 300px footer-pill-link: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 76px --- # DESIGN.md — クリーム地×緑のイラスト採用サイト LP（Illustrated Literary Recruiting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 親しみ・手作り感、上品・高級、やさしい・柔らかい、ナチュラル - **キーワード**: 線画イラスト・クリーム地・ミントグリーン・明朝見出し・波形の境界・文芸的 - **地の質感**: フラットな単色面。カード背景にだけ薄い方眼パターンを敷く - **形**: ピル型ボタン、角丸なしのカード＋ずらした影、波形の境界 - **温度感**: 暖かい（クリーム）に、爽やかな緑と青のアクセント ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#18BFA1` | ブランド緑・ボタン・特集の地 | 10% | 画素の実測 | | `background` | `#FFFFFF` | メインの地色（白） | 36% | 画素の実測 | | `background-alt` | `#FFF6E5` | クリームのセクション地 | 21% | 画素の実測 | | `cta` | `#1ABEA2` | 主 CTA ボタン | 2% | 画素の実測 | | `on-cta` | `#EBFEFF` | ボタン文字 | 0% | 画素の実測 | | `dark-section` | `#3C72CC` | フッターの青 | 7% | 画素の実測 | | `on-dark` | `#E7F7FE` | フッター上の文字 | 0% | 画素の実測 | | `text` | `#222222` | 見出し・本文 | 2% | 推定 | | `line` | `#333333` | リスト区切り線 | 0% | 推定 | | `accent-1` | `#F5E965` | 波形装飾の黄 | 2% | 画素の実測 | | `text-muted` | `#A5A198` | 注釈・クレジット | 0% | 画素の実測 | | `surface` | `#FEFEFE` | カード面 | 3% | 画素の実測 | | `tint-1` | `#EBE4D4` | カードのずらし影（ベージュ） | 1% | 画素の実測 | | `cta-accessible` | `#12816E` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#11846F` | AA を満たす補正値（計算） | | 計算 | - 白とクリームを交互に置いてセクションを分ける - 強い面色は緑（特集）と青（フッター）の 2 区間だけ - ボタン・アイコン・タブの下線・吹き出し枠はすべて緑で統一する - 黄は波形とイラストの差し色だけに使う - 文字はほぼ黒の 1 色。強調は緑の文字を使う - `button-primary` は文字 `#EBFEFF` × 背景 `#1ABEA2` のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#12816E`、4.59:1）を使う。 - `quote-balloon` は文字 `#18BFA1` × 背景 `#FFFFFF` のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#11846F`、4.61:1）を使う。 - `footer-pill-link` は文字 `#18BFA1` × 背景 `#FFFFFF` のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#11846F`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の手書きキャッチ | 手書き・筆 | Klee One | 400 | 48px | 1.2 | 0.02em | | `headline-lg` | セクション見出し（和文） | 明朝 | Shippori Mincho | 500 | 32px | 1.3 | 0.05em | | `accent` | 見出し上の欧文ラベル | 欧文セリフ | Cormorant Garamond | 500 | 14px | 1.2 | 0.08em | | `headline-sm` | カード・リスト項目のタイトル | ゴシック | Noto Sans JP | 700 | 19px | 1.4 | 0.04em | | `body-lg` | メッセージの長文 | 明朝 | Noto Serif JP | 400 | 15px | 2.4 | 0.08em | | `body-md` | 説明文・ニュース本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | | `note` | 日付・クレジット | 欧文セリフ | Cormorant Garamond | 400 | 11px | 1.5 | 0.05em | - 見出しは『欧文セリフの小ラベル＋明朝の和文』の 2 段で組む - 長文メッセージは明朝にし、行間を 2.4 前後まで広く取る - UI 要素（ボタン・カード名・リスト）は太字のゴシックにする - 手書き書体は FV のキャッチだけに使う - 日付は欧文セリフの数字で小さく置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は 2 カラム（見出しを左、一覧を右）や 3 枚並びのカード - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約 30px で一定にする - セクションの境目にはイラストを重ね、地色をまたいで置く - ニュースとリンク一覧は上下の細線で区切るリストにする - カードは中央寄せで縦に積み、カード同士の間は約 30px 空ける - 写真は画面幅いっぱいか、片側に寄せてはみ出すように置く ## Elevation & Depth - カードには影色（濃い緑やベージュ）の板を右下へ 10px ずらして重ねる。ぼかしは使わない - ボタンは右下に薄いグレーの影を少しだけ付ける - それ以外の要素は影なしで平面にする ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの四角。人物は白背景の切り抜き写真を方眼の背景に置く - **セクション境界**: ゆるい波形の曲線。緑・黄・青の波を重ねる - ボタンは完全なピル型 - カードと写真は角を立てる - アイコンは円形の線で囲んだペン先の矢印 - 吹き出しは線だけの枠で、上に小さな三角を付ける ## Components - **ピル型 CTA**（`button-primary`）: 緑のピル型。左に白い太字、右端に白い丸に入ったペン先アイコン - **2 段見出し**（`section-heading`）: 欧文セリフの小ラベルの下に明朝の大見出しを置く - **特集カード**（`feature-card`）: 白いカードに方眼背景のイラストを載せる。下にタイトルと円形矢印、右下にずらした影の板 - **線区切りのリンク項目**（`link-list-item`）: 太字タイトルと説明文、右に緑の円形矢印。上下を細線で区切る - **お知らせ行**（`news-item`）: 日付を小さな欧文で、本文を太字ゴシックで書き、下線で区切る - **カテゴリタブ**（`tab-underline`）: 太字の小さな文字に緑の下線を引いたタブを横に並べる - **線の吹き出し**（`quote-balloon`）: 緑の線の枠に上向きの三角。中に緑の太字キャッチを入れる - **リングノート風カード**（`notebook-card`）: 上辺にリング金具を描いた白いカード。ベージュの影を付ける - **フッターのリンクボタン**（`footer-pill-link`）: 青地に置く白いピル型。緑の文字と右端のアイコン ## Do's and Don'ts **Do** - イラストは各セクションの境目に重ねて、ページに動きを出す - クリック先のあるものには必ず緑の円形ペン先アイコンを付ける - 大見出しは明朝にし、余白を広く取る - カードの影は単色の板をずらして作る **Don't** - グラデーションやぼかしの影を使わない - 緑・青・黄以外の強い面色を増やさない - 角丸のカードにしない（ピル型はボタンだけ） - 本文を詰めて組まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とキャッチを伝える）: クリーム地に人物や家具の多色線画を散らし、中央に手書きキャッチと欧文サブを置く 2. **メッセージ**（企業の理念を語る）: 白地に明朝の長文を広い行間で組み、最後にピル型 CTA を置く 3. **お知らせ**（最新情報を示す）: クリーム地に、日付と本文の行を細線で区切ったリスト。最後に一覧ボタン 4. **特集**（読み物コンテンツへ誘導する）: 緑の面にずらし影の白カードを縦に積む 5. **社内ギャラリー**（職場の雰囲気を見せる）: 写真を横並びの帯にし、その下に見出し・説明・円形矢印 6. **職種紹介**（仕事の全体像を見せる）: リングノート風カードに説明文とピル型 CTA 7. **社員インタビュー**（人を見せる）: 下線タブと、方眼背景の人物写真カルーセル。下に線の吹き出しでキャッチ 8. **採用情報リンク**（応募関連のページへ導く）: 大きな写真の下に、線で区切ったリンク項目を 4 つ並べる 9. **会社について**（会社概要へ誘導する）: 写真、明朝見出し、説明文、ピル型 CTA の順に置く 10. **フッター**（関連リンクと SNS）: 建物イラストと波形を境に青の面。白いピル型リンクを並べる ## Imagery - 黒の均一な線画に、ベタ塗りの多色（緑・黄・ピンク・紫・水色・オレンジ）を塗る - モチーフは本・植物・椿・猫・カメラ・窓など、読書や創作を連想させるもの - 人物写真は白背景で切り抜き、自然な笑顔やポーズで撮る - オフィス写真は明るく、木と緑のある空間を写す - カード背景には薄いピンクの方眼を敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は上部に横並びのグローバルナビとエントリーボタンを置く - PC のメッセージは本文を左、イラストを右に配置する - PC のお知らせは見出しを左、リストを右の 2 カラムにする - PC の特集カードは 3 枚を高さをずらして横に並べる - PC のインタビューは写真カードを横に 4〜5 枚並べる - 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-5ff057c4`（元 LP の URL から採番） - **元 LP**: https://recruit.kodansha.co.jp/2026/ - **解析に使った画像**: 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/）からご連絡ください。