DESIGN.md — 銭湯ブルー×湯けむり雲のポップな採用 LP（Retro Bathhouse Pop Recruiting LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、レトロ、親しみ・手作り感、かわいい
• キーワード: 銭湯・湯けむり雲・シャボン玉・職種別カラーカード・太いスラブ欧文見出し・手書き風和文
• 地の質感: フラットな塗りが基本。左右の端に淡いレモン色のグラデーションを入れ、紺の地には雲アイコンを薄く敷き詰めた柄を使う
• 形: もこもこした雲形と円形を多用する。カードは角丸。セクション境界は斜めに切る
• 温度感: 明るく温かい。青で清潔感を出し、黄色で温もりを足す

Colors

• 白とレモン色のグラデーションを地にし、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

• 欧文の大見出しの下に、手書き風の和文見出しとラベル帯を必ずセットで置く
• 和文見出しは「〜の湯」のように、共通の語尾をつける型にそろえる
• カードの職種名は縦書きにして、左側に白抜きで置く
• リード文は明朝で中央揃えにし、行間を広く取る
• ボタンは欧文の大きな文字と、和文の小さな文字を並べて組む
• 書体は画像からの推定で、フォント名は近い印象の 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。