回路図の作成をブラウザで行う｜専用の窓で描き続ける

回路図をブラウザで描きたいと調べると、名前は大量に出てくるのに、どれが自分の用途に合うのかが分かりません。理由は単純で、同じ「回路図が描ける」という言葉が、まったく違う3種類のツールに使われているからです。レポートに貼る図を描きたい人と、部品表とネットリストを出したい人が、同じ検索結果を見ています。この記事は、ブラウザで動く回路図のツールを3系統に分け、ネイティブ版があるものとブラウザだけのものを見分ける方法を示し、そのうえで描く画面をブラウザのタブから独立した窓に移すまでを扱います。

ブラウザで描けるツールは3系統に分かれる

最初に系統で分けると、候補が一気に絞れます。

系統	何ができるか	ネイティブ版	向いている用途
汎用の作図ツール	記号を並べて線でつなぐ	draw.ioはデスクトップ版あり	レポート、説明図、論理回路
EDA系	回路図から部品表とネットリスト、基板へ	EasyEDAはクライアントあり	実際に作る基板の設計
シミュレーター系	描いた回路の動作を解析する	CircuitLabはインストール不要	動作の確認、学習

汎用の作図ツールは、図形を置いて線でつなぐ道具です。draw.ioはブラウザでapp.diagrams.netを開けばそのまま使え、回路の記号や論理回路のブロックを含むシェイプのライブラリを持っています。回路の意味を解釈しないので、動作の検証はできません。そのぶん、レポートや説明資料に貼る図を速く描く用途では強いです。

EDA系は、回路図を「基板を作るための入力」として扱います。EasyEDAはブラウザで動くオンラインエディターを持ち、部品のライブラリと基板の設計、製造への受け渡しまでが一続きになっています。同じサイトにはデスクトップ用のクライアントのダウンロードも用意されており、EasyEDAのダウンロードページに並んでいます。

シミュレーター系は、描いた回路の動作を計算します。CircuitLabは、ブラウザの中で回路を組んで解析できること、導入の作業が要らないことを自ら掲げています。アナログとデジタルの解析、PDFでの図面の書き出しにも触れています。

テンプレートから始める形のツールもあります。

電気回路図のテンプレートから始めることも、ゼロから作成することもできます。テンプレートの編集をクリックし、ニーズに合わせてカスタマイズしてください。電気ダイアグラムツールでは、さらに多くのダイアグラムテンプレートをご利用いただけます。 出典: online.visual-paradigm.com

系統を間違えたときに起きること

系統の選び間違いは、機能が足りないという形では現れません。作業が終わる直前になって、要求されている成果物が出せないという形で現れます。

汎用の作図ツールで基板向けの回路図を描くと、図としては完成します。しかし部品表もネットリストも出ません。基板の設計に渡す段で、EDA系のツールに描き直すことになります。逆に、レポートに1枚貼るだけの論理回路をEDA系のツールで描こうとすると、部品を選ぶ作業と、実在する型番に紐づけていく作業が先に来ます。図が欲しいだけの人には遠回りです。

シミュレーター系は、動作を確かめる目的なら最短です。ただし、そこで描いた図をそのまま印刷物の体裁に整えたいとなると、書き出しの形式と見た目の自由度で制約が出ます。

決め方は1つです。最後に何を出すのかを先に決めます。図か、部品表と基板か、動作の確認結果か。この3つのうちどれが成果物なのかが決まれば、系統は自動的に決まります。

成果物が2つ以上ある場合は、系統をまたぐことを最初から前提にします。動作を確かめてから基板に進む流れなら、シミュレーター系で確認した内容をEDA系で描き直す工程が入ります。これは二度手間ではなく、目的の違う2つの作業です。工程として見込んでおけば、途中で「このツールでは出せない」と気づいて止まることがなくなります。逆に、学習や検討の段階で基板向けのツールを開くと、型番を決める作業に引きずられて、確かめたかった動作の話が進みません。

電気回路図ソフトウェアをお探しですか？VP Onlineは、簡素化された標準シンボルで電気回路デバイス、コンポーネント、相互接続を設計できる便利な電気回路図ツールを備えています。教育用、エンジニアリング用を問わず、VP Onlineの電気回路図作成ツールは完璧に機能します。 出典: online.visual-paradigm.com

ネイティブ版があるものと、ブラウザだけのものを見分ける

ここがMacでの置き方に直接つながります。ブラウザで動くツールは、大きく2つに分かれます。手元に入れるアプリも配布しているものと、ブラウザだけのものです。

draw.ioはデスクトップ版が配布されています。EasyEDAもデスクトップ用のクライアントを用意しています。この2つは、毎日使うならアプリ版を入れる選択肢があります。一方、CircuitLabのように導入が不要であることを売りにしているものや、ブラウザ上での利用を前提にしたテンプレート型のサービスには、Macに入れるアプリがありません。

見分け方は単純です。公式サイトにダウンロードのページがあるかを見ます。無いものは、この先もブラウザで使い続けることになります。そして、ブラウザで使い続けるものこそ、画面の置き場所を決めておく価値があります。

ここで判断を分けるもう1つの軸が、データの置き場所です。ブラウザだけのツールは、描いた図をサービス側のアカウントに置く形が多くなります。手元にファイルとして残したい場合は、書き出しの形式を先に確かめておきます。3か月後に修正が入る図なら、編集し直せる形での控えが要ります。

人に見せるところまでを含めて選ぶ

回路図は描いて終わりにならない図です。上司や先生に見てもらう、基板を作る相手に渡す、報告書に貼る。この受け渡しの段で必要になるものを先に見ておくと、途中で乗り換えずに済みます。

ブラウザで動くツールがはっきり強いのは、リンクで見せられる点です。相手に導入を頼まずに、URLを送るだけで同じ図を見てもらえます。レビューのやり取りが何往復もする場面では、ファイルを送り合う形より速く終わります。CircuitLabのように、図面をPDFで書き出せることを掲げているものもあります。印刷物に載せる予定があるなら、書き出せる形式と解像度を先に確かめておきます。

ここでアカウントの扱いが問題になります。案件ごとに別のアカウントを使っている場合、共有リンクを開いたときに、いま入っているアカウントの権限で見えるかどうかが変わります。同じブラウザで入れ替えていると、リンクを開くたびにサインアウトとサインインが挟まります。窓を分けてアカウントを固定しておけば、この手数が消えます。

ブラウザで描くときに詰まる3点

回路図を描く作業には、ブラウザのタブと相性の悪い性質が3つあります。

• 1回の作業が長い。図を1枚仕上げるまでに数十分から数時間かかり、その間ずっと同じ画面を開いたままにします
• 参照するものが多い。データシート、部品の検索、単位の確認。調べ物のタブが増え続け、描いている画面が埋もれます
• 閉じた瞬間に位置を失う。自動保存があっても、拡大している場所と選択している部品は戻りません

3つ目がいちばん効きます。ブラウザのウィンドウを閉じる操作は、描いている画面も一緒に閉じます。データシートを10枚開いて重くなったブラウザを閉じて整理する、という普通の操作が、作業の中断になります。

逆に言えば、この3つは機能では直りません。画面をどこに置くかで決まる問題です。

画面を独立した窓に移す2つの道

Macで手数がいちばん少ないのは、macOSに含まれている機能です。Appleのサポートページには次のように書かれています。

Webアプリがホームフォルダの「アプリケーション」フォルダに保存され、DockやSpotlightからも開けるようになります。 出典: support.apple.com

Safariで作図の画面を開き、メニューバーの「ファイル」から「Dockに追加」を選ぶだけです。macOS Sonoma 14以降が必要で、追加の費用はかかりません。同じページには、Webアプリが閲覧履歴、Cookie、Webサイトデータ、設定情報をSafariと共有しないこと、名前とアイコンを変えられることも書かれています。

もう1つは、Chromiumのエンジンで窓を作る道です。作図のツールを対象にする場合、この道を選ぶ理由は3つあります。1つ目は、多くのブラウザ版のツールがChromeでの動作を前提に作られていること。2つ目は、窓ごとにログイン状態を分けられるので、会社のアカウントと個人のアカウント、あるいは案件ごとのアカウントを同時に開いたままにできること。3つ目は、Chromeウェブストアの拡張機能をそのまま使えることです。この種の道具でできることの範囲はできることにまとめられており、作る手順は使い方ガイドが順を追って説明しています。

図を描く作業で効いてくる窓の設定

作図の画面を窓にしたあと、効き目が大きい設定が3つあります。

1つ目は、タブバーとアドレスバーを消すことです。画面の縦方向がその分だけ広くなります。回路図は横にも縦にも伸びる図なので、キャンバスの高さは作業の速さに直接効きます。

2つ目は、終了の確認です。⌘Qで確認のダイアログを出せる道具なら、作図の窓では有効にしておきます。描いている途中の終了を1回止められるだけで、やり直しの時間が減ります。

3つ目は、前回のタブと位置の復元です。作図のツールは、開き直したときに一覧のページに戻る作りのものが多く、描いていた図まで毎回たどり直すことになります。復元の設定があれば、この手数が消えます。

• 拡張機能は最小限にする。作図の画面にスクリプトを差し込む種類の拡張機能は、描画の不具合の原因を分かりにくくします
• ポップアップは全部遮らない。サインインと外部認証、図の共有の画面は別の窓で開くことがあります

費用の考え方は料金に出ています。

窓にする基準と、対応サービスの並びから見えること

毎日開くサイトを全部Dockに出すと、タブの山がアイコンの山に置き換わるだけです。基準は3つに絞れます。週に何度も開くか。自分のログインがあるか。開いている間、ほかの作業と混ぜたくないか。

ブラウザで動く作図のツールは3つとも当たります。案件が動いている間は毎日開き、図はアカウントの中にあり、描いている間は調べ物のタブに埋もれたくない。逆にこの基準で落ちるものもはっきりします。記号の意味を調べる解説ページ、1回だけ開くデータシート、部品の型番を検索するだけのサイト。読んで閉じるものはタブのままで足ります。

サイトをアプリにする道具の対応サービスの一覧を見ていくと、作図と設計のサービスが一群として並んでいます。draw.io、Excalidraw、Lucidchart、Miro、Figma。共通点は3つです。ログインが前提であること、1回の利用が長いこと、そして作っている途中の状態を持っていること。ブラウザで動く回路図のツールは、この3条件にそのまま当てはまります。どんなサイトが用意されているかは対応サービス一覧で確かめられ、判断に迷う点があればよくある質問に目を通してから決めると、作ってから戻す手間が省けます。