--- version: alpha name: Retro Bathhouse Pop Recruiting LP description: 銭湯の壁画や湯けむりをモチーフにした出版社の採用 LP。濃い青と淡いレモン色のグラデーション地を基本に、丸い雲形の吹き出しやシャボン玉の円を散らしている。職種ごとに色を変えたカードで社員を紹介する、遊び心のある構成。 colors: primary: '#0985C1' background: '#FFFFFF' background-alt: '#FEFFB4' cta: '#54D24A' on-cta: '#F3FEF2' accent-1: '#E83656' text: '#4D5B6B' text-body: '#222222' secondary: '#A7A3A0' accent-2: '#FFA96D' accent-3: '#2EAAE6' marker: '#FFFF00' tint-1: '#DCAB5C' line: '#1A1A1A' cta-accessible: '#288321' secondary-accessible: '#77726F' primary-accessible: '#087DB5' typography: display: fontFamily: Ultra fontSize: 38px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.06em headline-lg: fontFamily: Klee One fontSize: 34px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Klee One fontSize: 28px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.1em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 500 lineHeight: 2.1 letterSpacing: 0.03em accent: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' headline-set: textColor: '{colors.primary}' typography: '{typography.display}' height: 130px banner-highlight: backgroundColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 130px card-staff: backgroundColor: '{colors.tint-1}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 270px bubble-cloud: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 120px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 60px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 56px news-row: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 90px steam-tub: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 180px --- # DESIGN.md — 銭湯ブルー×湯けむり雲のポップな採用 LP（Retro Bathhouse Pop Recruiting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、レトロ、親しみ・手作り感、かわいい - **キーワード**: 銭湯・湯けむり雲・シャボン玉・職種別カラーカード・太いスラブ欧文見出し・手書き風和文 - **地の質感**: フラットな塗りが基本。左右の端に淡いレモン色のグラデーションを入れ、紺の地には雲アイコンを薄く敷き詰めた柄を使う - **形**: もこもこした雲形と円形を多用する。カードは角丸。セクション境界は斜めに切る - **温度感**: 明るく温かい。青で清潔感を出し、黄色で温もりを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0985C1` | 銭湯ブルー（見出し欧文・下部の地） | 14% | 画素の実測 | | `background` | `#FFFFFF` | 本文の地（白） | 31% | 画素の実測 | | `background-alt` | `#FEFFB4` | 左右端のレモン色グラデーション | 9% | 画素の実測 | | `cta` | `#54D24A` | エントリーボタン（緑） | 1% | 画素の実測 | | `on-cta` | `#F3FEF2` | ボタン上の文字 | 0% | 画素の実測 | | `accent-1` | `#E83656` | 強調帯・アーカイブボタン（赤ピンク） | 2% | 画素の実測 | | `text` | `#4D5B6B` | 和文見出し・ラベル帯（濃紺グレー） | 2% | 画素の実測 | | `text-body` | `#222222` | 本文の文字 | 1% | 推定 | | `secondary` | `#A7A3A0` | サブボタン（グレー） | 2% | 画素の実測 | | `accent-2` | `#FFA96D` | マイページボタン（オレンジ） | 1% | 画素の実測 | | `accent-3` | `#2EAAE6` | 雲・円の装飾（水色） | 5% | 画素の実測 | | `marker` | `#FFFF00` | 円の装飾（黄色） | 0% | 画素の実測 | | `tint-1` | `#DCAB5C` | カードの地（キャメル） | 4% | 画素の実測 | | `line` | `#1A1A1A` | 区切り線・雲形の輪郭 | 0% | 推定 | | `cta-accessible` | `#288321` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#77726F` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#087DB5` | AA を満たす補正値（計算） | | 計算 | - 白とレモン色のグラデーションを地にし、FV とページ末尾だけ銭湯ブルーで塗る - 欧文の大見出しはすべて銭湯ブルーで統一する - 社員カードは職種ごとに色を変える。ピンク・青・ターコイズ・紫・からし色のグラデーションを使う - 雲形の吹き出しは白で塗り、輪郭はカードの色と同じにする - 赤ピンクは最重要の訴求帯とアーカイブボタンだけに使う - 下部のボタン群は役割ごとに色を分ける。緑・オレンジ・水色・グレー - `button-primary` は文字 `#F3FEF2` × 背景 `#54D24A` のコントラスト比が 1.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#288321`、4.65:1）を使う。 - `button-secondary` は文字 `#F3FEF2` × 背景 `#A7A3A0` のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#77726F`、4.59:1）を使う。 - `steam-tub` は文字 `#0985C1` × 背景 `#FFFFFF` のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#087DB5`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文大見出し | 欧文セリフ | Ultra | 400 | 38px | 1.1 | 0.06em | | `headline-lg` | 「〜の湯」の形の和文見出し | 手書き・筆 | Klee One | 600 | 34px | 1.3 | 0.05em | | `headline-md` | 訴求帯の太字コピー | 丸ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.4 | 0.03em | | `headline-sm` | カードの縦書き職種名 | 手書き・筆 | Klee One | 600 | 28px | 1.2 | 0.1em | | `body-md` | リード文・ニュース | 明朝 | Noto Serif JP | 500 | 13px | 2.1 | 0.03em | | `accent` | 吹き出し内の短いことば | 丸ゴシック | Zen Maru Gothic | 500 | 15px | 1.5 | 0.1em | | `label-button` | ボタン文字・ラベル帯 | 欧文サンセリフ | Noto Sans JP | 700 | 15px | 1.2 | 0.08em | - 欧文の大見出しの下に、手書き風の和文見出しとラベル帯を必ずセットで置く - 和文見出しは「〜の湯」のように、共通の語尾をつける型にそろえる - カードの職種名は縦書きにして、左側に白抜きで置く - リード文は明朝で中央揃えにし、行間を広く取る - ボタンは欧文の大きな文字と、和文の小さな文字を並べて組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは縦に積む - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 見出しブロックは中央揃えにする。下に和文見出しとラベル帯を並べる - 社員カードは横幅いっぱいに置く。高さ約 270px で、間隔は 12px - 写真は斜めに切った青い帯に載せ、円の装飾と重ねる - ボタンは幅約 75% で縦に積み、間隔は 12px ## Elevation & Depth - 影はほぼ使わない。フラットな塗りで表現する - 訴求帯の文字だけに薄いドロップシャドウを付けてよい - 情報カードは黒の太い線で囲み、影の代わりにする ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 社員写真は人物を切り抜いて色地の上に載せる。代表写真は斜めの矩形に切る - **セクション境界**: 末尾の青い地は斜めの線で切り替える - カードの右下に三角の折り返しを付け、虫眼鏡アイコンを置く - 吹き出しは花のような雲形にする - 円の装飾は大小を混ぜて散らす - ボタンには白い 2px の枠線を付ける ## Components - **三段見出しセット**（`headline-set`）: 欧文の大見出し、手書き風の和文見出し、濃紺のラベル帯を重ねる。ラベル帯は端を少しかすれさせる - **訴求帯**（`banner-highlight`）: 赤ピンクの横長の帯に白の太字を 2 行入れる。右下に折り返しを付ける - **職種別社員カード**（`card-staff`）: 色のグラデーション地。左に縦書きの職種名、右に切り抜いた人物を置き、雲形の吹き出しを重ねる - **雲形吹き出し**（`bubble-cloud`）: 白い雲形で、カードの色の輪郭線を付ける。短いことばを 2 行入れる - **エントリーボタン**（`button-primary`）: 緑の地に白い枠線。欧文と和文の小さな文字を並べ、外部リンクのアイコンを付ける - **サブボタン**（`button-secondary`）: グレーの地に白い枠線と白い文字 - **お知らせ行**（`news-row`）: 左にラベル、縦線で区切って右に日付と見出し。上を黒い線で区切る - **湯桶と湯けむりのリンク**（`steam-tub`）: 木の湯桶のイラストから雲形の吹き出しが立ちのぼる形。中にリンク名を入れる ## Do's and Don'ts **Do** - 円と雲形の装飾は、どのセクションにも散らす - 見出しは欧文・和文・ラベル帯の三段で必ずそろえる - カードの色は職種ごとに変え、吹き出しの線の色もそれに合わせる - モチーフは銭湯の小物でそろえる（湯桶・手ぬぐい・温泉マーク） - ページ末尾は青い地に雲の柄を敷き、ボタン群を置く **Don't** - 角の鋭い直線的なデザインにしない - 暗い色や黒を地の色にしない - 写真を四角いまま並べるだけにしない - 欧文見出しを細いサンセリフにしない - 強調色をあちこちに使わない。赤ピンクは 1〜2 か所に限る ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（テーマの世界観を伝える）: 銭湯の壁画写真の上に、手書き風の白いロゴを置く。下に商品が入った湯桶を置き、下端を水色の雲で縁取る 2. **訴求帯**（最大の待遇を強く打ち出す）: 赤ピンクの帯に白の太字を 2 行入れる 3. **リード文**（会社の理念を語る）: 明朝で中央揃えにし、6 行ほどにまとめる。地は白〜レモン色のグラデーション 4. **お知らせ・SNS**（最新情報を伝える）: お知らせ行を置き、黒い太枠で囲んだ SNS 埋め込みのカードと温泉マークの雲を添える 5. **代表メッセージ**（トップの人柄を伝える）: 三段見出しの下に、斜めに切った代表写真を置く。周りを青い雲と円で囲む 6. **社員インタビュー**（職種ごとの仕事を紹介する）: 色違いの社員カードを 5 枚、縦に積む 7. **座談会**（チームの雰囲気を伝える）: オレンジのグラデーションのカードに、4 人を横に並べた写真を載せる 8. **特集コンテンツ**（イベントを紹介する）: キャメル色のカードに 2 人の写真と縦書きのタイトルを置く 9. **その他のコンテンツ**（今後のコンテンツや会社情報へ誘導する）: 斜めの境界から青い地に切り替え、湯桶と湯けむりのリンクを 3 つ置く 10. **募集情報・CTA**（応募へつなげる）: 白い欧文の見出しの下に、色違いのボタンを 6 つ縦に並べる ## Imagery - 人物は無地の背景で上半身を撮り、切り抜いて色地に載せる - 表情は笑顔か自然な表情。服装はカジュアル〜ビジネスカジュアル - 銭湯の小物（湯桶・手ぬぐい・温泉マーク）は、太い茶色の線で描くフラットなイラストにする - 雲の柄は白い線で描いたアイコンを、青い地に薄く敷き詰める - FV は銭湯の壁画風の背景に、商品写真を合成する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では FV を横長に広げ、両端に社員の丸い写真を配置する - PC の社員カードは 3 枚と 2 枚の 2 段に並べる - PC の和文見出しは縦書きにして、カードの左に置く - PC のボタン群は 3 列 × 2 段に並べる - PC の湯桶リンクは 3 つを横に並べる ## 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-5e7e5317`（元 LP の URL から採番） - **元 LP**: https://www.hakusensha.co.jp/recruit2025/ - **解析に使った画像**: 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/）からご連絡ください。