Deck

The Company Seven — From the Mission to the Hiring Steps, One Recruiting Session

A vertical mission line, mission-vision-values, the company in numbers, history, an employee voice, a day in the life and the hiring steps — seven slides run through one fictional recruiting session

7 slides · Slide 16:9

Take it with you JSON However many slides, one action. They are joined in order, so the sequence survives the paste.

Reading order

About this deck

この一式について / About this deck

会社説明会と採用説明で出てくる 7 枚を、架空の会社「ミチシルベ」（地域交通の情報を扱う会社）の説明会 1 回ぶんとして通したもの。会社・人物・数値はすべて架空で、社員の声とある 1 日は同じ人物にしてある。

白地に強い朱色の差し色を 1 つ。理念の 1 枚だけを縦組みの明朝にし、ほかは横組みのゴシック。顔写真は図形の差し替え枠で、人物は描いていない。表紙と締めは基本の 10 枚から引く。

Seven slides from a company introduction and recruiting session, run through a fictional regional-transport data company. Every company, person and figure is invented; the employee voice and the day in the life follow the same person. White ground with one strong vermilion accent; only the mission page is set vertically in serif. Portraits are shape stand-ins.

# Mission — One Sentence, Set Vertically in Serif Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 ## Type (px against a 1920px canvas) label 24px / 700 / tracking 0.3em / tabular numerals statement 84px / 700 / tracking 0.08em / leading 1.7 / tabular numerals company 22px / 400 / tabular numerals ## Colour Ground #FFFFFF / Surface #F4F3F0 / Ink #16181D / Muted #686C74 / Accent #D9411F / Rule #E0DED8 ## Constraints — dropping these breaks it - Vertical setting is for the mission line alone — its meaning comes from breaking the horizontal pages around it - Two columns at most, about nine characters each — longer columns wrap off the page - No digits or Latin letters — they turn sideways in vertical text - The only ornament is the vertical rule by the label Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/mission-vertical-statement/pattern.html. --- # Mission, Vision, Values — Three Tiers, Larger and Shorter Toward the Top Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.16em / tabular numerals title 54px / 700 / leading 1.35 / tabular numerals tierLabel 22px / 700 / tracking 0.1em / tabular numerals mission 56px / 700 / tabular numerals vision 38px / 700 / leading 1.5 / tabular numerals valueHead 30px / 700 / tabular numerals valueBody 22px / 400 / leading 1.6 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FFFFFF / Surface #F4F3F0 / Ink #16181D / Muted #686C74 / Accent #D9411F / Rule #E0DED8 ## Constraints — dropping these breaks it - Higher tiers are larger and shorter — the less it changes, the bigger it is - Give the vision a year and a number, or it blurs into the mission - Three values, each a heading and one line of restatement - Latin labels small; the Japanese label leads Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/vision-values-three-tiers/pattern.html. --- # Company in Numbers — Seven Figures, Sized by What Matters Most Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.16em / tabular numerals title 54px / 700 / leading 1.35 / tabular numerals factLabel 24px / 700 / tabular numerals factBig 180px / 700 / tracking -0.01em / leading 1 / tabular numerals factNote 22px / 400 / leading 1.6 / tabular numerals factValue 80px / 700 / tracking -0.01em / leading 1 / tabular numerals note 20px / 400 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FFFFFF / Surface #F4F3F0 / Ink #16181D / Muted #686C74 / Accent #D9411F / Rule #E0DED8 ## Constraints — dropping these breaks it - Enlarge one figure only — at equal size, none is remembered - Give the big figure its meaning (four times in five years) - Units at a third of the figure's size, aligned to its baseline - Always state the as-of date Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/company-facts-infographic/pattern.html. --- # History — Era Bands, With Two Events Under Each Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 - 3 equal columns, gap 8 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.16em / tabular numerals title 54px / 700 / leading 1.35 / tabular numerals era 34px / 700 / tabular numerals eraYears 24px / 500 / tabular numerals eraTheme 28px / 700 / tabular numerals year 24px / 700 / tabular numerals event 24px / 400 / leading 1.6 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FFFFFF / Surface #F4F3F0 / Ink #16181D / Muted #686C74 / Accent #D9411F / Rule #E0DED8 ## Constraints — dropping these breaks it - Group into three eras, each with a one-line theme — not a list of events - Two events per era, chosen for having a number - Bands get paler into the past; only the current era is accented - Years in a tabular column Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/history-era-bands/pattern.html. --- # Employee Voice — A Portrait Frame and Three Short Q&As Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.16em / tabular numerals title 54px / 700 / leading 1.35 / tabular numerals name 36px / 700 / tabular numerals role 22px / 400 / tabular numerals question 24px / 700 / tabular numerals answer 34px / 500 / leading 1.6 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FFFFFF / Surface #F4F3F0 / Ink #16181D / Muted #686C74 / Accent #D9411F / Rule #E0DED8 ## Constraints — dropping these breaks it - Lift a line from the answers into the headline — 'employee interview' gives no reason to read - One concrete sentence per answer in the person's own words, not marketing copy - Portrait frame 4:5 with the eyes on the upper third; until a photo exists, shapes mark head and shoulders - Three questions: why, what, and a moment that mattered Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/employee-voice-portrait/pattern.html. --- # A Day in the Life — What Happens When, Down a Time Axis Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.16em / tabular numerals title 54px / 700 / leading 1.35 / tabular numerals time 26px / 700 / tabular numerals item 28px / 700 / tabular numerals itemNote 22px / 400 / tabular numerals sideLabel 22px / 700 / tabular numerals side 28px / 500 / leading 1.6 / tabular numerals sideWho 22px / 400 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FFFFFF / Surface #F4F3F0 / Ink #16181D / Muted #686C74 / Accent #D9411F / Rule #E0DED8 ## Constraints — dropping these breaks it - Times right-aligned and tabular, left of the axis - Breaks and finishing time get hollow dots and grey, so work time stands out - About seven items — not a 15-minute schedule - Include one concrete working condition Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/day-schedule-timeline/pattern.html. --- # Hiring Process — Stages as Chevrons, Each With How Long It Takes Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.16em / tabular numerals title 54px / 700 / leading 1.35 / tabular numerals stepNo 22px / 700 / tabular numerals step 32px / 700 / tabular numerals days 48px / 700 / leading 1 / tabular numerals stepNote 22px / 400 / leading 1.6 / tabular numerals goal 36px / 700 / tabular numerals totalLabel 24px / 700 / tabular numerals total 40px / 700 / tabular numerals totalNote 22px / 400 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FFFFFF / Surface #F4F3F0 / Ink #16181D / Muted #686C74 / Accent #D9411F / Rule #E0DED8 ## Constraints — dropping these breaks it - 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 Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/hiring-process-steps/pattern.html.

# Mission — One Sentence, Set Vertically in Serif format: slide-16x9 density: low layout: kind: centered canvas: w: 1920 h: 1080 margin: top: 88 right: 140 bottom: 56 left: 140 type: label: size: 24 weight: 700 tracking: 0.3em numeric: tabular statement: size: 84 weight: 700 tracking: 0.08em leading: 1.7 numeric: tabular company: size: 22 weight: 400 numeric: tabular colors: ground: "#FFFFFF" surface: "#F4F3F0" ink: "#16181D" muted: "#686C74" accent: "#D9411F" rule: "#E0DED8" rules: - Vertical setting is for the mission line alone — its meaning comes from breaking the horizontal pages around it - Two columns at most, about nine characters each — longer columns wrap off the page - No digits or Latin letters — they turn sideways in vertical text - The only ornament is the vertical rule by the label --- # Mission, Vision, Values — Three Tiers, Larger and Shorter Toward the Top format: slide-16x9 density: medium layout: kind: stack 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 tierLabel: size: 22 weight: 700 tracking: 0.1em numeric: tabular mission: size: 56 weight: 700 numeric: tabular vision: size: 38 weight: 700 leading: 1.5 numeric: tabular valueHead: size: 30 weight: 700 numeric: tabular valueBody: size: 22 weight: 400 leading: 1.6 numeric: tabular folio: size: 16 weight: 400 numeric: tabular colors: ground: "#FFFFFF" surface: "#F4F3F0" ink: "#16181D" muted: "#686C74" accent: "#D9411F" rule: "#E0DED8" rules: - Higher tiers are larger and shorter — the less it changes, the bigger it is - Give the vision a year and a number, or it blurs into the mission - Three values, each a heading and one line of restatement - Latin labels small; the Japanese label leads --- # Company in Numbers — Seven Figures, Sized by What Matters Most format: slide-16x9 density: medium layout: kind: grid 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 factLabel: size: 24 weight: 700 numeric: tabular factBig: size: 180 weight: 700 tracking: -0.01em leading: 1 numeric: tabular factNote: size: 22 weight: 400 leading: 1.6 numeric: tabular factValue: size: 80 weight: 700 tracking: -0.01em leading: 1 numeric: tabular note: size: 20 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: - Enlarge one figure only — at equal size, none is remembered - Give the big figure its meaning (four times in five years) - Units at a third of the figure's size, aligned to its baseline - Always state the as-of date --- # History — Era Bands, With Two Events Under Each format: slide-16x9 density: medium layout: kind: timeline canvas: w: 1920 h: 1080 margin: top: 88 right: 140 bottom: 56 left: 140 columns: count: 3 gap: 8 type: kicker: size: 22 weight: 700 tracking: 0.16em numeric: tabular title: size: 54 weight: 700 leading: 1.35 numeric: tabular era: size: 34 weight: 700 numeric: tabular eraYears: size: 24 weight: 500 numeric: tabular eraTheme: size: 28 weight: 700 numeric: tabular year: size: 24 weight: 700 numeric: tabular event: size: 24 weight: 400 leading: 1.6 numeric: tabular folio: size: 16 weight: 400 numeric: tabular colors: ground: "#FFFFFF" surface: "#F4F3F0" ink: "#16181D" muted: "#686C74" accent: "#D9411F" rule: "#E0DED8" rules: - Group into three eras, each with a one-line theme — not a list of events - Two events per era, chosen for having a number - Bands get paler into the past; only the current era is accented - Years in a tabular column --- # Employee Voice — A Portrait Frame and Three Short Q&As format: slide-16x9 density: medium layout: kind: 2-column 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 name: size: 36 weight: 700 numeric: tabular role: size: 22 weight: 400 numeric: tabular question: size: 24 weight: 700 numeric: tabular answer: size: 34 weight: 500 leading: 1.6 numeric: tabular folio: size: 16 weight: 400 numeric: tabular colors: ground: "#FFFFFF" surface: "#F4F3F0" ink: "#16181D" muted: "#686C74" accent: "#D9411F" rule: "#E0DED8" rules: - Lift a line from the answers into the headline — 'employee interview' gives no reason to read - One concrete sentence per answer in the person's own words, not marketing copy - Portrait frame 4:5 with the eyes on the upper third; until a photo exists, shapes mark head and shoulders - "Three questions: why, what, and a moment that mattered" --- # A Day in the Life — What Happens When, Down a Time Axis format: slide-16x9 density: medium layout: kind: timeline 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 time: size: 26 weight: 700 numeric: tabular item: size: 28 weight: 700 numeric: tabular itemNote: size: 22 weight: 400 numeric: tabular sideLabel: size: 22 weight: 700 numeric: tabular side: size: 28 weight: 500 leading: 1.6 numeric: tabular sideWho: 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: - Times right-aligned and tabular, left of the axis - Breaks and finishing time get hollow dots and grey, so work time stands out - About seven items — not a 15-minute schedule - Include one concrete working condition --- # Hiring Process — Stages as Chevrons, Each With How Long It Takes 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

<!doctype html> <meta charset="utf-8"> <title>理念 — 縦組みの明朝で、1 文だけを置く</title> <meta name="dv-font" content="Zen Old Mincho:700"> <meta name="dv-font" content="Zen Kaku Gothic New:400;500;700"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。会社・人物・数値はすべて説明用の架空のもの。 */ :root { --ground: #FFFFFF; --surface: #F4F3F0; --ink: #16181D; --muted: #686C74; --accent: #D9411F; --rule: #E0DED8; } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 88px 140px 56px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: 1fr; row-gap: 40px; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .16em; color: var(--accent); } .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; } .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; } .content { position: relative; } /* 縦組みは理念の 1 文にだけ使う。横組みの頁の中で、ここだけ読み方が変わることで重みが出る */ .stmt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); writing-mode: vertical-rl; font-family: "Zen Old Mincho", "IPAMincho", serif; font-size: 84px; font-weight: 700; line-height: 1.7; letter-spacing: .08em; white-space: nowrap; } .stmt span { display: block; padding-top: .6em; } .label { position: absolute; right: 0; top: 0; writing-mode: vertical-rl; font-size: 24px; font-weight: 700; letter-spacing: .3em; color: var(--accent); border-right: 4px solid var(--accent); padding-right: 16px; } .company { position: absolute; left: 0; bottom: 0; font-size: 22px; color: var(--muted); } </style> <div class="artboard" data-artboard> <div class="content" data-content> <p class="label" data-type="label">わたしたちの使命</p> <h1 class="stmt" data-type="statement">移動に迷う人を、<span>ひとりも残さない。</span></h1> <p class="company" data-type="company">株式会社ミチシルベ</p> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>ミッション・ビジョン・バリュー — 3 段で、上ほど大きく短く</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;500;700"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。会社・人物・数値はすべて説明用の架空のもの。 */ :root { --ground: #FFFFFF; --surface: #F4F3F0; --ink: #16181D; --muted: #686C74; --accent: #D9411F; --rule: #E0DED8; } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 88px 140px 56px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .16em; color: var(--accent); } .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; } .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; } .tiers { display: grid; grid-template-rows: auto auto 1fr; border-top: 4px solid var(--ink); } .tier { display: grid; grid-template-columns: 240px 1fr; column-gap: 48px; padding: 32px 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .tl { font-size: 22px; font-weight: 700; color: var(--muted); letter-spacing: .1em; } .tl b { display: block; font-size: 30px; color: var(--ink); letter-spacing: 0; margin-top: 4px; } /* 上の段ほど文字を大きく、文を短くする。変わりにくいものほど大きい */ .m { font-size: 56px; font-weight: 700; color: var(--accent); } .v { font-size: 38px; font-weight: 700; line-height: 1.5; } .vals { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; } .vh { font-size: 30px; font-weight: 700; border-left: 6px solid var(--accent); padding-left: 16px; } .vb { font-size: 22px; color: var(--muted); margin-top: 10px; line-height: 1.6; padding-left: 22px; } </style> <div class="artboard" data-artboard> <div class="content" data-content> <div> <p class="kicker" data-type="kicker">理念の体系</p> <h1 class="title" data-type="title">使命・2030 年の姿・大事にすること</h1> </div> <div class="tiers"> <div class="tier"><p class="tl" data-type="tierLabel">MISSION<b>使命</b></p><p class="m" data-type="mission">移動に迷う人を、ひとりも残さない</p></div> <div class="tier"><p class="tl">VISION<b>2030 年の姿</b></p><p class="v" data-type="vision">全国 500 の地域で、バスと乗り合いの情報が 1 つの画面で見られる</p></div> <div class="tier"><p class="tl">VALUES<b>大事にすること</b></p><div class="vals"><div class="val"><p class="vh" data-type="valueHead">近くの困りごとから</p><p class="vb" data-type="valueBody">画面の前より、停留所の前で考える</p></div><div class="val"><p class="vh">早く出して、早く直す</p><p class="vb">完璧な時刻表より、今日走るバスの情報</p></div><div class="val"><p class="vh">データは地域に返す</p><p class="vb">集めた数字は、自治体と運行会社が使えるように</p></div></div></div> </div> <div class="folio"> <p data-type="folio">株式会社ミチシルベ　会社紹介 2026</p> <p>03</p> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>数字で見る会社 — 7 つの数字に、伝えたい順の大小をつける</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;500;700"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。会社・人物・数値はすべて説明用の架空のもの。 */ :root { --ground: #FFFFFF; --surface: #F4F3F0; --ink: #16181D; --muted: #686C74; --accent: #D9411F; --rule: #E0DED8; } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 88px 140px 56px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; row-gap: 40px; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .16em; color: var(--accent); } .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; } .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; } /* いちばん伝えたい数字だけ 2×2 の大きな枠。残り 5 つは同じ大きさに揃える */ .facts { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; } .f { background: var(--surface); padding: 32px 36px; display: flex; flex-direction: column; justify-content: space-between; } .f.big { grid-row: span 2; background: var(--accent); color: var(--ground); } .fl { font-size: 24px; font-weight: 700; } .f:not(.big) .fl { color: var(--muted); } .fv { font-size: 80px; font-weight: 700; line-height: 1; letter-spacing: -.01em; } .fv small { font-size: 30px; margin-left: 6px; letter-spacing: 0; } .f.big .fv { font-size: 180px; } .f.big .fv small { font-size: 56px; } .fn { font-size: 22px; line-height: 1.6; margin-top: 12px; } .f:not(.big) .fn { color: var(--muted); } .note { font-size: 20px; color: var(--muted); } </style> <div class="artboard" data-artboard> <div class="content" data-content> <div> <p class="kicker" data-type="kicker">数字で見るミチシルベ</p> <h1 class="title" data-type="title">小さな町から、128 の自治体に広がった</h1> </div> <div class="facts"> <div class="f big"><p class="fl" data-type="factLabel">導入している自治体</p><div><p class="fv" data-type="factBig">128<small>自治体</small></p><p class="fn" data-type="factNote">5 年で 4 倍。うち 7 割が人口 10 万人以下の町</p></div></div> <div class="f"><p class="fl">1 日の経路検索</p><p class="fv" data-type="factValue">42<small>万回</small></p></div> <div class="f"><p class="fl">社員</p><p class="fv">86<small>名</small></p></div> <div class="f"><p class="fl">創業</p><p class="fv">2017<small>年</small></p></div> <div class="f"><p class="fl">開発職の割合</p><p class="fv">58<small>%</small></p></div> <div class="f"><p class="fl">育休からの復帰</p><p class="fv">100<small>%</small></p></div> <div class="f"><p class="fl">平均年齢</p><p class="fv">34.2<small>歳</small></p></div> </div> <p class="note" data-type="note">2026 年 9 月時点。数値は説明用の架空のもの</p> <div class="folio"> <p data-type="folio">株式会社ミチシルベ　会社紹介 2026</p> <p>04</p> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>沿革 — 年代ごとの帯の下に、その時期の出来事を 2 つ</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;500;700"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。会社・人物・数値はすべて説明用の架空のもの。 */ :root { --ground: #FFFFFF; --surface: #F4F3F0; --ink: #16181D; --muted: #686C74; --accent: #D9411F; --rule: #E0DED8; --b1: color-mix(in srgb, var(--ink) 6%, var(--ground)); --b2: color-mix(in srgb, var(--ink) 14%, var(--ground)); } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 88px 140px 56px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .16em; color: var(--accent); } .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; } .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; } .eras { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 8px; align-content: center; } /* 帯は年代のまとまり。色を濃くしていき、今いる時代だけ強調色にする */ .band { display: flex; justify-content: space-between; align-items: baseline; padding: 24px 32px; background: var(--b1); } .era:nth-child(2) .band { background: var(--b2); } .era.now .band { background: var(--accent); color: var(--ground); } .en { font-size: 34px; font-weight: 700; } .ey { font-size: 24px; font-weight: 500; } .et { font-size: 28px; font-weight: 700; margin: 28px 32px 0; } ul { list-style: none; padding: 0 32px; margin-top: 16px; } li { display: grid; grid-template-columns: 88px 1fr; padding: 18px 0; border-top: 1px solid var(--rule); } .y { font-size: 24px; font-weight: 700; color: var(--accent); } li p { font-size: 24px; line-height: 1.6; } </style> <div class="artboard" data-artboard> <div class="content" data-content> <div> <p class="kicker" data-type="kicker">沿革</p> <h1 class="title" data-type="title">1 つの町のバスから始まり、地域どうしをつなぐ段階へ</h1> </div> <div class="eras"> <div class="era" data-col="1"> <div class="band"><p class="en" data-type="era">創業期</p><p class="ey" data-type="eraYears">2017–2019</p></div> <p class="et" data-type="eraTheme">1 つの町のバスから</p> <ul><li><span class="y" data-type="year">2017</span><p data-type="event">3 名で創業。宮城の 1 町でバスの位置を地図に出す</p></li><li><span class="y">2019</span><p>乗り合いタクシーの予約を加える</p></li></ul> </div> <div class="era" data-col="2"> <div class="band"><p class="en">拡大期</p><p class="ey">2020–2023</p></div> <p class="et">自治体の仕組みとして</p> <ul><li><span class="y">2021</span><p>導入 30 自治体。運行会社向けの集計画面を公開</p></li><li><span class="y">2023</span><p>導入 100 自治体を超える</p></li></ul> </div> <div class="era now" data-col="3"> <div class="band"><p class="en">これから</p><p class="ey">2024–</p></div> <p class="et">地域どうしをつなぐ</p> <ul><li><span class="y">2025</span><p>隣の町のバスへの乗り継ぎ案内を始める</p></li><li><span class="y">2026</span><p>運行計画づくりの支援に広げる</p></li></ul> </div> </div> <div class="folio"> <p data-type="folio">株式会社ミチシルベ　会社紹介 2026</p> <p>05</p> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>社員の声 — 顔写真の枠と、一問一答を 3 つ</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;500;700"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。会社・人物・数値はすべて説明用の架空のもの。 */ :root { --ground: #FFFFFF; --surface: #F4F3F0; --ink: #16181D; --muted: #686C74; --accent: #D9411F; --rule: #E0DED8; --frame-figure: color-mix(in srgb, var(--ink) 16%, var(--surface)); } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 88px 140px 56px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .16em; color: var(--accent); } .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; } .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; } .split { display: grid; grid-template-columns: 440px 1fr; column-gap: 96px; align-items: center; } /* 顔写真の枠は 4:5、目の高さを上から 1/3。写真が無いうちは頭と肩の位置だけを面で示す */ .photo { aspect-ratio: 4 / 5; background: var(--surface); position: relative; overflow: hidden; } .photo svg { position: absolute; inset: 0; width: 100%; height: 100%; } .who { margin-top: 24px; display: grid; row-gap: 4px; } .name { font-size: 36px; font-weight: 700; } .role { font-size: 22px; color: var(--muted); } .qa + .qa { margin-top: 44px; } .q { font-size: 24px; font-weight: 700; color: var(--accent); } .q::before { content: "Q"; display: inline-block; width: 1.6em; } .a { font-size: 34px; font-weight: 500; line-height: 1.6; margin-top: 8px; padding-left: 1.2em; } </style> <div class="artboard" data-artboard> <div class="content" data-content> <div> <p class="kicker" data-type="kicker">社員の声</p> <h1 class="title" data-type="title">「直した路線で、問い合わせが半分になった」</h1> </div> <div class="split"> <div> <div class="photo"><svg viewBox="0 0 100 125" aria-hidden="true" preserveAspectRatio="xMidYMax slice"><circle cx="50" cy="45" r="19" fill="var(--frame-figure)"/><path d="M10 125 C10 92 28 78 50 78 C72 78 90 92 90 125 Z" fill="var(--frame-figure)"/></svg></div> <p class="who"><span class="name" data-type="name">沖田まどか</span><span class="role" data-type="role">運行データ担当　2022 年入社</span></p> </div> <div><div class="qa"><p class="q" data-type="question">入社した理由は</p><p class="a" data-type="answer">祖母がバスを調べられず困っていた。それを直せる仕事だと思った</p></div><div class="qa"><p class="q">いまの仕事は</p><p class="a">運行会社の人と、遅れやすい便を見つけて時刻表を直す</p></div><div class="qa"><p class="q">うれしかったことは</p><p class="a">直した路線で、乗り遅れの問い合わせが半分になった</p></div></div> </div> <div class="folio"> <p data-type="folio">株式会社ミチシルベ　会社紹介 2026</p> <p>06</p> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>ある 1 日 — 時刻の縦軸に、その時間にしていることを並べる</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;500;700"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。会社・人物・数値はすべて説明用の架空のもの。 */ :root { --ground: #FFFFFF; --surface: #F4F3F0; --ink: #16181D; --muted: #686C74; --accent: #D9411F; --rule: #E0DED8; } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 88px 140px 56px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .16em; color: var(--accent); } .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; } .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; } .split { display: grid; grid-template-columns: 1fr 440px; column-gap: 72px; align-items: center; } ol { list-style: none; padding: 0; position: relative; } /* 縦軸は時刻の列と本文の間に 1 本。点は軸の上に置き、休みの時間は白抜きにする */ ol::before { content: ""; position: absolute; left: 131px; top: 12px; bottom: 12px; width: 3px; background: var(--rule); } li { display: grid; grid-template-columns: 104px 56px 1fr; align-items: baseline; padding: 12px 0; position: relative; } .t { font-size: 26px; font-weight: 700; text-align: right; padding-right: 8px; } .dot { justify-self: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); position: relative; top: 2px; } li.lite .dot { background: var(--ground); border: 3px solid var(--muted); } li.lite .h, li.lite .t { color: var(--muted); } .h { font-size: 28px; font-weight: 700; } .b { font-size: 22px; color: var(--muted); margin-top: 4px; } .side { background: var(--surface); padding: 36px 40px; } .sl { font-size: 22px; font-weight: 700; color: var(--accent); } .st { font-size: 28px; font-weight: 500; line-height: 1.6; margin-top: 12px; } .sw { font-size: 22px; color: var(--muted); margin-top: 20px; } </style> <div class="artboard" data-artboard> <div class="content" data-content> <div> <p class="kicker" data-type="kicker">ある 1 日</p> <h1 class="title" data-type="title">午前はデータ、午後は運行会社と停留所へ</h1> </div> <div class="split"> <ol> <li class=""><span class="t" data-type="time">9:30</span><span class="dot"></span><div><p class="h" data-type="item">朝会</p><p class="b" data-type="itemNote">チーム 6 人で、前日の遅れの多かった便を確認する</p></div></li> <li class=""><span class="t">10:00</span><span class="dot"></span><div><p class="h">データの点検</p><p class="b">運行会社から届いた走行記録を見て、抜けを直す</p></div></li> <li class="lite"><span class="t">12:00</span><span class="dot"></span><div><p class="h">昼休み</p></div></li> <li class=""><span class="t">13:00</span><span class="dot"></span><div><p class="h">運行会社と打ち合わせ</p><p class="b">時刻表の直し方を、画面を見せながら決める</p></div></li> <li class=""><span class="t">15:00</span><span class="dot"></span><div><p class="h">現地調査</p><p class="b">停留所で、乗る人が実際に困る所を見る</p></div></li> <li class=""><span class="t">17:00</span><span class="dot"></span><div><p class="h">振り返り</p><p class="b">調査の写真を共有し、明日の作業を決める</p></div></li> <li class="lite"><span class="t">18:00</span><span class="dot"></span><div><p class="h">退勤</p><p class="b">月に 2 回は 16 時に上がる</p></div></li> </ol> <div class="side"> <p class="sl" data-type="sideLabel">この日のひと言</p> <p class="st" data-type="side">机の上の数字と、停留所で見たことが合うと、直す場所がはっきりする</p> <p class="sw" data-type="sideWho">運行データ担当　沖田まどか</p> </div> </div> <div class="folio"> <p data-type="folio">株式会社ミチシルベ　会社紹介 2026</p> <p>07</p> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>選考の流れ — 段階を矢羽根で並べ、それぞれにかかる日数を書く</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;500;700"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。会社・人物・数値はすべて説明用の架空のもの。 */ :root { --ground: #FFFFFF; --surface: #F4F3F0; --ink: #16181D; --muted: #686C74; --accent: #D9411F; --rule: #E0DED8; } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 88px 140px 56px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; row-gap: 40px; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .16em; color: var(--accent); } .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; } .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; } .flow { display: grid; grid-template-columns: repeat(5, 1fr) 220px; column-gap: 10px; align-content: center; } /* 段階は矢羽根の形でつなぐ。日数は次の段階に進むまでの目安 */ .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%); } .st.first { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); padding-left: 32px; } .sn { font-size: 22px; font-weight: 700; color: var(--accent); } .sh { font-size: 32px; font-weight: 700; margin-top: 4px; } .sd { font-size: 48px; font-weight: 700; color: var(--accent); margin-top: 16px; line-height: 1; } .sb { font-size: 22px; color: var(--muted); line-height: 1.6; margin-top: 14px; } .goal { background: var(--accent); color: var(--ground); display: grid; place-content: center; text-align: center; } .gl { font-size: 36px; font-weight: 700; } .total { display: flex; align-items: baseline; gap: 24px; border-top: 3px solid var(--ink); padding-top: 20px; } .tl { font-size: 24px; font-weight: 700; } .tv { font-size: 40px; font-weight: 700; color: var(--accent); } .tn { font-size: 22px; color: var(--muted); } </style> <div class="artboard" data-artboard> <div class="content" data-content> <div> <p class="kicker" data-type="kicker">選考の流れ</p> <h1 class="title" data-type="title">応募から内定まで、5 つの段階と約 3 週間</h1> </div> <div class="flow"> <div class="st first"> <p class="sn" data-type="stepNo">1</p> <p class="sh" data-type="step">応募</p> <p class="sd">—</p><p class="sb">採用ページから</p> </div> <div class="st"> <p class="sn">2</p> <p class="sh">書類選考</p> <p class="sd" data-type="days">5 日</p><p class="sb" data-type="stepNote">経歴と、作った物</p> </div> <div class="st"> <p class="sn">3</p> <p class="sh">一次面接</p> <p class="sd">7 日</p><p class="sb">社員 2 名と 45 分</p> </div> <div class="st"> <p class="sn">4</p> <p class="sh">課題と面談</p> <p class="sd">5 日</p><p class="sb">実データで 2 時間</p> </div> <div class="st"> <p class="sn">5</p> <p class="sh">最終面接</p> <p class="sd">4 日</p><p class="sb">代表と 30 分</p> </div> <div class="goal"><p class="gl" data-type="goal">内定</p></div> </div> <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> <div class="folio"> <p data-type="folio">株式会社ミチシルベ　会社紹介 2026</p> <p>08</p> </div> </div> </div>

The Company Seven — From the Mission to the Hiring Steps, One Recruiting Session

Reading order

About this deck

この一式について / About this deck

Take it with you

Everything

Prompt

Spec

Files

01 mission-vertical-statement/pattern.html

02 vision-values-three-tiers/pattern.html

03 company-facts-infographic/pattern.html

04 history-era-bands/pattern.html

05 employee-voice-portrait/pattern.html

06 day-schedule-timeline/pattern.html

07 hiring-process-steps/pattern.html