{
  "id": "gantt-quarter-bands",
  "schemaVersion": 2,
  "title": {
    "ja": "ガント — 帯の長さが期間、ずれが依存",
    "en": "Gantt — Length Is Duration, Offset Is Dependency"
  },
  "summary": {
    "ja": "四半期の目盛に 6 本の帯。日付は帯の中ではなく見出しに置く",
    "en": "Six bars against quarter gridlines, with the dates in the label column rather than the bar"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz"
  ],
  "useCases": [
    "roadmap"
  ],
  "format": "slide-16x9",
  "density": "high",
  "layout": {
    "kind": "gantt",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 96,
      "right": 120,
      "bottom": 96,
      "left": 120
    },
    "emphasis": {
      "row": 3,
      "via": [
        "fill"
      ]
    }
  },
  "type": {
    "title": {
      "size": 42,
      "weight": 700,
      "tracking": "0.02em"
    },
    "legend": {
      "size": 17,
      "weight": 400
    },
    "q": {
      "size": 16,
      "weight": 500,
      "tracking": "0.12em"
    },
    "taskName": {
      "size": 22,
      "weight": 500,
      "leading": 1.4
    },
    "taskOwner": {
      "size": 15,
      "weight": 400
    },
    "taskSpan": {
      "size": 15,
      "weight": 500,
      "numeric": "tabular"
    },
    "nowCap": {
      "size": 14,
      "weight": 700,
      "tracking": "0.1em"
    },
    "note": {
      "size": 17,
      "weight": 400,
      "leading": 1.8
    },
    "asof": {
      "size": 15,
      "weight": 500,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F3F5F8",
    "ink": "#13171D",
    "muted": "#707883",
    "accent": "#1B57C4",
    "rule": "#D6DBE2",
    "series": []
  },
  "rules": [
    {
      "ja": "日付を帯の中に入れない。文字が入るかどうかが帯の幅を決めてしまう",
      "en": "Keep dates out of the bars — otherwise the label, not the duration, sets the width"
    },
    {
      "ja": "本日の線は帯の領域にだけ引く。見出し列まで伸ばすと紙を切る線に見える",
      "en": "The today line spans the track only; across the labels it reads as a cut"
    },
    {
      "ja": "塗るのは 1 本だけ。遅れると全体が動く工程を指す",
      "en": "Fill one bar only — the one whose slip moves everything else"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.Ddtz8It7.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "roadmap-4phase-band",
      "timeline-vertical-milestones",
      "schedule-table-weekly"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "high",
      "layout": {
        "kind": "gantt",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 96,
          "right": 120,
          "bottom": 96,
          "left": 120
        },
        "emphasis": {
          "row": 3,
          "via": [
            "fill"
          ]
        }
      },
      "type": {
        "title": {
          "size": 42,
          "weight": 700,
          "tracking": "0.02em"
        },
        "legend": {
          "size": 17,
          "weight": 400
        },
        "q": {
          "size": 16,
          "weight": 500,
          "tracking": "0.12em"
        },
        "taskName": {
          "size": 22,
          "weight": 500,
          "leading": 1.4
        },
        "taskOwner": {
          "size": 15,
          "weight": 400
        },
        "taskSpan": {
          "size": 15,
          "weight": 500,
          "numeric": "tabular"
        },
        "nowCap": {
          "size": 14,
          "weight": 700,
          "tracking": "0.1em"
        },
        "note": {
          "size": 17,
          "weight": 400,
          "leading": 1.8
        },
        "asof": {
          "size": 15,
          "weight": 500,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F3F5F8",
        "ink": "#13171D",
        "muted": "#707883",
        "accent": "#1B57C4",
        "rule": "#D6DBE2"
      },
      "rules": [
        "Keep dates out of the bars — otherwise the label, not the duration, sets the width",
        "The today line spans the track only; across the labels it reads as a cut",
        "Fill one bar only — the one whose slip moves everything else"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 120 下 96 左 120\n\n## 強調\n3 行目のみ。手段は 塗り だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle  42px / 700 / 字間 0.02em\nlegend  17px / 400\nq  16px / 500 / 字間 0.12em\ntaskName  22px / 500 / 行送り 1.4\ntaskOwner  15px / 400\ntaskSpan  15px / 500 / 等幅数字\nnowCap  14px / 700 / 字間 0.1em\nnote  17px / 400 / 行送り 1.8\nasof  15px / 500 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F3F5F8 / 文字 #13171D / 補助 #707883 / 強調 #1B57C4 / 罫 #D6DBE2\n\n## 外すと崩れる点\n- 日付を帯の中に入れない。文字が入るかどうかが帯の幅を決めてしまう\n- 本日の線は帯の領域にだけ引く。見出し列まで伸ばすと紙を切る線に見える\n- 塗るのは 1 本だけ。遅れると全体が動く工程を指す\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/gantt-quarter-bands/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 120 bottom 96 left 120\n\n## Emphasis\nrow 3 only, by fill and nothing else\n\n## Type (px against a 1920px canvas)\ntitle  42px / 700 / tracking 0.02em\nlegend  17px / 400\nq  16px / 500 / tracking 0.12em\ntaskName  22px / 500 / leading 1.4\ntaskOwner  15px / 400\ntaskSpan  15px / 500 / tabular numerals\nnowCap  14px / 700 / tracking 0.1em\nnote  17px / 400 / leading 1.8\nasof  15px / 500 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F3F5F8 / Ink #13171D / Muted #707883 / Accent #1B57C4 / Rule #D6DBE2\n\n## Constraints — dropping these breaks it\n- Keep dates out of the bars — otherwise the label, not the duration, sets the width\n- The today line spans the track only; across the labels it reads as a cut\n- Fill one bar only — the one whose slip moves everything else\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/gantt-quarter-bands/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  :root {\n    --ground: #FFFFFF;\n    --surface: #F3F5F8;\n    --ink: #13171D;\n    --muted: #707883;\n    --accent: #1B57C4;\n    --rule: #D6DBE2;\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; }\n\n  .artboard {\n    width: 1920px; height: 1080px;\n    background: var(--ground); color: var(--ink);\n    padding: 96px 120px;\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: 30px; }\n\n  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 64px; }\n  .title { font-size: 42px; font-weight: 700; letter-spacing: .02em; }\n  .legend { font-size: 17px; font-weight: 400; color: var(--muted); }\n\n  /* 見出し列の幅と、帯の領域の始まりは 1 か所で決める。ここがずれると\n     四半期の目盛と帯が別の座標系を持つことになり、図が嘘をつく。 */\n  .scaleRow { display: grid; grid-template-columns: 420px 1fr; }\n  .scale { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }\n  .q { padding: 0 0 14px 18px; border-left: 1px solid var(--rule);\n       font-size: 16px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }\n\n  .rows { position: relative; display: grid; grid-template-rows: repeat(6, 1fr); }\n  .row { display: grid; grid-template-columns: 420px 1fr; align-items: center;\n         border-bottom: 1px solid var(--rule); }\n  .task { display: grid; gap: 5px; padding-right: 40px; }\n  .taskName { font-size: 22px; font-weight: 500; line-height: 1.4; }\n  .taskOwner { font-size: 15px; font-weight: 400; color: var(--muted); }\n  /* 日付は帯の中ではなく見出しに置く。短い帯に文字を入れると、\n     期間の長さではなく「文字が入るかどうか」が帯の幅を決めてしまう。 */\n  .taskSpan { font-size: 15px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }\n\n  .track { position: relative; height: 100%; }\n  .track::before {\n    content: \"\"; position: absolute; inset: 0;\n    background: linear-gradient(to right, var(--rule) 1px, transparent 1px) 0 0 / 25% 100%;\n  }\n  .bar { position: absolute; top: 50%; transform: translateY(-50%);\n         height: 40px; background: var(--surface); border-left: 3px solid var(--muted); }\n  /* 後戻りできなくなる 1 本だけを塗る。強調は塗り 1 手段で、幅も高さも変えない。 */\n  .row[data-emphasis] .bar { background: var(--accent); border-left-color: var(--accent); }\n  .row[data-emphasis] .taskName { font-weight: 700; }\n\n  /* 本日の線は帯の領域にだけ引く。見出し列まで伸ばすと、\n     「予定表の中の今日」ではなく「紙を切る線」に見える。 */\n  .nowLayer { position: absolute; top: 0; bottom: 0; left: 420px; right: 0; }\n  .now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); }\n  .nowCap { position: absolute; top: -26px; transform: translateX(-50%);\n            font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--accent); white-space: nowrap; }\n\n  .foot { display: flex; justify-content: space-between; gap: 48px; }\n  .note { font-size: 17px; font-weight: 400; line-height: 1.8; color: var(--muted); max-width: 1220px; }\n  .asof { font-size: 15px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div class=\"head\">\n      <h1 class=\"title\" data-type=\"title\">2026 年度 移行工程</h1>\n      <p class=\"legend\" data-type=\"legend\">縦線は本日。塗った 1 本が、遅れると全体が動く工程</p>\n    </div>\n\n    <div class=\"scaleRow\">\n      <div></div>\n      <div class=\"scale\">\n        <p class=\"q\" data-type=\"q\">Q1 4-6月</p>\n        <p class=\"q\">Q2 7-9月</p>\n        <p class=\"q\">Q3 10-12月</p>\n        <p class=\"q\">Q4 1-3月</p>\n      </div>\n    </div>\n\n    <div class=\"rows\">\n      <div class=\"row\" data-row=\"1\">\n        <div class=\"task\">\n          <p class=\"taskName\" data-type=\"taskName\">現行の棚卸し</p>\n          <p class=\"taskOwner\" data-type=\"taskOwner\">情報システム部 / 3 名</p>\n          <p class=\"taskSpan\" data-type=\"taskSpan\">4/1 - 6/20</p>\n        </div>\n        <div class=\"track\"><div class=\"bar\" style=\"left:0%; width:22%\"></div></div>\n      </div>\n      <div class=\"row\" data-row=\"2\">\n        <div class=\"task\">\n          <p class=\"taskName\">要件の確定</p>\n          <p class=\"taskOwner\">業務部門 / 各課 1 名</p>\n          <p class=\"taskSpan\">5/20 - 9/10</p>\n        </div>\n        <div class=\"track\"><div class=\"bar\" style=\"left:13.7%; width:30.1%\"></div></div>\n      </div>\n      <div class=\"row\" data-row=\"3\" data-emphasis=\"fill\">\n        <div class=\"task\">\n          <p class=\"taskName\">データ移行の設計</p>\n          <p class=\"taskOwner\">当社 / 常駐 4 名</p>\n          <p class=\"taskSpan\">8/25 - 12/5</p>\n        </div>\n        <div class=\"track\"><div class=\"bar\" style=\"left:40.3%; width:28.2%\"></div></div>\n      </div>\n      <div class=\"row\" data-row=\"4\">\n        <div class=\"task\">\n          <p class=\"taskName\">並行稼働</p>\n          <p class=\"taskOwner\">全社 / 2 拠点から</p>\n          <p class=\"taskSpan\">11/25 - 2/10</p>\n        </div>\n        <div class=\"track\"><div class=\"bar\" style=\"left:65%; width:21.1%\"></div></div>\n      </div>\n      <div class=\"row\" data-row=\"5\">\n        <div class=\"task\">\n          <p class=\"taskName\">拠点展開</p>\n          <p class=\"taskOwner\">全社 / 残 7 拠点</p>\n          <p class=\"taskSpan\">1/20 - 3/20</p>\n        </div>\n        <div class=\"track\"><div class=\"bar\" style=\"left:80.3%; width:16.4%\"></div></div>\n      </div>\n      <div class=\"row\" data-row=\"6\">\n        <div class=\"task\">\n          <p class=\"taskName\">旧環境の停止</p>\n          <p class=\"taskOwner\">情報システム部</p>\n          <p class=\"taskSpan\">3/10 - 3/31</p>\n        </div>\n        <div class=\"track\"><div class=\"bar\" style=\"left:94.2%; width:5.8%\"></div></div>\n      </div>\n\n      <div class=\"nowLayer\">\n        <div class=\"now\" style=\"left:45.8%\"><span class=\"nowCap\" data-type=\"nowCap\">9/15</span></div>\n      </div>\n    </div>\n\n    <div class=\"foot\">\n      <p class=\"note\" data-type=\"note\">Q2 末の要件確定が 2 週間ずれると、データ移行の設計が並行稼働に食い込みます。余裕はこの 1 本にしかありません。</p>\n      <p class=\"asof\" data-type=\"asof\">本日 2026 年 9 月 15 日</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/gantt-quarter-bands/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/gantt-quarter-bands/font.css",
        "https://design-vault.pages.dev/designs/gantt-quarter-bands/font-0.woff2",
        "https://design-vault.pages.dev/designs/gantt-quarter-bands/font-1.woff2",
        "https://design-vault.pages.dev/designs/gantt-quarter-bands/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/gantt-quarter-bands",
    "en": "https://design-vault.pages.dev/en/designs/gantt-quarter-bands"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。編集するのは `pattern.html`\nだけで、寸法を手で書き直すことはない。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it, so the three cannot drift apart.\nEdit the artboard, never the numbers.\n\n### Techniques\n\n- 見出し列の幅（420px）を目盛と帯で共有する。ずれると図が嘘をつく\n- 目盛は行の背景ではなく 4 本の縦罫。行ごとに帯を敷くと縞模様が主役になる\n- 担当と人数を工程名の下に置き、帯だけでは読めない負荷を補う\n\n### Apply to\n\n- 年度の工程表\n- 複数チームが並行する計画の説明"
}