AI
Excalidraw使い方完全ガイド|手書き風作図の定番ツール

Excalidraw使い方完全ガイド|手書き風作図の定番ツール

オープンソースラボ編集部2026年6月12日

Excalidrawは、ブラウザだけで動く手書き風バーチャルホワイトボードです。アカウント登録不要で即座に使え、フローチャートや構成図、ワイヤーフレームをラフなタッチで素早く描けます。この記事では、Excalidrawの使い方・主な機能・料金・デメリットまでを網羅的に解説します。

ExcalidrawのGitHubリポジトリ

Excalidrawとは?基本概要

Excalidrawは、手描き風のイラストや図を作成できるオープンソースのバーチャルホワイトボードツールです。TypeScriptで開発されており、GitHubスター数は**125,137(2025年時点)**を超える、世界的に人気の高いOSSです。ライセンスはMITで、商用利用・改変・再配布が自由に行えます。

最大の特徴は「描きかけ感」のある手書き風スタイルです。直線や四角形、矢印などの図形がわずかに歪んだラフなラインで描画されるため、「まだ検討中のアイデア」「ざっくりとした設計」を伝えるのに最適です。MiroやFigJamといった商用ホワイトボードツールの軽量な代替として、開発チームや教育現場で広く利用されています。

公式サービスはexcalidraw.comから無料で利用でき、セルフホストも可能です。

項目内容
開発言語TypeScript
ライセンスMIT
GitHubスター数125,137(2025年時点)
公式URLexcalidraw.com
アカウント登録不要(基本機能)
日本語対応フォント・UIともに対応

Excalidrawの主な特徴・できること

Excalidrawは「シンプルさ」を設計思想の中心に置いており、余計な機能を削ぎ落とした直感的なUIが魅力です。主な機能を以下にまとめます。

手書き風の図形描画

図形・矢印・テキスト・フリーハンドなど基本的な描画要素が揃っています。すべてのラインがわずかに揺らいだ手書きスタイルで描かれるため、温かみのある資料作成が可能です。

リアルタイム共同編集

URLを共有するだけで複数人がリアルタイムで同じキャンバスを編集できます。通信はエンドツーエンド暗号化(E2EE)に対応しており、図の内容がサーバーに平文で残らない設計です。セキュリティを重視するチームにも安心して利用できます。

ライブラリ機能

よく使う図形パーツをライブラリに登録して再利用できます。コミュニティが作成した図形パック(AWSアーキテクチャ図のアイコンセットなど)も公開されており、即戦力で活用可能です。

エクスポート機能

作成した図はPNG・SVG形式でエクスポートできます。SVGはベクター形式のため、拡大・縮小しても劣化しません。また、.excalidraw形式(JSON)で保存すれば、後から再編集することも容易です。

Reactコンポーネントとして組み込み可能

Excalidrawはnpmパッケージとして提供されており、自社のWebアプリにホワイトボード機能を組み込むことができます。NotionやJupyter Notebookなど多くのツールで採用実績があります。

Excalidrawのコントリビューター一覧

Excalidrawの料金・ライセンス・商用利用

ExcalidrawはMITライセンスで公開されており、無料で商用利用できます。ソースコードの改変・再配布も自由で、セルフホスト版を社内システムに組み込むことも問題ありません。

公式サービス「Excalidraw+」は有料プランとして提供されており、クラウド保存や高度なコラボ機能が追加されます。ただし、基本的な作図・共同編集機能はすべて無料のexcalidraw.comで利用可能です。

プラン料金主な機能
無料(excalidraw.com)無料作図・共同編集・エクスポート
Excalidraw+(有料)有料(要確認)クラウド保存・高度なコラボ機能
セルフホスト無料(MIT)社内設置・カスタマイズ自由

中小企業や個人が費用をかけずに利用を始めるなら、無料プランで十分な機能が揃っています。

Excalidrawの使い方・導入方法

ブラウザで今すぐ使う(推奨)

最も手軽な方法は、excalidraw.comにアクセスするだけです。インストール不要・アカウント登録不要で、開いた瞬間からキャンバスが使えます。

  1. ブラウザでexcalidraw.comを開く
  2. 左側のツールバーから図形を選ぶ
  3. キャンバス上にクリック・ドラッグで描画
  4. 共同編集は「Live collaboration」ボタンからURLを発行
  5. 完成したら「Export image」でPNG/SVGで保存

VSCode拡張機能で使う

Visual Studio Codeの拡張機能「Excalidraw」をインストールすると、VSCode上で.excalidrawファイルを直接開いて編集できます。ソースコードと同じリポジトリで図を管理したい開発者に便利です。

Dockerでセルフホストする

社内ネットワーク内に設置したい場合はDockerを使ったセルフホストが可能です。GitHubリポジトリの手順に従い、数コマンドで起動できます。

docker run -p 3000:80 excalidraw/excalidraw

Excalidrawの活用シーン

Excalidrawのスター数推移グラフ

Excalidrawはさまざまな場面で活躍します。具体的なユースケースを紹介します。

システム設計・アーキテクチャ図

サーバー構成やマイクロサービスの関係を素早くスケッチするのに最適です。ラフなタッチが「まだ議論中の段階」を明示するため、設計レビューの初期段階で重宝します。

ブレインストーミング・マインドマップ

テキストボックスと矢印を組み合わせるだけで、ざっくりとしたアイデアマップを作れます。チームで画面共有しながらリアルタイム編集することで、リモートワークの壁打ちにも活用できます。

ワイヤーフレーム作成

WebサイトやアプリのUIレイアウトをラフスケッチする用途に向いています。完成度の高いモックアップを作る前段階として、ステークホルダーとの認識合わせに使えます。なお、より精緻なUI設計にはFigmaなどの専用ツールが適しています。

教育・研修資料

手書き風のイラストは説明図として親しみやすく、技術研修や勉強会のスライド補足資料としても使われています。動画コンテンツ制作の補助としてremotionと組み合わせて図を流用する例もあります。

ドキュメント埋め込み

NotionやMarkdownドキュメントにエクスポートした画像を貼り付けることで、ドキュメントの見栄えを向上させられます。obs-studioを使った配信・録画コンテンツの解説図としての用途もあります。

Excalidrawのデメリット・注意点

Excalidrawは優れたツールですが、用途によっては向かない点もあります。導入前に以下の点を確認してください。

デザイン品質には限界がある

手書き風スタイルはあくまで「ラフなスケッチ」向けです。クライアントへの最終提案資料や、印刷物・マーケティング素材には向いていません。高品質なビジュアルデザインにはFigmaやstable-diffusion-webuiなどの専用ツールを検討してください。

大規模・複雑な図には不向き

要素数が増えると動作が重くなる場合があります。また、大規模なER図やUML図を細かく管理したい場合は、専用のダイアグラムツール(draw.io等)の方が適しています。

無料版のクラウド保存機能は限定的

無料のexcalidraw.comには永続的なクラウド保存機能がありません。ブラウザを閉じる前に必ずファイルをエクスポート・保存する習慣が必要です。チームで継続的に図を管理したい場合はExcalidraw+かセルフホストを検討してください。

オフライン利用は限定的

PWA(プログレッシブウェブアプリ)としてオフライン利用も可能ですが、共同編集機能はインターネット接続が必要です。

テンプレート機能がシンプル

商用ツールのMiroやFigJamと比べると、テンプレートやスティッキーノートなどのファシリテーション向け機能は限定的です。ワークショップ運営には物足りなさを感じる場面もあります。

よくある質問

Q. Excalidrawは日本語に対応していますか?

はい、日本語フォントを含む複数のフォントに対応しています。テキスト入力で日本語を直接入力でき、UIの一部も日本語化されています。手書き風の日本語フォントも利用可能です。

Q. 商用利用は無料でできますか?

はい。ExcalidrawはMITライセンスで公開されているため、商用利用・改変・再配布が無料で行えます。社内ツールへの組み込みや、顧客向けサービスへの統合も問題ありません。

Q. Excalidrawをオフラインで使うことはできますか?

ブラウザのPWA機能を使ってオフラインでも基本的な作図は可能です。ただし、リアルタイム共同編集にはインターネット接続が必要です。完全オフライン環境での利用にはDockerを使ったセルフホスト版が適しています。

Q. MiroやFigJamとどう違いますか?

最大の違いは「無料かつアカウント不要で始められる点」と「手書き風スタイル」です。MiroやFigJamはテンプレートやファシリテーション機能が充実していますが、有料プランへの誘導が強い傾向にあります。Excalidrawはシンプルさを重視するチームや、個人利用に向いています。なお、ノードベースのビジュアルツールに興味がある場合はComfyUIも参考になります。

まとめ

Excalidrawは、アカウント不要・無料・オープンソースという三拍子が揃った手書き風作図ツールです。GitHubスター125,000超という数字が示すとおり、世界中の開発者・デザイナー・教育者に支持されています。

MITライセンスによる商用利用の自由度の高さ、エンドツーエンド暗号化による安全な共同編集、ReactコンポーネントとしてのWebアプリ統合など、ビジネス用途でも十分実用的な機能を備えています。

一方で、高品質なビジュアルデザインや大規模なダイアグラム管理には向かない点も正直に評価しておく必要があります。「ざっくり伝える」「チームで素早くアイデアを共有する」という用途であれば、Excalidrawは最良の選択肢のひとつです。

まずはexcalidraw.comにアクセスして、今すぐ試してみてください。詳細な機能比較や導入事例はExcalidrawのツール詳細ページでも確認できます。

この記事で紹介したOSS

他の記事も読む

Let's Build Together

OSS導入、自社だけで悩まない。

ツール選定から構築・運用・AI活用まで、オープンソースラボ運営元のClasslessが伴走します。初回のご相談は無料です。