--- version: alpha name: Bold Pop Illustrated Body Journey Recruit LP description: 朱赤の巨大な人体シルエットの中を黄緑の管がたどる、一枚絵の図解型の採用サイト。オレンジの吹き出し円をセクションの入口に置き、不定形のフレームで社員写真を切り抜く。カラフルな菌モチーフを全体に散らし、遊び心のある力強い印象にしている。 colors: primary: '#D11E19' secondary: '#9ACB1A' accent-1: '#81B81E' cta: '#FF9600' on-cta: '#FEFDFD' background: '#F1EBDF' background-alt: '#F0ECE1' dark-section: '#000000' on-dark: '#FAFBFA' accent-2: '#F55300' accent-3: '#FF39BA' marker: '#2E67FF' text: '#000000' cta-accessible: '#AB6400' secondary-accessible: '#57730F' typography: display: fontFamily: Dela Gothic One fontSize: 50px fontWeight: 900 lineHeight: 1.25 headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.05em headline-md: fontFamily: Roboto fontSize: 18px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.03em label-button: fontFamily: Roboto fontSize: 12px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.6 rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' speech-circle: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 170px button-readmore: backgroundColor: '{colors.on-cta}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px button-primary: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 105px news-card: backgroundColor: '{colors.on-cta}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 76px photo-blob: backgroundColor: '{colors.accent-2}' rounded: '{rounded.full}' height: 220px name-tag: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 70px content-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 255px badge-dashed: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 100px --- # DESIGN.md — 赤×黄緑のポップな人体図解の採用 LP（Bold Pop Illustrated Body Journey Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感 - **キーワード**: 人体シルエット・消化管の図解・吹き出し円・菌モチーフ・フラットイラスト・高彩度 - **地の質感**: グラデーションを使わないベタ塗りのフラットイラスト。生成りの地に原色の面を重ねる - **形**: 有機的な曲線、ピル型、正円の吹き出し、不定形のブロブ - **温度感**: 暖色が中心で熱量が高い。補色の黄緑で元気さを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D11E19` | 人体シルエットの主面 | 30% | 画素の実測 | | `secondary` | `#9ACB1A` | 黄緑の管と腸の面 | 18% | 画素の実測 | | `accent-1` | `#81B81E` | 濃い黄緑の影面 | 3% | 画素の実測 | | `cta` | `#FF9600` | 吹き出し円とラベル | 10% | 画素の実測 | | `on-cta` | `#FEFDFD` | 吹き出し上の文字とボタン地 | 4% | 画素の実測 | | `background` | `#F1EBDF` | 生成りのページ地 | 10% | 画素の実測 | | `background-alt` | `#F0ECE1` | カード内の淡いベージュ | 4% | 画素の実測 | | `dark-section` | `#000000` | 黒ピルボタンとフッター | 14% | 画素の実測 | | `on-dark` | `#FAFBFA` | 黒地の上の白文字 | 1% | 画素の実測 | | `accent-2` | `#F55300` | 上部の炎のオレンジ | 5% | 画素の実測 | | `accent-3` | `#FF39BA` | 菌モチーフのマゼンタ | 1% | 画素の実測 | | `marker` | `#2E67FF` | 菌モチーフの青 | 1% | 画素の実測 | | `text` | `#000000` | 見出しの黒文字 | 1% | 画素の主要色に補正 | | `cta-accessible` | `#AB6400` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#57730F` | AA を満たす補正値（計算） | | 計算 | - 地は生成りにし、その上に朱赤の人体を大きく置いてページの大半を赤にする - 黄緑は管と腸だけに使い、上から下へ導く線の役にする - セクションの入口はオレンジの円にそろえる - 最終導線とフッターは黒で締める - マゼンタ・青・青緑の菌モチーフは小さく散らすだけにとどめる - 赤地の本文は白文字にする - `speech-circle` は文字 `#FEFDFD` × 背景 `#FF9600` のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AB6400`、4.54:1）を使う。 - `button-readmore` は文字 `#FF9600` × 背景 `#FEFDFD` のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AB6400`、4.54:1）を使う。 - `name-tag` は文字 `#FEFDFD` × 背景 `#FF9600` のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AB6400`、4.54:1）を使う。 - `content-card` は文字 `#9ACB1A` × 背景 `#F0ECE1` のコントラスト比が 1.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#57730F`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の極太で斜めのキャッチ | 装飾・ディスプレイ | Dela Gothic One | 900 | 50px | 1.25 | 0.0em | | `headline-lg` | 赤地上のリード見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.8 | 0.05em | | `headline-md` | 吹き出し円の英字見出し | 欧文サンセリフ | Roboto | 500 | 18px | 1.3 | 0.02em | | `headline-sm` | カード見出しと部署名 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.05em | | `body-md` | 白抜きの本文 | ゴシック | Noto Sans JP | 700 | 11px | 2.0 | 0.03em | | `label-button` | READ MORE ボタン | 欧文サンセリフ | Roboto | 500 | 12px | 1.0 | 0.02em | | `note` | 日付・氏名・コピーライト | ゴシック | Noto Sans JP | 500 | 9px | 1.6 | 0.0em | - キャッチは極太で斜めにし、1 語だけ赤にする - 見出しは英字を上、和文を下の 2 段で中央にそろえる - 本文は太めの白ゴシックで行間を広くとる - 明朝体は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。イラストの上に要素を重ねて配置する - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 黄緑の管を縦の動線にして、セクション同士をつなぐ - 吹き出し円は左右交互に置く - 社員写真はジグザグに配置する - ページ全体を 1 枚の連続イラストとして構成する ## Elevation & Depth - 影は使わずフラットに仕上げる - 前後関係は色面の重なりと太い縁取りで表す ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: ピル型・三つ葉型・円形のブロブで切り抜き、オレンジの太い縁を付ける - **セクション境界**: 直線では区切らない。有機曲線のイラストでつなぐ - 白カードは角丸 16px - ボタンはすべてピル型 - 吹き出しは円に三角のしっぽを付ける ## Components - **吹き出し円見出し**（`speech-circle`）: オレンジの正円にしっぽを付け、英字と和文の見出しに READ MORE を添える - **READ MORE ボタン**（`button-readmore`）: 白のピル型にオレンジ文字 - **黒の大ピル導線**（`button-primary`）: 幅広の黒ピル。英字と和文を 2 段で置く - **お知らせカード**（`news-card`）: 白の角丸カード。見出しの両脇に赤線を付け、日付と本文を並べる - **社員ブロブ写真**（`photo-blob`）: 色ベタの不定形の背景に人物の切り抜きを置き、オレンジの縁で囲む - **部署名ラベル**（`name-tag`）: オレンジのピルまたはブロブに部署名と氏名を白で書く - **コンテンツカード**（`content-card`）: 黄緑地の上に置く角丸カード。黄緑の見出しに画像を組み合わせる - **点線円バッジ**（`badge-dashed`）: 赤い円を白の点線で縁取り、告知を入れる ## Do's and Don'ts **Do** - イラストを主役にし、要素はその上に配置する - 菌モチーフを各所に散らす - 写真は必ずブロブ型の色背景で切り抜く - セクションの入口はオレンジ円にそろえる **Don't** - グラデーションやドロップシャドウは使わない - 四角い写真をそのまま置かない - 色を落ち着いたトーンに寄せない - 長い本文の段落を置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コンセプトを強く印象づける）: 生成りの地に極太キャッチを置き、赤い横顔のシルエットと炎状の背景を描く 2. **お知らせ**（最新情報を伝える）: 赤地の上に白の角丸カードを重ねる 3. **リードメッセージ**（企業の想いを伝える）: 赤い胴体の上に白抜きの見出しと本文を置く 4. **トップメッセージ**（代表の言葉への導線）: オレンジの吹き出し円と、ハート型の枠に入れた人物写真 5. **会社紹介**（事業と制度を知らせる）: 黄緑の胃の形の中に白カードを 2 枚並べる 6. **仕事の魅力**（働く魅力と座談会への導線）: 管に沿って写真を有機的な形で切り抜く 7. **社員紹介**（人柄を見せる）: 腸のイラストの上にブロブ写真 4 枚と部署名ラベルをジグザグに置く 8. **CTA**（FAQ と募集要項・エントリーへ誘導する）: 赤地に黒の大ピルボタンを 2 本縦に並べる 9. **フッター**（サイトマップを示す）: 黒地にロゴとキャッチを置き、白文字のリンクに矢印を付ける ## Imagery - 人体と臓器をベタ塗りのフラットイラストで描く - 働く人や家族のシルエットを黄緑やオレンジで点景として入れる - 菌は丸・カプセル・三つ葉型でカラフルに描く - 社員写真は笑顔のバストアップを切り抜き、高彩度の単色背景に置く - 商品は白背景の物撮りを散らして配置する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では人体の全身を 1 枚絵で見せ、管の流れを左右に広げる - PC ではヘッダーに横並びのナビと赤のピル型エントリーボタンを置く - PC では会社紹介のカード 2 枚を横に並べる - PC ではフッターのロゴとリンクを左右 2 段に分ける - 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-baf1827e`（元 LP の URL から採番） - **元 LP**: https://nissinyork.com/recruit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。