版の配色
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。
このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown — 大きいのでファイルで渡す（コピーは 32KB まで）
以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白 上 82 右 120 下 82 左 120 ## 文字（版面 1920px に対する px） title 44px / 700 / 字間 0.01em subtitle 22px / 400 axisTitle 20px / 500 axisTick 20px / 400 / 等幅数字 seriesLabel 22px / 700 lineEnd 20px / 500 / 等幅数字 crossingLabel 22px / 500 crossingValue 30px / 700 / 等幅数字 panelTitle 24px / 700 panelValue 42px / 700 / 等幅数字 panelCopy 20px / 400 regionValue 22px / 700 regionCopy 20px / 400 assumption 20px / 400 conclusion 26px / 500 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #2F6FB5 / #A85A2E ## 外すと崩れる点 - 縦軸は固定費と従量費を合算した月間総額にする。1件単価だけを比較すると、固定費がある案の有利不利が隠れる - 交点が等費用になる。交点より左と右でどちらの案が低いかを、同じ尺度で示す - 計算の前提と含めていない費用を明記する。品質差・立ち上げ・移行費用があれば交点は変わる - 架空の単価を用いた試算であり、実際の委託判断を推奨するものではない 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/break-even-inhouse-outsourcing/pattern.html
/ai/designs/break-even-inhouse-outsourcing.json
format: slide-16x9
density: medium
layout:
kind: axis
canvas:
w: 1920
h: 1080
margin:
top: 82
right: 120
bottom: 82
left: 120
type:
title:
size: 44
weight: 700
tracking: 0.01em
subtitle:
size: 22
weight: 400
axisTitle:
size: 20
weight: 500
axisTick:
size: 20
weight: 400
numeric: tabular
seriesLabel:
size: 22
weight: 700
lineEnd:
size: 20
weight: 500
numeric: tabular
crossingLabel:
size: 22
weight: 500
crossingValue:
size: 30
weight: 700
numeric: tabular
panelTitle:
size: 24
weight: 700
panelValue:
size: 42
weight: 700
numeric: tabular
panelCopy:
size: 20
weight: 400
regionValue:
size: 22
weight: 700
regionCopy:
size: 20
weight: 400
assumption:
size: 20
weight: 400
conclusion:
size: 26
weight: 500
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
series:
- "#2F6FB5"
- "#A85A2E"
rules:
- 縦軸は固定費と従量費を合算した月間総額にする。1件単価だけを比較すると、固定費がある案の有利不利が隠れる
- 交点が等費用になる。交点より左と右でどちらの案が低いかを、同じ尺度で示す
- 計算の前提と含めていない費用を明記する。品質差・立ち上げ・移行費用があれば交点は変わる
- 架空の単価を用いた試算であり、実際の委託判断を推奨するものではない{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "axis",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 82,
"right": 120,
"bottom": 82,
"left": 120
}
},
"type": {
"title": {
"size": 44,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 400
},
"axisTitle": {
"size": 20,
"weight": 500
},
"axisTick": {
"size": 20,
"weight": 400,
"numeric": "tabular"
},
"seriesLabel": {
"size": 22,
"weight": 700
},
"lineEnd": {
"size": 20,
"weight": 500,
"numeric": "tabular"
},
"crossingLabel": {
"size": 22,
"weight": 500
},
"crossingValue": {
"size": 30,
"weight": 700,
"numeric": "tabular"
},
"panelTitle": {
"size": 24,
"weight": 700
},
"panelValue": {
"size": 42,
"weight": 700,
"numeric": "tabular"
},
"panelCopy": {
"size": 20,
"weight": 400
},
"regionValue": {
"size": 22,
"weight": 700
},
"regionCopy": {
"size": 20,
"weight": 400
},
"assumption": {
"size": 20,
"weight": 400
},
"conclusion": {
"size": 26,
"weight": 500
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9",
"series": [
"#2F6FB5",
"#A85A2E"
]
},
"rules": [
"縦軸は固定費と従量費を合算した月間総額にする。1件単価だけを比較すると、固定費がある案の有利不利が隠れる",
"交点が等費用になる。交点より左と右でどちらの案が低いかを、同じ尺度で示す",
"計算の前提と含めていない費用を明記する。品質差・立ち上げ・移行費用があれば交点は変わる",
"架空の単価を用いた試算であり、実際の委託判断を推奨するものではない"
]
} /designs/break-even-inhouse-outsourcing/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。
<!doctype html>
<meta charset="utf-8">
<title>月600件で内製と外注が逆転 — 1件単価だけで決めない</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" data-artboard="true">
<style>
:root {
--ground: #FFFFFF; --surface: #F4F6F9; --ink: #131820;
--muted: #667183; --accent: #1F5FA8; --rule: #DBE1E9;
--series-1: #2F6FB5; --series-2: #A85A2E;
}
svg { font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif; }
.ground { fill: var(--ground); }
.ink { fill: var(--ink); }
.muted { fill: var(--muted); }
.accent { fill: var(--accent); }
.rule { stroke: var(--rule); }
.title { font-size: 44px; font-weight: 700; letter-spacing: .01em; }
.subtitle { font-size: 22px; font-weight: 400; }
.axis-title { font-size: 20px; font-weight: 500; }
.axis-tick { font-size: 20px; font-weight: 400; font-variant-numeric: tabular-nums; }
.series-label { font-size: 22px; font-weight: 700; }
.line-end { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.crossing-label { font-size: 22px; font-weight: 500; }
.crossing-value { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.panel-title { font-size: 24px; font-weight: 700; }
.panel-value { font-size: 42px; font-weight: 700; font-variant-numeric: tabular-nums; }
.panel-copy { font-size: 20px; font-weight: 400; }
.region-value { font-size: 22px; font-weight: 700; }
.region-copy { font-size: 20px; font-weight: 400; }
.assumption { font-size: 20px; font-weight: 400; }
.conclusion { font-size: 26px; font-weight: 500; }
.grid { stroke: var(--rule); stroke-width: 1.5; }
.series-inhouse { fill: none; stroke: var(--series-1); stroke-width: 7; }
.series-outsourced { fill: none; stroke: var(--series-2); stroke-width: 7; }
.area-inhouse { fill: var(--series-1); opacity: .09; }
.area-outsourced { fill: var(--series-2); opacity: .09; }
</style>
<rect class="ground" x="0" y="0" width="1920" height="1080"/>
<g transform="translate(120 82)" data-content="true">
<rect x="0" y="0" width="1680" height="916" fill="transparent"/>
<text class="title ink" data-type="title" x="0" y="56">月600件で内製と外注が逆転 — 1件単価だけで決めない</text>
<text class="subtitle muted" data-type="subtitle" x="0" y="105">架空の受注処理コスト / 固定費と従量費を足した月間総額で比較</text>
<line class="rule" x1="0" y1="142" x2="1680" y2="142" stroke-width="2"/>
<text class="axis-title muted" data-type="axisTitle" x="0" y="196">月間総費用（円）</text>
<text class="axis-title muted" x="675" y="750" text-anchor="middle">月間処理件数（件）</text>
<line x1="465" y1="190" x2="515" y2="190" stroke="var(--series-1)" stroke-width="6"/>
<text class="series-label" data-type="seriesLabel" x="529" y="197" fill="var(--series-1)">内製</text>
<line x1="625" y1="190" x2="675" y2="190" stroke="var(--series-2)" stroke-width="6"/>
<text class="series-label" x="689" y="197" fill="var(--series-2)">外注</text>
<!-- Plot area: x = 0–1,200 orders; y = ¥0–¥1,800,000. -->
<g>
<line class="grid" x1="115" y1="680" x2="1165" y2="680"/>
<line class="grid" x1="115" y1="575" x2="1165" y2="575"/>
<line class="grid" x1="115" y1="470" x2="1165" y2="470"/>
<line class="grid" x1="115" y1="365" x2="1165" y2="365"/>
<line class="grid" x1="115" y1="260" x2="1165" y2="260"/>
<line class="grid" x1="115" y1="260" x2="115" y2="680"/>
<line class="grid" x1="377.5" y1="260" x2="377.5" y2="680"/>
<line class="grid" x1="640" y1="260" x2="640" y2="680" stroke-dasharray="7 8"/>
<line class="grid" x1="902.5" y1="260" x2="902.5" y2="680"/>
<line class="grid" x1="1165" y1="260" x2="1165" y2="680"/>
<text class="axis-tick muted" data-type="axisTick" x="94" y="687" text-anchor="end">¥0</text>
<text class="axis-tick muted" x="94" y="582" text-anchor="end">¥450k</text>
<text class="axis-tick muted" x="94" y="477" text-anchor="end">¥900k</text>
<text class="axis-tick muted" x="94" y="372" text-anchor="end">¥1.35M</text>
<text class="axis-tick muted" x="94" y="267" text-anchor="end">¥1.8M</text>
<text class="axis-tick muted" x="115" y="712" text-anchor="middle">0</text>
<text class="axis-tick muted" x="377.5" y="712" text-anchor="middle">300</text>
<text class="axis-tick accent" x="640" y="712" text-anchor="middle">600</text>
<text class="axis-tick muted" x="902.5" y="712" text-anchor="middle">900</text>
<text class="axis-tick muted" x="1165" y="712" text-anchor="middle">1,200</text>
</g>
<!-- The filled gap switches sides at the exact intersection. -->
<path class="area-outsourced" d="M115 512 L640 456 L640 456 L115 652 Z"/>
<path class="area-inhouse" d="M640 456 L1165 260 L1165 400 Z"/>
<path class="series-inhouse" d="M115 512 L1165 400"/>
<path class="series-outsourced" d="M115 652 L1165 260"/>
<line x1="640" y1="456" x2="640" y2="680" stroke="var(--accent)" stroke-width="2.5" stroke-dasharray="7 7"/>
<circle cx="640" cy="456" r="12" fill="var(--ground)" stroke="var(--ink)" stroke-width="5"/>
<rect x="664" y="411" width="250" height="72" rx="10" fill="var(--ground)" stroke="var(--rule)" stroke-width="2"/>
<text class="crossing-value ink" data-type="crossingValue" x="682" y="441">¥960k</text>
<text class="crossing-label muted" data-type="crossingLabel" x="682" y="469">600件で同額</text>
<text class="line-end muted" data-type="lineEnd" x="1165" y="392" text-anchor="end">¥1.2M</text>
<text class="line-end muted" x="1165" y="250" text-anchor="end">¥1.8M</text>
<rect x="1230" y="220" width="420" height="470" fill="var(--surface)"/>
<rect x="1230" y="220" width="6" height="470" fill="var(--accent)"/>
<text class="panel-title ink" data-type="panelTitle" x="1265" y="270">損益分岐点</text>
<text class="panel-value accent" data-type="panelValue" x="1265" y="332">600件 / 月</text>
<text class="panel-copy muted" data-type="panelCopy" x="1265" y="371">両案とも月 ¥960k</text>
<line class="rule" x1="1265" y1="402" x2="1615" y2="402"/>
<text class="region-value" data-type="regionValue" x="1265" y="448" fill="var(--series-2)">600件より少ない</text>
<text class="region-copy ink" data-type="regionCopy" x="1265" y="481">外注の総額が低い</text>
<text class="region-value" x="1265" y="539" fill="var(--series-1)">600件より多い</text>
<text class="region-copy ink" x="1265" y="572">内製の総額が低い</text>
<line class="rule" x1="1265" y1="602" x2="1615" y2="602"/>
<text class="assumption muted" data-type="assumption" x="1265" y="640">交点は2本の総費用が等しい件数</text>
<line class="rule" x1="0" y1="790" x2="1680" y2="790" stroke-width="2"/>
<text class="conclusion ink" data-type="conclusion" x="0" y="842">月の件数が600を超える見込みなら、内製の固定費を回収できる。</text>
<text class="assumption muted" x="0" y="892">前提：内製 月額固定費72万円＋1件400円 / 外注 月額固定費12万円＋1件1,400円 / 品質・移行費用は含めない</text>
</g>
</svg>
/designs/break-even-inhouse-outsourcing/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 105 (047067366dce8fdc)
*
* 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+2c, U+2e-39, U+4d, U+6b, U+a5, U+2014, U+3001-3002, U+3044, U+3048, U+304b-304e, U+3051-3052, U+3057-3058, U+305f-3060, U+3066-306a, U+306e-3070, U+307f, U+3081-3082, U+3088-308b, U+3092, U+3099, U+30b3-30b4, U+30b9-30ba, U+30c8-30c9, U+30fb, U+4e07, U+4e21, U+4ea4, U+4ef6, U+4f4e, U+4fa1, U+5185-5186, U+51e6, U+5206, U+524d, U+5358, U+53ce, U+53d7, U+540c, U+542b, U+54c1, U+56de, U+56fa, U+5916, U+591a, U+5b9a, U+5c11, U+5c90, U+5f93, U+63d0, U+640d, U+6570, U+6708, U+672c, U+67b6, U+6848, U+6bd4, U+6c7a, U+6ce8, U+70b9, U+7406, U+7528, U+76ca, U+79fb, U+7a7a, U+7b49, U+7dcf, U+884c, U+88fd, U+898b, U+8cbb, U+8cea, U+8d85, U+8db3, U+8ee2, U+8f03, U+8fbc, U+9006, U+91cf, U+9593, U+984d, U+ff08-ff09, U+ff0b, U+ff1a;
}
@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+2c, U+2e-39, U+4d, U+6b, U+a5, U+2014, U+3001-3002, U+3044, U+3048, U+304b-304e, U+3051-3052, U+3057-3058, U+305f-3060, U+3066-306a, U+306e-3070, U+307f, U+3081-3082, U+3088-308b, U+3092, U+3099, U+30b3-30b4, U+30b9-30ba, U+30c8-30c9, U+30fb, U+4e07, U+4e21, U+4ea4, U+4ef6, U+4f4e, U+4fa1, U+5185-5186, U+51e6, U+5206, U+524d, U+5358, U+53ce, U+53d7, U+540c, U+542b, U+54c1, U+56de, U+56fa, U+5916, U+591a, U+5b9a, U+5c11, U+5c90, U+5f93, U+63d0, U+640d, U+6570, U+6708, U+672c, U+67b6, U+6848, U+6bd4, U+6c7a, U+6ce8, U+70b9, U+7406, U+7528, U+76ca, U+79fb, U+7a7a, U+7b49, U+7dcf, U+884c, U+88fd, U+898b, U+8cbb, U+8cea, U+8d85, U+8db3, U+8ee2, U+8f03, U+8fbc, U+9006, U+91cf, U+9593, U+984d, U+ff08-ff09, U+ff0b, U+ff1a;
}
@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+2c, U+2e-39, U+4d, U+6b, U+a5, U+2014, U+3001-3002, U+3044, U+3048, U+304b-304e, U+3051-3052, U+3057-3058, U+305f-3060, U+3066-306a, U+306e-3070, U+307f, U+3081-3082, U+3088-308b, U+3092, U+3099, U+30b3-30b4, U+30b9-30ba, U+30c8-30c9, U+30fb, U+4e07, U+4e21, U+4ea4, U+4ef6, U+4f4e, U+4fa1, U+5185-5186, U+51e6, U+5206, U+524d, U+5358, U+53ce, U+53d7, U+540c, U+542b, U+54c1, U+56de, U+56fa, U+5916, U+591a, U+5b9a, U+5c11, U+5c90, U+5f93, U+63d0, U+640d, U+6570, U+6708, U+672c, U+67b6, U+6848, U+6bd4, U+6c7a, U+6ce8, U+70b9, U+7406, U+7528, U+76ca, U+79fb, U+7a7a, U+7b49, U+7dcf, U+884c, U+88fd, U+898b, U+8cbb, U+8cea, U+8d85, U+8db3, U+8ee2, U+8f03, U+8fbc, U+9006, U+91cf, U+9593, U+984d, U+ff08-ff09, U+ff0b, U+ff1a;
}
1件あたりの単価だけを比べると、月の処理件数が少ない間に効く固定費を見落とす。ここでは 内製に月72万円の固定費と1件400円、外注に月12万円の固定費と1件1,400円を仮定した。
総費用は600件/月で一致する。それより少ない月は外注、それより多い月は内製のほうが安い。 範囲や品質、立ち上げ費用を含めた実際の判断では、同じ条件を費用に加えて交点を引き直す。