パソコンで図を作成する｜ブラウザの作図ツールを窓にする

パソコンで図を作成したい、と考えて検索すると、たいていExcelの図形機能かSmartArtの解説に行き着きます。そこで詰まるのは、描きたいものがExcelの得意な範囲から外れているときです。組織図なら間に合う、フローチャートもなんとかなる、けれどシステムの構成図や画面遷移の図になると、四角と線を並べる作業そのものに時間が溶けていきます。この記事では、図を作る道具がいま3つの系統に分かれていることを整理し、どれを選ぶかの基準と、選んだあとに出てくる「毎回探す」問題の始末までを見ていきます。

図を作る道具は、3つの系統に分かれている

検索結果が混線して見えるのは、まったく違う3種類の道具が同じ検索語に集まっているからです。整理すると次のようになります。

1つめは、すでに手元にあるOfficeの図形機能です。ExcelやWord、PowerPointに入っている図形、SmartArt、グラフの作成機能がここに入ります。追加の費用はかからず、作った図はそのまま文書の中に収まります。

2つめは、ブラウザで動く作図ツールです。ブラウザを開いてログインすれば使えるもので、図の形式ごとに部品が用意されており、共同編集と履歴の管理が前提になっています。保存先はクラウドで、リンクを渡せば相手が見られます。

3つめはCADです。寸法が意味を持つ図、つまり建築の平面図や機械の部品図を描くための道具で、縮尺と寸法線が中心にあります。見た目が図であるという点しか共通していないので、前の2つとは比べません。

この記事が扱うのは1つめと2つめの分かれ目です。寸法が意味を持つ図を描くなら答えはCADで、そこは迷う場面ではありません。

Officeの図形機能で足りる範囲

まず、手元の道具で足りるかどうかを先に判断したほうが早いです。Excelには図形の描画に加えて、組織図や手順図を組み立てるSmartArt、データからグラフを作る機能が入っています。グラフについては、候補を見比べながら選べる機能も用意されています。

この「おすすめグラフ」の機能を使えば、実際のグラフのイメージを見比べながらグラフを作成できます。手順も少なく済むので、エクセルでグラフを多用するような作業をする時にはとても役に立つでしょう。 出典: noa-wa.co.jp

数値から図を起こす作業は、Officeの得意な領域です。数値が同じファイルの中にあるので、値を直せば図も追随します。ここを外部のツールに持ち出すと、数値と図が二重管理になり、いずれずれます。

Officeで足りるかどうかは、次の3点で見分けられます。

• 図に入る要素が20個以下で、あとから大きく組み替える予定がない
• 数値の表とセットで、同じファイルに収めたい
• 共同編集は不要か、あるいはファイルをやり取りする形で足りる

3つとも当てはまるなら、新しい道具を探すより図形機能を覚えるほうが速いです。逆に、要素が増えて線の引き直しが発生し始めたら、そこがOfficeの限界です。図形機能は要素の位置を自分で決める作りなので、要素が増えるほど配置の手間が線形に増えます。ブラウザの作図ツールは接続の関係を保持するので、要素を動かしても線が追いかけます。この差が効いてくる境目が、だいたい要素20個から30個のあたりです。

ブラウザの作図ツールは、目的別に4種類ある

ブラウザで動く作図ツールをひとまとめに「おすすめ」として並べると選べません。何を描くかで系統が分かれているので、そこで切ります。

構成図・フローチャートを描くもの

四角と線で関係を示す図の代表格がdraw.ioです。公式サイトには無料であること、登録が不要であること、オープンソースであることが並んで書かれており、ライセンスはApache 2.0と明記されています。ブラウザで使うオンライン版と、手元に保存するデスクトップ版の両方が用意されています。上位プランを用意せず機能を絞らない方針も明記されているので、途中で費用の判断が入ってきません。

保存先を自分で決められるのが、この系統の特徴です。クラウドの保管先を指定する使い方と、手元にファイルとして保存する使い方のどちらも選べます。社外に出せない構成図を扱う場合、この選択肢があるかどうかは実務上の分かれ目になります。

資料に載せる図を作るもの

見せるための図、つまり提案書や説明資料に載せる図を作るならCanvaの系統です。無料プランは0円で、ドラッグ操作の編集画面、160万点以上のテンプレート、1つのブランドキット、クラウドストレージ5GBが含まれると記載されています。有料のCanvaプロは1人あたり年額11,800円、Canvaビジネスは1人あたり年額18,800円です。

テンプレートから始める作りなので、白紙から線を引く必要がありません。逆に、要素の関係を厳密に示したい図には向きません。見せ方を整える道具と、関係を記述する道具は別物です。

図を貼って議論するもの

打ち合わせの場で図を囲んで話すならMiroの系統になります。無料プランは編集可能なボードが3つまでで、Starterは1人あたり月額8ドル、Businessは年払いで1人あたり月額20ドルと記載されています。

無料プランのボード数が3つという上限は、この系統の性質をよく表しています。ボードは作って捨てるものではなく、議論の履歴として残り続けるものだという前提です。図を作る道具としてより、図を置き場所ごと共有する道具として見たほうが判断を誤りません。

文書の中に図を差し込むもの

Googleドキュメントやスライドの中で図を組み立てるなら、Google 図形描画が同じ系統に入ります。Googleアカウントがあれば追加費用なく使え、保存先はGoogleドライブです。ブラウザについては、Googleドライブとそのエディタを快適に使うために、直近2バージョンのいずれかへブラウザを更新することが案内されています。

選び方は、3つの問いで決まる

4種類を前にして迷うのは、比較する軸が定まっていないからです。次の3つを順に答えると、候補は1つか2つに絞れます。

1つめの問いは、図が主役かどうかです。図そのものが成果物なら作図に特化した道具、文書や資料の一部なら文書側の機能で足ります。ここを取り違えて作図ツールで資料を作ると、書き出しと貼り付けの往復が毎回発生します。

2つめの問いは、誰が直すかです。自分だけが直すなら手元に保存できるものが速く、複数人が同時に直すならクラウドで共同編集できるものが必要になります。共同編集が要るなら、無料プランのボード数や書類数の上限が、そのまま使える期間の上限になります。

3つめの問いは、図がどこに保存されるかです。社外に出せない内容を含む図なら、保存先を自分で選べるかどうかが最初の条件になります。オープンソースで手元に保存できる道具が候補に残るのは、この条件が効く場面です。

描きたいもの	向いている系統	費用の目安	保存先
数値のグラフ	Officeの図形機能	手元のOfficeに含まれる	同じファイル内
構成図・フローチャート	専用の作図ツール	無料のものがある	クラウドまたは手元
資料に載せる図	デザイン系のツール	無料プランあり	クラウド
議論しながら描く図	ボード系のツール	無料はボード数に上限	クラウド
文書内の簡単な図	文書側の描画機能	アカウントがあれば無料	文書と同じ場所
寸法が意味を持つ図	CAD	製品により幅が大きい	製品の形式に依存

道具を決めたあとに残る、毎日の手間

道具が決まると、次に出てくるのは作図そのものではない不便です。ブラウザの作図ツールを選んだ場合、その画面はブラウザのタブになります。そして作図は短時間で終わる作業ではありません。1つの図を仕上げるのに30分から1時間、直しが入れば何日にもわたって同じ画面に戻ります。

その間、同じブラウザは調べ物にもメールにも使われます。タブは右へ増えていき、作図の画面の位置は動き続けます。タブには決まった置き場所がなく、専用のキーボード操作もありません。作業に戻るには、まずブラウザを前面に出し、そのうえで増えたタブの中から目当てのものを探すことになります。かかっているのは読み込みの時間ではなく、探す時間です。

失敗の形も決まっています。

• 数日開いたままのタブが、整理のついでに閉じられる
• ブラウザを再起動すると復元はされるが、位置がまた変わる
• 作図中に別のタブの通知やポップアップで画面を割られる
• 仕事用と個人用でアカウントを分けていると、ログインの切り替えが毎回必要になる

最後の1つは、タブの並べ方では解けません。ブラウザは1つのプロファイルにつき1サイト1セッションしか保持しないため、同じ作図ツールを2つのアカウントで同時に開いておくことができない仕組みです。社内の図と、業務委託先の図を別アカウントで管理している場合、ここが毎日の摩擦になります。

作図の画面をDockに出す

macOS Sonoma 14以降のSafariには、開いているWebページを独立したアプリとして保存する機能があります。手順はメニューバーの「ファイル」から「Dockに追加」を選ぶだけで、共有ボタンからも選べます。名前を入力して追加を押すと、ホームフォルダのアプリケーションフォルダに保存され、DockやSpotlightから開けるようになります。

Webアプリは、Safariとは別に機能します。閲覧履歴、Cookie、Webサイトデータ、設定情報はSafariと共有されません。 出典: support.apple.com

Cookieが共有されないという性質が、さきほどのアカウントの問題をそのまま解きます。窓を2つ作れば、仕事用と個人用のアカウントで同時にログインしたままにできます。

作ったあとに触っておきたい設定が3つあります。窓を開いてメニューバーのアプリ名から設定を選ぶと、次の項目が出てきます。

• アプリケーション名。「作図」「構成図」のように、自分が探すときの言葉にしておくとSpotlightで当たりやすくなります
• アプリケーションURL。既定のままではトップページが開きます。作図の一覧ページを開いた状態で「現在開いているページを指定」を押すと、以後はその画面から始まります
• ナビゲーションコントロールを表示。作図中に戻る・進むボタンが不要なら隠せます。画面が広くなります

作図ツールは画面の広さがそのまま作業のしやすさになるため、ナビゲーションの表示を切れるのは見た目以上に効きます。

Chromeを使っている場合は、三点メニューの「キャスト、保存、共有」から「ページをアプリとしてインストール」を選ぶ形です。作られる窓のログイン状態は元のChromeプロファイルに従うため、アカウントを分けたいなら先にプロファイルを分ける必要があり、そこが手間の分かれ目になります。

どの画面を窓にするか、3つの材料で決める

窓が作れると分かると、次は何を窓にするかが問題になります。全部やるとDockが混雑し、探す手間が別の場所に戻ってきます。判断の材料は3つで足ります。

ひとつは開く回数です。1日に3回以上開くなら、探す時間の合計が無視できなくなります。ふたつめは1回の滞在時間です。作図のように長く留まる画面は、他のタブと同じ窓にいる理由がありません。みっつめは、別のログインが必要かどうかです。

作図ツールはこの3つのうち、少なくとも2つに当てはまります。滞在時間が長く、直しのために何日も戻る画面だからです。逆に、年に数回しか開かない道具は窓にする必要がありません。

道具の側を見ると、標準機能で足りる範囲と専用のツールが要る範囲は分かれます。窓が1つか2つで、名前とアイコンにこだわらないなら、Safariの「Dockに追加」で十分です。窓が増えてサイトごとにアイコンと名前を揃えたい、窓ごとに拡張機能や通知の扱いを変えたい、という段階になると専用ツールの領分になります。どこまで扱えるかはできることに整理されており、実際の作り方は使い方ガイドで手順として追えます。

窓にすると効く画面の実例は、すでに作られている顔ぶれを見るのが早道です。作図や設計の道具、業務用の管理画面、連絡の道具といった分類で並んだ対応サービス一覧を眺めると、自分のブラウザで長居しているものと重なるはずです。300以上のプリセットからすぐ作れるので、URLを調べ直す手間もかかりません。費用の目安は料金にあり、標準機能との使い分けで迷う点はよくある質問に集まっています。

まず作図ツールの1つだけを窓にして、1週間使ってみるのが確実です。確かめる点は3つで、Macを再起動してもログインが残っているか、書きかけの図がそのまま開くか、画像やフォントの読み込みに不具合が出ていないかです。この3つが通れば、作図の場所として固定できます。