DESIGN.md — 黄×紺×橙の幾何学ポップな採用 LP（Pop Geometric Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、親しみ・手作り感、信頼・誠実、情報量多め・訴求型
• キーワード: 幾何学図形・笑顔の社員写真・紺のピル型ボタン・番号付きの取り組み紹介・線画アイコンの地紋
• 地の質感: フラットな単色の面。グレー地には薄い線画アイコンを地紋として敷く
• 形: 円・三角を写真の上に重ねたコラージュ。カードと写真は角丸、ボタンはピル型
• 温度感: 明るく温かい。紺で誠実さを引き締める

Colors

• 地は白・生成りグレー・薄い水色を交互に切り替えてセクションを区切る
• 黄・青・橙は面や図形に使い、文字には紺か墨色を使う
• ボタンは紺のピル型＋白文字で統一する
• 見出しの1文字目や小見出しを橙にして強調する
• フッターは橙地に白い線画の地紋を敷く
• button-secondary は文字 #FFFFFF × 背景 #ED6E02 のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#BF5902、4.52:1）を使う。

Typography

• 見出しは極太のゴシックで短く言い切る
• 大見出しの上に橙の短いリードと短い紺線を置く
• 取り組みの見出しは、1文字目だけ橙にする
• ボタンのラベルは英字の大文字＋「＋」記号にする
• 本文は行間を広めにとり、グレーで控えめにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ニュースカードは SP で 1〜2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 取り組み紹介は、写真コラージュと白い本文カードを左右交互にずらして重ねる
• 白いカードは写真に一部重ね、左上に黄色の番号タグを付ける
• 社員写真はすき間なく 4×2 のグリッドに並べる
• ボタンはコンテンツ中央にやや幅広で置く

Elevation & Depth

• 白いカードには薄い影か、細い水色の縁取りを付けて地から浮かせる
• 写真は影なしのフラットにする
• ページトップボタンは白丸に軽い影を付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。FVとバナーでは円形に切り抜く
• セクション境界: 直線で地色を切り替える。フッター上端は青い波線の装飾
• 円と三角の幾何学図形を写真の上に散らす
• 番号タグは黄色地の六角形またはラベル形にする
• バナーの角に大きな円を重ねる

Components

• 紺ピルボタン（button-primary）: 英字ラベルと＋記号を入れた幅広のピル型ボタン
• 橙ピルボタン（button-secondary）: 青地のバナー上で使う橙のボタン
• リード付き大見出し（heading-lead）: 橙のリード、短い紺線、極太の見出しを縦に積む
• 番号タグ（number-tag）: 黄色地に紺の数字を置き、カードの角に重ねる
• 取り組みカード（feature-card）: 白地に見出し・下線付きの小見出し・本文・ボタンを入れ、写真に重ねる
• 2色バナー（promo-banner）: 黄と青の面に、円形の人物写真・見出し・ボタンを入れる
• ニュースカード（news-card）: 角丸の写真の右上に橙のカテゴリラベルを付け、下にタイトル・日付・タグを並べる
• ハッシュタグ（hash-tag）: 淡いグレー地の小さな角丸タグ

Do's and Don'ts

Do - 黄・青・橙の図形で元気さを出す - 社員の自然な笑顔を、店舗の現場で撮った写真を多く使う - ボタンの形と色は紺のピル型で統一する - 地色を交互に切り替えてリズムを作る

Don't - 文字を黄色にしない（読めなくなるため） - グラデーションや重い影を使わない - 明朝体を使わない - 写真を角丸なしの硬い四角で並べすぎない

Page Structure

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

1. ファーストビュー（企業の姿勢を一言で伝える）: 社員写真のコラージュに幾何学図形を重ね、中央に紺の極太コピーを置く
2. 社員紹介スライダー（働く人の顔を見せる）: 斜線で挟んだ見出しの下に、人物写真のカルーセルを置く
3. ミッション（企業理念を伝える）: 生成りの地にアイコンを散らし、中央揃えの見出しと本文を置く
4. 誘導バナー（代表のメッセージと求める人物像へ誘導する）: 黄と青の2色バナーを横に並べる
5. 取り組み紹介（事業の広がりを伝える）: 番号付きの白いカードと写真を、左右交互に3つ置く
6. 社員インタビュー（社員の声への入口を作る）: 地紋の上に見出しを置き、4×2の写真グリッドとボタンを並べる
7. ニュース（最新の情報を見せる）: 3列のカードを2段並べ、ボタンを置く
8. 外部バナー（関連メディアへ誘導する）: 横長の黄色いバナーを中央に置く
9. フッター（会社情報と応募先へ導線を作る）: 橙地に白枠のボタンを置き、下端を紺の波線で締める

Imagery

• 店舗の売り場で社員が笑顔で接客している写真
• 制服のスタッフとスーツの社員を混ぜて多様さを出す
• 円・三角・半円を黄・青・橙で写真に重ねる
• ボールや本などの小さなイラストを、線画アイコンとして地紋に散らす
• ニュースのサムネイルは、明るい物撮りや図解のイラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは取り組み紹介が写真とカードの2カラム交互配置。SPでは写真を上、カードを下に縦積みする
• 2色バナーはSPで縦に並べる
• ニュースはPCで3列、SPでは1列か2列にする
• 社員写真のグリッドはPCで4列、SPで2列にする
• FVのコピーはSPで2行に折り返す

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