--- version: alpha name: Vivid Red Retail Recruitment LP description: 白地に鮮やかな赤の英字大見出しと緑のサブコピーを組み合わせた、地域スーパーの新卒採用サイト。角丸写真のコラージュと、赤と緑の薄い弧の装飾線で明るく親しみやすい印象を作る。終盤は赤ベタ面と暗い写真面で締める。 colors: primary: '#E4000D' on-primary: '#FFFFFF' background: '#FFFFFF' secondary: '#128764' cta: '#E4010C' on-cta: '#FEF1F0' text-body: '#252429' text-muted: '#9B9A9A' tint-1: '#F9D3D3' tint-2: '#D2DDDC' line: '#F6F6F4' dark-section: '#3D424C' surface: '#FEFEFE' cta-accessible: '#E1010C' typography: display: fontFamily: Lato fontSize: 52px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Lato fontSize: 40px fontWeight: 900 lineHeight: 1.1 headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em accent: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em label-button: fontFamily: Lato fontSize: 13px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.03em rounded: sm: 6px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 24px section: 110px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 52px button-inverse: backgroundColor: '{colors.on-primary}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 52px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 160px news-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 230px speech-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 170px circle-arrow: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' rounded: '{rounded.full}' height: 36px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 620px slider-dots: backgroundColor: '{colors.tint-1}' rounded: '{rounded.full}' height: 4px --- # DESIGN.md — 赤×緑アクセントの白地スーパー新卒採用LP（Vivid Red Retail Recruitment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、清潔・爽やか、信頼・誠実、力強い・インパクト - **キーワード**: 白地・赤の英字大見出し・緑のサブコピー・角丸写真コラージュ・弧のライン装飾・吹き出しカード - **地の質感**: フラットな白地。背景に赤と緑の薄い弧を重ねて動きを出す - **形**: 小さめ角丸の写真とカード、片端に弧の切り込みが入った角丸ボタン、円形の矢印ボタン - **温度感**: 明るく暖かい。赤の熱量を白と緑で中和 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E4000D` | ブランド赤（英字見出し・ボタン・帯） | 8% | 画素の実測 | | `on-primary` | `#FFFFFF` | 赤面の上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#FFFFFF` | ページの地色 | 50% | 画素の実測 | | `secondary` | `#128764` | 緑のサブコピー・ラベルの丸 | 1% | 画素の実測 | | `cta` | `#E4010C` | VIEW MOREボタンの面 | 2% | 画素の実測 | | `on-cta` | `#FEF1F0` | ボタンの白文字 | 0% | 画素の実測 | | `text-body` | `#252429` | 本文 | 2% | 画素の主要色に補正 | | `text-muted` | `#9B9A9A` | 注記・入社年など | 0% | 画素の実測 | | `tint-1` | `#F9D3D3` | 薄い赤の弧装飾・ドット | 2% | 推定 | | `tint-2` | `#D2DDDC` | 薄い緑の弧装飾・背景英字 | 3% | 画素の主要色に補正 | | `line` | `#F6F6F4` | カードの枠・区切り線 | 0% | 画素の主要色に補正 | | `dark-section` | `#3D424C` | 写真上の暗いオーバーレイ面 | 5% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | お知らせカードの面 | 3% | 画素の実測 | | `cta-accessible` | `#E1010C` | AA を満たす補正値（計算） | | 計算 | - 地は白が基本。赤は英字見出し・ボタン・終盤の帯に集中させる - 日本語のサブコピーは緑で、赤見出しと対にする - セクションラベルの頭に緑の小さな丸を置く - 背景の弧装飾は薄い赤と薄い緑の2本セットで透明感を保つ - 赤ベタ面ではボタンを白地・赤文字に反転する - 最終セクションは暗い写真にオーバーレイして白文字 - `button-primary` は文字 `#FEF1F0` × 背景 `#E4010C` のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E1010C`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの英字キャッチ（斜体） | 欧文サンセリフ | Lato | 900 | 52px | 1.1 | 0.0em | | `headline-lg` | セクションの赤い英字大見出し | 欧文サンセリフ | Lato | 900 | 40px | 1.1 | 0.0em | | `headline-md` | 緑の日本語サブコピー2行 | ゴシック | Noto Sans JP | 700 | 18px | 1.7 | 0.05em | | `headline-sm` | 吹き出しカード内の社員コメント | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.05em | | `accent` | 緑丸付きの日本語セクションラベル | ゴシック | Noto Sans JP | 500 | 12px | 1.5 | 0.05em | | `label-button` | VIEW MOREなどの英字ボタン | 欧文サンセリフ | Lato | 900 | 13px | 1.0 | 0.05em | | `note` | 日付・入社年など | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.03em | - 見出しは『緑丸＋日本語ラベル』→『赤の英字大見出し』→『緑の日本語サブコピー』の3段で組む - 英字見出しは太い大文字。長い語は2〜3行に折る - 本文は行間を広く（2.0前後）、短い3〜4行にまとめる - 強調語は赤い小さな地の上に白文字で置く - 数字や日付は欧文サンセリフ - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、写真は2〜3枚の非対称コラージュ - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 110px、基本単位 8px、カード内 24px（375px 幅換算） - 各セクションは写真コラージュ→テキスト→ボタンの順 - テキストとボタンは左寄せ - 写真は大小をずらして重ならない程度に配置 - セクション間は大きめの白余白で区切る - 終盤の赤帯と写真帯は全幅 ## Elevation & Depth - お知らせカードとカード部品はごく淡いぼかし影 - 写真には影を付けない - 吹き出しカードは緑の細枠で浮かせる ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 小さめ角丸の矩形。カード上部の写真は下辺を弧状に切る - **セクション境界**: FV下端は下に膨らむ弧＋赤い細線。その他は余白とベタ面の直線切替 - ボタンは角丸長方形で、右端に白い弧の切り込み線を入れる - 矢印ボタンは赤い円か赤枠の円 - 吹き出しは角丸で下にしっぽ、右下角に緑の三角と二重矢印 - SNSアイコンは円形で横に並べる ## Components - **VIEW MOREボタン**（`button-primary`）: 赤の角丸長方形。白い英字は左寄せ、右端に白い弧ラインを入れる - **反転ボタン**（`button-inverse`）: 赤帯の上で使う白地・赤文字の同形ボタン - **3段見出し**（`section-heading`）: 緑丸ラベル＋赤の英字大見出し＋緑のサブコピー - **お知らせカード**（`news-card`）: 白カードに日付・赤地の白文字タグ・本文。下段は前後の円ボタンと一覧リンク - **社員コメント吹き出し**（`speech-card`）: 緑枠の白い吹き出しに部署名（緑）、コメント（太字）、入社年（グレー） - **円形矢印ボタン**（`circle-arrow`）: 赤い円に白い山形矢印。スライダー操作とリンクに使う - **写真付きリンクカード**（`feature-card`）: 上部の写真は下辺を弧に、下に見出し・本文と右下の円矢印。淡いグレー枠 - **スライダーインジケータ**（`slider-dots`）: 短い横棒が3本。現在位置は濃い赤、他は薄い赤 ## Do's and Don'ts **Do** - 赤は英字見出し・ボタン・帯に絞り、白地を広く残す - 日本語サブコピーは必ず緑で赤見出しと対にする - 背景に薄い赤と緑の弧を2本セットで流す - 写真は人物の笑顔と売場・社屋を角丸でコラージュする - セクションごとにVIEW MOREボタンで詳細へ誘導する **Don't** - 赤と緑を同じ面積でベタに使わない（クリスマス配色に見える） - 英字見出しを細字や明朝にしない - 写真に強い影や太い枠を付けない - ボタンを完全なピル型にしない - 本文を長くしない（4行以内） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の世界観を一言で伝える）: 街並みの空撮写真に白い斜体英字キャッチと短い日本語。下端は弧で切り赤線。右上に赤いENTRYとメニュー 2. **SNSリンク**（公式SNSへの導線）: 弧の境界に円形SNSアイコン5つを並べる 3. **お知らせ**（最新の採用情報を知らせる）: 大きな薄緑の英字を背景に白カード。日付・赤タグ・円ボタン 4. **企業メッセージ**（価値観と想いを伝える）: 社屋と売場写真の3枚コラージュ＋3段見出し＋本文＋ボタン 5. **キャリアパス**（成長の道筋を示す）: 業務風景2枚のずらし配置＋3段見出し＋ボタン 6. **部門紹介**（店舗各部門の仕事を紹介）: オフィス写真2枚＋2行の英字見出し＋本文、下に食卓写真の横並び 7. **社員インタビュー**（先輩の声で働く姿を具体化）: 緑枠の吹き出しと人物写真のスライダー。赤い円矢印とインジケータ 8. **研修・活躍推進**（育成制度を伝える）: 下辺が弧の写真付き白カード。右下に円矢印 9. **募集要項**（応募へ誘導）: 全幅の赤ベタ面に白の英字見出し、ロゴモチーフを薄く大きく敷き、白い反転ボタン 10. **インターン・説明会**（イベント参加を促す）: 暗くした街の写真の上に白い英字見出しとボタン ## Imagery - 売場・社屋・オフィスを明るい自然光で撮る - 社員は制服やスーツで、カメラ目線の笑顔 - 家族の食卓など暮らしの温かい場面を入れる - FVと最終セクションは街の高所からの広角写真 - 装飾は薄い赤と緑の細い弧ライン、大きな薄色の英字 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは写真コラージュとテキストを左右2カラムで交互に配置 - PCのSNSアイコンは右端に縦に固定 - お知らせはPCで1行の横長バーにする - インタビューはPCで3人を並べたスライダー - 募集要項と説明会帯はPCでボタンを右寄せ - PCの見出しサイズはSPの約1.3倍 ## 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-78871ed7`（元 LP の URL から採番） - **元 LP**: https://new.okuwa-saiyou.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。