Design Vault Search use case, structure, colour, notes /
Index Categories Tags 日本語
Back to index

Org Tree — Only the Decision Path Is Drawn

Tree
Org Tree — Only the Decision Path Is Drawn
column 1
column 2
column 3
120 96

1920 × 1080 Seen as a design

Take it with you

Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.

Everything

org-tree-three-tiers-everything.md

Everything in this panel, including the contents behind each URL, in one Markdown file

Prompt

976 B 
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 96 right 120 bottom 96 left 120
- 3 equal columns, gap 80

## Type (px against a 1920px canvas)
title  42px / 700 / tracking 0.02em
legend  17px / 400
role  15px / 500 / tracking 0.14em
who  27px / 700 / leading 1.3
body  16px / 400 / leading 1.6
note  17px / 400 / leading 1.8

## Colour
Ground #FAFAFB / Surface #FFFFFF / Ink #14161B / Muted #71767F / Accent #3F4AC4 / Rule #D8DBE1

## Constraints — dropping these breaks it
- Lines mean decisions only — mixing in consultation makes both unreadable
- Mark the decision point on the box, not the line, so it cannot be read as reporting
- Derive the connector positions from the real column centres — 16.6% misses the box

Replace the content with [your content]. Keep the measurements and colours as given.
For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/org-tree-three-tiers/pattern.html.

Spec

1.2 KB

/ai/designs/org-tree-three-tiers.json 

format: slide-16x9
density: medium
layout:
  kind: tree
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 96
    right: 120
    bottom: 96
    left: 120
  columns:
    count: 3
    gap: 80
type:
  title:
    size: 42
    weight: 700
    tracking: 0.02em
  legend:
    size: 17
    weight: 400
  role:
    size: 15
    weight: 500
    tracking: 0.14em
  who:
    size: 27
    weight: 700
    leading: 1.3
  body:
    size: 16
    weight: 400
    leading: 1.6
  note:
    size: 17
    weight: 400
    leading: 1.8
colors:
  ground: "#FAFAFB"
  surface: "#FFFFFF"
  ink: "#14161B"
  muted: "#71767F"
  accent: "#3F4AC4"
  rule: "#D8DBE1"
rules:
  - Lines mean decisions only — mixing in consultation makes both unreadable
  - Mark the decision point on the box, not the line, so it cannot be read as reporting
  - Derive the connector positions from the real column centres — 16.6% misses the box

Files

pattern.html

5.9 KB

/designs/org-tree-three-tiers/pattern.html — The artboard itself, font subset included — open it and this picture draws.

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>体制図 3 階層 — 意思決定の線だけを引く</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  :root {
    --ground: #FAFAFB;
    --surface: #FFFFFF;
    --ink: #14161B;
    --muted: #71767F;
    --accent: #3F4AC4;
    --rule: #D8DBE1;
  }
  * { 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 120px;
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 40px; }

  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 64px; }
  .title { font-size: 42px; font-weight: 700; letter-spacing: .02em; }
  .legend { font-size: 17px; font-weight: 400; color: var(--muted); }

  .tree { display: grid; grid-template-rows: auto 56px auto 56px 1fr; justify-items: center; }

  .node { background: var(--surface); border: 1px solid var(--rule); padding: 26px 34px;
          display: grid; gap: 8px; text-align: center; min-width: 360px; }
  .role { font-size: 15px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
  .who { font-size: 27px; font-weight: 700; line-height: 1.3; }
  .body { font-size: 16px; font-weight: 400; color: var(--muted); line-height: 1.6; }
  /* 決裁の一点だけを立てる。線ではなく箱の罫で示すので、
     組織の線（誰が誰に報告するか）と混ざらない。 */
  .node[data-lead] { border-color: var(--accent); border-top-width: 4px; }
  .node[data-lead] .role { color: var(--accent); }

  /* 縦線・横線は擬似要素で引く。SVG を使わないのは、
     箱の高さが中身で動いても線の起点がずれないようにするため。 */
  .drop { position: relative; width: 100%; }
  .drop::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--rule); }
  .span { position: relative; width: 100%; }
  /* 横線と縦線の位置は tier の列中心に合わせる。3 列 1fr + gap 80px を
     版面幅 1680px で割った実寸で、目分量の 16.6% では card の中心を外す。 */
  .span::before { content: ""; position: absolute; left: 15.08%; right: 15.08%; top: 50%; height: 1px; background: var(--rule); }
  .span::after { content: ""; position: absolute; left: 50%; top: 0; height: 50%; width: 1px; background: var(--rule); }
  .span i { position: absolute; top: 50%; bottom: 0; width: 1px; background: var(--rule); }

  .tier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80px; width: 100%; }
  .unit { display: grid; gap: 22px; align-content: start; }
  .members { list-style: none; padding: 0; display: grid; gap: 10px;
             border-top: 1px solid var(--rule); padding-top: 20px; }
  .members li { font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--muted); }
  .members li b { font-weight: 500; color: var(--ink); }

  .foot { border-top: 1px solid var(--rule); padding-top: 24px; }
  .note { font-size: 17px; font-weight: 400; line-height: 1.8; color: var(--muted); max-width: 1400px; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">移行プロジェクトの体制</h1>
      <p class="legend" data-type="legend">線は決裁の経路。日々の相談はこの線を通りません</p>
    </div>

    <div class="tree">
      <div class="node" data-lead>
        <p class="role" data-type="role">PROJECT OWNER</p>
        <p class="who" data-type="who">情報システム部 部長</p>
        <p class="body" data-type="body">方式・費用・停止時間の最終決裁</p>
      </div>

      <div class="drop"></div>

      <div class="node">
        <p class="role">PROJECT MANAGER</p>
        <p class="who">当社 プロジェクト責任者</p>
        <p class="body">週次で進捗と課題を上げる。現場判断はここで止める</p>
      </div>

      <div class="span"><i style="left:15.08%"></i><i style="left:50%"></i><i style="left:84.92%"></i></div>

      <div class="tier">
        <div class="unit" data-col="1">
          <div class="node">
            <p class="role">TEAM A</p>
            <p class="who">業務設計</p>
            <p class="body">現行業務の確定と受入基準</p>
          </div>
          <ul class="members">
            <li><b>貴社</b> 各課から 1 名（計 6 名）</li>
            <li><b>当社</b> 業務コンサル 2 名</li>
            <li>週 2 日 常駐</li>
          </ul>
        </div>
        <div class="unit" data-col="2">
          <div class="node">
            <p class="role">TEAM B</p>
            <p class="who">データ移行</p>
            <p class="body">23 本の連携の棚卸しと切替</p>
          </div>
          <ul class="members">
            <li><b>貴社</b> 情報システム部 3 名</li>
            <li><b>当社</b> 移行担当 4 名</li>
            <li>全期間 常駐</li>
          </ul>
        </div>
        <div class="unit" data-col="3">
          <div class="node">
            <p class="role">TEAM C</p>
            <p class="who">展開・定着</p>
            <p class="body">拠点への展開と運用の引き渡し</p>
          </div>
          <ul class="members">
            <li><b>貴社</b> 各拠点の推進役 9 名</li>
            <li><b>当社</b> 教育担当 2 名</li>
            <li>Q3 以降に立ち上げ</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="foot">
      <p class="note" data-type="note">この図に無い人は決裁に関与しません。関与する人を増やすほど週次の合意が遅れるため、Team 間の調整は責任者 1 人に集約しています。</p>
    </div>
  </div>
</div>

font.css

4.4 KB

/designs/org-tree-three-tiers/font.css — Not in Everything

Show contents 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   178 (90dbce8e51f67cc8)
 *
 * 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+31-34, U+36, U+39, U+41-43, U+45, U+47, U+4a, U+4d-52, U+54, U+57, U+61, U+65, U+6d, U+2014, U+3001-3002, U+3005, U+3044, U+304b-3054, U+3057-305c, U+305f-3062, U+3066-3069, U+306b, U+306e-3071, U+3078-307e, U+3081, U+3084, U+3089-308c, U+3092-3093, U+3099-309a, U+30a7, U+30af-30b0, U+30b3-30ba, U+30bf-30c0, U+30c6-30c9, U+30d5-30d7, U+30e0, U+30eb, U+30ed, U+30f3, U+30fb-30fc, U+4e0a, U+4e0e, U+4eba, U+4ee5, U+4efb, U+4f53, U+505c, U+5165, U+5168, U+5207, U+5224, U+5236, U+52d9, U+5378, U+53d7, U+5404, U+5408, U+540d, U+56f3, U+57fa, U+5831, U+5834, U+5897, U+5b9a, U+5c55, U+5c64, U+5e38, U+5f0f, U+5f15, U+5f53, U+5f79, U+601d, U+60c5, U+610f, U+62c5, U+62e0, U+6357, U+63a8, U+643a, U+6559, U+6574, U+65ad, U+65b9, U+65e5, U+6642, U+66ff-6700, U+671f, U+672c, U+68da, U+696d, U+6b21, U+6b62, U+6c7a, U+6e21, U+6e96, U+70b9, U+7121, U+73fe, U+7528, U+76f8, U+7740, U+78ba, U+793e, U+79fb, U+7acb, U+7d04, U+7d42, U+7d4c, U+7dda, U+8005, U+80b2, U+884c, U+88c1, U+8a08, U+8a2d, U+8ab2, U+8abf, U+8ac7, U+8cac, U+8cb4, U+8cbb, U+8def, U+901a, U+9023, U+9031-9032, U+9045, U+904b, U+90e8, U+9577, U+958b, U+9593, U+95a2, U+964d, U+968e, U+96c6, U+984c, U+99d0, U+ff08-ff09;
}
@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+31-34, U+36, U+39, U+41-43, U+45, U+47, U+4a, U+4d-52, U+54, U+57, U+61, U+65, U+6d, U+2014, U+3001-3002, U+3005, U+3044, U+304b-3054, U+3057-305c, U+305f-3062, U+3066-3069, U+306b, U+306e-3071, U+3078-307e, U+3081, U+3084, U+3089-308c, U+3092-3093, U+3099-309a, U+30a7, U+30af-30b0, U+30b3-30ba, U+30bf-30c0, U+30c6-30c9, U+30d5-30d7, U+30e0, U+30eb, U+30ed, U+30f3, U+30fb-30fc, U+4e0a, U+4e0e, U+4eba, U+4ee5, U+4efb, U+4f53, U+505c, U+5165, U+5168, U+5207, U+5224, U+5236, U+52d9, U+5378, U+53d7, U+5404, U+5408, U+540d, U+56f3, U+57fa, U+5831, U+5834, U+5897, U+5b9a, U+5c55, U+5c64, U+5e38, U+5f0f, U+5f15, U+5f53, U+5f79, U+601d, U+60c5, U+610f, U+62c5, U+62e0, U+6357, U+63a8, U+643a, U+6559, U+6574, U+65ad, U+65b9, U+65e5, U+6642, U+66ff-6700, U+671f, U+672c, U+68da, U+696d, U+6b21, U+6b62, U+6c7a, U+6e21, U+6e96, U+70b9, U+7121, U+73fe, U+7528, U+76f8, U+7740, U+78ba, U+793e, U+79fb, U+7acb, U+7d04, U+7d42, U+7d4c, U+7dda, U+8005, U+80b2, U+884c, U+88c1, U+8a08, U+8a2d, U+8ab2, U+8abf, U+8ac7, U+8cac, U+8cb4, U+8cbb, U+8def, U+901a, U+9023, U+9031-9032, U+9045, U+904b, U+90e8, U+9577, U+958b, U+9593, U+95a2, U+964d, U+968e, U+96c6, U+984c, U+99d0, U+ff08-ff09;
}
@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+31-34, U+36, U+39, U+41-43, U+45, U+47, U+4a, U+4d-52, U+54, U+57, U+61, U+65, U+6d, U+2014, U+3001-3002, U+3005, U+3044, U+304b-3054, U+3057-305c, U+305f-3062, U+3066-3069, U+306b, U+306e-3071, U+3078-307e, U+3081, U+3084, U+3089-308c, U+3092-3093, U+3099-309a, U+30a7, U+30af-30b0, U+30b3-30ba, U+30bf-30c0, U+30c6-30c9, U+30d5-30d7, U+30e0, U+30eb, U+30ed, U+30f3, U+30fb-30fc, U+4e0a, U+4e0e, U+4eba, U+4ee5, U+4efb, U+4f53, U+505c, U+5165, U+5168, U+5207, U+5224, U+5236, U+52d9, U+5378, U+53d7, U+5404, U+5408, U+540d, U+56f3, U+57fa, U+5831, U+5834, U+5897, U+5b9a, U+5c55, U+5c64, U+5e38, U+5f0f, U+5f15, U+5f53, U+5f79, U+601d, U+60c5, U+610f, U+62c5, U+62e0, U+6357, U+63a8, U+643a, U+6559, U+6574, U+65ad, U+65b9, U+65e5, U+6642, U+66ff-6700, U+671f, U+672c, U+68da, U+696d, U+6b21, U+6b62, U+6c7a, U+6e21, U+6e96, U+70b9, U+7121, U+73fe, U+7528, U+76f8, U+7740, U+78ba, U+793e, U+79fb, U+7acb, U+7d04, U+7d42, U+7d4c, U+7dda, U+8005, U+80b2, U+884c, U+88c1, U+8a08, U+8a2d, U+8ab2, U+8abf, U+8ac7, U+8cac, U+8cb4, U+8cbb, U+8def, U+901a, U+9023, U+9031-9032, U+9045, U+904b, U+90e8, U+9577, U+958b, U+9593, U+95a2, U+964d, U+968e, U+96c6, U+984c, U+99d0, U+ff08-ff09;
}

Notes

この構成について / About this pattern

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。編集するのは pattern.html だけで、寸法を手で書き直すことはない。

A self-authored pattern. pattern.html is the artboard itself; both cover.png and the measurements in the frontmatter are derived from it, so the three cannot drift apart. Edit the artboard, never the numbers.

Techniques

Apply to