{
  "id": "metro-schematic-commuter-reliability",
  "schemaVersion": 2,
  "title": {
    "ja": "空港から中央駅 — 青線が最も安定",
    "en": "Airport to Central — The Blue Line Is Most Reliable"
  },
  "summary": {
    "ja": "接続関係を保った模式路線図で、空港から中央駅への3経路を所要時間と定時率で比べる",
    "en": "A schematic rail map preserves station connections while comparing three airport-to-central routes by travel time and on-time rate."
  },
  "capturedAt": "2026-09-25",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz",
    "minimal"
  ],
  "useCases": [
    "comparison"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "map",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 90,
      "right": 120,
      "bottom": 40,
      "left": 120
    }
  },
  "type": {
    "title": {
      "size": 46,
      "weight": 700,
      "tracking": "0.01em"
    },
    "dek": {
      "size": 22,
      "weight": 400
    },
    "stamp": {
      "size": 20,
      "weight": 500
    },
    "station": {
      "size": 22,
      "weight": 500
    },
    "destination": {
      "size": 24,
      "weight": 700
    },
    "transfer": {
      "size": 20,
      "weight": 400
    },
    "routeName": {
      "size": 22,
      "weight": 700
    },
    "routeMetric": {
      "size": 20,
      "weight": 500
    },
    "finding": {
      "size": 24,
      "weight": 700
    },
    "recommendation": {
      "size": 24,
      "weight": 500
    },
    "legend": {
      "size": 20,
      "weight": 500
    },
    "note": {
      "size": 20,
      "weight": 400
    }
  },
  "colors": {
    "ground": "#F7F8F5",
    "surface": "#FFFFFF",
    "ink": "#18232D",
    "muted": "#586875",
    "accent": "#C64E32",
    "rule": "#D7DEE1",
    "series": [
      "#236B9A",
      "#167968",
      "#A66019"
    ]
  },
  "rules": [
    {
      "ja": "線の接続と乗換駅で経路を比較し、駅間隔は地理距離として読まない",
      "en": "Compare routes by their connections and interchange stations; do not read station spacing as geographic distance."
    },
    {
      "ja": "所要時間と定時率は同じ平日朝の対象期間・集計方法で比較する",
      "en": "Compare travel time and on-time rate over the same weekday-morning period and aggregation method."
    },
    {
      "ja": "色は路線名を区別するだけで、混雑度や優先度を表さない",
      "en": "Color distinguishes route identity only; it does not encode crowding or priority."
    },
    {
      "ja": "架空の模式図と想定値。実在の時刻表・運行実績に基づく経路案内ではない",
      "en": "Fictional schematic and assumed values, not journey guidance based on a real timetable or service record."
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.BIZ8NSuB.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": []
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "map",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 90,
          "right": 120,
          "bottom": 40,
          "left": 120
        }
      },
      "type": {
        "title": {
          "size": 46,
          "weight": 700,
          "tracking": "0.01em"
        },
        "dek": {
          "size": 22,
          "weight": 400
        },
        "stamp": {
          "size": 20,
          "weight": 500
        },
        "station": {
          "size": 22,
          "weight": 500
        },
        "destination": {
          "size": 24,
          "weight": 700
        },
        "transfer": {
          "size": 20,
          "weight": 400
        },
        "routeName": {
          "size": 22,
          "weight": 700
        },
        "routeMetric": {
          "size": 20,
          "weight": 500
        },
        "finding": {
          "size": 24,
          "weight": 700
        },
        "recommendation": {
          "size": 24,
          "weight": 500
        },
        "legend": {
          "size": 20,
          "weight": 500
        },
        "note": {
          "size": 20,
          "weight": 400
        }
      },
      "colors": {
        "ground": "#F7F8F5",
        "surface": "#FFFFFF",
        "ink": "#18232D",
        "muted": "#586875",
        "accent": "#C64E32",
        "rule": "#D7DEE1",
        "series": [
          "#236B9A",
          "#167968",
          "#A66019"
        ]
      },
      "rules": [
        "Compare routes by their connections and interchange stations; do not read station spacing as geographic distance.",
        "Compare travel time and on-time rate over the same weekday-morning period and aggregation method.",
        "Color distinguishes route identity only; it does not encode crowding or priority.",
        "Fictional schematic and assumed values, not journey guidance based on a real timetable or service record."
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 90 右 120 下 40 左 120\n\n## 文字（版面 1920px に対する px）\ntitle  46px / 700 / 字間 0.01em\ndek  22px / 400\nstamp  20px / 500\nstation  22px / 500\ndestination  24px / 700\ntransfer  20px / 400\nrouteName  22px / 700\nrouteMetric  20px / 500\nfinding  24px / 700\nrecommendation  24px / 500\nlegend  20px / 500\nnote  20px / 400\n\n## 配色\n地 #F7F8F5 / 面 #FFFFFF / 文字 #18232D / 補助 #586875 / 強調 #C64E32 / 罫 #D7DEE1 / #236B9A / #167968 / #A66019\n\n## 外すと崩れる点\n- 線の接続と乗換駅で経路を比較し、駅間隔は地理距離として読まない\n- 所要時間と定時率は同じ平日朝の対象期間・集計方法で比較する\n- 色は路線名を区別するだけで、混雑度や優先度を表さない\n- 架空の模式図と想定値。実在の時刻表・運行実績に基づく経路案内ではない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/metro-schematic-commuter-reliability/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 90 right 120 bottom 40 left 120\n\n## Type (px against a 1920px canvas)\ntitle  46px / 700 / tracking 0.01em\ndek  22px / 400\nstamp  20px / 500\nstation  22px / 500\ndestination  24px / 700\ntransfer  20px / 400\nrouteName  22px / 700\nrouteMetric  20px / 500\nfinding  24px / 700\nrecommendation  24px / 500\nlegend  20px / 500\nnote  20px / 400\n\n## Colour\nGround #F7F8F5 / Surface #FFFFFF / Ink #18232D / Muted #586875 / Accent #C64E32 / Rule #D7DEE1 / #236B9A / #167968 / #A66019\n\n## Constraints — dropping these breaks it\n- Compare routes by their connections and interchange stations; do not read station spacing as geographic distance.\n- Compare travel time and on-time rate over the same weekday-morning period and aggregation method.\n- Color distinguishes route identity only; it does not encode crowding or priority.\n- Fictional schematic and assumed values, not journey guidance based on a real timetable or service record.\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/metro-schematic-commuter-reliability/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>空港から中央駅 — 3 路線の所要時間と定時率</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: #F7F8F5;\n    --surface: #FFFFFF;\n    --ink: #18232D;\n    --muted: #586875;\n    --accent: #C64E32;\n    --rule: #D7DEE1;\n    --series-1: #236B9A;\n    --series-2: #167968;\n    --series-3: #A66019;\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</style>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1920\" height=\"1080\" viewBox=\"0 0 1920 1080\" role=\"img\" aria-labelledby=\"map-title map-desc\" data-artboard=\"true\">\n  <title id=\"map-title\">空港から中央駅への3路線</title>\n  <desc id=\"map-desc\">青線は31分で定時率96パーセント。緑線は乗換1回で28分、橙線は34分。線の交点は乗換駅。</desc>\n  <style>\n    text { font-family: \"Zen Kaku Gothic New\", \"IPAGothic\", sans-serif; }\n    .ground { fill: var(--ground); }\n    .ink { fill: var(--ink); }\n    .muted { fill: var(--muted); }\n    .rule { stroke: var(--rule); }\n    .title { font-size: 46px; font-weight: 700; letter-spacing: .01em; }\n    .dek { font-size: 22px; font-weight: 400; }\n    .stamp { font-size: 20px; font-weight: 500; }\n    .route { fill: none; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }\n    .station { fill: var(--surface); stroke: var(--ink); stroke-width: 4; }\n    .interchange { fill: var(--surface); stroke-width: 8; }\n    .station-label { font-size: 22px; font-weight: 500; fill: var(--ink); }\n    .destination { font-size: 24px; font-weight: 700; fill: var(--ink); }\n    .minor-label { font-size: 20px; font-weight: 400; fill: var(--muted); }\n    .route-tag { fill: var(--surface); stroke: var(--rule); stroke-width: 2; }\n    .tag-name { font-size: 22px; font-weight: 700; fill: var(--ink); }\n    .tag-time { font-size: 20px; font-weight: 500; fill: var(--muted); }\n    .finding { font-size: 24px; font-weight: 700; fill: var(--series-1); }\n    .recommendation { font-size: 24px; font-weight: 500; fill: var(--ink); }\n    .legend { font-size: 20px; font-weight: 500; fill: var(--muted); }\n  </style>\n  <rect class=\"ground\" width=\"1920\" height=\"1080\"/>\n  <g data-content=\"true\">\n      <rect x=\"120\" y=\"90\" width=\"1680\" height=\"950\" fill=\"transparent\" aria-hidden=\"true\"/>\n      <text class=\"ink title\" data-type=\"title\" x=\"120\" y=\"137\">空港から中央駅 — 青線が最も安定</text>\n      <text class=\"muted dek\" data-type=\"dek\" x=\"120\" y=\"181\">所要時間だけでなく、平日朝の定時率も見て経路を選ぶ</text>\n      <text class=\"muted stamp\" data-type=\"stamp\" x=\"1790\" y=\"130\" text-anchor=\"end\">平日 7–9 時 · 空港 → 中央駅</text>\n      <line class=\"rule\" x1=\"120\" y1=\"218\" x2=\"1800\" y2=\"218\" stroke-width=\"2\"/>\n\n      <g transform=\"translate(120 235)\">\n        <g opacity=\".72\">\n          <path class=\"route\" stroke=\"var(--series-1)\" d=\"M140 535 H390 L570 355 H920 L1110 535 H1500\"/>\n          <path class=\"route\" stroke=\"var(--series-2)\" d=\"M140 535 H390 L570 355 H760 L940 175 H1280 L1500 355\"/>\n          <path class=\"route\" stroke=\"var(--series-3)\" d=\"M140 535 H390 L570 355 H760 L940 535 H1280 L1500 355\"/>\n        </g>\n        <g>\n          <circle class=\"station\" cx=\"140\" cy=\"535\" r=\"17\"/><circle class=\"station\" cx=\"390\" cy=\"535\" r=\"13\"/>\n          <circle class=\"station\" cx=\"570\" cy=\"355\" r=\"19\" stroke=\"var(--series-1)\"/><circle class=\"station\" cx=\"920\" cy=\"355\" r=\"13\"/>\n          <circle class=\"station\" cx=\"1110\" cy=\"535\" r=\"13\"/><circle class=\"station\" cx=\"1500\" cy=\"535\" r=\"19\" stroke=\"var(--series-1)\"/>\n        </g>\n        <circle class=\"interchange\" cx=\"570\" cy=\"355\" r=\"28\" stroke=\"var(--series-2)\"/>\n        <circle class=\"interchange\" cx=\"760\" cy=\"355\" r=\"28\" stroke=\"var(--series-3)\"/>\n        <circle class=\"station\" cx=\"940\" cy=\"175\" r=\"15\"/><circle class=\"station\" cx=\"1280\" cy=\"175\" r=\"15\"/>\n        <circle class=\"station\" cx=\"940\" cy=\"535\" r=\"15\"/><circle class=\"station\" cx=\"1280\" cy=\"535\" r=\"15\"/>\n\n        <g class=\"station-label\">\n          <text x=\"140\" y=\"602\" text-anchor=\"middle\" data-type=\"station\">空港</text>\n          <text x=\"390\" y=\"585\" text-anchor=\"middle\" data-type=\"station\">西埠頭</text>\n          <text x=\"570\" y=\"300\" text-anchor=\"middle\" data-type=\"station\">港中央</text>\n          <text x=\"760\" y=\"420\" text-anchor=\"middle\" data-type=\"station\">市庁前</text>\n          <text x=\"920\" y=\"318\" text-anchor=\"middle\" data-type=\"station\">美術館</text>\n          <text x=\"1110\" y=\"585\" text-anchor=\"middle\" data-type=\"station\">公園東</text>\n          <text x=\"1500\" y=\"602\" text-anchor=\"middle\" class=\"destination\" data-type=\"destination\">中央駅</text>\n          <text x=\"940\" y=\"130\" text-anchor=\"middle\" data-type=\"station\">旧市街</text>\n          <text x=\"1280\" y=\"130\" text-anchor=\"middle\" data-type=\"station\">北門</text>\n          <text x=\"940\" y=\"590\" text-anchor=\"middle\" data-type=\"station\">物流区</text>\n          <text x=\"1280\" y=\"590\" text-anchor=\"middle\" data-type=\"station\">大学前</text>\n        </g>\n        <g class=\"minor-label\">\n          <text x=\"570\" y=\"398\" text-anchor=\"middle\" data-type=\"transfer\">乗換</text>\n          <text x=\"760\" y=\"398\" text-anchor=\"middle\" data-type=\"transfer\">乗換</text>\n          <text x=\"818\" y=\"218\" text-anchor=\"middle\">旧市街経由</text>\n          <text x=\"1090\" y=\"490\" text-anchor=\"middle\">物流区経由</text>\n        </g>\n\n        <g transform=\"translate(220 66)\">\n          <rect class=\"route-tag\" width=\"345\" height=\"92\" rx=\"12\"/>\n          <rect width=\"9\" height=\"92\" rx=\"4\" fill=\"var(--series-1)\"/>\n          <text class=\"tag-name\" x=\"28\" y=\"37\" data-type=\"routeName\">青線 · 直通</text>\n          <text class=\"tag-time\" x=\"28\" y=\"70\" data-type=\"routeMetric\">31分 / 定時率 96%</text>\n        </g>\n        <g transform=\"translate(668 66)\">\n          <rect class=\"route-tag\" width=\"345\" height=\"92\" rx=\"12\"/>\n          <rect width=\"9\" height=\"92\" rx=\"4\" fill=\"var(--series-2)\"/>\n          <text class=\"tag-name\" x=\"28\" y=\"37\" data-type=\"routeName\">緑線 · 港中央で乗換</text>\n          <text class=\"tag-time\" x=\"28\" y=\"70\" data-type=\"routeMetric\">28分 / 定時率 89%</text>\n        </g>\n        <g transform=\"translate(1116 66)\">\n          <rect class=\"route-tag\" width=\"345\" height=\"92\" rx=\"12\"/>\n          <rect width=\"9\" height=\"92\" rx=\"4\" fill=\"var(--series-3)\"/>\n          <text class=\"tag-name\" x=\"28\" y=\"37\" data-type=\"routeName\">橙線 · 市庁前で乗換</text>\n          <text class=\"tag-time\" x=\"28\" y=\"70\" data-type=\"routeMetric\">34分 / 定時率 94%</text>\n        </g>\n      </g>\n\n      <line class=\"rule\" x1=\"120\" y1=\"927\" x2=\"1800\" y2=\"927\" stroke-width=\"2\"/>\n      <text class=\"finding\" data-type=\"finding\" x=\"120\" y=\"980\">推奨</text>\n      <text class=\"recommendation\" data-type=\"recommendation\" x=\"225\" y=\"980\">青線 — 緑線より3分遅いが、定時率は7ポイント高い</text>\n      <g class=\"legend\" data-type=\"legend\">\n        <line x1=\"1210\" y1=\"973\" x2=\"1240\" y2=\"973\" stroke=\"var(--series-1)\" stroke-width=\"9\" stroke-linecap=\"round\"/>\n        <text x=\"1254\" y=\"980\">青線</text>\n        <line x1=\"1360\" y1=\"973\" x2=\"1390\" y2=\"973\" stroke=\"var(--series-2)\" stroke-width=\"9\" stroke-linecap=\"round\"/>\n        <text x=\"1404\" y=\"980\">緑線</text>\n        <line x1=\"1510\" y1=\"973\" x2=\"1540\" y2=\"973\" stroke=\"var(--series-3)\" stroke-width=\"9\" stroke-linecap=\"round\"/>\n        <text x=\"1554\" y=\"980\">橙線</text>\n      </g>\n      <text class=\"muted\" data-type=\"note\" x=\"120\" y=\"1030\" font-size=\"20\">模式図・架空データ。駅間隔は地理距離ではなく路線の接続を示す。定時率は同一期間の運行実績に基づく想定値。</text>\n  </g>\n</svg>\n",
      "url": "https://design-vault.pages.dev/designs/metro-schematic-commuter-reliability/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/metro-schematic-commuter-reliability/font.css",
        "https://design-vault.pages.dev/designs/metro-schematic-commuter-reliability/font-0.woff2",
        "https://design-vault.pages.dev/designs/metro-schematic-commuter-reliability/font-1.woff2",
        "https://design-vault.pages.dev/designs/metro-schematic-commuter-reliability/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/metro-schematic-commuter-reliability",
    "en": "https://design-vault.pages.dev/en/designs/metro-schematic-commuter-reliability"
  },
  "notesMarkdown": "### 視覚的な問い\n\n空港から中央駅へ向かうとき、数分の速さと遅延の少なさのどちらを優先すべきか。\n\n### 構造\n\n3路線を同じ起点と終点の間に引き、駅の接続と乗換位置を保った模式図にした。青線は31分、定時率96%で直通する。緑線は28分で最短だが港中央で乗換があり定時率89%、橙線は34分で定時率94%。緑線と比べて青線は3分遅い一方、定時率が7ポイント高いため、定時性を優先する判断を示す。\n\n路線の色は接続を追うための識別に限る。線の折れ方と駅間隔は読みやすさのために配置しており、実際の地理や走行距離を表さない。時刻と定時率は同一条件で比べる架空の想定値である。\n\n### 適用\n\n- 空港・ターミナルから都市拠点までの複数経路の比較\n- 乗換のある運行網で、速さと定時性の判断理由を伝える"
}