WEB制作の受注で欠かせない進行管理表や工程をまとめたフローチャート。ブラウザですぐにフローチャートを作り始めることができる便利なツール「diagrams.net」をご紹介します。会員登録も不要で、動きもサクサクです。
作ったチャートや図はjpgやpngなどの画像ファイルでも書き出せるので、WEBサイトのコンテンツの中で説明・解説図にしたり、ブログのアイキャッチを作ったりなどにも使いやすいツールです。
MicrosoftVisioの代替品として使えると書いている記事も多く、無料でこれだけできたら有料ソフトウェアを買わずとも十分とおっしゃる方も多いです。
フローチャートは制作の進行管理をする中で活用すると便利ですが、パワーポイントやエクセルなども含めたOfficeのソフトウェアを使って描いていると結構時間がかかるもの。
ブラウザで使える「diagrams.net」は図を作ることに特化したツールなので、手順がかなり自動化されていて手間が軽減されます。
すごく便利でスピードアップするとSNS上でも話題です。
会員登録なども不要、無料で日本語版が使えます。動作も軽く、ストレスがほぼありません。
使い勝手はOfficeに似ています。
フローチャートの中に描き込む箱（四角などの図形）や矢印がすごくスムーズに追加したり消したりできるので、私もやってみましたがすごく作業が時短されると感じています。
この「diagrams.net」はフローチャート作りに使うのがいちばん便利だと感じましたが、そのほかにもテンプレートがいろいろ揃っていて、様々な図や表を作るときに使えます。
■diagrams.netの主なテンプレート
・フローチャート
・組織図
・ワイヤーフレーム
・レイアウト
・マップ
・間取り図
こういった図やチャートは提案書や見積書に少し付けておくと印象がグッとアップしますよね。デザイナーやエンジニアに描いてもらうほど手間はかけたくない、、、そんなときにもササッと作れたら便利ですよね。
直感的に使いやすいツールですが、導入から図のダウンロードまで、全体の使い方の流れをご説明していきます。
記事を読みながら、ツールを使ってみていただければわかりやすいと思います。
１．ブラウザで表示後、「start」ボタンから開始
ブラウザでdiagrams.netを表示。
トップページにある「start」ボタンから新規ファイルを作成します。
※デスクトップ版もありますが、ブラウザで十分使いやすいです
保存先を決めるアイコンが出てきたら、お好みの場所を選びますが、連携など上手くいかない場合もあるようなので、PC内のドライブを設定するとスムーズです。
２．新規ファイルの作成〜日本語対応していなかった場合の対処法〜
保存先を選ぶと、新規ファイルをつくるか、既存ファイルを開くか選択肢が出てきます。
初めて開いた方は、英語表記になっているかもしれません。
上のボタンが新規作成なので、一旦そこから進み、後に日本語に切り替えます。
３．作成したい図のテンプレートを選ぶ
さまざまなテンプレート（見本）が用意されているので、用途に近いものを選びます。ファイル名も一緒に付けます。
英語版の場合は、どれを選んだらいいかわからないと思うのでとりあえず適当なものを選び、まず日本語に対応させます。
日本語対応できたら「ファイル＞新規作成」からテンプレートを改めて選んでください。
４．【箱をつなげる】のは自動化
チャート内の箱（個々の図）を繋げるのが自動でできます。
箱を動かすと線もいっしょに動いてくれたり、クリックで新規の線が出てきたりします。
Officeなどと比べると動きに対しての反応が非常によいです。
箱や線の追加、削除が簡単です。
５．【エクスポート】したいとき
作ったチャートは、さまざまなファイル形式でエクスポートできます。
上部メニューの「ファイル＞形式を指定してエクスポート」からjpgやPDF、URLなどを選択します。
これだけの形でエクスポートができれば、さまざまな人とシェアするにも便利ですね。
URLでシェアすれば共同編集が可能になります。チーム内での作業がはかどります。
＝＝
ここからはdiagrams.netを使うにあたり、知っておくと便利な機能について５個のTIPSをご紹介します。
６．【画像を登録】して何回も使える【スクラッチパッド】
よく使うアイコン画像などはまとめて一度に登録しておけます。
画像ファイルをドラッグするか、＋アイコンから追加します。
これが地味ですがWord等にはない機能で、かなり便利です。
７．【印刷】ことを前提に【用紙サイズや縦横】を選ぶ
このようなチャートは印刷することも多いと思います。
実際にプリントするときのサイズに合わせて最初から作ると便利ですね。
用紙サイズと縦横を設定できるメニューが右側にありますので、最初の段階で設定しておきます。
用紙サイズはA4のほかにもレター、B4、B5などさまざま。
4:3、16:9などもあるので、パワーポイントに最終貼り付ける場合も便利ですね。
８．【表（テーブル）】【リスト】を追加する
チャートの中にテーブルやリストの挿入もできます。
一からつくらなくてもテンプレとして入っているものが多いので、組み合わせでほとんどが仕上げられます。
９．【＋その他の図形】から【アイコンを追加】
アイコンをセットで追加する機能も備わっています。
iOS、Sitemap、モックアップなどWEB系から、AWS、Networkなど開発系も。
業務ジャンルに合わせたアイコンを入れるとビジュアル面がグッとレベルアップします。
１０．一気にスタイルを変えたいときはHTML制御されているのでcodeを書き直す
矢印やチャート内の箱のデザインを調整するときは、1つのスタイルを修正すれば、残りは選択してコードを一気に書き換えて修正できます。
コピーしたいデザインを選択して右クリック。
「フォーマットを編集」メニューからコードを表示させてコピー。
スタイルを変えたい部分を選択して、「上部メニュー＞編集＞フォーマットを編集」で出てきたコードにコピーしたコードを上書きすれば差し替わります。
コードで制御されているので、そのほかの編集もコードに抵抗がない方なら非常にわかりやすく作業がはかどります。
まとめ
このほかにも多くの機能があり、テンプレートも豊富なため、さまざまな用途に使えます。作図ならこのツール一択でよいのではと感じています。
細かな使い方の解説は公式YouTubeチャンネルが動画で上げてくださっています。英語ではありますが、より深く使ってみたい方は御参考になさってください