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

体制図 — 決める場を頂点に、合同の窓口を 1 つに絞る

ツリー
体制図 — 決める場を頂点に、合同の窓口を 1 つに絞る
140 100

1920 × 1080 作品として見る

持ち帰る

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

全部入り

team-structure-joint-pmo-everything.md

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

依頼文

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

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

## 強調
2 行目のみ。手段は 塗り + 罫 だけ。ほかは変えない

## 文字（版面 1920px に対する px）
title  46px / 700 / 字間 0.01em / 行送り 1.3
lede  19px / 400 / 行送り 1.8
role  15px / 500 / 字間 0.12em
who  26px / 700 / 行送り 1.35
cadence  15px / 400 / 等幅数字
tname  22px / 700 / 行送り 1.4
tside  14px / 500 / 字間 0.12em
heads  15px / 400 / 行送り 1.8 / 等幅数字
foot  16px / 400 / 行送り 1.8

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

## 外すと崩れる点
- 節には人名ではなく会議体を置く。人を書いた体制図は、要員が 1 人替わるたびに古くなる
- 窓口は 1 つだけ塗る。2 つ塗ると、実際には窓口が無いのと同じになる
- 各節に開催頻度を書く。月 1 回の決裁と週 2 回の相談は、体制図の中で別の性格を持つ
- 枝の渡り線は端のチームの中心で止める。版面の端まで引くと、外側にも何かあるように読まれる
- チームの主管（御社／弊社／合同）を必ず書く。主管の書かれていない箱は、後で誰も引き取らない

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

仕様

1.9 KB

/ai/designs/team-structure-joint-pmo.json 

format: slide-16x9
density: medium
layout:
  kind: tree
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 100
    right: 140
    bottom: 100
    left: 140
  emphasis:
    row: 2
    via:
      - fill
      - rule
type:
  title:
    size: 46
    weight: 700
    tracking: 0.01em
    leading: 1.3
  lede:
    size: 19
    weight: 400
    leading: 1.8
  role:
    size: 15
    weight: 500
    tracking: 0.12em
  who:
    size: 26
    weight: 700
    leading: 1.35
  cadence:
    size: 15
    weight: 400
    numeric: tabular
  tname:
    size: 22
    weight: 700
    leading: 1.4
  tside:
    size: 14
    weight: 500
    tracking: 0.12em
  heads:
    size: 15
    weight: 400
    leading: 1.8
    numeric: tabular
  foot:
    size: 16
    weight: 400
    leading: 1.8
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - 節には人名ではなく会議体を置く。人を書いた体制図は、要員が 1 人替わるたびに古くなる
  - 窓口は 1 つだけ塗る。2 つ塗ると、実際には窓口が無いのと同じになる
  - 各節に開催頻度を書く。月 1 回の決裁と週 2 回の相談は、体制図の中で別の性格を持つ
  - 枝の渡り線は端のチームの中心で止める。版面の端まで引くと、外側にも何かあるように読まれる
  - チームの主管（御社／弊社／合同）を必ず書く。主管の書かれていない箱は、後で誰も引き取らない

ファイル

pattern.html

5.7 KB

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

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>体制図 — 決める場を頂点に、合同の窓口を 1 つに絞る</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */
  :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: 100px 140px;                 /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }

  .head { display: grid; gap: 16px; }
  .title { font-size: 46px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .lede { font-size: 19px; font-weight: 400; line-height: 1.8; color: var(--muted); }

  .chart { align-self: center; display: grid; justify-items: center; }

  .node { border: 1px solid var(--rule); padding: 24px 34px; text-align: center; background: var(--ground); }
  .role { font-size: 15px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }
  .who { font-size: 26px; font-weight: 700; line-height: 1.35; margin-top: 10px; }
  .cadence { font-size: 15px; font-weight: 400; color: var(--muted); margin-top: 10px; font-variant-numeric: tabular-nums; }

  /* 頂点は「決める場」。人の名前ではなく、決議が出る会議体を置く。 */
  .top { min-width: 520px; }
  /* 合同 PMO は 1 つだけ。窓口が 2 つある体制図は、実際には窓口が無い。 */
  .joint { min-width: 720px; background: var(--surface); border-color: var(--accent); }
  .joint .role,
  .joint .who { color: var(--accent); }

  .drop { width: 1px; height: 46px; background: var(--rule); }
  /* 渡り線は端の枝の中心で止める。版面の端まで引くと、4 つの外側にも
     何かあるように読まれる。列幅は (100% - gap*3)/4 なので、
     両端の半分ぶん = その列幅ちょうどを引いた長さが端から端になる。 */
  .bar { width: calc(75% + 24px); height: 1px; background: var(--rule); }
  .legs { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; justify-items: center; }

  .teams { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  /* 枝はチーム名に直接刺す。ここに罫を足すと、渡り線と平行な線が 2 本になり
     どちらが枝でどちらが囲みなのか読めなくなる。 */
  .team { padding: 22px 4px 0; }
  .tname { font-size: 22px; font-weight: 700; line-height: 1.4; }
  .tside { font-size: 14px; font-weight: 500; letter-spacing: .12em; color: var(--muted); margin-top: 12px; }
  .heads { font-size: 15px; font-weight: 400; line-height: 1.8; color: var(--muted); margin-top: 14px; font-variant-numeric: tabular-nums; }

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

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">推進体制</h1>
      <p class="lede" data-type="lede">決める場を 1 つ、合同の窓口を 1 つに絞っています。作業チームからの相談はすべて合同 PMO を通します。</p>
    </div>

    <div class="chart">
      <div class="node top" data-row="1">
        <p class="role" data-type="role">意思決定</p>
        <p class="who" data-type="who">ステアリングコミッティ</p>
        <p class="cadence" data-type="cadence">月 1 回 ／ 御社役員・弊社責任者</p>
      </div>
      <div class="drop"></div>
      <div class="node joint" data-row="2" data-emphasis="fill rule">
        <p class="role">日々の窓口・課題の一次受け</p>
        <p class="who">合同 PMO</p>
        <p class="cadence">週 2 回 ／ 御社 2 名・弊社 2 名</p>
      </div>
      <div class="drop"></div>
      <div class="bar"></div>
      <div class="legs">
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
      </div>
      <div class="teams">
        <section class="team" data-row="3">
          <p class="tname" data-type="tname">業務チーム</p>
          <p class="tside" data-type="tside">御社 主管</p>
          <p class="heads" data-type="heads">営業推進部 4 名<br>要件確定・受入判定</p>
        </section>
        <section class="team">
          <p class="tname">開発チーム</p>
          <p class="tside">弊社 主管</p>
          <p class="heads">設計 3 名・実装 8 名<br>設計から結合まで</p>
        </section>
        <section class="team">
          <p class="tname">基盤チーム</p>
          <p class="tside">合同</p>
          <p class="heads">御社 1 名・弊社 2 名<br>環境・連携・移行</p>
        </section>
        <section class="team">
          <p class="tname">品質チーム</p>
          <p class="tside">弊社 主管</p>
          <p class="heads">2 名<br>テスト計画・不具合管理</p>
        </section>
      </div>
    </div>

    <p class="foot" data-type="foot">要員の氏名と稼働率は付録 B に記載しています。この図には会議体と役割だけを載せ、人の入れ替えで図が古くならないようにしています。</p>
  </div>
</div>

font.css

4.0 KB

/designs/team-structure-joint-pmo/font.css — 全部入りには入れていない

中身を見る 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   143 (33244ccb5f73df3e)
 *
 * 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+38, U+42, U+4d, U+4f-50, U+2014, U+3001-3002, U+3005, U+3044, U+3046, U+3048, U+304b-304c, U+304f-3054, U+3057-305c, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307e, U+3081, U+3088-3089, U+308b-308c, U+3092, U+3094, U+3099, U+30a2-30a3, U+30af-30b0, U+30b3-30b4, U+30b9-30ba, U+30c1-30c3, U+30c6-30c9, U+30df-30e0, U+30ea, U+30f3, U+30fb-30fc, U+4e00, U+4e0d, U+4e3b, U+4eba, U+4ed8, U+4ef6, U+4efb, U+4f1a, U+4f53, U+4f5c, U+50cd, U+5165, U+5177, U+5224, U+5236, U+5272, U+52d9, U+53d7, U+53e3-53e4, U+5408, U+540c-540d, U+54c1, U+54e1, U+55b6, U+56de, U+56f3, U+57fa, U+5834, U+5883, U+5b9a, U+5b9f, U+5f0a, U+5f79, U+5fa1, U+601d, U+610f, U+63a8, U+643a, U+65e5, U+66ff, U+6708, U+696d, U+6b21, U+6c0f, U+6c7a, U+70b9, U+7387, U+7406, U+74b0, U+753b, U+767a, U+76e4, U+76f8, U+78ba, U+793e, U+79fb, U+7a3c, U+7a93, U+7ba1, U+7d50, U+7d5e, U+8005, U+884c, U+88c5, U+8981, U+8a08, U+8a18, U+8a2d, U+8ab2, U+8ac7, U+8b70, U+8cac, U+8cea, U+8f09, U+901a, U+9023, U+9031-9032, U+90e8, U+9332, U+958b, U+9802, U+984c, U+ff0f;
}
@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+38, U+42, U+4d, U+4f-50, U+2014, U+3001-3002, U+3005, U+3044, U+3046, U+3048, U+304b-304c, U+304f-3054, U+3057-305c, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307e, U+3081, U+3088-3089, U+308b-308c, U+3092, U+3094, U+3099, U+30a2-30a3, U+30af-30b0, U+30b3-30b4, U+30b9-30ba, U+30c1-30c3, U+30c6-30c9, U+30df-30e0, U+30ea, U+30f3, U+30fb-30fc, U+4e00, U+4e0d, U+4e3b, U+4eba, U+4ed8, U+4ef6, U+4efb, U+4f1a, U+4f53, U+4f5c, U+50cd, U+5165, U+5177, U+5224, U+5236, U+5272, U+52d9, U+53d7, U+53e3-53e4, U+5408, U+540c-540d, U+54c1, U+54e1, U+55b6, U+56de, U+56f3, U+57fa, U+5834, U+5883, U+5b9a, U+5b9f, U+5f0a, U+5f79, U+5fa1, U+601d, U+610f, U+63a8, U+643a, U+65e5, U+66ff, U+6708, U+696d, U+6b21, U+6c0f, U+6c7a, U+70b9, U+7387, U+7406, U+74b0, U+753b, U+767a, U+76e4, U+76f8, U+78ba, U+793e, U+79fb, U+7a3c, U+7a93, U+7ba1, U+7d50, U+7d5e, U+8005, U+884c, U+88c5, U+8981, U+8a08, U+8a18, U+8a2d, U+8ab2, U+8ac7, U+8b70, U+8cac, U+8cea, U+8f09, U+901a, U+9023, U+9031-9032, U+90e8, U+9332, U+958b, U+9802, U+984c, U+ff0f;
}
@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+38, U+42, U+4d, U+4f-50, U+2014, U+3001-3002, U+3005, U+3044, U+3046, U+3048, U+304b-304c, U+304f-3054, U+3057-305c, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307e, U+3081, U+3088-3089, U+308b-308c, U+3092, U+3094, U+3099, U+30a2-30a3, U+30af-30b0, U+30b3-30b4, U+30b9-30ba, U+30c1-30c3, U+30c6-30c9, U+30df-30e0, U+30ea, U+30f3, U+30fb-30fc, U+4e00, U+4e0d, U+4e3b, U+4eba, U+4ed8, U+4ef6, U+4efb, U+4f1a, U+4f53, U+4f5c, U+50cd, U+5165, U+5177, U+5224, U+5236, U+5272, U+52d9, U+53d7, U+53e3-53e4, U+5408, U+540c-540d, U+54c1, U+54e1, U+55b6, U+56de, U+56f3, U+57fa, U+5834, U+5883, U+5b9a, U+5b9f, U+5f0a, U+5f79, U+5fa1, U+601d, U+610f, U+63a8, U+643a, U+65e5, U+66ff, U+6708, U+696d, U+6b21, U+6c0f, U+6c7a, U+70b9, U+7387, U+7406, U+74b0, U+753b, U+767a, U+76e4, U+76f8, U+78ba, U+793e, U+79fb, U+7a3c, U+7a93, U+7ba1, U+7d50, U+7d5e, U+8005, U+884c, U+88c5, U+8981, U+8a08, U+8a18, U+8a2d, U+8ab2, U+8ac7, U+8b70, U+8cac, U+8cea, U+8f09, U+901a, U+9023, U+9031-9032, U+90e8, U+9332, U+958b, U+9802, U+984c, U+ff0f;
}

ノート

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

案件の推進体制を 1 枚で示す版。pattern.html が版そのもので、cover.png と frontmatter の 寸法はどちらもそこから機械的に出している。編集するのは pattern.html だけ。

The structure slide for a joint project. pattern.html is the artboard itself; both cover.png and the measurements come from it, so the three cannot drift apart.

Techniques

Apply to