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

改善の 1 周 — 終わりが次の始まりになる 4 工程

放射・環状
改善の 1 周 — 終わりが次の始まりになる 4 工程
140 96

1920 × 1080 作品として見る

持ち帰る

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

全部入り

cycle-four-stage-loop-everything.md

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

依頼文

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

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

## 文字（版面 1920px に対する px）
title  44px / 700 / 字間 0.01em / 行送り 1.3
window  20px / 500 / 行送り 1.5
step  44px / 700 / 行送り 1
period  26px / 500 / 行送り 1.4
name  30px / 700 / 行送り 1.35
detail  22px / 400 / 行送り 1.7
note  16px / 400 / 行送り 1.6

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

## 外すと崩れる点
- 工程ごとに色を変えない。色を変えると読み手は色にも意味を探し始めるが、この図で意味を運ぶのは環に沿った順序だけである
- 矢を最後の工程から最初へ戻す。戻りの 1 本が無いと、これは 4 段の手順であって周ではなくなる
- 中心に周の長さを置く。1 周がどれだけで回るのかが分からない循環図は、いつまでも回り続ける絵に見える
- 工程の説明は環の外側に、それぞれの節へ寄せて置く。輪の内側に入れると、文の長さが輪の太さを決めるようになる
- 工程は 4 つまで。5 つを超えると節の間隔が狭まり、どの矢がどの工程へ向かうのかを目で追えなくなる

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

仕様

1.8 KB

/ai/designs/cycle-four-stage-loop.json 

format: slide-16x9
density: low
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
  step:
    size: 44
    weight: 700
    leading: 1
  period:
    size: 26
    weight: 500
    leading: 1.4
  name:
    size: 30
    weight: 700
    leading: 1.35
  detail:
    size: 22
    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:
  - 工程ごとに色を変えない。色を変えると読み手は色にも意味を探し始めるが、この図で意味を運ぶのは環に沿った順序だけである
  - 矢を最後の工程から最初へ戻す。戻りの 1 本が無いと、これは 4 段の手順であって周ではなくなる
  - 中心に周の長さを置く。1 周がどれだけで回るのかが分からない循環図は、いつまでも回り続ける絵に見える
  - 工程の説明は環の外側に、それぞれの節へ寄せて置く。輪の内側に入れると、文の長さが輪の太さを決めるようになる
  - 工程は 4 つまで。5 つを超えると節の間隔が狭まり、どの矢がどの工程へ向かうのかを目で追えなくなる

ファイル

pattern.html

6.3 KB

/designs/cycle-four-stage-loop/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>改善の 1 周 — 終わりが次の始まりになる 4 工程</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* 色のリテラルはこの :root にだけ置く。以下の規則は var() か color-mix() で名指す。
     この版は区分色を持たない —— 意味を運ぶのは環に沿った順序であって色ではないので、
     工程ごとに色を変えると「色にも意味がある」と読ませてしまう。 */
  :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); }

  /* 工程の文は、それぞれの節の真上・真横・真下に置く。四隅へ散らすと、
     どの文がどの節のものかを読み手が対角線で推測することになる。 */
  .body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 520px minmax(0, 1fr);
    grid-template-areas:
      ".    top    .    "
      "left fig    right"
      ".    bottom .    ";
    align-items: center;
    column-gap: 40px;
  }

  .figure { grid-area: fig; }
  .ring { display: block; }
  .track { fill: none; stroke: var(--rule); stroke-width: 3; }
  .arc { fill: none; stroke: var(--accent); stroke-width: 3; }
  .node { fill: var(--surface); stroke: var(--rule); stroke-width: 2; }
  .step { fill: var(--accent); font-size: 44px; font-weight: 700; line-height: 1; }
  .period { fill: var(--muted); font-size: 26px; font-weight: 500; line-height: 1.4; }

  .stage-top { grid-area: top; text-align: center; }
  .stage-right { grid-area: right; text-align: left; }
  .stage-bottom { grid-area: bottom; text-align: center; }
  .stage-left { grid-area: left; text-align: right; }
  .name { font-size: 30px; font-weight: 700; line-height: 1.35; }
  .detail { margin-top: 10px; font-size: 22px; font-weight: 400; line-height: 1.7; 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">改善の 1 周 — 終わりが次の始まりになる 4 工程</h1>
      <p class="window" data-type="window">開発チーム 6 名 / 2026 年 4 月から運用 / 周の長さは変えない</p>
    </div>

    <!-- 節の並びは 1 → 2 → 3 → 4 の順でここに書く。見える位置は grid-area が決めるので、
         書く順は画面の配置と切り離せる。読み上げ・本文の抽出・AI へ渡す
         reproduction.code.html はこの順をそのまま読むので、環に沿った順序が
         意味だと言っている版が 1 → 4 → 2 → 3 で並んでいてはいけない。 -->
    <div class="body">
      <div class="stage-top">
        <div class="name" data-type="name">決める</div>
        <div class="detail" data-type="detail">やらないことを先に決めて範囲を閉じる</div>
      </div>

      <div class="stage-right">
        <div class="name">作る</div>
        <div class="detail">1 周に収まる大きさへ削ってから着手する</div>
      </div>

      <div class="stage-bottom">
        <div class="name">確かめる</div>
        <div class="detail">使う人に見せ、役に立つかを測る</div>
      </div>

      <div class="stage-left">
        <div class="name">振り返る</div>
        <div class="detail">次の周で変える点を 1 つだけ決める</div>
      </div>

      <div class="figure">
        <!-- 等倍で描く。viewBox と width/height を一致させてあるので、
             SVG の中の文字の級数は版面の px とそのまま同じ数字になる。 -->
        <svg class="ring" width="520" height="520" viewBox="0 0 520 520">
          <defs>
            <marker id="arrowhead" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
              <path d="M0 0 L10 5 L0 10 Z" fill="var(--accent)"/>
            </marker>
          </defs>

          <circle class="track" cx="260" cy="260" r="190"/>

          <path class="arc" marker-end="url(#arrowhead)" d="M337.3 86.4 A190 190 0 0 1 433.6 182.7"/>
          <path class="arc" marker-end="url(#arrowhead)" d="M433.6 337.3 A190 190 0 0 1 337.3 433.6"/>
          <path class="arc" marker-end="url(#arrowhead)" d="M182.7 433.6 A190 190 0 0 1 86.4 337.3"/>
          <path class="arc" marker-end="url(#arrowhead)" d="M86.4 182.7 A190 190 0 0 1 182.7 86.4"/>

          <circle class="node" cx="260" cy="70" r="62"/>
          <circle class="node" cx="450" cy="260" r="62"/>
          <circle class="node" cx="260" cy="450" r="62"/>
          <circle class="node" cx="70" cy="260" r="62"/>

          <text class="step" data-type="step" x="260" y="70" text-anchor="middle" dominant-baseline="central">1</text>
          <text class="step" x="450" y="260" text-anchor="middle" dominant-baseline="central">2</text>
          <text class="step" x="260" y="450" text-anchor="middle" dominant-baseline="central">3</text>
          <text class="step" x="70" y="260" text-anchor="middle" dominant-baseline="central">4</text>

          <text class="period" data-type="period" x="260" y="260" text-anchor="middle" dominant-baseline="central">2 週間で 1 周</text>
        </svg>
      </div>
    </div>

    <div class="foot" data-type="note">工程の名前は組織によって違う。ここでは受け入れ条件・実装・検証・振り返りの 4 つを 1 周として数える。</div>
  </div>
</div>

font.css

2.9 KB

/designs/cycle-four-stage-loop/font.css — 全部入りには入れていない

中身を見る 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   101 (29a181f8727b9fcc)
 *
 * 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-34, U+36, U+2014, U+3001-3002, U+3044, U+3046, U+3048, U+304b-304e, U+3051-305c, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307e, U+3081, U+3084, U+3088-308c, U+308f, U+3092, U+3094, U+3099, U+30c1-30c2, U+30e0, U+30fb-30fc, U+4eba, U+4ef6, U+4f5c, U+4f7f, U+5148, U+5165, U+524a, U+524d, U+53ce, U+53d7, U+540d, U+5468, U+5584, U+56f2, U+5909, U+5927, U+59cb, U+5b9f, U+5de5, U+5e74, U+5f79, U+624b, U+632f, U+6539, U+6570, U+6708, U+6761, U+691c, U+6b21, U+6c7a, U+6e2c, U+70b9, U+7528, U+767a, U+7740, U+78ba, U+7a0b, U+7acb, U+7bc4, U+7d42, U+7d44, U+7e54, U+88c5, U+898b, U+8a3c, U+8fd4, U+9031, U+904b, U+9055, U+9577, U+9589, U+958b, U+9593;
}
@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-34, U+36, U+2014, U+3001-3002, U+3044, U+3046, U+3048, U+304b-304e, U+3051-305c, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307e, U+3081, U+3084, U+3088-308c, U+308f, U+3092, U+3094, U+3099, U+30c1-30c2, U+30e0, U+30fb-30fc, U+4eba, U+4ef6, U+4f5c, U+4f7f, U+5148, U+5165, U+524a, U+524d, U+53ce, U+53d7, U+540d, U+5468, U+5584, U+56f2, U+5909, U+5927, U+59cb, U+5b9f, U+5de5, U+5e74, U+5f79, U+624b, U+632f, U+6539, U+6570, U+6708, U+6761, U+691c, U+6b21, U+6c7a, U+6e2c, U+70b9, U+7528, U+767a, U+7740, U+78ba, U+7a0b, U+7acb, U+7bc4, U+7d42, U+7d44, U+7e54, U+88c5, U+898b, U+8a3c, U+8fd4, U+9031, U+904b, U+9055, U+9577, U+9589, U+958b, U+9593;
}
@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-34, U+36, U+2014, U+3001-3002, U+3044, U+3046, U+3048, U+304b-304e, U+3051-305c, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307e, U+3081, U+3084, U+3088-308c, U+308f, U+3092, U+3094, U+3099, U+30c1-30c2, U+30e0, U+30fb-30fc, U+4eba, U+4ef6, U+4f5c, U+4f7f, U+5148, U+5165, U+524a, U+524d, U+53ce, U+53d7, U+540d, U+5468, U+5584, U+56f2, U+5909, U+5927, U+59cb, U+5b9f, U+5de5, U+5e74, U+5f79, U+624b, U+632f, U+6539, U+6570, U+6708, U+6761, U+691c, U+6b21, U+6c7a, U+6e2c, U+70b9, U+7528, U+767a, U+7740, U+78ba, U+7a0b, U+7acb, U+7bc4, U+7d42, U+7d44, U+7e54, U+88c5, U+898b, U+8a3c, U+8fd4, U+9031, U+904b, U+9055, U+9577, U+9589, U+958b, U+9593;
}

ノート

循環図が手順図と違うのは、戻りの 1 本だけである。その 1 本を描き忘れた循環図は 驚くほど多く、そうなると「4 つ目が終わったら解散」という別の意味の絵になる。

中心を空けておくのは、ドーナツと同じ理由ではない。ここに置くべきは母数ではなく 周の長さである。1 周が 2 週間なのか 1 年なのかで、同じ 4 工程がまったく違う 働き方を指す。