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

開発チームの力量 — 差が最も大きいのはテストの自動化

放射・環状
開発チームの力量 — 差が最も大きいのはテストの自動化
140 96

1920 × 1080 作品として見る

持ち帰る

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

全部入り

radar-profile-now-target-everything.md

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

依頼文

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

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

## 文字（版面 1920px に対する px）
title  44px / 700 / 字間 0.01em / 行送り 1.3
window  20px / 500 / 行送り 1.5
axisLabel  22px / 500 / 行送り 1.4
legendLabel  22px / 500 / 行送り 1.4
conclusion  26px / 500 / 行送り 1.6
note  16px / 400 / 行送り 1.6

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

## 外すと崩れる点
- 軸は 5〜6 本まで。7 本を超えると隣り合う頂点の差が読めなくなり、形ではなく模様として見える
- 多角形は 2 つまで。3 つ重ねると、どの線がどれかを凡例で確かめる作業が読み取りより長くなる
- 現状と目標に別の色を与えない。同じものの 2 時点なので、塗りと破線で分けるほうが「同じ物差しで測った」ことを保つ
- 軸の順序に意味を持たせない。レーダーは軸を並べ替えると形が変わるので、順序が重要度だと読まれると図が嘘をつく
- 面積を比べさせない。軸が等間隔でも面積は軸数と値の並びで決まるので、「全体として何割」は読み取れない

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

仕様

1.7 KB

/ai/designs/radar-profile-now-target.json 

format: slide-16x9
density: medium
layout:
  kind: radial
  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
  axisLabel:
    size: 22
    weight: 500
    leading: 1.4
  legendLabel:
    size: 22
    weight: 500
    leading: 1.4
  conclusion:
    size: 26
    weight: 500
    leading: 1.6
  note:
    size: 16
    weight: 400
    leading: 1.6
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - 軸は 5〜6 本まで。7 本を超えると隣り合う頂点の差が読めなくなり、形ではなく模様として見える
  - 多角形は 2 つまで。3 つ重ねると、どの線がどれかを凡例で確かめる作業が読み取りより長くなる
  - 現状と目標に別の色を与えない。同じものの 2 時点なので、塗りと破線で分けるほうが「同じ物差しで測った」ことを保つ
  - 軸の順序に意味を持たせない。レーダーは軸を並べ替えると形が変わるので、順序が重要度だと読まれると図が嘘をつく
  - 面積を比べさせない。軸が等間隔でも面積は軸数と値の並びで決まるので、「全体として何割」は読み取れない

ファイル

pattern.html

6.3 KB

/designs/radar-profile-now-target/pattern.html — 版そのものの 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 にだけ置く。以下の規則は var() か color-mix() で名指す。
     区分色は持たない —— 現状と目標は別々の区分ではなく同じものの 2 時点なので、
     色を変えず、塗りと破線で区別する。 */
  :root {
    --ground: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }

  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

  .artboard {
    width: 1920px;
    height: 1080px;
    background: var(--ground);
    color: var(--ink);
    padding: 96px 140px;
  }

  .content {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .head { border-bottom: 2px solid var(--rule); padding-bottom: 28px; }
  .title { font-size: 44px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; }
  .window { margin-top: 14px; font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--muted); }

  /* 図 620 + 結論で中身の段（約 708px）に収まる。凡例は図の外に置かず、
     多角形が届かない左上の空きに入れてある —— 別の行にすると、そのぶん図を
     小さくすることになり、頂点の差が読めなくなる。 */
  .body {
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    row-gap: 28px;
  }

  .figure { display: block; }
  .web { fill: none; stroke: var(--rule); stroke-width: 1.5; }
  .spoke { stroke: var(--rule); stroke-width: 1.5; }
  .now { fill: color-mix(in srgb, var(--accent) 22%, var(--ground)); stroke: var(--accent); stroke-width: 3; }
  .target { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 10 8; }
  .swatch-now { fill: color-mix(in srgb, var(--accent) 22%, var(--ground)); stroke: var(--accent); stroke-width: 3; }
  .swatch-target { fill: var(--ground); stroke: var(--accent); stroke-width: 3; stroke-dasharray: 8 6; }
  .axis-label { fill: var(--ink); font-size: 22px; font-weight: 500; line-height: 1.4; }
  .legend-label { fill: var(--ink); font-size: 22px; font-weight: 500; line-height: 1.4; }

  .conclusion { font-size: 26px; font-weight: 500; line-height: 1.6; color: var(--muted); }

  .foot { border-top: 1px solid var(--rule); padding-top: 22px; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--muted); }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">開発チームの力量 — 差が最も大きいのはテストの自動化</h1>
      <p class="window" data-type="window">5 つの観点を 4 段階で自己評価 / 評価は 9 月 / 目標は 1 年後の姿</p>
    </div>

    <div class="body">
      <!-- 等倍で描く。viewBox と width/height を一致させてあるので、
           SVG の中の文字の級数は版面の px とそのまま同じ数字になる。 -->
      <svg class="figure" width="1100" height="620" viewBox="0 0 1100 620">
        <!-- 現状の 3 番目の頂点（テストの自動化）は 1.2 段。見出しが「差が最も大きい」と
             言う軸なので、他の軸と同率にならない値にしてある —— 図が見出しを支えないと、
             読み手は見出しのほうを疑う。
             塗りより後に目盛りを描くのは、4 段階の目盛りが塗りの下に隠れると
             「4 段階で自己評価」という見出しが図から確かめられなくなるため。 -->
        <polygon class="now" points="550,206.5 703.1,260.3 590.6,365.8 475.6,412.3 462.5,281.6"/>

        <!-- 目盛りの環は外周と相似。半径 230 / 172.5 / 115 / 57.5 に対し
             sin72=0.95106 cos72=0.30902 sin144=0.58779 cos144=-0.80902 で出した値で、
             1px でもずれると環が五角形でなくなる。 -->
        <polygon class="web" points="550,80 768.74,238.93 685.19,496.07 414.81,496.07 331.26,238.93"/>
        <polygon class="web" points="550,137.5 714.06,256.69 651.39,449.56 448.61,449.56 385.94,256.69"/>
        <polygon class="web" points="550,195 659.37,274.46 617.6,403.04 482.4,403.04 440.63,274.46"/>
        <polygon class="web" points="550,252.5 604.69,292.23 583.8,356.52 516.2,356.52 495.31,292.23"/>

        <path class="spoke" d="M550 310L550 80M550 310L768.74 238.93M550 310L685.19 496.07M550 310L414.81 496.07M550 310L331.26 238.93"/>

        <polygon class="target" points="550,126 735.9,249.6 644.6,440.2 448.6,449.6 396.9,260.3"/>

        <text class="axis-label" data-type="axisLabel" x="550" y="38" text-anchor="middle" dominant-baseline="central">要件を言葉にする</text>
        <text class="axis-label" x="808.7" y="226" text-anchor="start" dominant-baseline="central">見積りの精度</text>
        <text class="axis-label" x="709.9" y="530" text-anchor="middle" dominant-baseline="central">テストの自動化</text>
        <text class="axis-label" x="390.1" y="530" text-anchor="middle" dominant-baseline="central">運用への引き継ぎ</text>
        <text class="axis-label" x="291.3" y="226" text-anchor="end" dominant-baseline="central">障害からの復旧</text>

        <rect class="swatch-now" x="60" y="48" width="30" height="18"/>
        <text class="legend-label" data-type="legendLabel" x="104" y="57" text-anchor="start" dominant-baseline="central">いまの姿</text>
        <rect class="swatch-target" x="60" y="88" width="30" height="18"/>
        <text class="legend-label" x="104" y="97" text-anchor="start" dominant-baseline="central">1 年後の目標</text>
      </svg>

      <p class="conclusion" data-type="conclusion">4 つは道具と手順で詰められる。テストの自動化だけは、書く時間を確保する話になる</p>
    </div>

    <div class="foot" data-type="note">自己評価なので他チームとの比較には使えない。同じ物差しで測った前回との差を見る。</div>
  </div>
</div>

font.css

3.1 KB

/designs/radar-profile-now-target/font.css — 全部入りには入れていない

中身を見る 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   103 (1dea90518db973cd)
 *
 * 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, U+34-35, U+39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307e, U+3081-3082, U+3089-308c, U+3092, U+3099, U+30b9-30ba, U+30c1-30c2, U+30c6-30c9, U+30e0, U+30fc, U+4ed6, U+4ef6, U+4f7f, U+4fa1, U+4fdd, U+5177, U+524d, U+529b, U+52d5, U+5316, U+540c, U+56de, U+5927, U+59ff, U+5bb3, U+5dee, U+5df1, U+5e74, U+5ea6, U+5f15, U+5f8c, U+5fa9, U+624b, U+65e7, U+6642, U+66f8, U+6700, U+6708, U+6a19, U+6bb5, U+6bd4, U+6e2c, U+70b9, U+7269, U+7528, U+767a, U+76ee, U+78ba, U+7a4d, U+7cbe, U+7d99, U+81ea, U+8449, U+8981, U+898b, U+89b3, U+8a00, U+8a55, U+8a70-8a71, U+8f03, U+904b, U+9053, U+91cf, U+958b, U+9593, U+968e, U+969c, U+9806;
}
@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, U+34-35, U+39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307e, U+3081-3082, U+3089-308c, U+3092, U+3099, U+30b9-30ba, U+30c1-30c2, U+30c6-30c9, U+30e0, U+30fc, U+4ed6, U+4ef6, U+4f7f, U+4fa1, U+4fdd, U+5177, U+524d, U+529b, U+52d5, U+5316, U+540c, U+56de, U+5927, U+59ff, U+5bb3, U+5dee, U+5df1, U+5e74, U+5ea6, U+5f15, U+5f8c, U+5fa9, U+624b, U+65e7, U+6642, U+66f8, U+6700, U+6708, U+6a19, U+6bb5, U+6bd4, U+6e2c, U+70b9, U+7269, U+7528, U+767a, U+76ee, U+78ba, U+7a4d, U+7cbe, U+7d99, U+81ea, U+8449, U+8981, U+898b, U+89b3, U+8a00, U+8a55, U+8a70-8a71, U+8f03, U+904b, U+9053, U+91cf, U+958b, U+9593, U+968e, U+969c, U+9806;
}
@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, U+34-35, U+39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307e, U+3081-3082, U+3089-308c, U+3092, U+3099, U+30b9-30ba, U+30c1-30c2, U+30c6-30c9, U+30e0, U+30fc, U+4ed6, U+4ef6, U+4f7f, U+4fa1, U+4fdd, U+5177, U+524d, U+529b, U+52d5, U+5316, U+540c, U+56de, U+5927, U+59ff, U+5bb3, U+5dee, U+5df1, U+5e74, U+5ea6, U+5f15, U+5f8c, U+5fa9, U+624b, U+65e7, U+6642, U+66f8, U+6700, U+6708, U+6a19, U+6bb5, U+6bd4, U+6e2c, U+70b9, U+7269, U+7528, U+767a, U+76ee, U+78ba, U+7a4d, U+7cbe, U+7d99, U+81ea, U+8449, U+8981, U+898b, U+89b3, U+8a00, U+8a55, U+8a70-8a71, U+8f03, U+904b, U+9053, U+91cf, U+958b, U+9593, U+968e, U+969c, U+9806;
}

ノート

レーダーの弱点は面積である。目が最初に拾うのは多角形の広さだが、その広さは軸の 並び順で変わってしまう。だからこの版は面積を主張に使わず、どの軸で差が開いて いるかだけを言う。

現状と目標に色を分けなかったのも同じ理由である。色が違うと 2 つは別の評価に見え、 「同じ物差しで測った前と後」という一番肝心な前提が消える。