{ "id": "tile-map-japan-regions", "schemaVersion": 2, "title": { "ja": "地域別の導入率 — 西ほど高く、関東が最も低い", "en": "Adoption by Region — Higher in the West, Lowest in Kanto" }, "summary": { "ja": "同じ大きさの正方を土地の並びに似せて置くタイル地図。面積を情報から外し、濃度だけで量を示す", "en": "Equal squares arranged to echo the land. Area carries nothing; a single hue's strength carries the quantity" }, "capturedAt": "2026-09-16", "categories": [ "presentation" ], "tags": [ "data-viz", "minimal" ], "useCases": [ "kpi", "status" ], "format": "slide-16x9", "density": "medium", "layout": { "kind": "map", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 96, "right": 140, "bottom": 96, "left": 140 } }, "type": { "title": { "size": 44, "weight": 700, "tracking": "0.01em", "leading": 1.3 }, "window": { "size": 20, "weight": 500, "leading": 1.5 }, "tileName": { "size": 22, "weight": 700, "leading": 1.3 }, "tileValue": { "size": 28, "weight": 700, "leading": 1.2, "numeric": "tabular" }, "scaleTitle": { "size": 22, "weight": 700, "leading": 1.4 }, "scaleEnd": { "size": 20, "weight": 500, "leading": 1.4, "numeric": "tabular" }, "reading": { "size": 24, "weight": 400, "leading": 1.7 }, "note": { "size": 16, "weight": 400, "leading": 1.6 } }, "colors": { "ground": "#FFFFFF", "surface": "#F4F6F9", "ink": "#131820", "muted": "#667183", "accent": "#1F5FA8", "rule": "#DBE1E9", "series": [] }, "rules": [ { "ja": "タイルの大きさを揃える。実際の地図で描くと面積が量に見え、人口でも売上でもない「土地の広さ」が混ざる", "en": "Keep every tile the same size. On a real map, area reads as quantity and the land's own size — neither population nor revenue — enters the figure" }, { "ja": "地域を色で分けない。8 つは 8 種類ではなく 1 つの量の分布なので、色を分けると地域ごとに違う何かに見える", "en": "Do not colour the regions apart. Eight regions are not eight categories but one quantity's distribution; separate hues make them read as separate things" }, { "ja": "並びは実際の配置に似せる。似せられないなら表にする —— 地図の形をした表は、地理を読もうとする目を裏切る", "en": "Let the arrangement echo the real one. If it cannot, use a table: a table shaped like a map betrays the eye that came to read geography" }, { "ja": "濃度の段は 5 つまで。それ以上は隣り合う濃さの差が読めず、濃淡ではなく模様になる", "en": "Five steps of strength at most. Beyond that, neighbouring shades stop being distinguishable and the map becomes a texture" }, { "ja": "率の図に母数の注意を添える。同じ 1 ポイントが、契約社数の違う地域では違う重みを持つ", "en": "Note the base alongside a rate. One point of a percentage weighs differently in regions with different denominators" } ], "cover": "https://design-vault.pages.dev/_astro/cover.CfonrtiZ.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "waffle-one-in-hundred", "treemap-budget-allocation" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "medium", "layout": { "kind": "map", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 96, "right": 140, "bottom": 96, "left": 140 } }, "type": { "title": { "size": 44, "weight": 700, "tracking": "0.01em", "leading": 1.3 }, "window": { "size": 20, "weight": 500, "leading": 1.5 }, "tileName": { "size": 22, "weight": 700, "leading": 1.3 }, "tileValue": { "size": 28, "weight": 700, "leading": 1.2, "numeric": "tabular" }, "scaleTitle": { "size": 22, "weight": 700, "leading": 1.4 }, "scaleEnd": { "size": 20, "weight": 500, "leading": 1.4, "numeric": "tabular" }, "reading": { "size": 24, "weight": 400, "leading": 1.7 }, "note": { "size": 16, "weight": 400, "leading": 1.6 } }, "colors": { "ground": "#FFFFFF", "surface": "#F4F6F9", "ink": "#131820", "muted": "#667183", "accent": "#1F5FA8", "rule": "#DBE1E9" }, "rules": [ "Keep every tile the same size. On a real map, area reads as quantity and the land's own size — neither population nor revenue — enters the figure", "Do not colour the regions apart. Eight regions are not eight categories but one quantity's distribution; separate hues make them read as separate things", "Let the arrangement echo the real one. If it cannot, use a table: a table shaped like a map betrays the eye that came to read geography", "Five steps of strength at most. Beyond that, neighbouring shades stop being distinguishable and the map becomes a texture", "Note the base alongside a rate. One point of a percentage weighs differently in regions with different denominators" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 96 左 140\n\n## 文字（版面 1920px に対する px）\ntitle 44px / 700 / 字間 0.01em / 行送り 1.3\nwindow 20px / 500 / 行送り 1.5\ntileName 22px / 700 / 行送り 1.3\ntileValue 28px / 700 / 行送り 1.2 / 等幅数字\nscaleTitle 22px / 700 / 行送り 1.4\nscaleEnd 20px / 500 / 行送り 1.4 / 等幅数字\nreading 24px / 400 / 行送り 1.7\nnote 16px / 400 / 行送り 1.6\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- タイルの大きさを揃える。実際の地図で描くと面積が量に見え、人口でも売上でもない「土地の広さ」が混ざる\n- 地域を色で分けない。8 つは 8 種類ではなく 1 つの量の分布なので、色を分けると地域ごとに違う何かに見える\n- 並びは実際の配置に似せる。似せられないなら表にする —— 地図の形をした表は、地理を読もうとする目を裏切る\n- 濃度の段は 5 つまで。それ以上は隣り合う濃さの差が読めず、濃淡ではなく模様になる\n- 率の図に母数の注意を添える。同じ 1 ポイントが、契約社数の違う地域では違う重みを持つ\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/tile-map-japan-regions/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 140 bottom 96 left 140\n\n## Type (px against a 1920px canvas)\ntitle 44px / 700 / tracking 0.01em / leading 1.3\nwindow 20px / 500 / leading 1.5\ntileName 22px / 700 / leading 1.3\ntileValue 28px / 700 / leading 1.2 / tabular numerals\nscaleTitle 22px / 700 / leading 1.4\nscaleEnd 20px / 500 / leading 1.4 / tabular numerals\nreading 24px / 400 / leading 1.7\nnote 16px / 400 / leading 1.6\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9\n\n## Constraints — dropping these breaks it\n- Keep every tile the same size. On a real map, area reads as quantity and the land's own size — neither population nor revenue — enters the figure\n- Do not colour the regions apart. Eight regions are not eight categories but one quantity's distribution; separate hues make them read as separate things\n- Let the arrangement echo the real one. If it cannot, use a table: a table shaped like a map betrays the eye that came to read geography\n- Five steps of strength at most. Beyond that, neighbouring shades stop being distinguishable and the map becomes a texture\n- Note the base alongside a rate. One point of a percentage weighs differently in regions with different denominators\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/tile-map-japan-regions/pattern.html." }, "code": { "html": "\n\n地域別の導入率 — 西ほど高く、関東が最も低い\n\n\n\n\n
\n
\n
\n

地域別の導入率 — 西ほど高く、関東が最も低い

\n

2026 年 9 月末時点 / 対象は法人契約のみ / 濃さが導入率

\n
\n\n
\n
\n
\n 北海道\n 18%\n
\n
\n 東北\n 22%\n
\n
\n 関東\n 11%\n
\n
\n 中部\n 27%\n
\n
\n 近畿\n 34%\n
\n
\n 中国\n 38%\n
\n
\n 四国\n 41%\n
\n
\n 九州\n 45%\n
\n
\n\n
\n
濃さ = 導入率
\n
\n \n \n \n \n \n
\n
\n 11%\n 45%\n
\n

最も高い九州と最も低い関東の差は 4 倍。関東は契約社数が最大なので、同じ 1 ポイントの重みが他の地域と違う。

\n
\n
\n\n
地域区分は総務省の 8 区分。タイルの大きさは情報を持たない。濃さは 5 段階に丸めてあるので、正確な値はタイルの数字を見る。
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/tile-map-japan-regions/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/tile-map-japan-regions/font.css", "https://design-vault.pages.dev/designs/tile-map-japan-regions/font-0.woff2", "https://design-vault.pages.dev/designs/tile-map-japan-regions/font-1.woff2", "https://design-vault.pages.dev/designs/tile-map-japan-regions/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/tile-map-japan-regions", "en": "https://design-vault.pages.dev/en/designs/tile-map-japan-regions" }, "notesMarkdown": "地図で量を示すとき、いちばん邪魔をするのは土地の広さである。北海道は広く、\n香川は狭い。実際の形で塗ると、面積の差が量の差として目に入り、読み手は\n訂正できない。\n\nタイル地図はその広さを捨てる。捨てた結果として残るのは位置だけで、\n「西ほど高い」のような地理的な傾向は、むしろはっきり見える。" }