--- version: alpha name: Warm Orange Hero Recruitment LP description: 白〜薄グレーの地に、オレンジのアクセントと濃紺の大きな英字見出しを置いた採用サイト。働く人の笑顔写真を横に帯状に並べ、白い手描き風の曲線や波形の背景でやわらかい動きを出している。 colors: primary: '#FE7A0D' secondary: '#393649' cta: '#464161' on-cta: '#FFFFFF' background: '#F4F4F4' background-alt: '#F2F2F4' text: '#333333' text-muted: '#888888' tint-1: '#F1E9D5' accent-1: '#FECE5B' surface: '#EBEBEB' primary-accessible: '#C05701' typography: display: fontFamily: Montserrat fontSize: 44px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.06em headline-sm: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px button-sub: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px header-entry: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px section-title: textColor: '{colors.secondary}' typography: '{typography.display}' height: 80px photo-strip: rounded: '{rounded.md}' height: 180px voice-carousel: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 220px tag-dept: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 20px entry-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 400px --- # DESIGN.md — オレンジ×紺の明るい採用サイト LP（Warm Orange Hero Recruitment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 親しみ・手作り感、信頼・誠実、清潔・爽やか、シンプル・ミニマル - **キーワード**: 採用・笑顔の人物写真・大きな英字見出し・オレンジのアクセント・手描きの曲線・余白が多い - **地の質感**: フラットな面に薄いグレーの波形シェイプを重ね、写真の上に白い手描き線を入れる - **形**: ピル型の濃紺ボタン、角丸の写真、ゆるい波形のセクション背景 - **温度感**: 暖かめ。オレンジで温度感を出し、紺で締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FE7A0D` | ブランドのオレンジ（ロゴ・アイコン・ENTRY帯） | 6% | 画素の実測 | | `secondary` | `#393649` | 英字見出しとボタンの濃紺 | 3% | 画素の実測 | | `cta` | `#464161` | ピル型ボタンの面 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#F4F4F4` | 基本の地色 | 30% | 画素の実測 | | `background-alt` | `#F2F2F4` | 波形の薄グレーの地 | 22% | 画素の実測 | | `text` | `#333333` | 見出し・本文の文字 | 2% | 推定 | | `text-muted` | `#888888` | 小さい補足の文字 | 0% | 推定 | | `tint-1` | `#F1E9D5` | 図のクリーム色の円・人物写真の背景 | 4% | 画素の実測 | | `accent-1` | `#FECE5B` | 図中のラベル帯の薄オレンジ | 0% | 画素の実測 | | `surface` | `#EBEBEB` | サブボタン・タグの薄グレー | 1% | 画素の実測 | | `primary-accessible` | `#C05701` | AA を満たす補正値（計算） | | 計算 | - 地色は白と薄グレー #F4F4F4 を波形で交互に切り替える - オレンジはロゴ、見出し横の小さなアイコン、ENTRY帯のグラデーションだけに使う - 英字見出しとボタンは濃紺で統一し、オレンジのボタンは作らない - ENTRY帯はオレンジから黄色への斜めグラデーションに白文字 - クリーム色は図解や人物カードの背景にして暖かさを出す - `header-entry` は文字 `#FFFFFF` × 背景 `#FE7A0D` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C05701`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し | 欧文サンセリフ | Montserrat | 600 | 44px | 1.1 | 0.04em | | `headline-lg` | FVのキャッチ・リード見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.5 | 0.08em | | `headline-md` | セクションのリード文 | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.6 | 0.06em | | `headline-sm` | 英字見出しの上の日本語ラベル | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.06em | | `note` | 注記・フッターの小文字 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.04em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.05em | - 見出しは大きな英字と小さな日本語ラベルを組み合わせる - 日本語ラベルの前には小さなオレンジのアイコンを付ける - 本文は行間 2.0 前後でゆったり組む - リード見出しは太字の短い 2 行にする - 英字見出しの右上にオレンジのマークを添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC はテキストと写真の 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - セクション間は 80px 以上空ける - 写真の帯は画面幅いっぱいに横並びで敷く - テキストブロックは左寄せにし、写真を右や端に散らす - 見出し→リード→本文→ボタンの順に縦に並べる ## Elevation & Depth - 基本は影なしのフラット - 人物写真カードにごく薄い影を付けてもよい - ボタンにも影は付けない ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 角丸の長方形。人物写真は縦長に切り抜いて帯状に並べる - **セクション境界**: 薄グレーのゆるい波形で地色を切り替える - ボタンは完全なピル型にし、右端に白い円の矢印を付ける - 図解は円を重ねたやわらかい形にする - 直線で区切らず、曲線の背景で流れを作る ## Components - **濃紺のピルボタン**（`button-primary`）: 濃紺のピル型に白文字。右端に白い円の矢印アイコンを付ける - **グレーのサブボタン**（`button-sub`）: 薄グレーのピル型に濃色文字と小さな矢印。外部リンクやインタビューへの導線 - **ヘッダーの応募ボタン**（`header-entry`）: 右上に固定するオレンジのピルボタンと、白い丸のメニューボタン - **英字大見出し**（`section-title`）: 小さな日本語ラベルの下に濃紺の大きな英字。右上にオレンジのマーク - **人物写真の帯**（`photo-strip`）: 角丸の写真を隙間なく横一列に並べ、働く人の笑顔を見せる - **社員インタビューのカルーセル**（`voice-carousel`）: クリーム色グラデーションの背景に人物写真。右に部署タグ・見出し・名前・ボタン。下にドットと矢印 - **部署タグ**（`tag-dept`）: クリーム色の小さな角丸ラベル - **ENTRY 誘導帯**（`entry-band`）: 左は写真に白い英字見出し、右はオレンジのグラデーションに白文字の誘い文と濃紺のボタン ## Do's and Don'ts **Do** - 見出しは大きな英字と小さな日本語ラベルの組み合わせで統一する - オレンジは小さなアイコンと応募帯に絞り、ポイントとして使う - 働く人の自然な笑顔写真をたくさん使う - 白い手描き線や波形で、やわらかい動きを出す - 余白を多めにとり、本文はゆったり組む **Don't** - 赤や原色の強い CTA を増やさない - セクションを直線や濃い罫線で区切らない - 本文を詰めて情報量の多い作りにしない - 人物写真をイラストに置き換えない - 明朝体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（仕事の象徴的な場面とメッセージで興味を引く）: 画面幅いっぱいの働く人の写真に白い手描きの線を重ね、右側に白文字のキャッチを置く 2. **企業メッセージ**（仕事の意義を伝える）: 中央に太字のリードと長めの本文。周りに小さな角丸写真を散らし、下にピルボタン 3. **写真の帯**（職場の雰囲気を見せる）: 多様な職種の人物写真を横一列に並べる 4. **仕事紹介**（事業と職種の全体像を見せる）: 左に英字見出しと説明、右にクリーム色の円を重ねた事業の図解 5. **写真の帯**（お客様や暮らしとのつながりを見せる）: 暮らしの場面の写真を横に並べる 6. **社員インタビュー**（先輩社員の声で親近感を出す）: 中央に英字見出し。人物カードのカルーセルと一覧ボタン 7. **店舗写真**（企業の実在感を出す）: 建物の写真を画面幅いっぱいに敷く 8. **働く環境**（福利厚生や育成を伝える）: 左に英字見出し・リード・ボタン 2 つ、右に角丸の写真 9. **応募の誘導**（応募につなげる）: 左は写真に白い英字、右はオレンジのグラデーションに誘い文と濃紺ボタン 10. **フッター**（サイト内の移動と関連リンク）: 街並みの写真の下に、ロゴ・住所・SNS、英字ナビ、グレーのサブボタンを並べる ## Imagery - 自然光の明るい職場で、制服やエプロンの人物を笑顔で撮る - 人物は腰から上を中心に、背景に売場や事務所を少し入れる - インタビューの人物は単色背景で正面を向いた立ち姿 - 写真の上に白い手描き風の曲線や放射状の線を重ねる - 街や建物は青空の下で明るく撮る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP は 1 カラムにし、写真は本文の上か下に置く - 英字見出しは SP で 40〜44px に縮める - 写真の帯は SP で横スクロールにするか 2〜3 枚に絞る - ENTRY 帯は SP で写真を上、オレンジの面を下に縦に積む - フッターのナビは SP で 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-b48c6803`（元 LP の URL から採番） - **元 LP**: https://meglia-recruit.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。