版の配色
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。
このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown — 大きいのでファイルで渡す（コピーは 32KB まで）
以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白 上 100 右 120 下 100 左 120 ## 強調 4 行目のみ。手段は 塗り だけ。ほかは変えない ## 文字（版面 1920px に対する px） title 42px / 700 / 字間 0.02em legend 17px / 400 th 17px / 500 / 字間 0.1em day 24px / 700 / 行送り 1.2 dayNote 15px / 400 / 行送り 1.2 task 18px / 400 / 行送り 1.6 none 18px / 400 tag 14px / 500 / 字間 0.1em / 行送り 1.2 note 17px / 400 / 行送り 1.8 week 15px / 500 / 等幅数字 ## 配色 地 #FFFFFF / 面 #F4F6F8 / 文字 #13161A / 補助 #737A83 / 強調 #B0431E / 罫 #D8DDE3 ## 外すと崩れる点 - 罫は横だけ。縦罫を足すと升目が主役になり、横に読む動きが止まる - 曜日を色分けしない。色は締切の 1 行にだけ使う - 待機も 1 マスとして書く。空欄は「未定」と区別がつかない 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/schedule-table-weekly/pattern.html
/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:
- 罫は横だけ。縦罫を足すと升目が主役になり、横に読む動きが止まる
- 曜日を色分けしない。色は締切の 1 行にだけ使う
- 待機も 1 マスとして書く。空欄は「未定」と区別がつかない{
"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": [
"罫は横だけ。縦罫を足すと升目が主役になり、横に読む動きが止まる",
"曜日を色分けしない。色は締切の 1 行にだけ使う",
"待機も 1 マスとして書く。空欄は「未定」と区別がつかない"
]
} /designs/schedule-table-weekly/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。
<!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>
/designs/schedule-table-weekly/font.css — 全部入りには入れていない
/* 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;
}
出典を持たない自作パターン。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.