DESIGN.md — 濃紺夜空×絵具ポップの採用サイト LP（Painterly Burst Night Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、親しみ・手作り感、力強い・インパクト
• キーワード: 絵具の筆致・手描き線・濃紺の夜・爆発するFV・社員の声・コンデンス欧文
• 地の質感: クレヨン・ガッシュ風のざらついた塗り。地はフラットな濃紺と生成り。
• 形: ゆがんだ手描き輪郭の角丸カード、波打つ有機的なセクション境界
• 温度感: 暖色の絵具と冷たい濃紺の対比で、夜に灯る熱を表す

Colors

• 地は濃紺と生成りを交互に切り替え、間に絵具の多色帯を挟む
• 濃紺上の文字と線は生成り色で統一する
• 黄・マゼンタ・オレンジは筆致の面だけに使い、文字色には使わない
• ボタンは塗らず、地色に合わせて線だけで囲む
• 写真の背後に鮮やかなピンクや緑の色板をずらして重ねる
• video-card は文字 #FFF4D6 × 背景 #F0389A のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#D61079、4.55:1）を使う。

Typography

• 英字は極太コンデンスで大きく、和文はその下に小さく添える
• コンセプト文は短い行に区切り、行間を大きく取る
• 見出しは左右に斜線をつけた「＼ ／」で囲む
• FVのキャッチは手書きの線画文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、社員一覧は横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 40px（375px 幅換算）
• コンセプト文は左寄せで中央の幅を狭くする
• セクションごとに英字見出しと和文見出しのペアを置く
• カードは画面幅いっぱいに近い大きさで縦に並べる
• ボタンは中央に置き、右端に「>」をつける

Elevation & Depth

• 影は使わず、手描きの輪郭線と色板をずらして重ねて奥行きを出す
• カードの下側だけ輪郭線をずらして厚みを見せる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 48px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の長方形にし、手描き線で縁取る
• セクション境界: 雲や液体のような波打つ有機形状で切り替える
• 輪郭線はわざと少しゆがめて手描き風にする
• 大きなカードはふくらんだ角丸形にする
• ボタンは角丸8px程度の線囲みにする

Components

• 線囲みボタン（button-outline）: 細い線で囲み、英字の大見出しと和文の小さな補足を2段にし、右端に>をつける
• 手描き輪郭カード（card-handdrawn）: 生成りの面をゆがんだ濃紺の線で縁取り、英字の大見出しと説明文を入れる
• 動画サムネイルカード（video-card）: 社員写真の背後にピンクの色板をずらして重ね、中央に再生アイコンを置く
• 斜線囲み見出し（heading-slash）: 左右に斜線をつけた生成り色の太字見出し
• 線囲み英字ラベル（label-box）: NEWSなどの小さな英字を四角い線で囲む
• 星形インジケーター（carousel-nav）: 丸囲みの左右矢印の間に、星やきらめきの形を並べてページ送りを示す

Do's and Don'ts

Do - 絵具の筆致は大胆に画面からはみ出させる - セクションの境界は波形や雲形でつなぐ - きらめきや星の小さな装飾を余白に散らす - 社員写真は明るい白背景で、笑顔の正面バストアップにする

Don't - 直線的な境界や幾何学的なきっちりした枠にしない - ボタンをベタ塗りの派手な色にしない - 絵具の色を本文の文字色に使わない - ドロップシャドウやグラデーションボタンを使わない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（コンセプトを一言で印象づける）: 中心から放射状に爆発する多色の筆致の上に、手書きキャッチを置き、下にSCROLLを表示
2. コンセプト文（企業の想いを詩的に伝える）: 生成りの地に黄色の筆致の面を置き、短い行の文章を縦に並べ、小さなキャラを添える
3. メッセージ導線（トップメッセージへ誘導）: 線囲みボタンを置き、下を波形で濃紺に切り替える
4. お知らせ（最新情報を伝える）: 線囲みラベルの下に日付とタイトル、その下に手描き線
5. 社員紹介（社員の声や人柄を見せる）: 斜線囲み見出しで動画のピックアップを1件大きく見せ、その下に社員カードの横カルーセルとMOREボタン
6. 職種・事業紹介（仕事内容へ誘導）: 多色の絵具背景の上に、手描き輪郭の大型カードを縦に並べる
7. 募集要項導線（応募情報へ誘導）: 絵画調の風景イラストを全面に敷き、白抜きの大きな英字と線囲みボタンを置く
8. イベント案内（仕事体験への参加を促す）: 濃紺の地に生成りの大きな英字見出しと手描きのイラスト

Imagery

• クレヨンやガッシュで描いたような、ざらつきのある多色の筆致
• 線画のゆるいキャラクターを要所に置く
• 星・きらめき・十字の小さな装飾を散らす
• 社員写真は白背景で、自然光で撮った明るいポートレート
• 導線の背景には、夕暮れの森のような絵画調の風景を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもFVは横長の放射状イラストを全幅で見せる
• PCのコンセプト文は中央の狭い幅のまま、周りの絵具の面を大きく取る
• PCのお知らせは見出しと本文を横並びの1行にする
• PCの社員カルーセルは4〜5枚を同時に見せる
• ボタンはPCでも中央寄せで、幅を固定する

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 行書くと起動時に読み込まれる。