Design Vault 用途・構成・配色・本文で検索 /
索引 カテゴリ タグ English
索引に戻る

問い合わせの内訳 — 応答遅延が最多64件

放射・環状
問い合わせの内訳 — 応答遅延が最多64件
140 100

1920 × 1080 作品として見る

持ち帰る

コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。

全部入り

polar-area-chart-support-ticket-mix-everything.md

このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown

依頼文

1.1 KB 
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 100 右 140 下 100 左 140

## 文字（版面 1920px に対する px）
title  46px / 700 / 字間 0.01em
subtitle  22px / 500
axisTitle  22px / 700
category  20px / 500
legend  20px / 500
takeaway  28px / 500
note  20px / 400

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- カテゴリに等しい45度の中心角を与える
- 半径を件数の平方根に比例させ、扇形面積を件数に比例させる
- 半径目盛りは面積変換に使った参照線であり、線形な件数目盛りとして読まない
- 架空の月間228件。期間・カテゴリ定義を揃え、重複分類しない

内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/polar-area-chart-support-ticket-mix/pattern.html

仕様

1.2 KB

/ai/designs/polar-area-chart-support-ticket-mix.json 

format: slide-16x9
density: medium
layout:
  kind: radial
  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
  category:
    size: 20
    weight: 500
  legend:
    size: 20
    weight: 500
  takeaway:
    size: 28
    weight: 500
  note:
    size: 20
    weight: 400
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - カテゴリに等しい45度の中心角を与える
  - 半径を件数の平方根に比例させ、扇形面積を件数に比例させる
  - 半径目盛りは面積変換に使った参照線であり、線形な件数目盛りとして読まない
  - 架空の月間228件。期間・カテゴリ定義を揃え、重複分類しない

ファイル

pattern.html

4.3 KB

/designs/polar-area-chart-support-ticket-mix/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>問い合わせの内訳 — 応答遅延が最多64件</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;
  --plot-color-1: #C16A24;
}
*{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="月間サポート問い合わせ228件のカテゴリ別件数を等角度の扇形面積で示すpolar area chart。応答遅延64件が最大、アクセス4件が最小。">
<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}.legend{font-size:20px;font-weight:500}.category{font-size:20px;font-weight:500}.takeaway{font-size:28px;font-weight:500}.note{font-size:20px;font-weight:400}
.sector{fill:var(--accent);stroke:var(--ground);stroke-width:3}.max{fill:var(--plot-color-1)}.grid{fill:none;stroke:var(--rule);stroke-width:2}.spoke{stroke:var(--ground);stroke-width:3}
</style>
<rect class="ground" width="1920" height="1080"/>
<text class="ink title" data-type="title" x="140" y="153">問い合わせの内訳 — 応答遅延が最多64件</text>
<text class="muted subtitle" data-type="subtitle" x="140" y="201">月間サポート問い合わせ 228件 / 架空データ / 各カテゴリの中心角は同じ</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>
<g class="sector">
<path d="M960 570 L944.7 533.0 A40 40 0 0 1 975.3 533.0 Z"/>
<path d="M960 570 L983.0 514.6 A60 60 0 0 1 1015.4 547.0 Z"/>
<path d="M960 570 L1033.9 539.4 A80 80 0 0 1 1033.9 600.6 Z"/>
<path d="M960 570 L1052.4 608.3 A100 100 0 0 1 998.3 662.4 Z"/>
<path d="M960 570 L1005.9 680.9 A120 120 0 0 1 914.1 680.9 Z"/>
<path d="M960 570 L906.4 699.3 A140 140 0 0 1 830.7 623.6 Z"/>
<path class="max" d="M960 570 L812.2 631.2 A160 160 0 0 1 812.2 508.8 Z"/>
<path d="M960 570 L867.6 531.7 A100 100 0 0 1 921.7 477.6 Z"/>
</g>
<g class="grid">
<circle cx="960" cy="570" r="40"/><circle cx="960" cy="570" r="80"/><circle cx="960" cy="570" r="120"/><circle cx="960" cy="570" r="160"/>
</g>
<g class="spoke"><path d="M960 570 L944.7 533.0 M960 570 L983.0 514.6 M960 570 L1033.9 539.4 M960 570 L1052.4 608.3 M960 570 L1005.9 680.9 M960 570 L906.4 699.3 M960 570 L812.2 631.2 M960 570 L867.6 531.7" fill="none"/></g>
<g class="muted category" text-anchor="middle">
<text data-type="category" x="960" y="342">アクセス 4</text><text x="1115" y="407">請求 9</text><text x="1200" y="578">初期設定 16</text><text x="1115" y="750">同期 25</text>
<text x="960" y="818">エクスポート 36</text><text x="805" y="750">検索 49</text><text class="ink" x="720" y="578">応答遅延 64</text><text x="805" y="407">操作 25</text>
</g>
<circle cx="730" cy="875" r="10" fill="var(--accent)"/><text class="ink legend" x="752" y="882">カテゴリ別件数に比例した扇形面積</text>
<circle cx="1195" cy="875" r="10" fill="var(--plot-color-1)"/><text class="ink legend" x="1217" y="882">最多カテゴリ</text>
<text class="ink takeaway" data-type="takeaway" x="960" y="940" text-anchor="middle">応答遅延はアクセス問い合わせの16倍 — 面積で差を見る</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>

font.css

3.2 KB

/designs/polar-area-chart-support-ticket-mix/font.css — 全部入りには入れていない

中身を見る 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   102 (40022882e065e934)
 *
 * 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+2f, U+31-36, U+38-39, U+2014, U+3001-3002, U+3044, U+304b-304c, U+3055-305c, U+305f-3060, U+3066-3069, U+306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+308a-308b, U+308f, U+3092, U+3099-309a, U+30a2, U+30a8, U+30ab-30ac, U+30af-30b0, U+30b3-30b6, U+30b9-30bc, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30ea, U+30fc, U+4e2d, U+4ef6, U+4f5c, U+4f8b, U+500d, U+5185, U+521d, U+5225, U+534a, U+5404, U+5408, U+540c, U+554f, U+591a, U+5927, U+5b9a, U+5c0f, U+5dee, U+5e83, U+5ea6, U+5ef6, U+5f62, U+5f84, U+5fc3, U+5fdc, U+6247, U+64cd, U+6570, U+6700, U+6708, U+671f, U+67b6, U+691c, U+6bd4, U+6c42, U+76db, U+76ee, U+7a4d, U+7a7a, U+7b49, U+7b54, U+7d22, U+898b, U+89d2, U+8a2d, U+8a33, U+8aad, U+8acb, U+8f03, U+9045, U+91cf, U+9593, U+9762;
}
@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+2f, U+31-36, U+38-39, U+2014, U+3001-3002, U+3044, U+304b-304c, U+3055-305c, U+305f-3060, U+3066-3069, U+306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+308a-308b, U+308f, U+3092, U+3099-309a, U+30a2, U+30a8, U+30ab-30ac, U+30af-30b0, U+30b3-30b6, U+30b9-30bc, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30ea, U+30fc, U+4e2d, U+4ef6, U+4f5c, U+4f8b, U+500d, U+5185, U+521d, U+5225, U+534a, U+5404, U+5408, U+540c, U+554f, U+591a, U+5927, U+5b9a, U+5c0f, U+5dee, U+5e83, U+5ea6, U+5ef6, U+5f62, U+5f84, U+5fc3, U+5fdc, U+6247, U+64cd, U+6570, U+6700, U+6708, U+671f, U+67b6, U+691c, U+6bd4, U+6c42, U+76db, U+76ee, U+7a4d, U+7a7a, U+7b49, U+7b54, U+7d22, U+898b, U+89d2, U+8a2d, U+8a33, U+8aad, U+8acb, U+8f03, U+9045, U+91cf, U+9593, U+9762;
}
@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+2f, U+31-36, U+38-39, U+2014, U+3001-3002, U+3044, U+304b-304c, U+3055-305c, U+305f-3060, U+3066-3069, U+306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+308a-308b, U+308f, U+3092, U+3099-309a, U+30a2, U+30a8, U+30ab-30ac, U+30af-30b0, U+30b3-30b6, U+30b9-30bc, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30ea, U+30fc, U+4e2d, U+4ef6, U+4f5c, U+4f8b, U+500d, U+5185, U+521d, U+5225, U+534a, U+5404, U+5408, U+540c, U+554f, U+591a, U+5927, U+5b9a, U+5c0f, U+5dee, U+5e83, U+5ea6, U+5ef6, U+5f62, U+5f84, U+5fc3, U+5fdc, U+6247, U+64cd, U+6570, U+6700, U+6708, U+671f, U+67b6, U+691c, U+6bd4, U+6c42, U+76db, U+76ee, U+7a4d, U+7a7a, U+7b49, U+7b54, U+7d22, U+898b, U+89d2, U+8a2d, U+8a33, U+8aad, U+8acb, U+8f03, U+9045, U+91cf, U+9593, U+9762;
}

ノート

視覚的な問い

月間の問い合わせはどのカテゴリに多く、最大のカテゴリは最小の何倍にあたるか。

構造

8カテゴリを同じ45度の扇形に割り当て、半径を件数の平方根に比例させる。これにより、各扇形の面積が元の件数に 比例する。応答遅延は64件、アクセスは4件で、件数比は16倍。橙は最多カテゴリを強調している。

レーダー図は複数指標の形状を比較するが、このpolar area chartは等角度のカテゴリごとに値の面積を比べる。 見た目の半径をそのまま件数として読まず、面積で比較する。値・対象期間・カテゴリは架空の例。