DESIGN.md — 青グラデと応援旗モチーフの新卒採用 LP（Cheerful Blue Pennant Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、ポップ・元気、信頼・誠実
• キーワード: 応援旗・青のグラデーション・オレンジの差し色・欧文の大見出し・手書きの一言・波形の区切り
• 地の質感: フラットな単色面とやわらかいグラデーション。三角の旗は半透明やぼかしで奥行きを出す
• 形: 三角の旗、波のカーブ、角丸カード、ピル型ボタン
• 温度感: 爽やかな寒色が主役で、オレンジが温かみを足す

Colors

• 地の色は、白 → 濃紺 → 水色 → 明るい青 → 濃紺 → 白 の順に切り替え、リズムを作る
• 濃紺の面では文字を白にし、見出しは明朝で落ち着かせる
• オレンジは旗形の装飾と丸い導線ボタンにだけ使う。面積は 3% 以下に抑える
• 主ボタンは青のピル型、サブボタンは淡い青や白のピル型にする
• 職種紹介パネルは、上の明るい青から下の淡い青へ縦にグラデーションさせる
• 写真カードは、下半分を濃紺のグラデーションで覆い、白文字を載せる
• circle-link は文字 #EEFEFF × 背景 #F56B15 のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C25008、4.56:1）を使う。

Typography

• 感情に訴える見出しは明朝、情報系はゴシックで分ける
• セクション見出しは、和文・斜めの細線・英字サブの 3 段で組む
• 大きな欧文ロゴタイプに、筆記体を斜めに重ねる
• 細い欧文を極大サイズの透かし文字にし、背景に流す
• 縦書きの英字ラベルを写真の横に薄く置く
• 本文は行間 2.0 で、ゆとりを持たせて組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約 22px
• 写真はずらして重ね、コラージュのように配置する
• 職種カードは横幅いっぱいにして縦に積む
• CTA は全幅のピル型を 3 段に積む
• お知らせは区切り線で区切ったリストにする

Elevation & Depth

• カードには淡い影（0 4px 16px rgba(0,40,100,.15)）を付ける
• CTA ボタンは周りに青い光彩（外側に 20px ほどのぼかし影）を付ける
• 背景の三角はぼかしと半透明で奥行きを出す

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 角丸 4〜8px の長方形。人物は三角の旗形に切り抜く
• セクション境界: 大きな波型カーブ。上端を角丸 28px にした面の重ね
• 三角の応援旗を装飾の基本形にする
• 人物写真の上には円形のオレンジボタンを重ねる
• 色の帯は上の角を丸めて重ねる

Components

• 主ボタン（button-primary）: 青のピル型。白文字の右に矢印
• エントリーボタン（button-entry-stack）: 白地のピル型で全幅。職種名と英字の 2 行。周りに青い光彩
• サブボタン（button-sub）: 淡い青のピル型。濃紺の文字に矢印
• 旗付き見出し（pennant-heading）: 見出しの左後ろに三角の旗を半分重ねる
• 職種カード（job-card）: 写真の下を濃紺のグラデーションで覆う。明朝キャッチ、オレンジ旗、職種名、白丸の矢印を載せる
• 円形オレンジボタン（circle-link）: 人物切り抜きに重ねる直径 90px の円。白文字と矢印
• お知らせ行（news-item）: 日付、グレーのタグ、2 行のタイトル、右端の小さな丸矢印。下に区切り線
• 手書き旗吹き出し（speech-pennant）: 青や水色の三角旗に、手書き風の一言を斜めに載せる

Do's and Don'ts

Do - 三角の旗とモチーフ写真を FV 全体に散らし、動きを出す - セクション境界には波型か角丸の面を使う - オレンジは要所の旗とボタンだけに使う - 明朝見出しは濃紺地に白抜きで載せる - 英字の透かし文字や縦書きラベルで、余白にリズムを付ける

Don't - オレンジを広い面や本文に使わない - 角張った四角ボタンにしない - 暗い色や彩度の低いトーンに寄せない - 装飾を本文の上に重ねて読みにくくしない - 見出しをすべてゴシックにして無機質にしない

Page Structure

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

1. ファーストビュー（コンセプトを一目で伝える）: 白地の中央に大きな欧文ロゴと筆記体を置く。周りに応援グッズの写真と旗の吹き出しを散らす
2. メッセージ（企業の想いを語る）: 波型で区切った濃紺地に、明朝の白見出しと本文。社員写真 3 枚をずらして配置
3. コンセプト紹介（大切にする価値観を説明）: 水色地。縦書きの見出しに旗を添え、横長の集合写真、明朝の副題、本文、主ボタンを並べる
4. 企業の DNA（歴史や強みへ誘導）: 角丸の写真、旗付き見出し、本文、淡い青のサブボタン
5. 職種紹介（職種ごとの入口を示す）: 角丸の青いパネルの上に、英字の透かし文字と写真付き職種カード 2 枚
6. 社員インタビュー（先輩社員の声へ誘導）: 見出し 3 段と本文。三角に切り抜いた人物に、縦書きの英字と円形オレンジボタンを重ねる
7. 働く環境（制度の充実を伝える）: 濃紺地に建物の写真を青く重ねる。旗見出し、白文字、白のピル型ボタン
8. お知らせ（最新の採用情報を出す）: 欧文の大見出しにオレンジ旗を重ね、区切り線のリストを続ける
9. CTA（エントリーを促す）: ロゴタイプを再び置き、白いピル型 2 つと青のピル型 1 つを積む
10. フッター（サイト内の導線をまとめる）: 上を角丸にした濃紺面。2 列のリンク、ロゴ、外部リンクボタン

Imagery

• 応援グッズ（メガホン、ポンポン、扇子、笛、紙吹雪）を青系で揃え、切り抜いて配置する
• 社員写真は明るい自然光の笑顔。制服やスーツで清潔感を出す
• 人物は三角や旗形に切り抜き、背景の色帯と重ねる
• 大小の半透明の三角形をぼかしながら散らす
• 建物の写真は青の単色に寄せ、背景になじませる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV の左右に旗の吹き出しを多く散らし、ロゴは中央に置く
• PC のメッセージは、大きな濃紺の旗形の中に文章を収め、周りに写真を浮かべる
• 職種カードは PC では、左に写真、右に濃紺の文字という横長の型にする
• インタビューは PC では 2 人を横に並べる
• CTA は PC ではピル型 3 つを横に並べる
• お知らせ見出しは 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 行書くと起動時に読み込まれる。