DESIGN.md — 赤×黄緑のポップな人体図解の採用 LP（Bold Pop Illustrated Body Journey Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感
• キーワード: 人体シルエット・消化管の図解・吹き出し円・菌モチーフ・フラットイラスト・高彩度
• 地の質感: グラデーションを使わないベタ塗りのフラットイラスト。生成りの地に原色の面を重ねる
• 形: 有機的な曲線、ピル型、正円の吹き出し、不定形のブロブ
• 温度感: 暖色が中心で熱量が高い。補色の黄緑で元気さを出す

Colors

• 地は生成りにし、その上に朱赤の人体を大きく置いてページの大半を赤にする
• 黄緑は管と腸だけに使い、上から下へ導く線の役にする
• セクションの入口はオレンジの円にそろえる
• 最終導線とフッターは黒で締める
• マゼンタ・青・青緑の菌モチーフは小さく散らすだけにとどめる
• 赤地の本文は白文字にする
• 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

• キャッチは極太で斜めにし、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

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

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