マインドマップを描く:中心のアイデアから枝を増やし、整えて書き出す

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

旅行の準備や発表のアイデアのように、考えがいくつにも広がるときはマインドマップが便利です。MiruKitの図を描くにあるマインドマップのテンプレートで、「旅行の計画」のマインドマップを3つの言語版で実際に作りました。枝を足し、レイアウトメニューの6項目を1つずつ押して形を比べ、整えた図を書き出して形式ごとに何が入るかを確かめています。

マインドマップのテンプレートはどんな形ですか?

図を描くを開き、テンプレートを選ぶでマインドマップを押します。中央に「アイデア」と書かれただ円があり、左上・右上・左下・右下に考え 1〜4の四角が1つずつ置かれ、矢印でつながっています。図形の数は5個です。中心にテーマを置いて4方向に大きな枝を広げる、マインドマップの基本の形がすでにそろっています。

テーマと大きな枝の名前はどう変えますか?

図形をダブルクリックするか、数値・文字で編集の選んだ図形の文字に新しい名前を入れて文字を変更を押します。今回は中央を旅行の計画に、4つの枝を日程・予算・宿・持ち物に変えました。大きな枝を意味が重ならないまとまりにしておくと、小さな枝をどこに付けるかがはっきりします。

小さな枝はどう付けますか?

小さな枝を付けたい大きな枝を先に選び、四角を選んでから図形を追加を押します。予算を選んで押すと、航空券の枠が予算のすぐ右にできました。持ち物を選んで押すとパスポートの枠が持ち物の右にでき、もう一度押した充電器の枠は、その場所にパスポートがあったため、すぐ下の空いた場所に置かれました。新しい枠は選んだ枠と同じ140×60の大きさ、同じ色、文字サイズ16で、3つともほかの図形と重なりませんでした。この状態で書き出したPNGは768×458ピクセルです。

新しい枠の文字は最初「タイトル」なので、名前を変えてください。つなぐときは、図形にマウスを乗せると出る接続の矢印を親の枝までドラッグします。中央のテーマを囲む元の形が気に入っていれば、ここでそのまま書き出してもかまいません。

レイアウトメニューで形を変えてみますか?

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

マインドマップでは形の違いが大きく出ます。横向きツリー図は旅行の計画を左端に置き、7つの枝がすべて親の右に来るように広げました。460×340と最も小さく読みやすい一方で、枝は片側にしか伸びません。縦向きツリー図は7つの枝をすべて親の下に置き、780×230の横に広く低い図になりました。オーガニックは589×368の中で枝を中央のテーマの周りに散らし、中心から広がる感じがいちばん残りました。円形は853×773の輪に並べる際に中央のテーマまで輪の上に移してしまい、マインドマップとしては読みにくくなりました。

フロー図の2つは段階に沿って並べる方式なので、マインドマップというよりフローチャートに近くなりました。縦向きフロー図は820×390、横向きフロー図は620×420です。まとめると、スライドのようにひと目で読ませたいなら横向きツリー図、考えを広く広げたいならオーガニック、元の4方向の形を残したいならレイアウトを使わないのがおすすめです。

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

横向きツリー図で整えたマインドマップを日本語版で書き出すと、PNGは478×358ピクセル・20.2 KB、同じ大きさのWEBPは9.7 KB、SVGは6.6 KBで、8つの名前がすべて文字のまま残っていました。PDFは11.1 KBの1ページですが、中身は478×358ピクセルの画像1枚だけで、検索できる文字はありませんでした。ウェブページ (.html)は20.4 KB、編集用の元ファイル (.xml)は4.6 KBで、図形8個と線7本がそのまま入っていました。考えが増え続けるマインドマップなら、編集用の元ファイルも保存しておき、ファイルを開くで続きを直してください。

最初から最後までの手順

  1. テンプレートを選ぶでマインドマップを開きます。
  2. 中央のテーマと4つの枝の名前を変えます。
  3. 親の枝を選んだまま図形を追加を押し、小さな枝を入れて名前を変えます。
  4. 接続の矢印で親の枝とつなぎます。
  5. 必要なら配置 ▾ → レイアウトで形を選び、全体表示で確かめます。
  6. 書き出すで形式を選び、編集用の元ファイルも保存します。
関連するツールを開く

MiruKitで実際に確認した結果

書き出し・レイアウト結果確かめた内容
PNG20.2 KB478×358 px
SVG6.6 KB文字要素8個
PDF11.1 KB1ページ · 中身は478×358pxの画像1枚 · 検索できる文字なし
WEBP9.7 KB478×358 px
ウェブページ (.html)20.4 KB図と編集用の元ファイルが1つに
編集用の元ファイル (.xml)4.6 KB図形8個・線7本
縦向きフロー図820×390 · 重なり 0子7個のうち 親の下7・親の右3
横向きフロー図620×420 · 重なり 0子7個のうち 親の下4・親の右7
縦向きツリー図780×230 · 重なり 0子7個のうち 親の下7・親の右1
横向きツリー図460×340 · 重なり 0子7個のうち 親の下1・親の右7
円形853×773 · 重なり 0子7個のうち 親の下5・親の右3
オーガニック589×368 · 重なり 0子7個のうち 親の下4・親の右0

各言語の図を描くでマインドマップのテンプレートを開き、5つの図形の文字を変えました。親の枝を選んだ状態で図形を追加を押して小さな枝を3つ(予算の下に1つ、持ち物の下に2つ)足し、つなぎました。線はテンプレートと同じ形で編集画面に入れました。その状態で 配置 ▾ → レイアウト の6項目を実際のメニューで1つずつ押し、位置と枝の向きを測ってPNGで書き出し、元に戻すで戻しました。最後に横向きツリー図で整え、書き出しの6形式を保存して開き直しました。値はその言語版のものです。

同じマインドマップを、3つ足した直後と3つのレイアウトでPNG書き出しした実際のファイルです。
同じマインドマップを、3つ足した直後と3つのレイアウトでPNG書き出しした実際のファイルです。
上:枝を足してから 配置 ▾ → レイアウト を開いた画面。下:横向きツリー図で整えた画面です。
上:枝を足してから 配置 ▾ → レイアウト を開いた画面。下:横向きツリー図で整えた画面です。

実測の元データを見る

知っておきたいこと

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

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