DESIGN.md — 青緑グラデ×蛍光黄のポップ出版採用 LP（Pop Comic Gradient Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、力強い・インパクト、クール・先進的
• キーワード: 青緑グラデーション・蛍光イエロー・ピンクのリボン帯・漫画の吹き出し・キラキラ装飾・斜めカット
• 地の質感: 細かいノイズ粒子が乗ったグラデーション地。フラットで光沢なし。
• 形: 角丸カード、ピル型ボタン、楕円の吹き出し、斜めにカットした写真パネル、少し傾けたリボン帯。
• 温度感: 爽やかで明るいが、蛍光色とピンクで熱量が高い。

Colors

• 地は全ページ通して左上青→右下緑の対角グラデーション。
• 見出しは蛍光イエロー、その上のリード帯はピンク地に白文字。
• 代表メッセージなどの大きなパネルだけ鮮青と蛍光黄のベタ面で区切る。
• 本文は白一色。黒文字は黄色面の上だけ。
• 情報ボタンはオレンジ、重要な外部導線は赤ピンクと水色で差をつける。
• ボタンには白い細枠をつけ、グラデ地から浮かせる。
• page は文字 #111111 × 背景 #035483 のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#0582CB、4.55:1）を使う。
• section-heading は文字 #EBF70F × 背景 #EE7AD0 のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C31997、4.57:1）を使う。
• message-panel は文字 #FFFFFF × 背景 #0076FB のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#0071F1、4.53:1）を使う。
• speech-bubble-link は文字 #EE7AD0 × 背景 #EBF70F のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C31997、4.57:1）を使う。
• banner-highlight は文字 #FFFFFF × 背景 #EE7AD0 のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C31997、4.55:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #FD8701 のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B36001、4.57:1）を使う。
• button-external は文字 #FFFFFF × 背景 #FF3658 のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#EE0028、4.5:1）を使う。
• question-tag は文字 #EE7AD0 × 背景 #EBF70F のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C31997、4.57:1）を使う。

Typography

• セクション見出しは太い装飾書体を蛍光黄で、やや右上がりに傾ける。
• 英字見出しは白の幾何学サンセリフで大文字。
• キーワードにはルビをつけて読み遊びを入れる。
• 本文は中央揃えで短く改行する。
• 吹き出しの中はピンク文字の手書き風。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、インタビューのみ 2 カラムのカード
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 要素はすべて中央に寄せる。
• 見出しの上下にキラキラ装飾を余白に散らす。
• メッセージパネルは全幅で 2 枚縦に積む。
• 最後のボタンは幅 60% のピル型を縦に並べる。

Elevation & Depth

• 影はほぼ使わず、フラットな面で構成する。
• カードやボタンは白の細枠で浮かせる。
• 写真のキャプション帯は濃紺の半透明を重ねる。

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。メッセージ写真は対角線で斜めにカットして色面と重ねる。FV上部は人物をアーチ型の窓で切り抜く。
• セクション境界: 直線。色面パネルは斜めの切り替え
• リボン帯はやや傾けた長方形。
• 吹き出しは楕円に小さな三角のしっぽ。
• ボタンはすべてピル型。
• 角の折り返しや白縁取りで漫画のコマっぽさを出す。

Components

• リボン帯+装飾見出し（section-heading）: 眼鏡をつまむ手のイラスト、傾いたピンクのリボン帯、その下に蛍光黄の大見出しを重ねる。
• 斜めカットの代表パネル（message-panel）: 全幅の色面に人物写真を対角線でカット。吹き出しと英字の大見出しを重ねる。
• 社員インタビューカード（interview-card）: 2カラムで角丸写真、下部に斜めの濃紺帯を敷いて年次と所属を白文字で入れる。
• 吹き出しリンク（speech-bubble-link）: 黄色の楕円吹き出しにピンクの手書き文字。下にキャラ化したロゴとキラキラを添える。
• 制度訴求バナー（banner-highlight）: ピンク地の角丸バナーに白と黄の太字。角に折り返しと虫眼鏡アイコン。
• SNS誘導カード（sns-card）: 黒い角丸カードに白の細枠。左にロゴ、右にピンクの小見出しと白のアカウント名。
• 情報ボタン（button-primary）: オレンジのピル型に白文字、白い細枠。縦に並べる。
• 外部導線ボタン（button-external）: 赤ピンク/水色のピル型で英字の大文字、小さなカナと外部リンクアイコンを添える。
• 問いかけタグ（question-tag）: 黄色地に黒の太枠、ピンク文字で問いを書いた付箋風の札。

Do's and Don'ts

Do - 地は必ず青→緑の対角グラデーションに細かいノイズをのせる。 - 見出しは蛍光黄、リード帯はピンクに固定する。 - 見出しの周りにキラキラの装飾を必ず散らす。 - 写真は明るい職場で自然に笑う社員を使う。 - 本文は白で短く、中央揃えにする。

Don't - 白い背景のセクションは作らない。 - 明朝体や細い書体は使わない。 - 影やグラデーションのボタンは使わない。 - 落ち着いたくすみ色は混ぜない。 - 長い本文の段落は置かない。

Page Structure

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

1. ファーストビュー（テーマを強く印象づける）: 上部に社員写真のアーチ窓を並べ、中央に手と眼鏡のイラストを添えた蛍光黄の巨大な漢字ロゴ、下に淡い英字の大きなタイトル。
2. コンセプト（会社の考え方を伝える）: 付箋風の問いかけタグ、ルビ付きの白いキャッチ 2 行、中央揃えのリード文 5 行。
3. お知らせ（最新情報を伝える）: 白文字のラベルと下線、日付と短い本文、黄色下線のリンク。
4. SNS誘導・制度訴求（フォローと制度アピール）: 黒いSNSカードとピンクの訴求バナーを縦に並べる。
5. 代表メッセージ（トップの想いを伝える）: 鮮青と蛍光黄の全幅パネル 2 枚に、斜めカットの人物写真と吹き出し、英字見出し。
6. 職種紹介（仕事の種類を案内する）: リボン帯付き見出しと、商品を並べた角丸写真。
7. 社員インタビュー（働く人を見せる）: 2 カラム×2 段の角丸写真カードに斜めの濃紺キャプション帯。
8. 仕事の流れ（商品ができる工程を紹介）: リボン帯見出し、2 行の黄色大見出し、角丸写真。
9. その他コンテンツ（関連ページへ回遊させる）: 英字見出しの下に黄色吹き出しリンクを 3 つ、互い違いに配置。
10. 募集情報・CTA（応募導線）: 英字 2 行の見出し、オレンジのピル型ボタン 4 つ、赤ピンクと水色の外部ボタン 2 つ、最後に注釈。

Imagery

• FVの社員写真はモノクロにしてアーチ窓で切り抜く。
• 本文中の社員写真はカラーで、本棚のある職場で笑顔を撮る。
• 商品は棚に並べて正面から撮った明るい写真にする。
• 装飾は白い四芒星のキラキラ、眼鏡をつまむ白手袋の手、ポップな漫画線画。
• ロゴの漢字を緑の線でキャラクター化して吹き出しに添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV のコピーを横一行にして英字タイトルを2行に縮める。
• PC は代表メッセージ2枚を横並びにする。
• PC のセクションは写真と見出しを左右交互の2カラムにする。
• PC のインタビューは4人を横一列に並べる。
• PC の吹き出しリンクは3つ横並び、ボタンは4つ横並びにし、外部ボタン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 行書くと起動時に読み込まれる。