--- version: alpha name: Pop Yellow Red Supermarket Recruiting LP description: レモンイエローの地に赤い吹き出し見出しを重ね、雲形の境界とイラスト背景でにぎやかに見せる高校生向けの採用 LP。人物を切り抜いてページ全体に散らし、白い角丸カードで情報を整理する。 colors: primary: '#E70012' on-primary: '#FFFFFF' background: '#FEF189' surface: '#FEFEFE' background-alt: '#ECFFDF' tint-1: '#92DDE0' cta: '#E40213' on-cta: '#FFFFFF' accent-1: '#26BF4A' accent-2: '#13B2D9' text-body: '#4D5151' secondary: '#C80513' tint-2: '#F6EFC1' dark-section: '#3C3C3C' accent-1-accessible: '#1B8835' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.4 accent: fontFamily: Montserrat fontSize: 40px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' heading-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 50px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 42px dept-tab: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px stat-card: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 180px benefit-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 420px interview-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 340px info-row: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 48px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 240px hashtag: textColor: '{colors.accent-1}' typography: '{typography.label-button}' height: 20px --- # DESIGN.md — 黄×赤のポップな雲柄スーパー高卒採用 LP（Pop Yellow Red Supermarket Recruiting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、かわいい、情報量多め・訴求型 - **キーワード**: 雲形の境界・赤い吹き出し見出し・切り抜き人物・食材イラスト・ドット・三角の地模様・白い角丸カード - **地の質感**: フラットな塗りに、水玉・三角・十字の淡い地模様を重ねる - **形**: 大きな角丸カード、ピル型の見出しと吹き出しのしっぽ、もくもくした雲形の区切り - **温度感**: 暖かく明るい。黄と赤が主役で、水色と淡い緑を間に挟んで変化をつける ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E70012` | ブランド赤（見出し吹き出し・枠・フッター） | 9% | 画素の実測 | | `on-primary` | `#FFFFFF` | 赤面の上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#FEF189` | メインの地色レモンイエロー | 14% | 画素の実測 | | `surface` | `#FEFEFE` | カード・本文エリアの白 | 35% | 画素の実測 | | `background-alt` | `#ECFFDF` | 制度セクションの淡い緑地 | 8% | 画素の実測 | | `tint-1` | `#92DDE0` | 数字セクションの水色地 | 8% | 画素の実測 | | `cta` | `#E40213` | ボタン赤 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタンの白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#26BF4A` | 部門ラベル・番号の緑 | 2% | 画素の実測 | | `accent-2` | `#13B2D9` | 数字カードの見出し帯の水色 | 0% | 画素の実測 | | `text-body` | `#4D5151` | 本文の濃いグレー | 3% | 画素の主要色に補正 | | `secondary` | `#C80513` | 数字や小見出しの赤文字 | 0% | 画素の主要色に補正 | | `tint-2` | `#F6EFC1` | アイコン背後の淡いクリーム円 | 1% | 画素の実測 | | `dark-section` | `#3C3C3C` | スライダー矢印・注記アイコンの濃グレー | 0% | 画素の実測 | | `accent-1-accessible` | `#1B8835` | AA を満たす補正値（計算） | | 計算 | - 地色はレモンイエローを基本にし、セクションごとに水色・淡い緑・薄いグレーに切り替える - 見出しは必ず赤のピル吹き出しに白文字で入れる - 情報は白い面に載せて、地色の上に直接本文を置かない - 部門ごとに緑・水色・赤・橙・紫の色分けを使い、ラベルの枠線とタグ文字の色をそろえる - 数字の強調は赤の太字だけで、単位は小さくする - フッターは赤のベタ面に白文字 - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のロゴ風の大見出し・統計の大きな数字 | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.2 | 0.0em | | `headline-lg` | 赤い吹き出しのセクション見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.05em | | `headline-md` | カード内の赤い 2 行見出し（中央揃え） | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.05em | | `headline-sm` | FAQ の質問帯・表のラベル | ゴシック | Noto Sans JP | 700 | 12px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.9 | 0.05em | | `note` | 数値の基準日などの注記 | ゴシック | Noto Sans JP | 400 | 8px | 1.4 | 0.0em | | `accent` | 背景に敷く大きな英字の飾り（白や黄の半透明） | 欧文サンセリフ | Montserrat | 700 | 40px | 1.0 | 0.05em | | `label-button` | ボタン・部門タブ | ゴシック | Noto Sans JP | 700 | 12px | 1.2 | 0.05em | - 見出しは全部太字ゴシックにし、明朝は使わない - カード見出しは中央揃えにして 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 ```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-d3e1887c`（元 LP の URL から採番） - **元 LP**: https://recruit.belc.jp/employment/highschool/ - **解析に使った画像**: 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/）からご連絡ください。