{
  "id": "pl-summary-yoy-table",
  "schemaVersion": 2,
  "title": {
    "ja": "損益の要約 — 当期の列だけ面を敷き、桁と単位を揃える",
    "en": "P&L Summary — Shade Only the Current Column, Align the Digits and Units"
  },
  "summary": {
    "ja": "売上高から純利益までを、前年・当期・増減額・増減率・通期計画・進捗率の 7 列で並べる。当期の列だけ面を敷いて太字にする",
    "en": "Revenue to net income across seven columns — prior year, current, change, change %, full-year plan, progress — with only the current column shaded and bold"
  },
  "capturedAt": "2026-10-19",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "typography"
  ],
  "useCases": [
    "financials"
  ],
  "format": "slide-16x9",
  "density": "high",
  "layout": {
    "kind": "table",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 96,
      "right": 140,
      "bottom": 56,
      "left": 140
    }
  },
  "type": {
    "kicker": {
      "size": 22,
      "weight": 700,
      "tracking": "0.16em",
      "numeric": "tabular"
    },
    "title": {
      "size": 52,
      "weight": 700,
      "leading": 1.35,
      "numeric": "tabular"
    },
    "unit": {
      "size": 20,
      "weight": 400,
      "numeric": "tabular"
    },
    "colHead": {
      "size": 22,
      "weight": 500,
      "leading": 1.4,
      "numeric": "tabular"
    },
    "item": {
      "size": 30,
      "weight": 500,
      "numeric": "tabular"
    },
    "prior": {
      "size": 32,
      "weight": 400,
      "numeric": "tabular"
    },
    "current": {
      "size": 36,
      "weight": 700,
      "numeric": "tabular"
    },
    "delta": {
      "size": 32,
      "weight": 400,
      "numeric": "tabular"
    },
    "folio": {
      "size": 16,
      "weight": 400,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F2F4F8",
    "ink": "#0E1A2B",
    "muted": "#5B6879",
    "accent": "#1D3F72",
    "rule": "#D6DCE5",
    "series": []
  },
  "rules": [
    {
      "ja": "当期の列だけに面を敷き、数字を太く大きくする。比べる相手（前年・計画）は地のまま",
      "en": "Shade only the current column and set its figures larger and bold; the comparisons stay on the ground"
    },
    {
      "ja": "単位は表の右上に 1 回だけ書く。数字の後ろに毎回付けると桁が揃わない",
      "en": "State the unit once at the top right — repeated after every figure, the digits stop lining up"
    },
    {
      "ja": "数字はすべて右揃え・等幅数字・小数 1 桁で揃える",
      "en": "Every figure right-aligned, tabular, one decimal place"
    },
    {
      "ja": "率の行（営業利益率）は字下げして灰色に落とし、金額の行と区別する",
      "en": "Indent and grey the ratio row (operating margin) so it reads apart from the amounts"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.Cy9RmTu4.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "estimate-breakdown-table",
      "comparison-table-single-fill",
      "requirements-response-table"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "high",
      "layout": {
        "kind": "table",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 96,
          "right": 140,
          "bottom": 56,
          "left": 140
        }
      },
      "type": {
        "kicker": {
          "size": 22,
          "weight": 700,
          "tracking": "0.16em",
          "numeric": "tabular"
        },
        "title": {
          "size": 52,
          "weight": 700,
          "leading": 1.35,
          "numeric": "tabular"
        },
        "unit": {
          "size": 20,
          "weight": 400,
          "numeric": "tabular"
        },
        "colHead": {
          "size": 22,
          "weight": 500,
          "leading": 1.4,
          "numeric": "tabular"
        },
        "item": {
          "size": 30,
          "weight": 500,
          "numeric": "tabular"
        },
        "prior": {
          "size": 32,
          "weight": 400,
          "numeric": "tabular"
        },
        "current": {
          "size": 36,
          "weight": 700,
          "numeric": "tabular"
        },
        "delta": {
          "size": 32,
          "weight": 400,
          "numeric": "tabular"
        },
        "folio": {
          "size": 16,
          "weight": 400,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F2F4F8",
        "ink": "#0E1A2B",
        "muted": "#5B6879",
        "accent": "#1D3F72",
        "rule": "#D6DCE5"
      },
      "rules": [
        "Shade only the current column and set its figures larger and bold; the comparisons stay on the ground",
        "State the unit once at the top right — repeated after every figure, the digits stop lining up",
        "Every figure right-aligned, tabular, one decimal place",
        "Indent and grey the ratio row (operating margin) so it reads apart from the amounts"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 56 左 140\n\n## 文字（版面 1920px に対する px）\nkicker  22px / 700 / 字間 0.16em / 等幅数字\ntitle  52px / 700 / 行送り 1.35 / 等幅数字\nunit  20px / 400 / 等幅数字\ncolHead  22px / 500 / 行送り 1.4 / 等幅数字\nitem  30px / 500 / 等幅数字\nprior  32px / 400 / 等幅数字\ncurrent  36px / 700 / 等幅数字\ndelta  32px / 400 / 等幅数字\nfolio  16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F2F4F8 / 文字 #0E1A2B / 補助 #5B6879 / 強調 #1D3F72 / 罫 #D6DCE5\n\n## 外すと崩れる点\n- 当期の列だけに面を敷き、数字を太く大きくする。比べる相手（前年・計画）は地のまま\n- 単位は表の右上に 1 回だけ書く。数字の後ろに毎回付けると桁が揃わない\n- 数字はすべて右揃え・等幅数字・小数 1 桁で揃える\n- 率の行（営業利益率）は字下げして灰色に落とし、金額の行と区別する\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/pl-summary-yoy-table/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 140 bottom 56 left 140\n\n## Type (px against a 1920px canvas)\nkicker  22px / 700 / tracking 0.16em / tabular numerals\ntitle  52px / 700 / leading 1.35 / tabular numerals\nunit  20px / 400 / tabular numerals\ncolHead  22px / 500 / leading 1.4 / tabular numerals\nitem  30px / 500 / tabular numerals\nprior  32px / 400 / tabular numerals\ncurrent  36px / 700 / tabular numerals\ndelta  32px / 400 / tabular numerals\nfolio  16px / 400 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F2F4F8 / Ink #0E1A2B / Muted #5B6879 / Accent #1D3F72 / Rule #D6DCE5\n\n## Constraints — dropping these breaks it\n- Shade only the current column and set its figures larger and bold; the comparisons stay on the ground\n- State the unit once at the top right — repeated after every figure, the digits stop lining up\n- Every figure right-aligned, tabular, one decimal place\n- Indent and grey the ratio row (operating margin) so it reads apart from the amounts\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/pl-summary-yoy-table/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>損益の要約 — 当期の列だけ面を敷き、桁と単位を揃える</title>\n<meta name=\"dv-font\" content=\"IBM Plex Sans JP:400;500;700\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  /* この版そのもの。index.md の layout / type / colors は、この HTML を\n     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。\n     会社・人物・数値はすべて説明用の架空のもの。 */\n  :root {\n    --ground: #FFFFFF;\n    --surface: #F2F4F8;\n    --ink: #0E1A2B;\n    --muted: #5B6879;\n    --accent: #1D3F72;\n    --rule: #D6DCE5;\n  }\n  * { box-sizing: border-box; margin: 0; }\n  html, body { width: 1920px; height: 1080px; }\n  body { font-family: \"IBM Plex Sans JP\", \"IPAGothic\", sans-serif; font-variant-numeric: tabular-nums; }\n\n  .artboard {\n    width: 1920px; height: 1080px;\n    background: var(--ground); color: var(--ink);\n    padding: 96px 140px 56px;             /* → layout.margin */\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; }\n\n  .kicker { font-size: 22px; font-weight: 700; letter-spacing: .16em; color: var(--accent); }\n  .title { font-size: 52px; font-weight: 700; line-height: 1.35; margin-top: 12px; }\n  /* 頁の足：社名・資料名・頁番号。どの頁でも同じ位置に置く */\n  .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; }\n\n  .wrap { align-self: center; }\n  .unit { font-size: 20px; color: var(--muted); text-align: right; margin-bottom: 12px; }\n  table { width: 100%; border-collapse: collapse; }\n  thead th { font-size: 22px; font-weight: 500; color: var(--muted); text-align: right; padding: 0 28px 18px; border-bottom: 3px solid var(--ink); line-height: 1.4; vertical-align: bottom; }\n  thead th:first-child { text-align: left; padding-left: 0; }\n  /* 当期の列だけ面を敷く。比べる相手（前年・計画）は地のまま */\n  thead th.cur { color: var(--ink); font-weight: 700; background: var(--surface); }\n  tbody th { font-size: 30px; font-weight: 500; text-align: left; padding: 26px 0; }\n  tbody td { font-size: 32px; font-weight: 400; text-align: right; padding: 26px 28px; }\n  tbody td.cur { font-size: 36px; font-weight: 700; background: var(--surface); }\n  tbody tr { border-bottom: 1px solid var(--rule); }\n  tbody tr.sub th { font-size: 24px; color: var(--muted); padding-left: 32px; }\n  tbody tr.sub td { font-size: 26px; color: var(--muted); }\n  tbody tr.sub td.cur { font-size: 28px; color: var(--ink); }\n\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div>\n      <p class=\"kicker\" data-type=\"kicker\">連結業績</p>\n      <h1 class=\"title\" data-type=\"title\">増収増益。営業利益は前年から 15.1% 伸びた</h1>\n    </div>\n    <div class=\"wrap\">\n      <p class=\"unit\" data-type=\"unit\">単位：億円</p>\n      <table>\n        <thead><tr>\n          <th data-type=\"colHead\">項目</th><th>前年<br>2Q 累計</th><th class=\"cur\">当期<br>2Q 累計</th><th>増減額</th><th>増減率</th><th>通期<br>計画</th><th>進捗率</th>\n        </tr></thead>\n        <tbody>\n        <tr class=\"\">\n          <th data-type=\"item\">売上高</th><td data-type=\"prior\">451.3</td><td class=\"cur\" data-type=\"current\">482.6</td><td data-type=\"delta\">+31.3</td><td>+6.9%</td><td>1,000.0</td><td>48.3%</td>\n        </tr>\n        <tr class=\"\">\n          <th>営業利益</th><td>35.8</td><td class=\"cur\">41.2</td><td>+5.4</td><td>+15.1%</td><td>88.0</td><td>46.8%</td>\n        </tr>\n        <tr class=\"sub\">\n          <th>営業利益率</th><td>7.9%</td><td class=\"cur\">8.5%</td><td>+0.6pt</td><td>—</td><td>8.8%</td><td>—</td>\n        </tr>\n        <tr class=\"\">\n          <th>経常利益</th><td>38.1</td><td class=\"cur\">43.0</td><td>+4.9</td><td>+12.9%</td><td>91.0</td><td>47.3%</td>\n        </tr>\n        <tr class=\"\">\n          <th>純利益</th><td>26.0</td><td class=\"cur\">29.4</td><td>+3.4</td><td>+13.1%</td><td>62.0</td><td>47.4%</td>\n        </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"folio\">\n      <p data-type=\"folio\">アオバ精工株式会社　2027 年 3 月期 第 2 四半期 決算説明資料</p>\n      <p>02</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/pl-summary-yoy-table/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/pl-summary-yoy-table/font.css",
        "https://design-vault.pages.dev/designs/pl-summary-yoy-table/font-0.woff2",
        "https://design-vault.pages.dev/designs/pl-summary-yoy-table/font-1.woff2",
        "https://design-vault.pages.dev/designs/pl-summary-yoy-table/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/pl-summary-yoy-table",
    "en": "https://design-vault.pages.dev/en/designs/pl-summary-yoy-table"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「決算・経営報告」の\n1 枚で、架空の会社「アオバ精工」の第 2 四半期決算説明として描いてある。会社・人物・数値はすべて架空。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it. One of the eight results-briefing slides, drawn\nas a fictional company's half-year results deck; every company, person and figure on it is invented.\n\n### Techniques\n\n- 見出し行の下だけ墨の 3px の罫、行の間は細い罫\n- 増減は符号を必ず付ける（+31.3）\n- 列見出しは 2 行に割って幅を節約する\n\n### Apply to\n\n- 決算説明の業績の要約\n- 予算実績の対比表（前年を予算に替える）"
}