--- version: alpha name: Colorful Blob Character Recruiting LP description: 白地に青・緑・朱・黄・水色の5色を使った、新卒採用向けのポップな LP。写真は有機的なブロブ形で切り抜き、ドット模様と丸いおばけ風キャラを散らす。セクションごとに青・ピンクベージュ・緑の大きな角丸パネルを切り替え、白カードや白ピルボタンで情報を整理する。 colors: primary: '#3A5E9B' secondary: '#2F853E' accent-1: '#D4542D' accent-2: '#E2C637' accent-3: '#5EB6DA' cta: '#EA0001' on-cta: '#FEF6F6' background: '#FFFFFF' background-alt: '#FBEAE2' surface: '#FCF7E3' text: '#222222' line: '#EBC9B8' tint-1: '#ECAC8A' on-dark: '#F4FDFE' accent-1-accessible: '#C44D28' cta-accessible: '#E50001' typography: display: fontFamily: Zen Maru Gothic fontSize: 30px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em label-button: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-dots-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px blob-photo: height: 200px message-blob: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 300px job-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 145px question-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 115px button-pill-white: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 44px link-list-row: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 42px story-card: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 290px --- # DESIGN.md — 5色ブロブとキャラの採用サイト LP（Colorful Blob Character Recruiting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、信頼・誠実 - **キーワード**: 5色パレット・ブロブ切り抜き・ドット模様・丸いキャラ・角丸パネル・白カード - **地の質感**: フラットな単色面にハーフトーンのドットを薄く重ねる。グラデーションや影はほぼ使わない - **形**: 不定形のブロブ、大きな角丸パネル、ピル型ボタン、丸い矢印アイコン - **温度感**: 暖かく明るい。朱と黄で温度感を出し、青と緑で誠実さを支える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3A5E9B` | 仕事紹介セクションの青パネル | 8% | 画素の実測 | | `secondary` | `#2F853E` | 記事一覧セクションの緑パネル | 9% | 画素の実測 | | `accent-1` | `#D4542D` | メッセージブロブと理念バナーの朱色 | 4% | 画素の実測 | | `accent-2` | `#E2C637` | キャラ・強調文字・枠線に使う黄 | 2% | 画素の実測 | | `accent-3` | `#5EB6DA` | キャラ・ブロブに使う水色 | 1% | 画素の実測 | | `cta` | `#EA0001` | 応募ボタンの赤 | 1% | 画素の実測 | | `on-cta` | `#FEF6F6` | 応募ボタンの文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | ページの地色 | 36% | 画素の実測 | | `background-alt` | `#FBEAE2` | 会社紹介セクションのピンクベージュ地 | 11% | 画素の実測 | | `surface` | `#FCF7E3` | ニュース・疑問カードのクリーム地 | 7% | 画素の実測 | | `text` | `#222222` | 見出し・本文の文字 | 2% | 推定 | | `line` | `#EBC9B8` | リンク一覧の区切り線 | 0% | 推定 | | `tint-1` | `#ECAC8A` | ブロブ背景の淡いサーモン | 1% | 画素の実測 | | `on-dark` | `#F4FDFE` | 色パネル上の白文字 | 0% | 画素の実測 | | `accent-1-accessible` | `#C44D28` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#E50001` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本にし、セクション単位で青・ピンクベージュ・緑の大きな角丸パネルに切り替える - 5色（青・緑・朱・黄・水色）を均等に散らす。1色だけが目立たないようにする - キャッチコピーでは単語ごとに5色を塗り分けて主題を強調する - 色パネル上のカードやボタンは白地に黒文字、矢印アイコンはパネル色に合わせる - 応募ボタンの赤は最下部の応募エリアだけで使い、他の強調には使わない - 情報カードはクリーム色にして、白地との差を柔らかく出す - `message-blob` は文字 `#F4FDFE` × 背景 `#D4542D` のコントラスト比が 3.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#C44D28`、4.58:1）を使う。 - `button-primary` は文字 `#FEF6F6` × 背景 `#EA0001` のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E50001`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチコピー（単語ごとに色分け） | 丸ゴシック | Zen Maru Gothic | 700 | 30px | 1.6 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.5 | 0.03em | | `headline-md` | ブロブ内メッセージ・バナー見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.7 | 0.05em | | `headline-sm` | カード名・リンク項目名 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.5 | 0.03em | | `body-md` | 本文・リード文 | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.03em | | `note` | 日付・サブテキスト | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.05em | | `accent` | 英字見出し・応募ボタン | 欧文サンセリフ | Montserrat | 700 | 22px | 1.3 | 0.02em | | `label-button` | ピルボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.4 | 0.05em | - 見出しは太字で左揃え。上に5色の小さな丸を5つ並べる - 見出しの下に小さめのリード文を1行添える - 本文は行間を約1.9にとって読みやすくする - ブロブ内のメッセージは中央揃えにし、強調行に点線の下線を引く - 英字は太めのジオメトリック・サンセリフだけを使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード一覧は 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は約19px - 色パネルは画面端まで広げ、片側か上の角を大きく丸める - FVは写真ブロブとテキストを交互に重ね、余白を広くとる - リンク一覧は丸矢印、ラベル、下罫線の行で縦に並べる - 記事カードは画像の下にタイトルと日付を置き、縦に積む ## Elevation & Depth - 影はほぼ使わず、フラットな色面で階層を表す - 白カードは色パネルの上に置き、色の差だけで浮かせる - ブロブ写真の背後にドット模様を少しずらして重ね、奥行きを出す ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 写真は不定形のブロブ形に切り抜く。記事・紹介サムネイルは角丸16pxの長方形 - **セクション境界**: 直線の境界で、パネルの角を40px前後の大きな角丸にする - ボタンはすべてピル型にし、右端に丸い矢印アイコンを置く - 装飾ブロブはランダムな有機形にし、正円は避ける - 外部リンクのボタンには窓アイコンを付ける ## Components - **5色ドット付き見出し**（`section-dots-heading`）: 見出しの上に朱・青・水色・緑・黄の小丸を5つ並べる - **ブロブ写真**（`blob-photo`）: ブロブ形に切り抜いた社員写真。ドット模様と小キャラを添える - **メッセージブロブ**（`message-blob`）: 朱色の大きなブロブの中に白文字のメッセージを中央揃えで置く - **仕事紹介カード**（`job-card`）: 白い角丸カードにキャラのイラスト、職種名、右下の青い丸矢印を入れて2列に並べる - **疑問カード**（`question-card`）: クリーム地の横長カードに、左のイラスト、問いかけ文、右上の黄色い？マークを入れる - **白ピルボタン**（`button-pill-white`）: 色パネル上に置く白いピル型ボタン。右端にパネル色の丸矢印を入れる - **枠線ピルボタン**（`button-outline`）: 白地に黄・緑・青の2px枠線を付けたピルボタン - **応募ボタン**（`button-primary`）: 赤い塗りのピルボタン。白い太字の英字を入れる - **矢印リンク行**（`link-list-row`）: 丸矢印アイコン、太字ラベル、下罫線で1行にしたリンク - **記事カード**（`story-card`）: 角丸のサムネイル（右上に朱色のピンバッジ）の下に、白文字のタイトルと日付を置く ## Do's and Don'ts **Do** - 5色パレットを写真の周りやキャラにバランスよく散らす - 写真は必ずブロブ形に切り抜き、ドット模様を背後に置く - 丸いおばけ風のキャラをセクションの角やバナーの下端に並べる - セクションごとに色パネルを切り替えてリズムを作る - ボタンはピル型にし、丸矢印アイコンを付ける **Don't** - 写真を四角いまま大きく置かない（サムネイルは除く） - 黒や濃いグレーの重い背景を使わない - 赤い応募色を応募エリア以外で多用しない - 明朝体や細すぎる書体を使わない - 濃いドロップシャドウやグラデーションで立体感を出さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の世界観と理念を伝える）: ブロブ写真を散らし、単語ごとに5色で塗り分けたキャッチと短いリード文を置く 2. **お知らせ**（採用の最新情報を見せる）: クリーム地の角丸ボックスに日付とリンクを3件並べ、一覧リンクを右下に置く 3. **メッセージ**（成長環境を訴求する）: 朱色の大ブロブに白文字を入れ、周りに写真ブロブを配置する 4. **動画**（採用動画へ誘導する）: カラフルなブロブ柄の角丸サムネイルの中央に再生ボタンを置く 5. **グループ企業ロゴ**（事業の広がりを示す）: ロゴを横に並べて2段にする 6. **仕事紹介**（職種を一覧で見せる）: 青パネルに白カードを2列のグリッドで並べ、下に白ピルボタンを置く 7. **イメージとリアル**（世間の誤解を問いかけて興味を引く）: クリーム地の疑問カードを3枚縦に並べ、黄枠のボタンを置く 8. **会社を知る**（企業情報へ誘導する）: ピンクベージュのパネルに、サムネイルとタイトルの行、矢印リンク一覧、朱色の理念バナーを並べる 9. **制度・環境**（働きやすさを伝える）: リード文、青い矢印のリンク一覧、ブロブ写真2枚を重ねたビジュアルで構成する 10. **社員ストーリー**（社員の記事で共感を得る）: 緑パネルに記事カードを縦に積み、白ピルボタンを置く 11. **応募CTA**（エントリーへ導く）: 赤い横線の下に、ドットに挟んだ小見出し、赤枠のボタン、赤塗りの応募ボタン、キャラの群れを置く 12. **関連バナー・フッター**（別の採用区分や外部メディアへ誘導する）: 色枠付きのバナー2枚、色枠ピルボタン2本、ロゴを並べる ## Imagery - 写真は明るいオフィスで社員が笑顔で会話や作業をしている自然なスナップにする - 写真はブロブ形に切り抜き、淡い色のハーフトーンドットを背後に重ねる - イラストは目が2つだけの丸いおばけ風キャラを5色で描き、線なしのフラット塗りにする - 職種アイコンはキャラと小物（PC・カメラ・グラフなど）を組み合わせたフラットイラストにする - 装飾として単色のブロブを余白に浮かせる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は最大幅約1000pxで中央寄せにし、色パネルは全幅で角を丸める - 仕事紹介カードは PC では4列にする - 疑問カードは PC では3列にし、イラストを上、問いを下に置く - 記事カードは PC では3列のグリッドにする - FV は PC ではキャッチを左上に置き、写真ブロブを右側と下に散らす - 応募CTA は PC ではボタン2つを横に並べる ## 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-c24d17b3`（元 LP の URL から採番） - **元 LP**: https://www.aiful.co.jp/group/recruit/fresh/index.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。