DESIGN.md — 黄×赤のポップなお菓子メーカー採用 LP（Bright Yellow Red Snack Maker Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、親しみ・手作り感、かわいい
• キーワード: 鮮やかな黄色・赤の矢印・波線マーカー・雲形写真・キャラクター・お菓子素材
• 地の質感: フラットな単色の面。お菓子の切り抜き写真と星のイラストを散らして賑やかにする
• 形: 大きな角丸、ピル型、円・雲形・アーチ形の写真枠、手書き風の波線
• 温度感: 暖かく明るい。元気で親しみやすい

Colors

• 地の色は黄→白→黄→白→生成り→黄→赤の順に切り替え、リズムを作る
• 赤は矢印アイコン・ボタンの縁・ページ送りの点・ロゴ・フッターだけに使う
• 黄色の地の上の文字は黒にする。白抜き文字は赤の地と写真の上だけにする
• 英字の小ラベルは必ず金茶色にする
• 強調したい文には黄色の波線を下線として引く
• タグはベージュの地に黒い文字。選択中のフィルタは黄色にする

Typography

• 見出しは字間を広めにした太字ゴシック
• 見出しの上に、金茶色の細い英字ラベルを小さく置く
• 理念やメッセージは中央揃え、各セクションの本文は左揃え
• 本文の行間は 2.0 前後とゆったりさせる
• 手書き風の英字を大きなアーチ状に置き、装飾として使ってよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は文章と写真を左右に並べる 2 カラム
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 30px
• 白地のセクションは英字ラベル→大見出し→説明文→矢印リンクの順に縦に並べる
• 黄色のセクションは上端を大きな角丸やアーチ形にして白地から切り替える
• 矢印リンクは 1 行ずつ縦に並べ、行間は約 48px
• トピックスは写真→日付とタグ→タイトル→詳しく見るの順に縦に積む

Elevation & Depth

• 影はほぼ使わずフラットにする
• お菓子の切り抜き写真にだけ、ごく薄い落ち影を付ける
• カードは影でなく白い面と角丸で区別する

Shapes

• 角丸: 小 8px ／ 中 20px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 雲形・正円・縦長アーチ・大きな角丸の長方形
• セクション境界: 大きな角丸の黄色ブロック、または半円アーチで切り替える
• 主ボタンは白地に赤い太枠のピル型
• 矢印アイコンは赤い線の円の中に右向き矢印
• フッターのボタンは黄色地の角丸長方形
• 吹き出しには下向きの三角を付ける
• 人物写真は縦長のアーチ枠に入れ、白い太線で縁取る

Components

• 赤枠のピル型ボタン（button-primary）: 白地に赤い太枠のピル型。左に赤い矢印アイコン、右に黒い太字
• 矢印リンク（link-arrow）: 赤い線の円に入った矢印と、太字のテキストを横に並べたリンク
• 英字ラベル付き見出し（section-label）: 金茶色の小さな英字の下に、大きな黒い太字見出しを置く
• 波線マーカー（wave-marker）: 強調したい文の下に黄色の手書き風波線を引く
• 赤い吹き出しラベル（speech-badge）: 赤い角丸の吹き出しに白文字。下向きの三角を付けて見出しの前置きにする
• 社員紹介カード（member-card）: アーチ枠の人物写真の下に白い角丸カード。一言・波線・部署タグ・名前・矢印を入れる
• 赤丸のスライダー送り（slider-nav）: 赤い正円に白矢印のボタンと、白い点のページ送り（現在位置は赤）
• フィルタ用ピル（filter-pill）: 白地にグレーの枠。選択中は黄色の地に黒い太字
• カテゴリタグ（tag-chip）: ベージュの小さなピル型。縦に積んで使う
• フッターのエントリーボタン（footer-entry）: 赤い地の上に置く黄色の角丸ボタン。赤い矢印アイコンと黒文字

Do's and Don'ts

Do - 黄色と白の地を交互に切り替える - リンクの先頭には必ず赤い円の矢印アイコンを付ける - 強調したい文には黄色の波線を引く - 写真は雲形・円・アーチ形に切り抜いて柔らかく見せる - キャラクターや星、お菓子の切り抜きを余白に散らす

Don't - 暗い色や寒色をセクションの地に使わない - 赤を面積の大きい地に使うのはフッターだけにする - 細い明朝体を使わない - 鋭い角の写真ばかりを並べない - 強い影やグラデーションを付けない

Page Structure

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

1. ファーストビュー（働く楽しさを一目で伝える）: 作業中の社員の写真を全面に敷き、白い太字キャッチを重ねる。左上にロゴ、右上に黄色の角丸メニュー
2. 主要導線ボタン（応募と見学へすぐ誘導する）: 赤枠のピル型ボタンを 2 つ横に並べる
3. メッセージ（挑戦できる社風を伝える）: 黄色の地に英字の小見出しと中央揃えの大見出し。キャラクターと星を添え、本文には波線を引き、雲形の写真スライダーを置く
4. 商品ライン（扱う商品を見せる）: 黄色の地に、商品パッケージの切り抜き写真を横に流す
5. 理念（チームの価値観を伝える）: 白い半円アーチと手書き風の英字アーチ、赤い吹き出しラベルを置き、中央揃えの文章に円形写真を添える
6. 企業情報・仕事を知る（下層ページへ案内する）: 白地に英字ラベル付きの見出し、説明文、矢印リンクを縦に並べる
7. 社員紹介（先輩社員の姿を見せる）: 角丸の黄色ブロックに、アーチ枠の人物写真と吹き出し風カードのスライダーを入れる
8. 働く環境（制度を紹介する）: 角丸の写真の下に見出しと矢印リンクの一覧を置く
9. 採用情報（選考に関する情報へ案内する）: 人物写真の下に見出しと矢印リンク 5 本を並べる
10. トピックス（最新のお知らせを届ける）: 生成り色の地にフィルタ用ピルを置き、写真・日付・タグ・タイトルのカードを縦に並べる
11. 締めの CTA（応募を後押しする）: 黄色の地に呼びかけの見出しとキャラクター。赤枠のボタンを 3 つ縦に並べる
12. フッター（ブランドを印象づけ、再度応募へ誘導する）: 赤い地に白い枠のロゴと、黄色のエントリーボタン

Imagery

• 社員の自然な笑顔を、明るい工場やオフィスで撮った写真
• 写真は雲形・正円・アーチ形に切り抜き、円の背景は赤・緑・黄の単色にする
• お菓子の切り抜き写真を余白に散らして賑やかにする
• 太い線で描いたコミカルなキャラクターイラストを添える
• 星形（赤・黄・緑）を小さく散らす装飾
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では文章と写真を左右 2 カラムに並べ、写真の左右を入れ替えながら交互に配置する
• PC ではヘッダーに横並びのメニューと赤いエントリーボタンを置く
• PC の社員紹介は複数のカードを横に並べたカルーセルにする
• PC のトピックスは 3 列のカードにする
• 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 行書くと起動時に読み込まれる。