{
  "id": "design:hiring-process-steps",
  "schemaVersion": 2,
  "title": {
    "ja": "選考の流れ — 段階を矢羽根で並べ、それぞれにかかる日数を書く",
    "en": "Hiring Process — Stages as Chevrons, Each With How Long It Takes"
  },
  "summary": {
    "ja": "応募から最終面接までを矢羽根の形で横につなぎ、各段階に日数と中身を一言で書く。最後に内定の札、下に全体の期間を置く",
    "en": "Stages from application to final interview as linked chevrons, each with days and a line on what happens, ending in an offer block with the total duration below"
  },
  "capturedAt": "2026-10-19",
  "categories": [
    "presentation"
  ],
  "tags": [
    "bold",
    "typography"
  ],
  "useCases": [
    "process"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "flow",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 88,
      "right": 140,
      "bottom": 56,
      "left": 140
    }
  },
  "type": {
    "kicker": {
      "size": 22,
      "weight": 700,
      "tracking": "0.16em",
      "numeric": "tabular"
    },
    "title": {
      "size": 54,
      "weight": 700,
      "leading": 1.35,
      "numeric": "tabular"
    },
    "stepNo": {
      "size": 22,
      "weight": 700,
      "numeric": "tabular"
    },
    "step": {
      "size": 32,
      "weight": 700,
      "numeric": "tabular"
    },
    "days": {
      "size": 48,
      "weight": 700,
      "leading": 1,
      "numeric": "tabular"
    },
    "stepNote": {
      "size": 22,
      "weight": 400,
      "leading": 1.6,
      "numeric": "tabular"
    },
    "goal": {
      "size": 36,
      "weight": 700,
      "numeric": "tabular"
    },
    "totalLabel": {
      "size": 24,
      "weight": 700,
      "numeric": "tabular"
    },
    "total": {
      "size": 40,
      "weight": 700,
      "numeric": "tabular"
    },
    "totalNote": {
      "size": 22,
      "weight": 400,
      "numeric": "tabular"
    },
    "folio": {
      "size": 16,
      "weight": 400,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F3F0",
    "ink": "#16181D",
    "muted": "#686C74",
    "accent": "#D9411F",
    "rule": "#E0DED8",
    "series": []
  },
  "rules": [
    {
      "ja": "各段階に日数を書く。応募する人がいちばん知りたいのは、いつ結果が出るか",
      "en": "Give each stage its duration — when they hear back is what applicants most want to know"
    },
    {
      "ja": "日数の合計と全体の期間を一致させる（5 + 7 + 5 + 4 = 約 3 週間）",
      "en": "Make the stage days add up to the stated total"
    },
    {
      "ja": "段階は 5 つまで。中身は一言にし、詳しくは別の頁",
      "en": "Five stages at most, one line each; details elsewhere"
    },
    {
      "ja": "ゴール（内定）だけを強調色の面にする",
      "en": "Only the goal block takes the accent fill"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.C8Px2e0h.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "process-flow-five-step",
      "funnel-four-stage-dropoff",
      "change-request-flow-gates"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "flow",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 88,
          "right": 140,
          "bottom": 56,
          "left": 140
        }
      },
      "type": {
        "kicker": {
          "size": 22,
          "weight": 700,
          "tracking": "0.16em",
          "numeric": "tabular"
        },
        "title": {
          "size": 54,
          "weight": 700,
          "leading": 1.35,
          "numeric": "tabular"
        },
        "stepNo": {
          "size": 22,
          "weight": 700,
          "numeric": "tabular"
        },
        "step": {
          "size": 32,
          "weight": 700,
          "numeric": "tabular"
        },
        "days": {
          "size": 48,
          "weight": 700,
          "leading": 1,
          "numeric": "tabular"
        },
        "stepNote": {
          "size": 22,
          "weight": 400,
          "leading": 1.6,
          "numeric": "tabular"
        },
        "goal": {
          "size": 36,
          "weight": 700,
          "numeric": "tabular"
        },
        "totalLabel": {
          "size": 24,
          "weight": 700,
          "numeric": "tabular"
        },
        "total": {
          "size": 40,
          "weight": 700,
          "numeric": "tabular"
        },
        "totalNote": {
          "size": 22,
          "weight": 400,
          "numeric": "tabular"
        },
        "folio": {
          "size": 16,
          "weight": 400,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F3F0",
        "ink": "#16181D",
        "muted": "#686C74",
        "accent": "#D9411F",
        "rule": "#E0DED8"
      },
      "rules": [
        "Give each stage its duration — when they hear back is what applicants most want to know",
        "Make the stage days add up to the stated total",
        "Five stages at most, one line each; details elsewhere",
        "Only the goal block takes the accent fill"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 88 右 140 下 56 左 140\n\n## 文字（版面 1920px に対する px）\nkicker  22px / 700 / 字間 0.16em / 等幅数字\ntitle  54px / 700 / 行送り 1.35 / 等幅数字\nstepNo  22px / 700 / 等幅数字\nstep  32px / 700 / 等幅数字\ndays  48px / 700 / 行送り 1 / 等幅数字\nstepNote  22px / 400 / 行送り 1.6 / 等幅数字\ngoal  36px / 700 / 等幅数字\ntotalLabel  24px / 700 / 等幅数字\ntotal  40px / 700 / 等幅数字\ntotalNote  22px / 400 / 等幅数字\nfolio  16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F4F3F0 / 文字 #16181D / 補助 #686C74 / 強調 #D9411F / 罫 #E0DED8\n\n## 外すと崩れる点\n- 各段階に日数を書く。応募する人がいちばん知りたいのは、いつ結果が出るか\n- 日数の合計と全体の期間を一致させる（5 + 7 + 5 + 4 = 約 3 週間）\n- 段階は 5 つまで。中身は一言にし、詳しくは別の頁\n- ゴール（内定）だけを強調色の面にする\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/hiring-process-steps/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 88 right 140 bottom 56 left 140\n\n## Type (px against a 1920px canvas)\nkicker  22px / 700 / tracking 0.16em / tabular numerals\ntitle  54px / 700 / leading 1.35 / tabular numerals\nstepNo  22px / 700 / tabular numerals\nstep  32px / 700 / tabular numerals\ndays  48px / 700 / leading 1 / tabular numerals\nstepNote  22px / 400 / leading 1.6 / tabular numerals\ngoal  36px / 700 / tabular numerals\ntotalLabel  24px / 700 / tabular numerals\ntotal  40px / 700 / tabular numerals\ntotalNote  22px / 400 / tabular numerals\nfolio  16px / 400 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F4F3F0 / Ink #16181D / Muted #686C74 / Accent #D9411F / Rule #E0DED8\n\n## Constraints — dropping these breaks it\n- Give each stage its duration — when they hear back is what applicants most want to know\n- Make the stage days add up to the stated total\n- Five stages at most, one line each; details elsewhere\n- Only the goal block takes the accent fill\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/hiring-process-steps/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>選考の流れ — 段階を矢羽根で並べ、それぞれにかかる日数を書く</title>\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;500;700\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  /* この版そのもの。index.md の layout / type / colors は、この HTML を\n     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。\n     会社・人物・数値はすべて説明用の架空のもの。 */\n  :root {\n    --ground: #FFFFFF;\n    --surface: #F4F3F0;\n    --ink: #16181D;\n    --muted: #686C74;\n    --accent: #D9411F;\n    --rule: #E0DED8;\n  }\n  * { box-sizing: border-box; margin: 0; }\n  html, body { width: 1920px; height: 1080px; }\n  body { font-family: \"Zen Kaku Gothic New\", \"IPAGothic\", sans-serif; font-variant-numeric: tabular-nums; }\n\n  .artboard {\n    width: 1920px; height: 1080px;\n    background: var(--ground); color: var(--ink);\n    padding: 88px 140px 56px;             /* → layout.margin */\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; row-gap: 40px; }\n\n  .kicker { font-size: 22px; font-weight: 700; letter-spacing: .16em; color: var(--accent); }\n  .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; }\n  .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; }\n\n  .flow { display: grid; grid-template-columns: repeat(5, 1fr) 220px; column-gap: 10px; align-content: center; }\n  /* 段階は矢羽根の形でつなぐ。日数は次の段階に進むまでの目安 */\n  .st { background: var(--surface); padding: 36px 40px 40px 52px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%); }\n  .st.first { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); padding-left: 32px; }\n  .sn { font-size: 22px; font-weight: 700; color: var(--accent); }\n  .sh { font-size: 32px; font-weight: 700; margin-top: 4px; }\n  .sd { font-size: 48px; font-weight: 700; color: var(--accent); margin-top: 16px; line-height: 1; }\n  .sb { font-size: 22px; color: var(--muted); line-height: 1.6; margin-top: 14px; }\n  .goal { background: var(--accent); color: var(--ground); display: grid; place-content: center; text-align: center; }\n  .gl { font-size: 36px; font-weight: 700; }\n  .total { display: flex; align-items: baseline; gap: 24px; border-top: 3px solid var(--ink); padding-top: 20px; }\n  .tl { font-size: 24px; font-weight: 700; }\n  .tv { font-size: 40px; font-weight: 700; color: var(--accent); }\n  .tn { font-size: 22px; color: var(--muted); }\n\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div>\n      <p class=\"kicker\" data-type=\"kicker\">選考の流れ</p>\n      <h1 class=\"title\" data-type=\"title\">応募から内定まで、5 つの段階と約 3 週間</h1>\n    </div>\n    <div class=\"flow\">\n      <div class=\"st first\">\n        <p class=\"sn\" data-type=\"stepNo\">1</p>\n        <p class=\"sh\" data-type=\"step\">応募</p>\n        <p class=\"sd\">—</p><p class=\"sb\">採用ページから</p>\n      </div>\n      <div class=\"st\">\n        <p class=\"sn\">2</p>\n        <p class=\"sh\">書類選考</p>\n        <p class=\"sd\" data-type=\"days\">5 日</p><p class=\"sb\" data-type=\"stepNote\">経歴と、作った物</p>\n      </div>\n      <div class=\"st\">\n        <p class=\"sn\">3</p>\n        <p class=\"sh\">一次面接</p>\n        <p class=\"sd\">7 日</p><p class=\"sb\">社員 2 名と 45 分</p>\n      </div>\n      <div class=\"st\">\n        <p class=\"sn\">4</p>\n        <p class=\"sh\">課題と面談</p>\n        <p class=\"sd\">5 日</p><p class=\"sb\">実データで 2 時間</p>\n      </div>\n      <div class=\"st\">\n        <p class=\"sn\">5</p>\n        <p class=\"sh\">最終面接</p>\n        <p class=\"sd\">4 日</p><p class=\"sb\">代表と 30 分</p>\n      </div>\n      <div class=\"goal\"><p class=\"gl\" data-type=\"goal\">内定</p></div>\n    </div>\n    <div class=\"total\"><p class=\"tl\" data-type=\"totalLabel\">応募から内定まで</p><p class=\"tv\" data-type=\"total\">約 3 週間</p><p class=\"tn\" data-type=\"totalNote\">日数は次の段階の連絡までの目安。課題は答え合わせまで一緒に行い、面接はすべてオンラインでも受けられる</p></div>\n    <div class=\"folio\">\n      <p data-type=\"folio\">株式会社ミチシルベ　会社紹介 2026</p>\n      <p>08</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/hiring-process-steps/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/hiring-process-steps/font.css",
        "https://design-vault.pages.dev/designs/hiring-process-steps/font-0.woff2",
        "https://design-vault.pages.dev/designs/hiring-process-steps/font-1.woff2",
        "https://design-vault.pages.dev/designs/hiring-process-steps/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/hiring-process-steps",
    "en": "https://design-vault.pages.dev/en/designs/hiring-process-steps",
    "json": "https://design-vault.pages.dev/ai/assets/hiring-process-steps.json",
    "designJson": "https://design-vault.pages.dev/ai/designs/hiring-process-steps.json"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「会社紹介・採用」の\n1 枚で、架空の会社「ミチシルベ」の会社紹介として描いてある。会社・人物・数値はすべて架空。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it. One of the seven company and recruiting slides,\ndrawn as a fictional company's introduction; every company, person and figure on it is invented.\n\n### Techniques\n\n- clip-path で矢羽根を作り、最初の段だけ左を平らにする\n- 日数は 48px の強調色\n- 下端の墨の罫の下に、全体の期間と注記\n\n### Apply to\n\n- 採用説明の選考の流れ\n- 申し込みから納品までの段取りの説明",
  "slug": "hiring-process-steps",
  "kind": "artboard",
  "catalogVersion": 1,
  "designSchemaVersion": 2,
  "capabilities": [
    "view-artboard",
    "read-spec",
    "copy-prompt",
    "get-code"
  ],
  "reusePolicy": "construction-reuse"
}