Design Vault Search use case, structure, colour, notes /
Index Categories Tags 日本語
Back to index

Weekly Schedule — Days Down, Owners Across

Table
Weekly Schedule — Days Down, Owners Across
120 100

1920 × 1080 Seen as a design

Take it with you

Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.

Everything

schedule-table-weekly-everything.md

Everything in this panel, including the contents behind each URL, in one Markdown file

Prompt

1.1 KB 
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 100 right 120 bottom 100 left 120

## Emphasis
row 4 only, by fill and nothing else

## Type (px against a 1920px canvas)
title  42px / 700 / tracking 0.02em
legend  17px / 400
th  17px / 500 / tracking 0.1em
day  24px / 700 / leading 1.2
dayNote  15px / 400 / leading 1.2
task  18px / 400 / leading 1.6
none  18px / 400
tag  14px / 500 / tracking 0.1em / leading 1.2
note  17px / 400 / leading 1.8
week  15px / 500 / tabular numerals

## Colour
Ground #FFFFFF / Surface #F4F6F8 / Ink #13161A / Muted #737A83 / Accent #B0431E / Rule #D8DDE3

## Constraints — dropping these breaks it
- Horizontal rules only — verticals make the grid the subject and stop the eye
- Days are never colour-coded; the colour belongs to the deadline row
- Idle is written out — an empty cell cannot be told from an undecided one

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/schedule-table-weekly/pattern.html.

Spec

1.5 KB

/ai/designs/schedule-table-weekly.json 

format: slide-16x9
density: high
layout:
  kind: table
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 100
    right: 120
    bottom: 100
    left: 120
  emphasis:
    row: 4
    via:
      - fill
type:
  title:
    size: 42
    weight: 700
    tracking: 0.02em
  legend:
    size: 17
    weight: 400
  th:
    size: 17
    weight: 500
    tracking: 0.1em
  day:
    size: 24
    weight: 700
    leading: 1.2
  dayNote:
    size: 15
    weight: 400
    leading: 1.2
  task:
    size: 18
    weight: 400
    leading: 1.6
  none:
    size: 18
    weight: 400
  tag:
    size: 14
    weight: 500
    tracking: 0.1em
    leading: 1.2
  note:
    size: 17
    weight: 400
    leading: 1.8
  week:
    size: 15
    weight: 500
    numeric: tabular
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F8"
  ink: "#13161A"
  muted: "#737A83"
  accent: "#B0431E"
  rule: "#D8DDE3"
rules:
  - Horizontal rules only — verticals make the grid the subject and stop the eye
  - Days are never colour-coded; the colour belongs to the deadline row
  - Idle is written out — an empty cell cannot be told from an undecided one

Files

pattern.html

6.3 KB

/designs/schedule-table-weekly/pattern.html — The artboard itself, font subset included — open it and this picture draws.

Show contents 
<!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>
  :root {
    --ground: #FFFFFF;
    --surface: #F4F6F8;
    --ink: #13161A;
    --muted: #737A83;
    --accent: #B0431E;
    --rule: #D8DDE3;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

  .artboard {
    width: 1920px; height: 1080px;
    background: var(--ground); color: var(--ink);
    padding: 100px 120px;
  }
  /* 表の段は minmax(0, 1fr)。1fr のままだと表の中身の高さが下限になり、行送りの既定値が
     大きい環境（macOS）では表が伸びて注記を画面の外へ押し出す。 */
  .content { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 34px; }

  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 64px; }
  .title { font-size: 42px; font-weight: 700; letter-spacing: .02em; }
  .legend { font-size: 17px; font-weight: 400; color: var(--muted); }

  .table { display: grid; grid-template-rows: auto repeat(5, minmax(0, 1fr)); }
  /* 列の間隔は padding で取り、column-gap は 0 にする。1px でも隙間があると
     地を敷いた行にだけ縦の白線が入り、引いていない罫が見えてしまう。 */
  .tr { display: grid; grid-template-columns: 200px repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .th { padding: 0 24px 18px; border-bottom: 2px solid var(--rule);
        font-size: 17px; font-weight: 500; letter-spacing: .1em; color: var(--muted); }
  /* 罫は横だけ。縦罫を足すと升目が主役になり、
     「いつ・誰が」を横に読む動きが止まる。 */
  .td { padding: 22px 24px; border-bottom: 1px solid var(--rule); display: grid; gap: 7px; align-content: center; }
  /* 曜日の欄は 3 段積むので行送りを明示する。既定の normal は環境で 1.3〜1.55 倍に揺れる。 */
  .day { font-size: 24px; font-weight: 700; line-height: 1.2; }
  .dayNote { font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--muted); }
  .task { font-size: 18px; font-weight: 400; line-height: 1.6; }
  .none { font-size: 18px; font-weight: 400; color: var(--muted); }
  /* 締切の 1 行だけを地に敷く。曜日の色分けはしない。 */
  .tr[data-emphasis] .td { background: var(--surface); }
  .tr[data-emphasis] .day { color: var(--accent); }
  .tag { display: inline-block; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: .1em;
         color: var(--accent); border: 1px solid var(--accent); padding: 4px 10px; justify-self: start; }

  .foot { border-top: 1px solid var(--rule); padding-top: 24px; display: flex; justify-content: space-between; gap: 48px; }
  .note { font-size: 17px; font-weight: 400; line-height: 1.8; color: var(--muted); max-width: 1300px; }
  .week { font-size: 15px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">並行稼働 1 週目の進め方</h1>
      <p class="legend" data-type="legend">地を敷いた行が締切。ここを越えると翌週の作業が動きます</p>
    </div>

    <div class="table">
      <div class="tr">
        <p class="th" data-type="th">曜日</p>
        <p class="th">貴社 情報システム部</p>
        <p class="th">貴社 業務部門</p>
        <p class="th">当社 移行担当</p>
        <p class="th">保守ベンダー</p>
      </div>

      <div class="tr" data-row="1">
        <div class="td"><p class="day" data-type="day">月</p><p class="dayNote" data-type="dayNote">11/16</p></div>
        <div class="td"><p class="task" data-type="task">旧環境の最終バックアップ</p></div>
        <div class="td"><p class="none" data-type="none">通常業務</p></div>
        <div class="td"><p class="task">移行データの投入（1 回目）</p></div>
        <div class="td"><p class="none">待機</p></div>
      </div>
      <div class="tr" data-row="2">
        <div class="td"><p class="day">火</p><p class="dayNote">11/17</p></div>
        <div class="td"><p class="task">権限の付与（340 名）</p></div>
        <div class="td"><p class="task">2 拠点で新旧の両方に入力</p></div>
        <div class="td"><p class="task">差分の突き合わせ</p></div>
        <div class="td"><p class="none">待機</p></div>
      </div>
      <div class="tr" data-row="3">
        <div class="td"><p class="day">水</p><p class="dayNote">11/18</p></div>
        <div class="td"><p class="task">連携 11 本の疎通確認</p></div>
        <div class="td"><p class="task">両方に入力（継続）</p></div>
        <div class="td"><p class="task">差分の原因を分類</p></div>
        <div class="td"><p class="task">旧環境の監視を継続</p></div>
      </div>
      <div class="tr" data-row="4" data-emphasis="fill">
        <div class="td"><p class="day">木</p><p class="dayNote">11/19</p><p class="tag" data-type="tag">締切</p></div>
        <div class="td"><p class="task">差分ゼロの確認に署名</p></div>
        <div class="td"><p class="task">受入基準の判定（各課長）</p></div>
        <div class="td"><p class="task">是正の適用は前日まで</p></div>
        <div class="td"><p class="none">待機</p></div>
      </div>
      <div class="tr" data-row="5">
        <div class="td"><p class="day">金</p><p class="dayNote">11/20</p></div>
        <div class="td"><p class="task">翌週の展開範囲を確定</p></div>
        <div class="td"><p class="task">新環境のみに切替</p></div>
        <div class="td"><p class="task">2 週目の計画を提出</p></div>
        <div class="td"><p class="task">旧環境を参照のみに</p></div>
      </div>
    </div>

    <div class="foot">
      <p class="note" data-type="note">木曜の判定が出ない場合、金曜の切替は行わず 1 週間まるごと後ろへ倒します。部分的に進めると、翌週に新旧どちらが正なのか分からない拠点が残ります。</p>
      <p class="week" data-type="week">2026 年 11 月 第 3 週</p>
    </div>
  </div>
</div>

font.css

4.6 KB

/designs/schedule-table-weekly/font.css — Not in Everything

Show contents 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   173 (7596d32c27dc086e)
 *
 * pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
 * 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
 * その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
 */

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+2f-34, U+36-39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-304e, U+3053-3054, U+3057-305c, U+305f-3062, U+3066-306b, U+306e-3071, U+3078-307a, U+307e-307f, U+3081, U+3089-308b, U+308d, U+308f, U+3092, U+3099-309a, U+30a2, U+30af-30b0, U+30b7-30bc, U+30bf-30c0, U+30c3, U+30c6-30c7, U+30cf-30d1, U+30d5-30da, U+30e0, U+30ed, U+30f3, U+30fc, U+4e0e, U+4e21, U+4e26, U+4ed8, U+4f5c, U+4fdd, U+5012, U+50cd, U+5165, U+51fa, U+5206-5207, U+5217, U+5224, U+524d, U+529b, U+52d5, U+52d9, U+539f, U+53c2, U+53d7, U+5404, U+5408, U+540d, U+56de, U+56e0, U+56f2, U+5730, U+57fa, U+5831, U+5834, U+5883, U+5b88, U+5b9a, U+5c55, U+5dee, U+5e38, U+5e74, U+5f53, U+5f85, U+5f8c, U+60c5, U+6295, U+62c5, U+62e0, U+63d0, U+643a, U+6577, U+65b0, U+65b9, U+65e5, U+65e7, U+662f, U+66dc, U+66ff-6700, U+6708, U+6728, U+672c, U+696d, U+6a29, U+6a5f, U+6b21, U+6b63, U+6b8b, U+6c34, U+6e96, U+706b, U+70b9, U+7167, U+74b0, U+7528, U+753b, U+758e, U+7684, U+76e3, U+76ee, U+78ba, U+793e, U+79fb, U+7a3c, U+7a81, U+7b2c, U+7bc4, U+7d42, U+7d99-7d9a, U+7de0, U+7f72, U+7fcc, U+884c, U+8868, U+8996, U+8a08, U+8a8d, U+8ab2, U+8cb4, U+8d8a, U+901a, U+9023, U+9031-9032, U+9069, U+90e8, U+91d1, U+9577, U+9580, U+958b, U+9593, U+9650, U+985e, U+ff08-ff09;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(./font-1.woff2) format('woff2');
  unicode-range: U+2f-34, U+36-39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-304e, U+3053-3054, U+3057-305c, U+305f-3062, U+3066-306b, U+306e-3071, U+3078-307a, U+307e-307f, U+3081, U+3089-308b, U+308d, U+308f, U+3092, U+3099-309a, U+30a2, U+30af-30b0, U+30b7-30bc, U+30bf-30c0, U+30c3, U+30c6-30c7, U+30cf-30d1, U+30d5-30da, U+30e0, U+30ed, U+30f3, U+30fc, U+4e0e, U+4e21, U+4e26, U+4ed8, U+4f5c, U+4fdd, U+5012, U+50cd, U+5165, U+51fa, U+5206-5207, U+5217, U+5224, U+524d, U+529b, U+52d5, U+52d9, U+539f, U+53c2, U+53d7, U+5404, U+5408, U+540d, U+56de, U+56e0, U+56f2, U+5730, U+57fa, U+5831, U+5834, U+5883, U+5b88, U+5b9a, U+5c55, U+5dee, U+5e38, U+5e74, U+5f53, U+5f85, U+5f8c, U+60c5, U+6295, U+62c5, U+62e0, U+63d0, U+643a, U+6577, U+65b0, U+65b9, U+65e5, U+65e7, U+662f, U+66dc, U+66ff-6700, U+6708, U+6728, U+672c, U+696d, U+6a29, U+6a5f, U+6b21, U+6b63, U+6b8b, U+6c34, U+6e96, U+706b, U+70b9, U+7167, U+74b0, U+7528, U+753b, U+758e, U+7684, U+76e3, U+76ee, U+78ba, U+793e, U+79fb, U+7a3c, U+7a81, U+7b2c, U+7bc4, U+7d42, U+7d99-7d9a, U+7de0, U+7f72, U+7fcc, U+884c, U+8868, U+8996, U+8a08, U+8a8d, U+8ab2, U+8cb4, U+8d8a, U+901a, U+9023, U+9031-9032, U+9069, U+90e8, U+91d1, U+9577, U+9580, U+958b, U+9593, U+9650, U+985e, U+ff08-ff09;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-2.woff2) format('woff2');
  unicode-range: U+2f-34, U+36-39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-304e, U+3053-3054, U+3057-305c, U+305f-3062, U+3066-306b, U+306e-3071, U+3078-307a, U+307e-307f, U+3081, U+3089-308b, U+308d, U+308f, U+3092, U+3099-309a, U+30a2, U+30af-30b0, U+30b7-30bc, U+30bf-30c0, U+30c3, U+30c6-30c7, U+30cf-30d1, U+30d5-30da, U+30e0, U+30ed, U+30f3, U+30fc, U+4e0e, U+4e21, U+4e26, U+4ed8, U+4f5c, U+4fdd, U+5012, U+50cd, U+5165, U+51fa, U+5206-5207, U+5217, U+5224, U+524d, U+529b, U+52d5, U+52d9, U+539f, U+53c2, U+53d7, U+5404, U+5408, U+540d, U+56de, U+56e0, U+56f2, U+5730, U+57fa, U+5831, U+5834, U+5883, U+5b88, U+5b9a, U+5c55, U+5dee, U+5e38, U+5e74, U+5f53, U+5f85, U+5f8c, U+60c5, U+6295, U+62c5, U+62e0, U+63d0, U+643a, U+6577, U+65b0, U+65b9, U+65e5, U+65e7, U+662f, U+66dc, U+66ff-6700, U+6708, U+6728, U+672c, U+696d, U+6a29, U+6a5f, U+6b21, U+6b63, U+6b8b, U+6c34, U+6e96, U+706b, U+70b9, U+7167, U+74b0, U+7528, U+753b, U+758e, U+7684, U+76e3, U+76ee, U+78ba, U+793e, U+79fb, U+7a3c, U+7a81, U+7b2c, U+7bc4, U+7d42, U+7d99-7d9a, U+7de0, U+7f72, U+7fcc, U+884c, U+8868, U+8996, U+8a08, U+8a8d, U+8ab2, U+8cb4, U+8d8a, U+901a, U+9023, U+9031-9032, U+9069, U+90e8, U+91d1, U+9577, U+9580, U+958b, U+9593, U+9650, U+985e, U+ff08-ff09;
}

Notes

この構成について / About this pattern

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。編集するのは pattern.html だけで、寸法を手で書き直すことはない。

A self-authored pattern. pattern.html is the artboard itself; both cover.png and the measurements in the frontmatter are derived from it, so the three cannot drift apart. Edit the artboard, never the numbers.

Techniques

Apply to