組織図を作る:テンプレートから名前の変更・人の追加・書き出しまで

作成 · 更新 · 運営者(個人)

チーム紹介の資料や担当表に、組織図が1枚ほしいことがあります。MiruKitの図を描くにある組織図のテンプレートで、代表の下に4チーム、デザインチームの下に1人がいる組織図を3つの言語版で実際に作りました。枠の足し方、レイアウトメニューの6項目が図をどう変えるか、書き出したファイルに何が入るかを確かめています。

組織図のテンプレートには何がありますか?

図を描くを開き、テンプレートを選ぶで組織図を押します。いちばん上のチームの四角と、その下の担当者 1・担当者 2・担当者 3が3本の矢印でつながった図が出てきます。図形の数は「図形 4 個」と表示されます。上から下へ広がる基本の形がすでにあるので、名前を変えるだけで小さな組織図になります。

名前はどう変えますか?

四角をダブルクリックすると、その場で文字を直せます。数値・文字で編集を開き、選んだ図形の文字に新しい名前を入れて文字を変更を押してもかまいません。今回はチームを代表に、担当者3人を企画チーム・デザインチーム・開発チームに変えました。実在の人の名前ではなく役割やチーム名にしておくと、人が入れ替わっても図を直す手間が減ります。

人やチームはどう足しますか?

新しい枠をぶら下げたい上の枠を先に選び、同じ場所で四角を選んでから図形を追加を押します。新しい四角は、選んだ枠の大きさ・色・文字サイズをそのまま受け継ぎ、140×60・文字サイズ16で作られました。代表を選んで押すと、代表のすぐ右の空いた場所に出てきました。デザインチームを選んだときは右の場所に開発チームがあったため、そのすぐ下の空いた場所に下がって置かれました。どちらもほかの四角と重ならず、この状態で書き出したPNGは558×328ピクセルでした。

新しい四角の文字は最初「タイトル」なので、名前を変えます。今回はマーケティングチームとデザイナーにして、マーケティングチームは代表と、デザイナーはデザインチームとつなぎました。編集画面で図形にマウスを乗せると出る接続の矢印を、ほかの図形までドラッグするとつながります。

レイアウトメニューは何をしてくれますか?

編集画面の上の配置 ▾ → レイアウトには、縦向きフロー図・横向きフロー図・縦向きツリー図・横向きツリー図・円形・オーガニックの6つがあります。同じ状態から1つずつ押すと、6つすべてが図形を動かし、どれも四角を重ねて置くことはありませんでした。元に戻すを押せば、毎回元の位置に戻りました。

組織図にいちばん合ったのは縦向きツリー図です。5つの枠がすべて自分の上の枠より下に置かれ、4チームが1列に並んで、その中央の上に代表が来ました。デザイナーもデザインチームの真下にそろいました。日本語版では名前が長いぶん全体が650×220になり、それでも最も平たい結果でした。横向きツリー図は代表を左に置いてチームを右へ広げ(490×300)、枠の名前が長いときに向いています。円形は662×662の輪に並べたため上下の関係が読みにくく、オーガニックは512×332の中に枠を散らしました。

フロー図の2つも重なりなく整えましたが、組織図とは少し趣が違います。縦向きフロー図は5つの枠をすべて上の枠の下に置きつつ680×380と縦長になり、横向きフロー図は枠を左から右へ段階ごとに並べて650×330になりました。作業の順番を見せる図にはフロー図、誰が誰の下にいるかを見せる組織図にはツリー図が向いています。新しい枠は最初から同じ文字サイズで作られるので、整えたあとにスタイルタブで直す必要もありませんでした。

どの形式で書き出しますか?

縦向きツリー図で整えた組織図を日本語版で書き出すと、PNGは668×238ピクセル・13.3 KB、SVGは4.9 KB、PDFは6.8 KB、編集用の元ファイル (.xml)は3.5 KBでした。SVGには6つの名前が文字のまま残っているので、拡大してもくっきりしています。PDFは1ページですが、中身は668×238ピクセルの画像1枚だけで、検索できる文字はありませんでした。WEBPはPNGと同じ大きさで7.6 KBです。ウェブページ (.html)は15.9 KBの1ファイルに図と編集用の元ファイルが入っています。資料やスライドにはPNG、ウェブにはWEBP、大きく印刷するならSVGが便利です。人の異動のたびに直す組織図なら、編集用の元ファイルも必ず保存してください。

最初から最後までの手順

  1. テンプレートを選ぶで組織図を開きます。
  2. 四角をダブルクリックして名前を変えます。
  3. 上の枠を選んだまま図形を追加を押し、新しい枠を入れて名前を変えます。
  4. 接続の矢印で上の枠とつなぎます。
  5. 配置 ▾ → レイアウト → 縦向きツリー図で整え、全体表示で確かめます。
  6. 書き出すで形式を選び、編集用の元ファイルも保存します。
関連するツールを開く

MiruKitで実際に確認した結果

書き出し・レイアウト結果確かめた内容
PNG13.3 KB668×238 px
SVG4.9 KB文字要素6個
PDF6.8 KB1ページ · 中身は668×238pxの画像1枚 · 検索できる文字なし
WEBP7.6 KB668×238 px
ウェブページ (.html)15.9 KB図と編集用の元ファイルが1つに
編集用の元ファイル (.xml)3.5 KB図形6個・線5本
縦向きフロー図680×380 · 重なり 0子5個のうち 親の下5・親の右2
横向きフロー図650×330 · 重なり 0子5個のうち 親の下3・親の右5
縦向きツリー図650×220 · 重なり 0子5個のうち 親の下5・親の右1
横向きツリー図490×300 · 重なり 0子5個のうち 親の下1・親の右5
円形662×662 · 重なり 0子5個のうち 親の下4・親の右2
オーガニック512×332 · 重なり 0子5個のうち 親の下2・親の右0

各言語の図を描くで組織図のテンプレートを開き、4つの図形の文字を変えました。上の枠を選んだ状態で図形を追加を押して四角を2つ(代表の下にチーム1つ、デザインチームの下に1人)足し、つなぎました。線はテンプレートと同じ形で編集画面に入れました。その状態で 配置 ▾ → レイアウト の6項目を実際のメニューで1つずつ押し、位置と子の四角の向きを測ってPNGで書き出し、元に戻すで戻しました。最後に縦向きツリー図で整え、書き出しの6形式を保存して開き直しました。サイズはその言語版で保存したファイルの値です。

同じ組織図を、2つ足した直後と3つのレイアウトでPNG書き出しした実際のファイルです。
同じ組織図を、2つ足した直後と3つのレイアウトでPNG書き出しした実際のファイルです。
上:組織図のテンプレートを開いた画面。下:名前を変えて2つ足し、縦向きツリー図で整えた画面です。
上:組織図のテンプレートを開いた画面。下:名前を変えて2つ足し、縦向きツリー図で整えた画面です。

実測の元データを見る

知っておきたいこと

レイアウトを押すと、手で動かした位置も含めてすべて計算し直されます。気に入らなければ元に戻すで戻してください。

ファイルサイズは言語によって少し違い、韓国語版のPNGは638×238ピクセル・10.7 KB、英語版は13.0 KBでした。図と編集用の元ファイルはサーバーに送られず、ブラウザの中に保存されます。