DESIGN.md — クリーム地×紙吹雪の元気な食品メーカー採用LP（Festive Confetti Food Maker Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
• キーワード: 紙吹雪・前進する一本道・斜体の極太コピー・クリーム地・丸矢印ボタン・食品写真の切り抜き
• 地の質感: フラットな淡色地。紙吹雪や細長いリボン状の多色シェイプを重ね、グラデーションのオレンジで奥行きを出す
• 形: 角丸カード・ピル型ボタン・円形の矢印アイコン。カードの右下にずらした影を置く
• 温度感: 暖色寄りで明るく、にぎやかで親しみやすい

Colors

• 地はクリームが基本。後半の情報セクションだけ淡いピーチに切り替える
• 強調には赤〜オレンジの暖色グラデーションを使う。黄・緑・青・紫・マゼンタは紙吹雪の装飾に限る
• ボタンやリンクはすべて濃いえんじの枠＋矢印で統一する
• カード見出しは緑・赤・マゼンタを1枚に1色ずつ割り当てる
• 主CTAは赤のベタ面バナーに白の斜体文字を載せる
• 英字見出しの下にはオレンジ系グラデーションの短い線を入れる
• entry-banner は文字 #FBFDFD × 背景 #F54401 のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D73C01、4.53:1）を使う。
• badge-ribbon は文字 #FBFDFD × 背景 #FE6E5E のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#E81801、4.51:1）を使う。

Typography

• メインのコピーは斜体の極太和文にし、右下に赤い斜体の英字を添える
• セクション見出しは英字大見出し＋小さい和文＋グラデーションの短線の3段で組む
• 本文は行間を広め（1.8前後）にとり、中央揃えか左揃えにする
• 英字見出しは極太のジオメトリック体を使い、すべて大文字にする
• サブ見出しのバッジは白の太字を小さめに置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特集のカードは横スクロールで、次のカードを少し覗かせる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 28px（375px 幅換算）
• 左右の余白は約22px
• 英字見出しのブロックは中央揃えにする
• 記事カードはスライダーにし、右下に『一覧を見る＋矢印』を置く
• 採用情報のリンクは左に文字、右に丸矢印を置いたリストを等間隔で並べる
• セクションの間に紙吹雪のイラスト帯を挟む

Elevation & Depth

• カードは右下へずらしたくすんだ赤茶のベタ影（ぼかしなし）で浮かせる
• 写真カードには影をつけず、角丸だけにする
• エントリーバナーは赤のベタ面で、皿の写真をはみ出させて立体感を出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。料理の写真は背景を抜いて枠の外にはみ出させる
• セクション境界: 大きな角丸の上端でピーチ地や白パネルに切り替える。紙吹雪の帯も挟む
• ボタンはピル型の白地にえんじの枠
• 矢印は円形の線のアイコンに入れる
• 採用メッセージのカードは下に吹き出しのしっぽを付ける
• サブ見出しのバッジは下向きの三角を持つ角丸の帯

Components

• エントリーバナー（entry-banner）: 赤〜オレンジのグラデーションの角丸バナー。白の斜体で大きな英字と和文を載せ、料理や調理器具の写真をはみ出させる
• アウトラインのピル型ボタン（button-outline）: 白地にえんじの枠。中央に文字、右端に丸矢印を置く
• 丸矢印アイコン（arrow-circle）: 直径約34pxの円形の線に右矢印を入れる。リンクの右端に置く
• 英字セクション見出し（section-heading）: 極太の英字の下に和文ラベルとオレンジのグラデーション短線を置く
• 吹き出しのサブ見出しバッジ（badge-ribbon）: コーラルからオレンジへのグラデーションの角丸帯に白文字を載せ、下向きの三角を付ける。下に和文見出しを置く
• 環境紹介カード（feature-card）: 白の角丸カードに右下のベタ影を付ける。色付きの見出し、本文、右下の丸矢印、右上にはみ出す人物イラストで構成する
• 写真の誘導カード（photo-link-card）: 角丸の写真の右下に白いラベル（えんじの文字と丸矢印）を重ねる。下に見出しと説明を置く
• 採用情報のリンクリスト（link-list）: 太字の項目名と右端の丸矢印を、約64px間隔で縦に並べる

Do's and Don'ts

Do - 紙吹雪は多色の細長い四角形や三角形で、斜めに勢いよく流す - コピーは斜体の極太にして前に進む勢いを出す - リンクの記号はえんじの丸矢印に統一する - カードには右下のベタ影を付けて手作り感を出す - 料理の写真は切り抜いて余白に大胆に配置する

Don't - ぼかしの強いドロップシャドウを使わない - 地を純白だけで構成しない。クリームやピーチの暖色地を保つ - 寒色を見出しやボタンの主色にしない - 細い明朝体を使わない - 紙吹雪を本文の上に重ねて読みにくくしない

Page Structure

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

1. ファーストビュー（社員の明るさとスローガンを印象づける）: 制服姿の社員の集合写真を角丸で配置し、料理の切り抜き写真を周りに置く。下に斜体の極太コピーと赤い英字を重ねる
2. メッセージ（企業の想いを詩的に伝える）: 前へ伸びるオレンジの道を一人が歩くイラスト。道の上に短い文を中央揃えで3連置き、紙吹雪を両脇に流す
3. ニュース（最新の採用情報を知らせる）: 英字見出しの下に、緑の日付と本文のリストを置く。スクロール枠に入れ、赤いスクロールバーを付ける
4. ビジョン（将来のビジョンへの取り組みを紹介する）: 多色の下線を付けたロゴ風の英字見出し、説明文、ピル型ボタンを並べる
5. 職種・社風（仕事内容と育成環境へ誘導する）: 写真の誘導カードを2つ縦に並べ、それぞれに見出しと説明を付ける
6. 特集（社員インタビューやプロジェクト記事を見せる）: グラデーションのバッジ＋和文見出しの下に、横スクロールの記事カードと『一覧を見る』を置く。これを3シリーズ繰り返す
7. 働く環境（制度やキャリアの情報へ誘導する）: ピーチ地に切り替える。人物イラスト付きの白カードを3枚、ベタ影を付けて置き、カードごとに見出しの色を変える
8. 採用情報（募集要項や選考の情報へ導く）: 吹き出しのしっぽを持つ採用メッセージの写真カードと、丸矢印付きのリンクリストを置く
9. 会社紹介スライド（資料で会社を理解してもらう）: 大きな角丸の白パネルに、スライドのサムネイルとピル型ボタンを横並びで3段置く
10. CTA（エントリーへ誘導する）: 赤いグラデーションのバナーに斜体の英字を載せ、料理の写真をはみ出させる
11. フッター（スローガンで締める）: 道と紙吹雪のイラストを再び置き、コピーと看板型のページトップボタンを配置する

Imagery

• 社員の写真は制服や作業着の笑顔で、自然光の明るいトーンにする
• 料理の写真は背景を抜き、画面の端から大きくはみ出させる
• フラットなイラストの人物が跳ねたり物を掲げたりする元気なポーズ
• 多色の紙吹雪とリボンを斜めに流し、祝祭感を出す
• 中央の消失点へ伸びるオレンジのグラデーションの道で前進を象徴する
• 背景に大きな欧文の透かし文字を薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では写真の誘導カードを2カラム、環境カードを3カラムにする
• PC の特集はバッジと見出しを左列に、カードのスライダーを右列に配置する
• PC の採用情報は写真カードを左に、リンクを2列で右に並べる
• PC では右上にメニューボタンと円形のエントリーバッジを固定する
• PC では紙吹雪とコピーを横幅いっぱいに広げ、中央の幅は約1000pxに収める

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