DESIGN.md — 黄×赤のポップな雲柄スーパー高卒採用 LP（Pop Yellow Red Supermarket Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、親しみ・手作り感、かわいい、情報量多め・訴求型
• キーワード: 雲形の境界・赤い吹き出し見出し・切り抜き人物・食材イラスト・ドット・三角の地模様・白い角丸カード
• 地の質感: フラットな塗りに、水玉・三角・十字の淡い地模様を重ねる
• 形: 大きな角丸カード、ピル型の見出しと吹き出しのしっぽ、もくもくした雲形の区切り
• 温度感: 暖かく明るい。黄と赤が主役で、水色と淡い緑を間に挟んで変化をつける

Colors

• 地色はレモンイエローを基本にし、セクションごとに水色・淡い緑・薄いグレーに切り替える
• 見出しは必ず赤のピル吹き出しに白文字で入れる
• 情報は白い面に載せて、地色の上に直接本文を置かない
• 部門ごとに緑・水色・赤・橙・紫の色分けを使い、ラベルの枠線とタグ文字の色をそろえる
• 数字の強調は赤の太字だけで、単位は小さくする
• フッターは赤のベタ面に白文字
• dept-tab は文字 #26BF4A × 背景 #FEFEFE のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1B8835、4.51:1）を使う。
• interview-card は文字 #26BF4A × 背景 #FEFEFE のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1B8835、4.51:1）を使う。

Typography

• 見出しは全部太字ゴシックにし、明朝は使わない
• カード見出しは中央揃えにして 2 行で改行位置を整える
• 本文は左揃えで、行間を広く取る（1.8〜1.9）
• 数字は単位の 2 倍の大きさにして赤くする
• 英字の飾り文字は背景に薄く大きく、セクションの上端からはみ出させる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。数字セクションだけ 2 列のカード
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• セクション見出しの吹き出しは幅 70% で中央に置く
• カード同士の間は 12〜16px
• 人物の切り抜きはカードの角に重ねて、画面端からはみ出させる
• 表は左に赤ピルのラベル、右に白ピルの値を置いた横並び行で作る
• インタビューは横スライダーにし、両端に四角い矢印ボタンを置く

Elevation & Depth

• 白カードには淡い影（0 4px 12px rgba(0,0,0,.08)）を付ける
• 雲形の白い面はうっすら影を付けて浮かせる
• 赤枠の制度カードは影を付けず、太い線だけで見せる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 12px の長方形、人物は円形のフレームか背景を抜いた切り抜き
• セクション境界: もくもくした雲形の波線で、次の地色と切り替える
• 見出しの吹き出しは右下に小さなしっぽを付ける
• 制度カードは 4px の赤枠にし、左上に大きな扇形で番号を入れる
• 部門カードは台形のラベルを上端にかぶせる
• インタビューカードは右下に三角の＋マークを入れる

Components

• 吹き出し見出し（heading-bubble）: 赤いピル型にしっぽの付いたセクション見出し
• 赤ピルボタン（button-primary）: カード内の詳細リンク
• 部門タブ（dept-tab）: 部門ごとに色を変えた枠線ピル。選択中は塗りつぶす
• 数字カード（stat-card）: 白い角丸カード。上に台形の色帯、中央にクリーム円のアイコン、下に赤の大きな数字
• 番号付き制度カード（benefit-card）: 赤い太枠と左上の扇形番号。写真、赤見出し、本文の順に並べる
• インタビューカード（interview-card）: 緑の細枠に円形の人物写真、大きな緑の番号、部署ラベルの帯
• 募集要項の行（info-row）: 左に赤ピルのラベル、右に白ピルの値を並べる
• FAQカード（faq-item）: 赤ピルの質問帯を、白い角丸の回答カードの左上に重ねる
• ハッシュタグ（hashtag）: 部門色で書く太字の短いタグを 3 つ並べる

Do's and Don'ts

Do - 見出しは毎回、同じ赤の吹き出しにする - 雲形の区切りで地色を切り替えて、リズムを作る - 人物の切り抜きを各セクションの端に散らして、にぎやかさを出す - 数字は赤の太字で大きく、注記は小さなグレーで書く - 部門は色分けして識別しやすくする

Don't - 暗い背景や寒色だけで構成しない - 直角の硬いボックスを多用しない（赤枠の制度カード以外） - 本文を黄色地の上に直接置かない - 細い明朝体や控えめな装飾にしない - 赤を本文の長文に使わない

Page Structure

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

1. ファーストビュー（対象（高校生）と会社の雰囲気を一目で伝える）: イラストの店舗と空を背景に、赤い四角のタイトルと社名ロゴを置き、跳ねる社員の切り抜きを周りに散らす
2. 呼びかけ（読者（生徒・保護者・先生）に宛てた挨拶）: 白カードに赤の点線枠と封筒アイコンを付け、赤文字の 2 行で呼びかける
3. 会社紹介（事業の概要を伝える）: 雲形の白い面に、赤の 2 行見出しと本文、円形の店舗写真を置く
4. 部門紹介（仕事の種類を見せる）: 色分けした部門タブと、買い物かご型の枠のカードに写真・説明・ハッシュタグを入れる
5. 先輩インタビュー（働く人のリアルを伝える）: 白い大きな角丸の面に、番号付きの人物カードを並べたスライダーを置く
6. 数字で見る会社（規模と安定性を示す）: 三角模様の水色地に、2 列の数字カードを並べる
7. 制度・福利厚生（働きやすさを訴求する）: 淡い緑のドット地に、番号付きの赤枠カードを 5 枚縦に並べる
8. ビジュアルブレイク（親しみを高める）: 黄色の爆発形に、社員 2 人の切り抜きと食材イラストを置く
9. 募集要項（条件を明示する）: 店内のぼかし写真から続けて、ラベル付きピル行の表を置く
10. よくある質問（不安を解消する）: 黄色地に Q&A の大きな英字を飾り、赤い質問帯と白い回答カードに人物を添える
11. フッター（ポリシーへのリンクとコピーライト）: 赤のベタ面に白い小さな文字を中央揃えで置き、細い白線で区切る

Imagery

• 社員は白背景で全身を撮って切り抜き、ジャンプ・ポーズ・指差しなど動きのある姿にする
• 食材や商品のイラストはフラットな塗りで、軽い主線を入れる
• 業務写真は明るい店内で撮り、角丸で切り抜く
• 背景は水玉・三角・十字の淡い繰り返し模様にする
• インフォグラフィックは単純なアイコンと、クリーム色の円の背景で作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 900px 前後に収め、背景のイラストと人物を左右に大きく広げる
• インタビューは PC では 3 列のグリッドにする
• 数字カードは PC で 3 列にする
• 制度カードは PC で 2 列にする
• 部門紹介は PC ではタブを左に縦に並べ、カードを横長にする
• FAQ と募集要項は PC で 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 行書くと起動時に読み込まれる。