{
  "id": "bump-chart-feature-request-rankings",
  "schemaVersion": 2,
  "title": {
    "ja": "機能要望の順位推移 — データ出力が首位へ",
    "en": "Feature Request Rankings — Data Export Returns to the Top"
  },
  "summary": {
    "ja": "1位を上に置いた順序尺度で6か月の順位を折れ線接続し、複数カテゴリの交差と順位逆転を示すbump chart",
    "en": "A bump chart connects six months of ordinal ranks with first place at the top, showing crossings and reversals."
  },
  "capturedAt": "2026-09-25",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz",
    "minimal"
  ],
  "useCases": [
    "comparison",
    "comparison"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "axis",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 100,
      "right": 140,
      "bottom": 100,
      "left": 140
    }
  },
  "type": {
    "title": {
      "size": 46,
      "weight": 700,
      "tracking": "0.01em"
    },
    "subtitle": {
      "size": 22,
      "weight": 500
    },
    "axisTitle": {
      "size": 22,
      "weight": 700
    },
    "rank": {
      "size": 20,
      "weight": 500
    },
    "month": {
      "size": 20,
      "weight": 500
    },
    "endpoint": {
      "size": 20,
      "weight": 700
    },
    "takeaway": {
      "size": 28,
      "weight": 500
    },
    "note": {
      "size": 20,
      "weight": 400
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F9",
    "ink": "#131820",
    "muted": "#667183",
    "accent": "#1F5FA8",
    "rule": "#DBE1E9",
    "series": [
      "#1F5FA8",
      "#147D73",
      "#A85A2E",
      "#6750A4",
      "#B34D3A",
      "#567A63"
    ]
  },
  "rules": [
    {
      "ja": "1月から6月までの要望順位を示し、1位は最上段、6位は最下段",
      "en": "Monthly request rankings run from January to June, with rank 1 at the top and rank 6 at the bottom."
    },
    {
      "ja": "データ出力は1/2/3/3/2/1位、検索は4/3/2/1/1/2位、オンボーディングは2/1/1/2/3/4位",
      "en": "Data Export ranks 1/2/3/3/2/1, Search 4/3/2/1/1/2, and Onboarding 2/1/1/2/3/4."
    },
    {
      "ja": "自動化は5/5/4/4/4/3位、モバイルは3/4/5/5/5/5位、外部連携は6位を維持",
      "en": "Automation ranks 5/5/4/4/4/3, Mobile 3/4/5/5/5/5, and Integrations remains 6th."
    },
    {
      "ja": "順位の架空例。線間の距離を要望数の差として解釈しない",
      "en": "Synthetic rankings. Distance between lines must not be read as a difference in request counts."
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.CJI1nll5.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": []
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "axis",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 100,
          "right": 140,
          "bottom": 100,
          "left": 140
        }
      },
      "type": {
        "title": {
          "size": 46,
          "weight": 700,
          "tracking": "0.01em"
        },
        "subtitle": {
          "size": 22,
          "weight": 500
        },
        "axisTitle": {
          "size": 22,
          "weight": 700
        },
        "rank": {
          "size": 20,
          "weight": 500
        },
        "month": {
          "size": 20,
          "weight": 500
        },
        "endpoint": {
          "size": 20,
          "weight": 700
        },
        "takeaway": {
          "size": 28,
          "weight": 500
        },
        "note": {
          "size": 20,
          "weight": 400
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F6F9",
        "ink": "#131820",
        "muted": "#667183",
        "accent": "#1F5FA8",
        "rule": "#DBE1E9",
        "series": [
          "#1F5FA8",
          "#147D73",
          "#A85A2E",
          "#6750A4",
          "#B34D3A",
          "#567A63"
        ]
      },
      "rules": [
        "Monthly request rankings run from January to June, with rank 1 at the top and rank 6 at the bottom.",
        "Data Export ranks 1/2/3/3/2/1, Search 4/3/2/1/1/2, and Onboarding 2/1/1/2/3/4.",
        "Automation ranks 5/5/4/4/4/3, Mobile 3/4/5/5/5/5, and Integrations remains 6th.",
        "Synthetic rankings. Distance between lines must not be read as a difference in request counts."
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 100 右 140 下 100 左 140\n\n## 文字（版面 1920px に対する px）\ntitle  46px / 700 / 字間 0.01em\nsubtitle  22px / 500\naxisTitle  22px / 700\nrank  20px / 500\nmonth  20px / 500\nendpoint  20px / 700\ntakeaway  28px / 500\nnote  20px / 400\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #1F5FA8 / #147D73 / #A85A2E / #6750A4 / #B34D3A / #567A63\n\n## 外すと崩れる点\n- 1月から6月までの要望順位を示し、1位は最上段、6位は最下段\n- データ出力は1/2/3/3/2/1位、検索は4/3/2/1/1/2位、オンボーディングは2/1/1/2/3/4位\n- 自動化は5/5/4/4/4/3位、モバイルは3/4/5/5/5/5位、外部連携は6位を維持\n- 順位の架空例。線間の距離を要望数の差として解釈しない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/bump-chart-feature-request-rankings/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 100 right 140 bottom 100 left 140\n\n## Type (px against a 1920px canvas)\ntitle  46px / 700 / tracking 0.01em\nsubtitle  22px / 500\naxisTitle  22px / 700\nrank  20px / 500\nmonth  20px / 500\nendpoint  20px / 700\ntakeaway  28px / 500\nnote  20px / 400\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 / #1F5FA8 / #147D73 / #A85A2E / #6750A4 / #B34D3A / #567A63\n\n## Constraints — dropping these breaks it\n- Monthly request rankings run from January to June, with rank 1 at the top and rank 6 at the bottom.\n- Data Export ranks 1/2/3/3/2/1, Search 4/3/2/1/1/2, and Onboarding 2/1/1/2/3/4.\n- Automation ranks 5/5/4/4/4/3, Mobile 3/4/5/5/5/5, and Integrations remains 6th.\n- Synthetic rankings. Distance between lines must not be read as a difference in request counts.\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/bump-chart-feature-request-rankings/pattern.html."
    },
    "code": {
      "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:#F4F6F9;--ink:#131820;--muted:#667183;--accent:#1F5FA8;--rule:#DBE1E9;--series-1:#1F5FA8;--series-2:#147D73;--series-3:#A85A2E;--series-4:#6750A4;--series-5:#B34D3A;--series-6:#567A63;}*{box-sizing:border-box;margin:0}html,body{width:1920px;height:1080px}body{font-family:\"Zen Kaku Gothic New\",\"Hiragino Sans\",sans-serif}.artboard{width:1920px;height:1080px;padding:100px 140px;background:var(--ground);color:var(--ink)}.content{width:100%;height:100%;position:relative}.figure{position:absolute;left:-140px;top:-100px;width:1920px;height:1080px}</style><div class=\"artboard\" data-artboard><div class=\"content\" data-content><svg class=\"figure\" width=\"1920\" height=\"1080\" viewBox=\"0 0 1920 1080\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"六つの機能要望について、月ごとの順位を1位が上になる縦軸で結んだbump chart。データ出力は6月に1位へ上昇。\">\n<style>.figure{font-family:\"Zen Kaku Gothic New\",\"Hiragino Sans\",sans-serif}.ground{fill:var(--ground)}.ink{fill:var(--ink)}.muted{fill:var(--muted)}.rule{stroke:var(--rule)}.title{font-size:46px;font-weight:700;letter-spacing:.01em}.subtitle{font-size:22px;font-weight:500}.axis-title{font-size:22px;font-weight:700}.rank,.month{font-size:20px;font-weight:500;fill:var(--muted)}.grid{stroke:var(--rule);stroke-width:1.5}.line{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.dot{stroke:var(--ground);stroke-width:3}.endpoint,.final{font-size:20px;font-weight:700}.takeaway{font-size:28px;font-weight:500;fill:var(--ink)}.note{font-size:20px;font-weight:400;fill:var(--muted)}.s0{stroke:var(--series-1);fill:var(--series-1)}.s1{stroke:var(--series-2);fill:var(--series-2)}.s2{stroke:var(--series-3);fill:var(--series-3)}.s3{stroke:var(--series-4);fill:var(--series-4)}.s4{stroke:var(--series-5);fill:var(--series-5)}.s5{stroke:var(--series-6);fill:var(--series-6)}.line.s0,.line.s1,.line.s2,.line.s3,.line.s4,.line.s5{fill:none}.endpoint,.final{fill:currentColor}.endpoint.s0,.final.s0{fill:var(--series-1)}.endpoint.s1,.final.s1{fill:var(--series-2)}.endpoint.s2,.final.s2{fill:var(--series-3)}.endpoint.s3,.final.s3{fill:var(--series-4)}.endpoint.s4,.final.s4{fill:var(--series-5)}.endpoint.s5,.final.s5{fill:var(--series-6)}</style><rect class=\"ground\" width=\"1920\" height=\"1080\"/><text class=\"ink title\" data-type=\"title\" x=\"140\" y=\"153\">機能要望の順位推移 — データ出力が首位へ</text><text class=\"muted subtitle\" data-type=\"subtitle\" x=\"140\" y=\"201\">6機能の月間順位 / 1位を上、順位変化を線で追う</text><line class=\"rule\" x1=\"140\" y1=\"238\" x2=\"1780\" y2=\"238\" stroke-width=\"2\"/><text class=\"ink axis-title\" data-type=\"axisTitle\" x=\"960\" y=\"294\" text-anchor=\"middle\">順位（上ほど上位）</text><line class=\"grid\" x1=\"520\" y1=\"365\" x2=\"1360\" y2=\"365\"/><text class=\"rank\" x=\"486\" y=\"365\" text-anchor=\"end\" dominant-baseline=\"central\">1</text><line class=\"grid\" x1=\"520\" y1=\"437\" x2=\"1360\" y2=\"437\"/><text class=\"rank\" x=\"486\" y=\"437\" text-anchor=\"end\" dominant-baseline=\"central\">2</text><line class=\"grid\" x1=\"520\" y1=\"509\" x2=\"1360\" y2=\"509\"/><text class=\"rank\" x=\"486\" y=\"509\" text-anchor=\"end\" dominant-baseline=\"central\">3</text><line class=\"grid\" x1=\"520\" y1=\"581\" x2=\"1360\" y2=\"581\"/><text class=\"rank\" x=\"486\" y=\"581\" text-anchor=\"end\" dominant-baseline=\"central\">4</text><line class=\"grid\" x1=\"520\" y1=\"653\" x2=\"1360\" y2=\"653\"/><text class=\"rank\" x=\"486\" y=\"653\" text-anchor=\"end\" dominant-baseline=\"central\">5</text><line class=\"grid\" x1=\"520\" y1=\"725\" x2=\"1360\" y2=\"725\"/><text class=\"rank\" x=\"486\" y=\"725\" text-anchor=\"end\" dominant-baseline=\"central\">6</text><text class=\"month\" x=\"520\" y=\"790\" text-anchor=\"middle\">1月</text><text class=\"month\" x=\"688\" y=\"790\" text-anchor=\"middle\">2月</text><text class=\"month\" x=\"856\" y=\"790\" text-anchor=\"middle\">3月</text><text class=\"month\" x=\"1024\" y=\"790\" text-anchor=\"middle\">4月</text><text class=\"month\" x=\"1192\" y=\"790\" text-anchor=\"middle\">5月</text><text class=\"month\" x=\"1360\" y=\"790\" text-anchor=\"middle\">6月</text><text class=\"endpoint s0\" x=\"160\" y=\"437\" dominant-baseline=\"central\">オンボーディング</text><text class=\"final s0\" x=\"1400\" y=\"581\" dominant-baseline=\"central\">4位　オンボーディング</text><text class=\"endpoint s1\" x=\"160\" y=\"581\" dominant-baseline=\"central\">検索</text><text class=\"final s1\" x=\"1400\" y=\"437\" dominant-baseline=\"central\">2位　検索</text><text class=\"endpoint s2\" x=\"160\" y=\"365\" dominant-baseline=\"central\">データ出力</text><text class=\"final s2\" x=\"1400\" y=\"365\" dominant-baseline=\"central\">1位　データ出力</text><text class=\"endpoint s3\" x=\"160\" y=\"653\" dominant-baseline=\"central\">自動化</text><text class=\"final s3\" x=\"1400\" y=\"509\" dominant-baseline=\"central\">3位　自動化</text><text class=\"endpoint s4\" x=\"160\" y=\"509\" dominant-baseline=\"central\">モバイル</text><text class=\"final s4\" x=\"1400\" y=\"653\" dominant-baseline=\"central\">5位　モバイル</text><text class=\"endpoint s5\" x=\"160\" y=\"725\" dominant-baseline=\"central\">外部連携</text><text class=\"final s5\" x=\"1400\" y=\"725\" dominant-baseline=\"central\">6位　外部連携</text><path class=\"line s0\" d=\"M 520 437 L 688 365 L 856 365 L 1024 437 L 1192 509 L 1360 581\"/><circle class=\"dot s0\" cx=\"520\" cy=\"437\" r=\"8\"/><circle class=\"dot s0\" cx=\"688\" cy=\"365\" r=\"8\"/><circle class=\"dot s0\" cx=\"856\" cy=\"365\" r=\"8\"/><circle class=\"dot s0\" cx=\"1024\" cy=\"437\" r=\"8\"/><circle class=\"dot s0\" cx=\"1192\" cy=\"509\" r=\"8\"/><circle class=\"dot s0\" cx=\"1360\" cy=\"581\" r=\"8\"/><path class=\"line s1\" d=\"M 520 581 L 688 509 L 856 437 L 1024 365 L 1192 365 L 1360 437\"/><circle class=\"dot s1\" cx=\"520\" cy=\"581\" r=\"8\"/><circle class=\"dot s1\" cx=\"688\" cy=\"509\" r=\"8\"/><circle class=\"dot s1\" cx=\"856\" cy=\"437\" r=\"8\"/><circle class=\"dot s1\" cx=\"1024\" cy=\"365\" r=\"8\"/><circle class=\"dot s1\" cx=\"1192\" cy=\"365\" r=\"8\"/><circle class=\"dot s1\" cx=\"1360\" cy=\"437\" r=\"8\"/><path class=\"line s2\" d=\"M 520 365 L 688 437 L 856 509 L 1024 509 L 1192 437 L 1360 365\"/><circle class=\"dot s2\" cx=\"520\" cy=\"365\" r=\"8\"/><circle class=\"dot s2\" cx=\"688\" cy=\"437\" r=\"8\"/><circle class=\"dot s2\" cx=\"856\" cy=\"509\" r=\"8\"/><circle class=\"dot s2\" cx=\"1024\" cy=\"509\" r=\"8\"/><circle class=\"dot s2\" cx=\"1192\" cy=\"437\" r=\"8\"/><circle class=\"dot s2\" cx=\"1360\" cy=\"365\" r=\"8\"/><path class=\"line s3\" d=\"M 520 653 L 688 653 L 856 581 L 1024 581 L 1192 581 L 1360 509\"/><circle class=\"dot s3\" cx=\"520\" cy=\"653\" r=\"8\"/><circle class=\"dot s3\" cx=\"688\" cy=\"653\" r=\"8\"/><circle class=\"dot s3\" cx=\"856\" cy=\"581\" r=\"8\"/><circle class=\"dot s3\" cx=\"1024\" cy=\"581\" r=\"8\"/><circle class=\"dot s3\" cx=\"1192\" cy=\"581\" r=\"8\"/><circle class=\"dot s3\" cx=\"1360\" cy=\"509\" r=\"8\"/><path class=\"line s4\" d=\"M 520 509 L 688 581 L 856 653 L 1024 653 L 1192 653 L 1360 653\"/><circle class=\"dot s4\" cx=\"520\" cy=\"509\" r=\"8\"/><circle class=\"dot s4\" cx=\"688\" cy=\"581\" r=\"8\"/><circle class=\"dot s4\" cx=\"856\" cy=\"653\" r=\"8\"/><circle class=\"dot s4\" cx=\"1024\" cy=\"653\" r=\"8\"/><circle class=\"dot s4\" cx=\"1192\" cy=\"653\" r=\"8\"/><circle class=\"dot s4\" cx=\"1360\" cy=\"653\" r=\"8\"/><path class=\"line s5\" d=\"M 520 725 L 688 725 L 856 725 L 1024 725 L 1192 725 L 1360 725\"/><circle class=\"dot s5\" cx=\"520\" cy=\"725\" r=\"8\"/><circle class=\"dot s5\" cx=\"688\" cy=\"725\" r=\"8\"/><circle class=\"dot s5\" cx=\"856\" cy=\"725\" r=\"8\"/><circle class=\"dot s5\" cx=\"1024\" cy=\"725\" r=\"8\"/><circle class=\"dot s5\" cx=\"1192\" cy=\"725\" r=\"8\"/><circle class=\"dot s5\" cx=\"1360\" cy=\"725\" r=\"8\"/><text class=\"ink takeaway\" data-type=\"takeaway\" x=\"960\" y=\"927\" text-anchor=\"middle\">データ出力は1月1位から一時後退し、6月に再び首位へ</text><line class=\"rule\" x1=\"140\" y1=\"974\" x2=\"1780\" y2=\"974\" stroke-width=\"1\"/><text class=\"muted note\" data-type=\"note\" x=\"140\" y=\"1013\">順位は月間要望数の順序のみを示す。隣接順位の数値差は等間隔の実量差ではない。</text></svg></div></div>",
      "url": "https://design-vault.pages.dev/designs/bump-chart-feature-request-rankings/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/bump-chart-feature-request-rankings/font.css",
        "https://design-vault.pages.dev/designs/bump-chart-feature-request-rankings/font-0.woff2",
        "https://design-vault.pages.dev/designs/bump-chart-feature-request-rankings/font-1.woff2",
        "https://design-vault.pages.dev/designs/bump-chart-feature-request-rankings/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/bump-chart-feature-request-rankings",
    "en": "https://design-vault.pages.dev/en/designs/bump-chart-feature-request-rankings"
  },
  "notesMarkdown": "### 視覚的な問い\n月を追うと、機能要望の相対順位はどう入れ替わり、どの要望が上位へ伸びるか。\n\n### 構造\nカテゴリごとの順位を月単位の点として配置し、1位を上にした順序軸で点を結ぶ。線の交差が順位逆転を表し、同順位の水平区間は維持を表す。連続量の2時点差を比較するslopegraphとは異なり、この図は6時点にわたる順序尺度の軌跡に焦点を置く。各月の機能要望数からカテゴリ順位を独立に作るため、全対象の重複しない順位表を期間横断で追うrank-flowのentity単位の順位移動とは異なる。順位間隔は等順位ステップであり、実際の要望数の差を表さない。\n\n架空の月次順位ではデータ出力が1月に1位、4月には3位まで下がり、6月に再び首位へ戻る。検索は4月と5月に1位となり、オンボーディングは1月から2月に上昇した後に4位へ下がる。"
}