はじめに

draw.ioはフリーのソフトですが操作性は、直感的に分かりやすい仕様かと思います。
ですが、それでもこの機能はどうすればいいの？使い勝手がいまいちよくわからない、
そういったことを解消したく、今回このマニュアルを作成致しました。

Microsoft Excelにアドインとして導⼊できるdraw.io（diagrams.net）を活⽤し、フローチャート、UML図、ネットワーク図などの様々な図形を効率的に作成するための初⼼者向けマニュアルです。

Excelのデータと連携しながら、視覚的に分かりやすいドキュメントを作成したいと考えているビジネスパーソンや学⽣の⽅々を対象としています。

draw.ioアドインは、Excelの使い慣れた環境の中で、専⾨的な図形描画ツールと同等の機能を提供します。

これにより、別々のアプリケーションを⾏き来することなく、データ分析から図解までを⼀貫して⾏うことが可能になります。

本マニュアルでは、draw.ioアドインのインストールから基本的な操作、そして実践的な図形作成、さらには作成した図の活⽤⽅法までを、豊富なスクリーンショットと共に分かりやすく解説します。

本書を通じて、あなたがdraw.ioアドインをマスターし、⽇々の業務や学習において、より効果的なコミュニケーションと情報整理を実現できるようになることを願っています。

第1章：draw.ioとは？ Excel連携メリット

draw.ioの概要と特徴とExcelアドインのメリット

draw.io（旧名：diagrams.net）は、無料で利⽤できる⾼機能なオンライン作図ツールです。

フローチャート、UML図、ネットワーク図、組織図、ワイヤーフレームなど、ビジネスからIT、教育まで幅広い分野で必要とされる様々な図形を直感的に作成できます。

Webブラウザ上で動作するため、特定のソフトウェアをインストールする必要がなく、インターネット環境があればどこからでもアクセスできるのが⼤きな特徴です。

draw.ioの主な特徴

豊富なテンプレートとシェイプ: 業界標準の図形ライブラリが豊富に⽤意されており、専⾨的な図形も簡単に作成できます。

直感的な操作性: ドラッグ＆ドロップを中⼼としたユーザーインターフェースで、初

⼼者でも迷うことなく作図を開始できます。

クラウド連携: Google Drive、OneDrive、Dropboxなどの主要なクラウドストレージと連携し、ファイルの保存や共有が容易です。

共同編集機能: 複数のユーザーが同時に⼀つの図を編集できるため、チームでの作業効率が向上します。

オープンソース: 基本機能は無料で利⽤でき、オープンソースであるため、コミュニティによる活発な開発と改善が⾏われています。

Excelにアドインとして追加するメリット

draw.ioは単体でも強⼒なツールですが、Microsoft Excelにアドインとして追加することで、その利便性はさらに⾼まります。Excelユーザーにとって、以下のようなメリットがあります。

• • 1. データと図の⼀元管理: Excelシート上でデータ分析を⾏い、その結果を図として視覚化する際、draw.ioアドインを使えば、データと図を同じExcelファイル内で管理できます。これにより、情報の散逸を防ぎ、関連性を明確に保つことができます。
    2. 作業効率の向上: Excelとdraw.ioを別々に起動し、図をコピー＆ペーストする⼿間がなくなります。Excelの作業中に必要に応じてdraw.ioアドインを起動し、シームレスに作図を⾏うことができます。
    3. 図の更新が容易: Excelに埋め込んだdraw.ioの図は、元のdraw.ioファイルが更新されると、Excel上の図も簡単に同期·更新できます。

常に最新の図をExcelドキュメントに反映させることが可能です。
共有と配布の簡素化: 図がExcelファイルに埋め込まれているため、Excelファイルを共有するだけで、図も⼀緒に共有されます。

これにより、複数のファイルを管理する⼿間が省け、共同作業や情報共有がスムーズになります。

• • 1. Excelの表現⼒強化: Excel標準の図形描画機能では難しい、複雑で専⾨的な図形も draw.ioアドインを使えば簡単に作成できます。
       これにより、Excelドキュメント全体の表現⼒と視覚的な訴求⼒を⾼めることができます。

これらのメリットを享受することで、Excelをより強⼒な情報伝達ツールとして活⽤できるようになります。

draw.ioアドインのインストール手順

draw.ioアドインをExcelにインストールする⼿順は⾮常に簡単です。

以下のステップに従って進めてください。このセクションでは、Microsoft 365のExcelを前提として説明します。

• • 1. Excelの起動
       まず、Microsoft Excelを起動し、新しいブックまたは既存のブックを開きます。
    2. 「draw.io Diagrams」の検索と選択
       「ホーム」タブ→アドイン→検索画面で「draw」を入力します。

「draw.io Diagrams」が表示されるので、選択し「追加ボタン」をクリックします。

「許可して続行」ボタンをクリックします。

以下のように利⽤規約の同意: 利⽤規約とプライバシーポリシーが表⽰されたら、
内容を確認し「続⾏」ボタンをクリックします。

• • 1. インストール完了: インストールが完了すると、Excelの右側にdraw.ioのサイドメニューが表⽰され、リボンメニューの「挿⼊」タブにdraw.ioのアイコンが追加されます。これでインストールは完了です。

インストール後、メニュー＞挿入＞draw.io　のアイコンが表示されます。

これで、Excel内でdraw.ioの強⼒な作図機能を利⽤する準備が整いました。

Excel標準機能とdraw.ioアドインの相違点と利点

多くの⼈が「図を描くならPowerPointや専⽤の作図ツールを使うべきだ」と考えるかもしれません。

しかし、Excelで図を描くことには、特にデータと図を密接に連携させたい場合に⼤きなメリットがあります。

ここでは、Excelで図を描くことの意義と、Excel標準機能とdraw.ioアドインの違いを⽐較し、draw.ioアドインの優位性を解説します。

なぜExcelで図を描くのか？

Excelは表計算ソフトウェアとして広く利⽤されていますが、そのグリッドベースの構造とデータ処理能⼒は、図形描画においても独⾃の利点をもたらします。

データとの近接性: 多くのビジネスプロセスや分析結果はExcelで管理されていま

す。図をExcel内に直接作成することで、関連するデータと図を常に隣接させ、情報

の整合性を⾼めることができます。例えば、予算データとそれに基づくフローチャートを同じファイルで管理できます。

レイアウトの容易さ: Excelのセルグリッドは、図形を正確に配置し、整列させるのに役⽴ちます。特に、フローチャートや組織図のように構造化された図を作成する際に、このグリッドは⾮常に便利です。

共有と配布の簡素化: Excelファイルはビジネスシーンで最も頻繁に共有されるドキュメント形式の⼀つです。図がExcelファイルに埋め込まれていれば、追加のファイルを添付することなく、必要な情報を⼀括で共有できます。

Excel標準機能とdraw.ioアドインの⽐較

Excelには基本的な図形描画機能が備わっていますが、draw.ioアドインはそれをはるかに超える機能を提供します。以下の表で両者を⽐較します。

機能項 ⽬	Excel標準機能	draw.ioアドイン
作図の種類	基本的な図形、コネクタ、SmartArt	フローチャート、UML、ネットワーク図、組織図、ワイヤーフレームなど専⾨的な図形全般
シェイプの種類	汎⽤的な図形が中⼼	業界標準の豊富なシェイプライブラリ（数百種類以上）
操作性	細かい調整に⼿間がかかる場合がある	ドラッグ＆ドロップ中⼼の直感的な操作、⾃動整列機能
テンプレート	SmartArtテンプレートのみ	多様な図形に対応した豊富なテンプレート
共同編集	限定的（OneDrive経由での共同編集は可能だが、図形編集は⾮効率）	draw.ioのクラウド連携によりリアルタイム共同編集が可能
ファイル形式	Excelファイル内に図形として保存	Excelファイル内に埋め込み、または独⽴した.drawioファイルとして保存·管理が可能
専⾨性	⼀般的なビジネス⽂書向け	専⾨的なシステム設計やプロセス分析にも対応

draw.ioアドインの利点

上記の⽐較から、draw.ioアドインがExcel標準機能に⽐べていかに優れているかが分かります。

専⾨的な図形作成: フローチャートの特定の記号、UMLのクラス図やシーケンス図の要素、ネットワーク機器のアイコンなど、Excel標準機能では提供されない専⾨的なシェイプを豊富に利⽤できます。これにより、より正確で理解しやすい図を作成できます。

効率的な作図: ドラッグ＆ドロップで図形を配置し、⾃動接続機能で簡単に線をつなぐことができます。また、図形の整列や間隔調整も容易に⾏えるため、作図にかかる時間を⼤幅に短縮できます。

⼀貫したデザイン: 豊富なテンプレートとスタイルオプションにより、プロフェッショナルで⼀貫性のあるデザインの図を簡単に作成できます。

クラウド連携と共同作業: OneDriveなどのクラウドストレージと連携することで、図の⾃動保存、バージョン管理、そしてチームメンバーとのリアルタイム共同編集が可能になります。これにより、リモートワーク環境でも効率的に作業を進めることができます。

補足：draw.ioのメリットとデメリット

種類	draw.ioアドイン
メリット	無料、多機能
デメリット	Excelオンライン上では編集不可、表示には図形として挿入が必要

Excelのデータ処理能力とdraw.ioの強力な作図機能を組み合わせることで、より効果的で視覚的な情報伝達を実現できるようになるでしょう。

次の章では、draw.ioアドインの基本的な操作⽅法について詳しく⾒ていきます。

第2章：基本操作をマスターしよう

draw.ioアドインのインストールが完了したら、いよいよ基本的な操作⽅法を学んでいきましょう。

この章では、draw.ioのワークスペースの構成、図形の配置と接続、テキストの⼊⼒と装飾といった、あらゆる図形作成の基礎となるスキルを習得します。

ワークスペースの基本

draw.ioアドインをExcelで起動すると、専⽤のワークスペースが表⽰されます。

このワークスペースは、図形を描画する「キャンバス」を中⼼に、様々なツールやパネルで構成されています。

それぞれの名称と役割を理解することで、効率的に作図を進めることができます。

1. draw.ioアドインの起動

Excelのリボンメニューにある「挿入」＞draw.ioアイコンをクリックすると、draw.ioのワークスペースが開きます。

上記１～３は、下記の意味になります。

１．Microsoft OneDrive、Google Drive、または自分のデバイスに接続します。

２．draw.io の図を選びます。

３．その図をドキュメントに挿入します。

上記青ボタンのいずれかを選択（クリック）します。

Pick OneDrive File
　OneDrive にある既存のファイルを選ぶ

Create OneDrive File
　OneDrive に新しく draw.io ファイルを作成する

Pick Google Drive File
　Google Drive にある既存のファイルを選ぶ

Create Google Drive File
　Google Drive に新しく draw.io ファイルを作成する

Pick Device File
　自分のパソコン（デバイス）にあるファイルを選ぶ

Google Driveに新しく作成する場合は、認証を求められる場合もあります。

その場合は、メッセージに沿ってもらえれば問題ないです

するとブラウザ上に新規画面が表示されます。

c

• 1. メニューバー: ファイルの保存、エクスポート、編集操作（元に戻す、やり直し）、表⽰設定など、主要な機能にアクセスできます。
  2. ツールバー: 図形の挿⼊、テキストの追加、接続線の描画、ズーム、整列など、頻繁に使うツールが配置されています。
  3. シェイプパネル: フローチャート、UML、ネットワーク、基本図形など、カテゴリ別に整理された豊富な図形（シェイプ）が格納されています。ここから必要な図形をキャンバスにドラッグ＆ドロップして配置します。
  4. キャンバス: 実際に図形を描画する領域です。グリッドが表⽰されており、図形を正確に配置するのに役⽴ちます。
  5. フォーマットパネル: 選択した図形や接続線のスタイル（⾊、線種、フォントなど）を詳細に設定できます。図形が選択されていない場合は、キャンバス全体のプロパティ（背景⾊、グリッド表⽰など）を設定できます。
  6. ページタブ: 複数のページ（シート）を持つ図を作成する場合に、ページを切り替えたり、追加·削除ができます。

図形の配置と接続

フローチャートの基本となる「図形」と「接続線」の挿⼊⽅法を学びます。
図形と接続線は、あらゆるダイアグラムの基本要素です。

これらを適切に配置し、接続することで、情報の流れや関係性を視覚的に表現できます。

図形の配置

• • • 1. シェイプパネルからドラッグ＆ドロップ: シェイプパネル（上記C）から、使⽤したい図形（例：⻑⽅形、楕円）をキャンバス（上記D）にドラッグ＆ドロップします。
      2. ツールバーから挿⼊: ツールバー（上記B）にある図形アイコンをクリックし、キャンバス上でクリックすると、デフォルトサイズの図形が挿⼊されます。
      3. 図形のサイズ変更と移動: 配置した図形は、選択すると表⽰されるハンドルをドラッグすることでサイズを変更できます。図形⾃体をドラッグすると、キャンバス上の任意の位置に移動できます。

接続線の描画と接続

図形と図形の間を接続線でつなぐことで、情報の流れや関係性を⽰します。

• • • 1. 図形からの⾃動接続: 図形を選択すると、四隅に⼩さな⽮印が表⽰されます。この⽮印をドラッグして別の図形まで伸ばすと、⾃動的に接続線が描画され、両⽅の図形に接続されます。
      2. ツールバーから接続線を描画: ツールバーにある接続線アイコンをクリックし、キャンバス上でドラッグして接続線を描画します。この⽅法で描画した接続線は、後から図形に接続することも可能です。
      3. 接続点の利⽤: 図形には、接続線をつなぐための接続点（通常は⻘い⼩さな点）が複数⽤意されています。接続線をこれらの接続点にドラッグすると、接続が固定されます。図形を移動しても接続は維持されます。

図形が接続線でつながっている状態では、どちらかの図形を移動しても接続線が⾃動的に追従します。

テキストの⼊⼒と装飾

図形や接続線にテキストを追加する方法、フォントや色の変更といった基本的な装飾方法を解説します。

テキストの⼊⼒

• • • 1. 図形へのテキスト⼊⼒
         図形をダブルクリックすると、テキスト⼊⼒モードになります。
         直接テキストを⼊⼒し、Enterキーを押すか、図形以外の場所をクリックすると

⼊⼒が確定します。

• • • 1. 接続線へのテキスト⼊⼒
         接続線をダブルクリックすると、テキスト⼊⼒モードになります。
         図形と同様にテキストを⼊⼒し、確定します。接続線上のテキストは、ドラッグして位置を調整できます。
      2. 独⽴したテキストの追加
         ツールバーにある「テキスト」アイコンをクリックし、キャンバス上でクリックすると、独⽴したテキストボックスが挿⼊されます。これもダブルクリックで編集できます。

テキストと図形の装飾

テキストや図形を選択した状態で、フォーマットパネル（上記E）を使⽤すると、様々な装飾を施すことができます。

• • • 1. フォントの変更
         テキストを選択し、フォーマットパネルの「テキスト」タブでフォントの種類、サイズ、太字、斜体、下線などを変更できます。
      2. ⾊の変更
         図形を選択し、フォーマットパネルの「スタイル」タブで図形の塗りつぶし

⾊、線の⾊、線の太さなどを変更できます。テキストの⾊は「テキスト」タブで変更します。

• • • 1. 整列と配置
         図形やテキストを選択し、フォーマットパネルの「配置」タブで、左右中央揃え、上下中央揃え、グループ化、順序変更（前⾯へ、背⾯へ）などの操作が可能です。

図形の⾊や線のスタイル、テキストのフォントや⾊を変更することで、図の視認性を⾼め、情報を効果的に伝えることができます。

これらの基本操作をマスターすることで、draw.ioアドインを使った様々な図形作成の⼟台ができます。次の章では、これらの知識を活かして、実践的なフローチャートの作成に挑戦します。

第3章：実践！フローチャート作成

この章では、draw.ioアドインの基本的な操作を習得した上で、最も⼀般的で実⽤的な図形の⼀つであるフローチャートの作成に挑戦します。

ここでは、フローチャートの基本要素から、具体的な作成⼿順、そして⾒やすいフローチャートを作成するための編集のコツまでを詳しく解説します。

フローチャートの基本要素

フローチャートは、特定の意味を持つ図形と、それらをつなぐ接続線で構成されます。
主要な図形とその意味を理解することは、正確で分かりやすいフローチャートを作成するための第⼀歩です。

図形の種類	形状	意味	⽤途例
開始/終了	楕円	プロセスの開始点または終了点を⽰します。	「開始」「終了」「注⽂完了」
プロセス	⻑⽅形	特定の処理や作業を⽰します。	「データ⼊⼒」「書類作成」「製品検査」
判断	ひし形	条件分岐や意思決定を⽰します。通常、 「はい/いいえ」や「真/偽」で次のプロセスが分かれます。	「在庫あり？」「承認済み？」「条件Aを満た す？」
データ	平⾏四辺形	⼊⼒データまたは出⼒データを⽰します。	「顧客情報⼊⼒」「レポート出⼒」
準備	六⻆形	プロセス内の初期設定や準備作業を⽰します。	「変数の初期化」「環境設定」
⽂書	波形の下線付き⻑⽅形	⼀つの⽂書や報告書を⽰します。	「請求書」「契約書」
複数⽂書	重ねた波形の下線付き⻑⽅形	複数の⽂書や報告書を⽰します。	「顧客リスト」「製品カタログ」

図形の種類	形状	意味	⽤途例
データベース	円筒形	データの保存場所を⽰します。	「顧客データベース」 「製品マスタ」
表⽰	台形（上辺が斜め）	画⾯表⽰やディスプレイへの出⼒など、情報を表⽰する操作を⽰します。	「エラーメッセージ表 ⽰」「結果画⾯表⽰」
⼿動⼊⼒	台形（上辺が台形）	キーボード⼊⼒など、⼿動でのデータ⼊ ⼒を⽰します。	「パスワード⼊⼒」「数量⼊⼒」
⼿動操作	台形	⼈間による⼿動での操作を⽰します。	「書類確認」「製品梱包」
結合	三⻆形	複数のプロセスが⼀つに合流する点を⽰します。	複数の判断結果が次のプロセスに合流する
オフページコネクタ	五⻆形	別のページ（シート）に続く接続点を⽰します。	複雑なフローチャートを複数ページに分割する際
オンページコネクタ	円	同じページ内の別の場所に続く接続点を ⽰します。	複雑なフローチャートで接続線が交錯するのを避ける際

これらの図形は、draw.ioのシェイプパネルの「フローチャート」カテゴリから選択できます。各図形をキャンバスにドラッグ＆ドロップし、必要に応じてサイズやテキストを調整して使⽤します。

サンプルフローチャートの作成

ここでは、簡単な「オンライン注⽂処理」のフローチャートを例に、具体的な作成⼿順をステップバイステップで解説します。この例を通じて、図形の配置、接続、テキスト⼊

⼒、そして基本的な装飾の流れを習得しましょう。

作成するフローチャートの概要

1. 顧客がオンラインで商品を注⽂する。
2. システムが注⽂を受け付ける。
3. 在庫を確認する。
4. 在庫があれば、注⽂を確定し、商品を発送する。
5. 在庫がなければ、顧客に在庫切れを通知し、注⽂をキャンセルする。

ステップ1：開始図形の配置

まず、フローチャートの開始点を⽰す「開始/終了」図形（楕円）をキャンバスに配置し、テキストを「注⽂開始」と⼊⼒します。

ステップ2：プロセス図形の追加と接続

「注⽂開始」図形の下に「プロセス」図形（⻑⽅形）を配置し、テキストを「注⽂受付」と⼊⼒します。そして、両者を接続線でつなぎます。

ステップ3：判断図形の追加と接続

「注⽂受付」プロセス図形の下に「判断」図形（ひし形）を配置し、テキストを「在庫あり？」と⼊⼒します。これも接続線でつなぎます。

ステップ4：「はい」の場合のプロセス

「在庫あり？」判断図形から「はい」の場合の接続線を伸ばし、その先に「プロセス」図形を配置して「注⽂確定」と⼊⼒します。さらにその下に「プロセス」図形を配置して

「商品発送」と⼊⼒し、接続します。

ステップ5：「いいえ」の場合のプロセス

「在庫あり？」判断図形から「いいえ」の場合の接続線を伸ばし、その先に「プロセス」図形を配置して「在庫切れ通知」と⼊⼒します。さらにその下に「プロセス」図形を配置して「注⽂キャンセル」と⼊⼒し、接続します。

ステップ6：終了図形の追加と接続

最後に、「商品発送」と「注⽂キャンセル」の各プロセスから接続線を伸ばし、⼀つの

「終了」図形（楕円）に合流させ、テキストを「注文終了」と⼊⼒します。

これで、シンプルなオンライン注⽂処理のフローチャートが完成しました。この⼿順を参考に、様々な業務フローを図⽰してみてください。

編集と修正のコツ

フローチャートは、作成するだけでなく、⾒やすく整理されていることが重要です。 draw.ioには、図形を効率的に整列させたり、間隔を調整したりするための便利な機能が多数⽤意されています。

これらの機能を活⽤して、プロフェッショナルなフローチャートを作成しましょう。

図形の整列

複数の図形を選択した状態で、ツールバーまたはフォーマットパネルの「整列」オプションを使⽤すると、選択した図形を基準にきれいに整列させることができます。

複数の図形を選択: 整列したい図形をすべて選択します。Shiftキーを押しながらクリックするか、ドラッグで範囲選択します。

整列オプションの選択: ツールバーまたはフォーマットパネルの「配置」タブにある整列アイコンをクリックし、希望する整列⽅法を選択します。例えば、「上揃え」「中央揃え」「下揃え」「左揃え」「右揃え」などがあります。

ポイント: 縦に並んだ図形は「中央揃え」、横に並んだ図形は「上下中央揃え」を使うと、⾒た⽬がきれいに整います。

整列後

図形の間隔調整

複数の図形を等間隔に配置することで、よりプロフェッショナルな印象のフローチャートになります。これも複数の図形を選択した状態で、間隔調整オプションを使⽤します。

複数の図形を選択: 間隔を調整したい図形をすべて選択します。

間隔調整オプションの選択: ツールバーまたはフォーマットパネルの「配置」タブにある間隔調整アイコンをクリックし、希望する間隔調整⽅法を選択します。
例えば、「⽔平⽅向に均等に配置」「垂直⽅向に均等に配置」などがあります。

整列前

整列後　垂直方向に均等に配置

ポイント: 縦に並んだ図形は「垂直⽅向に均等に配置」、横に並んだ図形は「⽔平⽅向に均等に配置」を使うと、図形間のスペースが均等になります。

グループ化とグループ解除

関連する複数の図形を「グループ化」することで、それらを⼀つのオブジェクトとして扱えるようになります。これにより、移動やサイズ変更、コピー＆ペーストが容易になり、編集作業の効率が向上します。

グループ化: グループ化したい図形をすべて選択し、右クリックメニューから「グループ化」を選択するか、ツールバーのグループ化アイコンをクリックします。

グループ解除: グループ化された図形を選択し、右クリックメニューから「グループ解除」を選択するか、ツールバーのグループ解除アイコンをクリックします。

接続線の調整

接続線が複雑に交錯していると、フローチャートは読みにくくなります。draw.ioでは、接続線の経路を調整して、より分かりやすくすることができます。

接続線の経路変更: 接続線をクリックして選択すると、いくつかのハンドルが表⽰されます。これらのハンドルをドラッグすることで、接続線の曲がり⻆や経路を⾃由に調整できます。

接続点の変更: 接続線の端点をドラッグして、図形の別の接続点に移動させることができます。

これらの編集と修正のコツを習得することで、あなたのフローチャートはより洗練され、情報を正確かつ効果的に伝えることができるようになるでしょう。

次の章では、フローチャート以外の様々な図形作成に挑戦します。

第4章：ステップアップ！他の図も作成してみよう

フローチャートの作成を通じてdraw.ioアドインの基本的な操作に慣れてきたところで、この章ではさらに応⽤的な図形作成に挑戦します。
UML図、ネットワーク図、組織図、マインドマップといった、ビジネスやITの現場で頻繁に利⽤される図形の作成⽅法を学び、 draw.ioアドインの多様な表現⼒を体験しましょう。

UML図: 初⼼者にも分かりやすい

「アクティビティ図」や「ユースケース図」の作成⽅法

UML（Unified Modeling Language）は、ソフトウェアシステムの設計や分析を視覚的に表現するための標準的なモデリング⾔語です。UMLには様々な種類の図がありますが、ここでは初⼼者にも理解しやすく、汎⽤性の⾼い「アクティビティ図」と「ユースケース図」の作成⽅法を紹介します。

アクティビティ図の作成

アクティビティ図は、システムやビジネスプロセスの活動の流れを表現するUML図です。フローチャートと似ていますが、より詳細な制御フローや並⾏処理を表現できる点が特徴です。

アクティビティ図の主な要素:

要素の種類	形状	意味	⽤途例
開始ノード	⼩さな黒丸	アクティビティの開始点を⽰します。	プロセスの開始
終了ノード	黒丸を囲む円	アクティビティの終了点を⽰します。	プロセスの完了
アクション	⻆丸⻑⽅形	実⾏される単⼀のステップやタスクを⽰します。	「注⽂を受け付ける」「在庫を確認する」
判断ノード	ひし形	条件に基づいて複数のパスに分岐する点を⽰します。	「在庫あり？」「承認済み？」
マージノード	ひし形	複数のパスが再び⼀つに合流する点を⽰します。	判断ノードで分岐したパスの合流
フォークノード	太い横棒	並⾏して実⾏される複数のアクティビティに分岐する点を⽰します。	複数のタスクを同時に開始
ジョインノード	太い横棒	並⾏して実⾏されていた複数のアクティビティが合流する点を⽰します。	複数のタスクが全て完了した後に次のタスクへ
スイムレーン	縦または横の区画	アクティビティを実⾏する責任者や部⾨を⽰します。	「顧客」「システム」「経理部」

これらの要素は、draw.ioのシェイプパネルの「UML」カテゴリや「フローチャート」カテゴリから利⽤できます。

アクティビティ図の作成例（オンラインショッピングの注⽂処理）:

ユースケース図の作成

ユースケース図は、システムが提供する機能（ユースケース）と、その機能を利⽤する外部の存在（アクター）との関係を表現するUML図です。システムの機能要件を明確にするために⽤いられます。

ユースケース図の主な要素:

要素の種類	形状	意味	⽤途例
アクター	棒⼈間	システムと相互作⽤する外部の存在 （⼈間、他のシステムなど）を⽰します。	「顧客」「管理者」「決済システム」
ユースケース	楕円	システムが提供する特定の機能やサービスを⽰します。	「商品を検索する」「注⽂する」 「レポートを⽣成する」
システム境界	⻑⽅形	システムの範囲を⽰し、その中にユースケースを配置します。	「オンラインストアシステム」
関連	実線	アクターとユースケース間の相互作⽤を⽰します。	アクターがユースケースを利⽤する関係
包含関係	破線⽮印 （<>）	あるユースケースが、別のユースケースの機能を必ず含むことを⽰します。	「注⽂する」ユースケースが 「認証する」ユースケースを包含する
拡張関係	破線⽮印 （<>）	あるユースケースが、特定の条件の下で別のユースケースの機能を追加することを⽰します。	「商品を検索する」ユースケースが「詳細検索する」ユースケースを拡張する

これらの要素は、draw.ioのシェイプパネルの「UML」カテゴリから利⽤できます。

ユースケース図の作成例（図書館システム）:

ネットワーク図: サーバーやPCなどのアイコンを使って、シンプルなネットワーク構成図を作成する⼿順を解説します。

ネットワーク図は、コンピュータネットワークの構成要素（サーバー、PC、ルーター、スイッチなど）とその接続関係を視覚的に表現する図です。システムのインフラストラクチャを理解し、問題解決や設計を⾏う上で不可⽋なツールです。

ネットワーク図の主な要素

draw.ioには、ネットワーク図作成に特化した豊富なアイコンが⽤意されています。シェイプパネルの「ネットワーク」カテゴリを展開すると、様々な機器のアイコンが⾒つかります。

要素の種類	アイコン	意味	⽤途例
サーバー		サーバー機器を⽰します。	Webサーバー、 データベースサーバー
クライアント PC		クライアント側のコンピュータを⽰します。	ユーザーのデスクトップPC、ノートPC
ルーター		異なるネットワーク間を接続し、データパケットを転送する機器を⽰します。	インターネット 接続ルーター、社内ルーター

要素の種類	アイコン	意味	⽤途例
スイッチ		同⼀ネットワーク内の機器を接続する機器を⽰しま す。	部⾨内スイッチ、フロアスイッチ
ファイアウォール		ネットワークセキュリティを保護する機器を⽰しま す。	外部からの不正アクセス防御
クラウド		インターネットや外部のクラウドサービスを⽰しま す。	インターネット、 SaaSサービス

要素の種類	アイコン	意味	⽤途例
データベース		データベースシステムを⽰します。	顧客データベース、製品データベース
接続線		機器間の物理的または論理的な接続を⽰します。	LANケーブル、無線接続

これらのアイコンは、draw.ioのシェイプパネルで「ネットワーク」カテゴリを選択することで利⽤できます。特に「基本ネットワーク」や「Cisco」などのライブラリには、より詳細な機器アイコンが⽤意されています。かなり便利です。

シンプルなネットワーク構成図の作成例

ここでは、⼩規模オフィスのネットワーク構成図を例に、作成⼿順を解説します。

• • • 1. インターネット（クラウド）の配置: まず、ネットワークの外部接続点として、インターネットを表すクラウドアイコンをキャンバス上部に配置します。

• • • 1. ルーターとファイアウォールの配置: クラウドアイコンの下にルーターアイコンを配置し、さらにその下にファイアウォールアイコンを配置します。それぞれを接続線でつなぎます。

• • • 1. スイッチの配置: ファイアウォールの下にスイッチアイコンを配置し、接続線でつなぎます。

• • • 1. クライアントPCとサーバーの配置: スイッチに複数のクライアントPCアイコンとサーバーアイコン（Webサーバー、ファイルサーバーなど）を接続します。

• • • 1. データベースサーバーの配置: 必要に応じて、データベースサーバーアイコンとデータベースアイコンを配置し、関連するサーバーに接続します。

これで、シンプルなネットワーク構成図が完成しました。機器の配置や接続線の引き⽅を

⼯夫することで、より複雑なネットワークも分かりやすく表現できます。

組織図とマインドマップ: フローチャート以外にも役⽴つ、組織図やマインドマップの作成⽅法を学びます。

draw.ioアドインは、フローチャートやUML図、ネットワーク図だけでなく、組織の構造を視覚化する組織図や、アイデアを整理·発想するためのマインドマップなど、様々なビジネスシーンで役⽴つ図形作成にも対応しています。

組織図の作成

組織図は、企業や組織の階層構造、部⾨間の関係、役職などを視覚的に⽰す図です。⼈事管理、プロジェクトチームの編成、役割分担の明確化などに利⽤されます。

組織図の主な要素:

要素の種類	形状	意味	⽤途例
役職ボックス		役職や個⼈名、部⾨名を ⽰します。	「CEO」「営業部 ⻑」「開発部」
接続線		上位と下位の役職、または同位の役職間の関係を ⽰します。	報告ライン、協 ⼒関係

draw.ioには組織図専⽤のシェイプライブラリが⽤意されています。シェイプパネルの

「ビジネス」カテゴリにある「組織図」を展開して利⽤します。

組織図の作成例:

• • • 1. 最上位の役職を配置: まず、組織のトップとなる役職（例：CEO）のボックスをキャンバス中央に配置します。

• • • 1. 部⾨⻑を配置し接続: CEOの下に、主要な部⾨⻑（例：営業部⻑、開発部⻑、サポート部⻑）のボックスを配置し、それぞれCEOと接続線でつなぎます。

• • • 1. ⼀般社員を配置し接続: 各部⾨⻑の下に、その部⾨に属する⼀般社員のボックスを配置し、部⾨⻑と接続線でつなぎます。必要に応じて、さらに階層を深くすることも可能です。

これで、シンプルな組織図が完成しました。図形の配置や接続線を⼯夫することで、より複雑な組織構造も分かりやすく表現できます。

マインドマップの作成

マインドマップは、中⼼となるテーマから放射状にアイデアを広げていく思考ツールです。ブレインストーミング、情報整理、学習ノート作成などに⾮常に有効です。

マインドマップの主な要素:

要素の種類	形状	意味	⽤途例
中⼼テーマ		マインドマップの中⼼となる最も重要なアイデアや概念。	「プロジェクト計画」「新製品開発」
主要ブランチ		中⼼テーマから直接伸びる主要なアイデア。	「⽬的」「課題」 「解決策」

要素の種類	形状	意味	⽤途例
サブブランチ		主要ブランチからさらに派⽣する詳細なアイデ ア。	主要アイデアの具体的な内容
キーワード		各ブランチに付随する単語や短いフレーズ。	アイデアの要約

draw.ioにはマインドマップ専⽤のシェイプライブラリはありませんが、基本的な図形

（楕円、⻑⽅形）と接続線を組み合わせることで簡単に作成できます。また、draw.ioの

「アドバンス」カテゴリにある「マインドマップ」シェイプも利⽤できます。

マインドマップの作成例:

• • • 1. 中⼼テーマの配置: まず、マインドマップの中⼼となるテーマ（例：「新製品開発」）をキャンバス中央に配置します。楕円形や⻆丸⻑⽅形の図形を使⽤すると良いでしょう。

• • • 1. 主要ブランチの追加: 中⼼テーマから、主要なアイデアを⽰すブランチを放射状に伸ばします。各ブランチの先端に図形を配置し、キーワードを⼊⼒します（例：「ターゲット顧客」「機能」「デザイン」「マーケティング」）。

• • • 1. サブブランチの追加: 各主要ブランチから、さらに詳細なアイデアを⽰すサブブランチを伸ばします。例えば、「ターゲット顧客」から「年齢層」「性別」「ニーズ」といったサブアイデアを追加します。

• • • 1. 装飾と整理: 各ブランチやキーワードに⾊を付けたり、線の太さを変えたりして、視覚的に分かりやすく整理します。関連性の⾼いアイデアを近くに配置し、接続線で関係性を⽰します。

これで、シンプルなマインドマップが完成しました。マインドマップは、アイデア出しや情報整理に⾮常に強⼒なツールです。ぜひ様々なテーマで試してみてください。

この章で紹介したUML図、ネットワーク図、組織図、マインドマップの作成⽅法を習得することで、あなたはdraw.ioアドインをさらに多⻆的に活⽤できるようになるでしょう。次の章では、作成した図をExcel内で最⼤限に活⽤するための⽅法について解説します。

第5章：作成した図を使いこなす

draw.ioアドインを使って様々な図形を作成する⽅法を学んできました。この章では、作成した図をExcelドキュメント内で最⼤限に活⽤するための⽅法に焦点を当てます。具体的には、Excelへの図の埋め込みと更新、ファイルの保存と共有、そして印刷とエクスポートについて詳しく解説します。

Excelへの埋め込みと更新: draw.ioで作成した図を Excelに埋め込む⽅法と、埋め込んだ後の更新⽅法を詳しく説明します。

draw.ioアドインの最⼤の利点の⼀つは、Excelシート内に直接図を埋め込み、必要に応じて簡単に更新できる点です。これにより、データと図を密接に連携させ、常に最新の情報を共有できます。

図のExcelへの埋め込み

draw.ioで作成した図をExcelシートに埋め込む⼿順は⾮常に簡単です。

• • • 1. draw.io編集画⾯での作業: draw.ioアドインの編集画⾯で図の作成または編集を完了します。
      2. 「Insert」ボタンをクリック: 編集画⾯の上部にある「Insert」ボタンをクリックします。これにより、作成した図が現在のExcelシートに画像として埋め込まれます。

• • • 1. Excelシートへの埋め込み完了: 図はExcelシート上の選択されていたセル付近に画像として挿⼊されます。この画像は、Excelの通常の画像と同様に、移動、サイズ変更、回転などが可能です。

埋め込んだ図の更新

Excelに埋め込んだ図は、元のdraw.ioファイルが更新された場合に、簡単に最新の状態に同期できます。これにより、常に最新の図をExcelドキュメントに反映させることが可能です。

• • • 1. 更新したい図を選択: Excelシート上で更新したいdraw.ioの図（画像）をクリックして選択します。
      2. draw.ioアドインのサイドパネル: 図を選択すると、Excelの右側にdraw.ioアドインのサイドパネルが表⽰されます。このパネルには、選択した図に関する情報と操作オプションが表⽰されます。
      3. 「Edit」ボタンをクリック: サイドパネル内の「Edit」ボタンをクリックします。これにより、draw.ioの編集画⾯が開き、埋め込まれた図の元のdraw.ioファイルがロードされます。

• • • 1. 図の編集と保存: draw.ioの編集画⾯で必要な修正や変更を⾏います。
      2. 「Save & Exit」ボタンをクリック: 編集が完了したら、編集画⾯の上部にある

「Save & Exit」ボタンをクリックします。これにより、変更が保存され、Excelシート上の図も最新の状態に更新されます。

注意: 「Save & Exit」ではなく、単に「Save」をクリックした場合、変更は draw.ioファイルには保存されますが、Excelシート上の図は更新されません。 Excelシートに反映させるには、必ず「Save & Exit」をクリックしてくださ

い。

ファイルの保存と共有: 作成した図をdraw.ioファイルとして保存する⽅法、およびチーム内での共有⽅法について解説します。

draw.ioで作成した図は、Excelファイル内に埋め込むだけでなく、独⽴した.drawioファイルとして保存し、クラウドストレージを通じて共有することもできます。これにより、共同編集やバージョン管理が容易になります。

draw.ioファイルの保存

• • • 1. 「File」メニューを開く: draw.ioの編集画⾯で、左上にある「File」メニューをクリックします。
      2. 「Save As」を選択: ドロップダウンメニューから「Save As」を選択します。

• • • 1. 保存場所の選択: 保存ダイアログが表⽰されます。Google Drive、OneDrive、 Dropboxなどのクラウドストレージ、またはローカルデバイスを選択できます。推奨はクラウドストレージへの保存です。
      2. ファイル名の⼊⼒と保存: ファイル名を⼊⼒し、「Save」ボタンをクリックして保存を完了します。ファイルは .drawio 形式で保存されます。

draw.ioファイルの共有

クラウドストレージに保存したdraw.ioファイルは、各ストレージサービスの共有機能を利⽤して、他のユーザーと簡単に共有できます。これにより、チームメンバーとの共同編集やレビューが可能になります。

• • • 1. クラウドストレージのウェブサイトにアクセス: 保存先のGoogle DriveやOneDriveなどのウェブサイトにアクセスします。
      2. 共有したいファイルを選択: 共有したい .drawio ファイルを⾒つけて選択します。
      3. 共有オプションを選択: 右クリックメニューまたはツールバーから「共有」オプションを選択します。
      4. 共有設定の調整: 共有リンクの作成、特定のユーザーへのアクセス権限（閲覧のみ、編集可能）の設定などを⾏います。共同編集を⾏う場合は、編集権限を付与する必要があります。

• • • 1. リンクの共有: ⽣成された共有リンクをコピーし、メールやチャットツールでチームメンバーに共有します。共有されたメンバーは、リンクをクリックすることで draw.ioの編集画⾯を開き、共同で作業を進めることができます。

印刷とエクスポート: 作成した図をPDFや画像ファイルとしてエクスポートし、印刷する際の注意点を説明しま

す。

作成した図は、Excelシートに埋め込むだけでなく、PDFや各種画像ファイルとしてエクスポートし、プレゼンテーション資料や報告書に利⽤したり、印刷したりすることも可能です。

図のエクスポート

draw.ioは、PNG、JPEG、SVG、PDFなど、様々な形式でのエクスポートに対応しています。

• • • 1. 「File」メニューを開く: draw.ioの編集画⾯で、左上にある「File」メニューをクリックします。
      2. 「Export As」を選択: ドロップダウンメニューから「Export As」を選択し、エクスポートしたいファイル形式（例：PNG、JPEG、PDF）を選択します。

• • • 1. エクスポート設定の調整: 選択したファイル形式に応じて、エクスポート設定ダイアログが表⽰されます。例えば、PNGやJPEGの場合は解像度や背景の透過設定、PDFの場合はページサイズや余⽩、テキストの検索可能性などを調整できます。

PNGエクスポート設定例:

PDFエクスポート設定例:

• • • 1. エクスポートの実⾏: 設定を調整したら、「Export」ボタンをクリックし、保存場所とファイル名を指定してエクスポートを完了します。

印刷時の注意点

作成した図を物理的に印刷する場合、いくつかの注意点があります。

解像度: 画像ファイルとしてエクスポートする場合、印刷品質を考慮して⾼解像度

（例：300dpi以上）でエクスポートすることをお勧めします。draw.ioのエクスポート設定で解像度を調整できます。

⽤紙サイズと余⽩: PDFとしてエクスポートする場合、印刷する⽤紙サイズ（A4、B5など）に合わせてページサイズを設定し、適切な余⽩を確保することで、図が途切れたり、端に寄りすぎたりするのを防げます。

⾊の設定: 画⾯で⾒る⾊と印刷される⾊には違いが⽣じることがあります。特に重要な図の場合は、試し印刷を⾏って⾊の再現性を確認すると良いでしょう。

テキストの可読性: ⼩さすぎるフォントサイズは印刷時に読みにくくなる可能性があります。印刷を前提とする場合は、テキストサイズを⼗分に⼤きく設定しましょ

う。

これらのエクスポートと印刷の知識を活⽤することで、draw.ioで作成した図を様々な媒体で効果的に利⽤できるようになります。これで、draw.ioアドインを使った電⼦書籍の全章が完成しました。次の最終章では、全体の統合と最終調整を⾏います。