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

納期が遅れる要因 — 4 つに分けて、手が届くものを選ぶ

ツリー
納期が遅れる要因 — 4 つに分けて、手が届くものを選ぶ
140 96

1920 × 1080 作品として見る

持ち帰る

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

全部入り

fishbone-cause-categories-everything.md

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

依頼文

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

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

## 文字（版面 1920px に対する px）
title  44px / 700 / 字間 0.01em / 行送り 1.3
window  20px / 500 / 行送り 1.5
category  24px / 700 / 行送り 1.3
cause  20px / 400 / 行送り 1.5
effectName  26px / 700 / 行送り 1.3
note  16px / 400 / 行送り 1.6

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

## 外すと崩れる点
- 分類を先に固定する。出てきた原因から分類を作ると、思いついた順がそのまま原因の構造に見える
- 結果は 1 つだけ。背骨の先が 2 つあると、どの原因がどちらに効くのかを言わないまま図が終わる
- 分類に色を与えない。4 つは違う種類のものではなく、同じ 1 つの結果へ向かう枝の束である
- 原因は事実の形で書く。「意識が低い」のような評価を枝に置くと、次の手が打てない
- 分類は 4〜6 つ。3 つでは荒く、7 つを超えると枝が重なって、どの枝の原因かが読めなくなる

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

仕様

1.6 KB

/ai/designs/fishbone-cause-categories.json 

format: slide-16x9
density: high
layout:
  kind: tree
  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
  category:
    size: 24
    weight: 700
    leading: 1.3
  cause:
    size: 20
    weight: 400
    leading: 1.5
  effectName:
    size: 26
    weight: 700
    leading: 1.3
  note:
    size: 16
    weight: 400
    leading: 1.6
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - 分類を先に固定する。出てきた原因から分類を作ると、思いついた順がそのまま原因の構造に見える
  - 結果は 1 つだけ。背骨の先が 2 つあると、どの原因がどちらに効くのかを言わないまま図が終わる
  - 分類に色を与えない。4 つは違う種類のものではなく、同じ 1 つの結果へ向かう枝の束である
  - 原因は事実の形で書く。「意識が低い」のような評価を枝に置くと、次の手が打てない
  - 分類は 4〜6 つ。3 つでは荒く、7 つを超えると枝が重なって、どの枝の原因かが読めなくなる

ファイル

pattern.html

5.3 KB

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

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>納期が遅れる要因 — 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() で名指す。
     区分色は持たない —— 分類は 4 種類の「違うもの」ではなく、同じ 1 つの結果へ向かう
     枝の束なので、色で分けると分類そのものが主題に見えてしまう。 */
  :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; align-content: center; justify-items: center; }

  .figure { display: block; }
  .spine { fill: none; stroke: var(--ink); stroke-width: 3; }
  .branch { fill: none; stroke: var(--muted); stroke-width: 2.5; }
  .twig { fill: none; stroke: var(--rule); stroke-width: 2; }
  .effect { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }
  .category { fill: var(--ink); font-size: 24px; font-weight: 700; line-height: 1.3; }
  .cause { fill: var(--muted); font-size: 20px; font-weight: 400; line-height: 1.5; }
  .effect-name { fill: var(--ink); font-size: 26px; font-weight: 700; line-height: 1.3; }

  .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">納期が遅れる要因 — 4 つに分けて、手が届くものを選ぶ</h1>
      <p class="window" data-type="window">対象は 9 月に完了した 12 件 / 分類は人・手順・道具・情報 / 挙げた順ではなく分類で並べる</p>
    </div>

    <div class="body">
      <!-- 等倍で描く。viewBox と width/height を一致させてあるので、
           SVG の中の文字の級数は版面の px とそのまま同じ数字になる。 -->
      <svg class="figure" width="1640" height="560" viewBox="0 0 1640 560">
        <defs>
          <marker id="spinehead" 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(--ink)"/>
          </marker>
        </defs>

        <path class="spine" marker-end="url(#spinehead)" d="M60 280H1272"/>

        <path class="branch" d="M420 280L300 90M860 280L740 90M420 280L300 470M860 280L740 470"/>

        <path class="twig" d="M378 213.5h-40M336 147h-40M818 213.5h-40M776 147h-40M378 346.5h-40M336 413h-40M818 346.5h-40M776 413h-40"/>

        <text class="category" data-type="category" x="300" y="60" text-anchor="middle" dominant-baseline="central">人</text>
        <text class="category" x="740" y="60" text-anchor="middle" dominant-baseline="central">手順</text>
        <text class="category" x="300" y="502" text-anchor="middle" dominant-baseline="central">道具</text>
        <text class="category" x="740" y="502" text-anchor="middle" dominant-baseline="central">情報</text>

        <text class="cause" data-type="cause" x="330" y="213.5" text-anchor="end" dominant-baseline="central">レビューできる人が 2 名</text>
        <text class="cause" x="288" y="147" text-anchor="end" dominant-baseline="central">兼務で 4 割の稼働</text>

        <text class="cause" x="770" y="213.5" text-anchor="end" dominant-baseline="central">受入条件が着手後に決まる</text>
        <text class="cause" x="728" y="147" text-anchor="end" dominant-baseline="central">差し戻しの基準が人による</text>

        <text class="cause" x="330" y="346.5" text-anchor="end" dominant-baseline="central">検証環境が 1 つしかない</text>
        <text class="cause" x="288" y="413" text-anchor="end" dominant-baseline="central">本番同等の準備に 2 日</text>

        <text class="cause" x="770" y="346.5" text-anchor="end" dominant-baseline="central">仕様の版が 3 つ並存</text>
        <text class="cause" x="728" y="413" text-anchor="end" dominant-baseline="central">変更の通知が口頭</text>

        <rect class="effect" x="1290" y="215" width="320" height="130" rx="10"/>
        <text class="effect-name" data-type="effectName" x="1450" y="280" text-anchor="middle" dominant-baseline="central">納期が 2 週間遅れる</text>
      </svg>
    </div>

    <div class="foot" data-type="note">分類は挙げた順ではなく人・手順・道具・情報で固定する。分類を後から作ると、思いついた順が原因の構造に見える。</div>
  </div>
</div>

font.css

3.3 KB

/designs/fishbone-cause-categories/font.css — 全部入りには入れていない

中身を見る 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   112 (7d009289d68d811f)
 *
 * 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-34, U+39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3064-306b, U+306e-3070, U+3075-3076, U+3078-3079, U+307e, U+3082, U+3088-3089, U+308b-308c, U+3092, U+3099, U+30d2-30d3, U+30e5, U+30ec, U+30fb-30fc, U+4e26, U+4e86, U+4eba, U+4ed5, U+4ef6, U+4f5c, U+5099, U+50cd, U+5165, U+5177, U+517c, U+5206, U+5272, U+52d9, U+539f, U+53d7, U+53e3, U+540c-540d, U+56e0, U+56fa, U+57fa, U+5831, U+5883, U+5909, U+5b58, U+5b8c, U+5b9a, U+5bfe, U+5c4a, U+5dee, U+5f8c, U+601d, U+60c5, U+623b, U+624b, U+6319, U+65e5, U+66f4, U+6708, U+671f, U+672c, U+6761, U+691c, U+69cb, U+69d8, U+6c7a, U+6e96, U+7248, U+74b0, U+756a, U+7740, U+77e5, U+7a3c, U+7b49, U+7d0d, U+8981, U+898b, U+8a3c, U+8c61, U+901a, U+9020, U+9031, U+9045, U+9053, U+9078, U+9593, U+9806, U+982d, U+985e;
}
@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-34, U+39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3064-306b, U+306e-3070, U+3075-3076, U+3078-3079, U+307e, U+3082, U+3088-3089, U+308b-308c, U+3092, U+3099, U+30d2-30d3, U+30e5, U+30ec, U+30fb-30fc, U+4e26, U+4e86, U+4eba, U+4ed5, U+4ef6, U+4f5c, U+5099, U+50cd, U+5165, U+5177, U+517c, U+5206, U+5272, U+52d9, U+539f, U+53d7, U+53e3, U+540c-540d, U+56e0, U+56fa, U+57fa, U+5831, U+5883, U+5909, U+5b58, U+5b8c, U+5b9a, U+5bfe, U+5c4a, U+5dee, U+5f8c, U+601d, U+60c5, U+623b, U+624b, U+6319, U+65e5, U+66f4, U+6708, U+671f, U+672c, U+6761, U+691c, U+69cb, U+69d8, U+6c7a, U+6e96, U+7248, U+74b0, U+756a, U+7740, U+77e5, U+7a3c, U+7b49, U+7d0d, U+8981, U+898b, U+8a3c, U+8c61, U+901a, U+9020, U+9031, U+9045, U+9053, U+9078, U+9593, U+9806, U+982d, U+985e;
}
@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-34, U+39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3064-306b, U+306e-3070, U+3075-3076, U+3078-3079, U+307e, U+3082, U+3088-3089, U+308b-308c, U+3092, U+3099, U+30d2-30d3, U+30e5, U+30ec, U+30fb-30fc, U+4e26, U+4e86, U+4eba, U+4ed5, U+4ef6, U+4f5c, U+5099, U+50cd, U+5165, U+5177, U+517c, U+5206, U+5272, U+52d9, U+539f, U+53d7, U+53e3, U+540c-540d, U+56e0, U+56fa, U+57fa, U+5831, U+5883, U+5909, U+5b58, U+5b8c, U+5b9a, U+5bfe, U+5c4a, U+5dee, U+5f8c, U+601d, U+60c5, U+623b, U+624b, U+6319, U+65e5, U+66f4, U+6708, U+671f, U+672c, U+6761, U+691c, U+69cb, U+69d8, U+6c7a, U+6e96, U+7248, U+74b0, U+756a, U+7740, U+77e5, U+7a3c, U+7b49, U+7d0d, U+8981, U+898b, U+8a3c, U+8c61, U+901a, U+9020, U+9031, U+9045, U+9053, U+9078, U+9593, U+9806, U+982d, U+985e;
}

ノート

特性要因図が形骸化するのは、分類を後から作ったときである。出てきた原因を眺めて 「これは人の話、これは道具の話」と括ると、分類はその日の発言の要約になり、 次に同じ図を描いたときにまったく違う骨組みが出てくる。

原因を事実の形で書くのも同じ理由である。「意識が低い」は枝に置けるが、そこから 打てる手が無い。「レビューできる人が 2 名」なら、増やすか減らすかの話になる。