--- version: alpha name: Red-Orange Gradient Smile Recruit LP description: 赤から橙へのグラデーション面と白地を交互に使う採用サイト。笑った口のような矢印付きアーチを見出しや写真枠のモチーフにする。写真上に白抜き文字を載せた帯コピーと、細い枠線の矢印ボタンで構成し、明るく前向きな人柄を伝える。 colors: primary: '#D82D1B' secondary: '#FF6201' accent-1: '#EB440C' background: '#FFFFFF' text: '#2B2629' on-primary: '#FFFFFF' accent-2: '#E13916' cta: '#DE3515' on-cta: '#FEF3E3' text-muted: '#7E7877' line: '#D1D3D5' accent-1-accessible: '#D83E0B' accent-2-accessible: '#DC3816' cta-accessible: '#D23214' secondary-accessible: '#CA4D00' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.1em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.06em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.12em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 2.2 letterSpacing: 0.1em body-lg: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 2.6 letterSpacing: 0.04em label-button: fontFamily: Montserrat fontSize: 13px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.04em rounded: sm: 0px md: 4px lg: 12px full: 999px spacing: unit: 8px card: 24px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' smile-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px copy-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 36px button-outline-arrow: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.label-button}' height: 46px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px hero-photo-smile: backgroundColor: '{colors.primary}' rounded: '{rounded.lg}' height: 270px number-tabs: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 40px member-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 420px gradient-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.body-lg}' height: 200px --- # DESIGN.md — 赤橙グラデと笑顔アーチの採用 LP（Red-Orange Gradient Smile Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感 - **キーワード**: 赤橙グラデーション・笑顔アーチ・写真上の帯コピー・白地と色面の交互・細枠矢印ボタン - **地の質感**: フラットな単色・グラデ面に写真を載せる。影はほぼ使わない - **形**: 四角が基本。手描き風の太い曲線アーチと矢印を装飾に使う - **温度感**: 暖色で熱量が高く、明るい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D82D1B` | ブランド赤（グラデ起点・アーチ） | 12% | 画素の実測 | | `secondary` | `#FF6201` | グラデ終点の橙 | 12% | 画素の実測 | | `accent-1` | `#EB440C` | 写真上コピー帯の赤橙 | 2% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 45% | 画素の実測 | | `text` | `#2B2629` | 見出し・本文の黒 | 4% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | 色面上の白文字 | 3% | 画素の主要色に補正 | | `accent-2` | `#E13916` | 英字ラベル・リンク枠の赤 | 1% | 画素の主要色に補正 | | `cta` | `#DE3515` | エントリーボタン（グラデ） | 1% | 画素の実測 | | `on-cta` | `#FEF3E3` | ボタン上の白文字 | 0% | 画素の実測 | | `text-muted` | `#7E7877` | 入社年などの補足 | 0% | 画素の主要色に補正 | | `line` | `#D1D3D5` | 矢印ボタンの引き出し線 | 0% | 画素の主要色に補正 | | `accent-1-accessible` | `#D83E0B` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#DC3816` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#D23214` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#CA4D00` | AA を満たす補正値（計算） | | 計算 | - 地は白。冒頭・エピソード・採用情報・エントリーは赤→橙のグラデーション面にする - グラデーションは縦（上が赤、下が橙）か横（左が赤、右が橙）のどちらか - 写真上のコピーは赤橙ベタ帯に白い太字で載せる - 英字ラベルとボタン枠線は赤系の単色 - 色面の上では文字・枠線を白にする - 青や緑などの寒色は使わない - `copy-band` は文字 `#FFFFFF` × 背景 `#EB440C` のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D83E0B`、4.55:1）を使う。 - `button-outline-arrow` は文字 `#E13916` × 背景 `#FFFFFF` のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DC3816`、4.55:1）を使う。 - `button-primary` は文字 `#FEF3E3` × 背景 `#DE3515` のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D23214`、4.55:1）を使う。 - `gradient-panel` は文字 `#FFFFFF` × 背景 `#FF6201` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#CA4D00`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 冒頭の白帯に載せる大コピー | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.6 | 0.1em | | `headline-lg` | セクションの和文見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.08em | | `headline-md` | 写真上の帯コピー | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.06em | | `accent` | 見出し下の英字ラベル・MESSAGE/ENTRY | 欧文サンセリフ | Montserrat | 800 | 11px | 1.2 | 0.12em | | `body-md` | 白地の説明文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 2.2 | 0.1em | | `body-lg` | 色面上のメッセージ本文（太字） | ゴシック | Noto Sans JP | 700 | 13px | 2.6 | 0.04em | | `label-button` | READ MORE ボタン | 欧文サンセリフ | Montserrat | 400 | 13px | 1.0 | 0.08em | | `note` | 入社年・補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.04em | - 和文見出しの直下に小さな英字ラベルを赤橙で置く - 本文は字間を広め、行間 2 以上でゆったり組む - メッセージは短い文ごとに改行する - コピーは 1 行ずつ帯に分けて段差のある積み方にする - 英字は大文字・太字・字間広め - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は全幅か片側に寄せる - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算） - 写真は全幅にし、下の白い本文ボックスを右側で写真に食い込ませて段差を作る - セクション見出しは中央、下にアーチを置く - 本文とボタンは左寄せ、左余白は 24px - READ MORE は幅 6 割程度で左寄せ - セクション間は 100px 前後あける ## Elevation & Depth - 影は使わずフラットにする - 奥行きは写真と白ボックスの重なりで出す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角か、角丸 12px。人物写真は下端を笑顔アーチ形に切り抜く - **セクション境界**: 直線で切り替える。白と色面をそのまま接する - ボタンは角なしの細枠長方形 - 笑顔アーチは両端が上向き矢印の太い曲線 - 写真枠の下辺を笑った口の形に湾曲させる ## Components - **笑顔アーチ見出し**（`smile-heading`）: 和文見出しと英字ラベルの下に、両端が矢印の赤いU字アーチを重ねる - **写真上の帯コピー**（`copy-band`）: 写真左下に、行ごとの赤橙ベタ帯と白い太字を積む - **READ MORE 枠ボタン**（`button-outline-arrow`）: 赤い細枠の長方形。右端から点と線が外へ伸びる - **エントリーボタン**（`button-primary`）: 赤→橙の横グラデ、白い英字。隣に赤枠のサブボタンを並べる - **笑顔フレーム写真**（`hero-photo-smile`）: 角丸写真の下辺を白い笑顔アーチで縁取る - **番号タブ**（`number-tabs`）: 大きな細身の数字を横に並べる。選択中は赤い下線 - **社員カード**（`member-card`）: 写真、赤い役職、太字の氏名、灰色の入社年、枠ボタンの順 - **グラデ情報パネル**（`gradient-panel`）: 写真の下に重なる赤橙グラデの箱。中は白文字と白枠ボタン ## Do's and Don'ts **Do** - 見出しには必ず笑顔アーチのモチーフを使う - 笑顔の社員写真を大きく使う - 白地と赤橙グラデ面を交互にしてリズムを作る - コピーは帯で区切った短文にする - ボタンは細枠と引き出し線で軽く見せる **Don't** - 寒色や暗い色の面を入れない - ボタンをピル型にしない - 影やグラデのボタンを多用しない（グラデは主 CTA だけ） - 本文を詰めた行間で組まない - 無表情な写真や物撮りだけで構成しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（理念コピーで印象づける）: 赤グラデ地。笑顔フレーム写真の下に、白帯に黒文字のコピーを 2 段積む 2. **メッセージ**（会社の想いを語る）: 縦グラデ地。英字見出し、短い白線、太字の白い短文を連ねる 3. **会社紹介**（会社の姿勢を伝える）: アーチ見出し、全幅写真、帯コピー、白い本文ボックス、枠ボタンの順 4. **事業紹介**（事業内容を伝える）: 会社紹介と同じ型。店舗写真に帯コピーを載せる 5. **エピソード**（社員の動画に誘導する）: 横グラデの全幅面。白い筆記体ロゴと笑顔アーチ、白枠ボタン 6. **社員紹介**（働く人を見せる）: 番号タブで切り替えるカルーセル。写真を赤アーチで抱える 7. **キャリア**（研修や成長を伝える）: 集合写真に帯コピー、本文、枠ボタン 8. **採用情報**（募集要項へ誘導する）: 写真に横グラデの箱を重ね、白文字と白枠ボタン 9. **エントリー**（応募させる）: 大きな英字見出しを色面の上端にまたがせる。グラデ面に白い外部リンクボタン 10. **フッター**（締めと導線）: 大きな笑顔アーチと小さなコピー、ロゴ、グラデの主ボタンと赤枠ボタンを横に並べる ## Imagery - 作業着姿の社員が自然に笑う瞬間を撮る - 店舗や整備場の現場を明るく撮る - 人物は寄りか腰上で、会話している場面を選ぶ - 装飾は手描き風の赤い笑顔アーチ（両端矢印）を使う - 写真は彩度を高めにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は本文を中央の狭い幅に置き、メッセージを中央寄せにする - PC の写真は左右に寄せ、白い本文ボックスを反対側の下に重ねる - PC のエピソードはロゴと説明を横に並べる - PC の採用情報は写真とグラデ面を左右 2 分割 - PC の社員紹介は複数カードを横に並べたカルーセル ## 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-b55bb7e6`（元 LP の URL から採番） - **元 LP**: https://recruit-buffalo.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。