--- version: alpha name: Festive Confetti Food Maker Recruitment LP description: 淡いクリーム地に多色の紙吹雪とオレンジの道のイラストを散らした、祝祭感のある新卒採用LP。斜体の極太見出しと大きな欧文英字見出しで勢いを出す。白い角丸カードに濃いえんじの丸矢印ボタンを添え、情報を整理している。 colors: background: '#FFFCE1' background-alt: '#FFF0E1' surface: '#FFFFFF' primary: '#F54401' cta: '#7A292D' on-cta: '#FBFDFD' secondary: '#F79A3C' tint-1: '#FE6E5E' text: '#111111' text-body: '#413F41' accent-1: '#14894D' accent-2: '#C0166D' line: '#C9A39A' tint-2: '#FEF5E2' primary-accessible: '#D73C01' tint-1-accessible: '#E81801' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 900 lineHeight: 1.1 letterSpacing: -0.02em headline-lg: fontFamily: Montserrat fontSize: 34px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.01em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.85 letterSpacing: 0.04em note: fontFamily: Montserrat fontSize: 12px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 22px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 32px full: 999px spacing: unit: 8px card: 28px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' entry-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 150px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px arrow-circle: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' rounded: '{rounded.full}' height: 34px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px badge-ribbon: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 28px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 260px photo-link-card: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 180px link-list: textColor: '{colors.text}' typography: '{typography.label-button}' height: 64px --- # DESIGN.md — クリーム地×紙吹雪の元気な食品メーカー採用LP（Festive Confetti Food Maker Recruitment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 紙吹雪・前進する一本道・斜体の極太コピー・クリーム地・丸矢印ボタン・食品写真の切り抜き - **地の質感**: フラットな淡色地。紙吹雪や細長いリボン状の多色シェイプを重ね、グラデーションのオレンジで奥行きを出す - **形**: 角丸カード・ピル型ボタン・円形の矢印アイコン。カードの右下にずらした影を置く - **温度感**: 暖色寄りで明るく、にぎやかで親しみやすい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFCE1` | ページの基本地（クリーム） | 30% | 画素の実測 | | `background-alt` | `#FFF0E1` | 働く環境・採用情報のセクション地（淡いピーチ） | 16% | 画素の実測 | | `surface` | `#FFFFFF` | カードや会社紹介スライドの白い面 | 20% | 画素の実測 | | `primary` | `#F54401` | ブランドの赤（エントリーバナー・ロゴ） | 3% | 画素の実測 | | `cta` | `#7A292D` | 丸矢印やボタンの枠、リンク文字に使う濃いえんじ | 1% | 画素の実測 | | `on-cta` | `#FBFDFD` | エントリーバナー上の白文字 | 0% | 画素の実測 | | `secondary` | `#F79A3C` | 道やバッジのオレンジのグラデーション | 4% | 推定 | | `tint-1` | `#FE6E5E` | サブ見出しバッジ（コーラル→オレンジ） | 0% | 画素の実測 | | `text` | `#111111` | 見出しの黒 | 2% | 推定 | | `text-body` | `#413F41` | 本文テキスト | 2% | 画素の実測 | | `accent-1` | `#14894D` | 日付やカード見出しの緑 | 0% | 画素の実測 | | `accent-2` | `#C0166D` | カード見出しのマゼンタ | 0% | 画素の実測 | | `line` | `#C9A39A` | カードの影・区切り線（くすんだ赤茶） | 1% | 推定 | | `tint-2` | `#FEF5E2` | 背景に敷いた大きな欧文の透かし文字 | 1% | 画素の主要色に補正 | | `primary-accessible` | `#D73C01` | AA を満たす補正値（計算） | | 計算 | | `tint-1-accessible` | `#E81801` | AA を満たす補正値（計算） | | 計算 | - 地はクリームが基本。後半の情報セクションだけ淡いピーチに切り替える - 強調には赤〜オレンジの暖色グラデーションを使う。黄・緑・青・紫・マゼンタは紙吹雪の装飾に限る - ボタンやリンクはすべて濃いえんじの枠＋矢印で統一する - カード見出しは緑・赤・マゼンタを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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの斜体の極太コピー | 装飾・ディスプレイ | Dela Gothic One | 900 | 52px | 1.1 | -0.02em | | `headline-lg` | セクションの英字大見出し | 欧文サンセリフ | Montserrat | 900 | 34px | 1.1 | 0.01em | | `headline-md` | コンテンツの和文見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.03em | | `headline-sm` | カードタイトルや英字見出しの下の和文ラベル | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.04em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 500 | 14px | 1.85 | 0.04em | | `note` | ニュースの日付 | 欧文サンセリフ | Montserrat | 700 | 12px | 1.5 | 0.03em | | `accent` | コピーに添える赤い斜体の英字 | 欧文サンセリフ | Montserrat | 900 | 22px | 1.0 | 0.02em | | `label-button` | ボタンやリンクの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | - メインのコピーは斜体の極太和文にし、右下に赤い斜体の英字を添える - セクション見出しは英字大見出し＋小さい和文＋グラデーションの短線の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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-7134c6a7`（元 LP の URL から採番） - **元 LP**: https://www.otafuku.co.jp/corporate/recruit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。