Excalidrawの使い方｜無料の手描き風ホワイトボードで図・画面案を作る

今回の仕上がり

長方形・文字・矢印を置いた、画面の下書きです。編集画面で確認した結果を見せています。画像ファイルとしての保存完了を示すものではありません。

図を「清書する」前に、考えを並べる

Excalidrawは、箱・矢印・文字などをキャンバスに置くツールです。線に少し揺らぎがあり、ノートに描いたような見た目になります。図解、画面の下書き、処理の流れなど、関係を人に説明したい場面に向いています。

ゲームそのものを実行する道具でも、ボタンを置くだけでアプリが完成する道具でもありません。今回は「アイデア → 小さく試す」という図を、画面上の操作だけで描きました。

作り手が欲しかった、小さな図解ツール

2020年の制作記録で、Christopher Chedeau様は、ブログの図を作るための手描き風ツールを開発し始めた経緯を振り返っています。描き始めるまでの手間を少なくしたい、という考えも述べています。

今は一人だけの制作物ではなく、チームやオープンソースの貢献者によって開発が続けられています。個人の必要から始まった道具が、ほかの作り手の協力で広がった例として紹介したい作品です。

開発開始時の投稿です。2026年現在の流行や利用者数を示すものではありません。

長方形、文字、矢印で最初の一枚

以下はPCブラウザの日本語表示で確認した手順です。画面やキー表記はOS・更新で変わることがあります。

STEP 02

上の「長方形」を押してドラッグする

上のツールバーの四角いアイコンを押します。空白の場所でマウスを押したまま右下へ動かし、離すと箱ができます。左側の設定には線の色、背景、太さなどが出ます。まずは初期設定のままで十分です。

「編集用の保存」と「見せる画像」は別

STEP 05

左上のメニューから保存・出力へ

後で直すための入口は名前を付けて保存...。人に見せる画像を作る入口は画像のエクスポート...です。出力画面ではPNG・SVG、背景、スケールなどを選べます。保存先の確認ダイアログが出た場合は、内容を確認して保存してください。

画面上では、描画データがブラウザのストレージに保存される一方、予期せず消える場合があるという注意が表示されました。タブが残っていることをバックアップだと思わず、編集用ファイルも手元に保存するのが安心です。

「シーンを埋め込む」は、画像内に編集用データを含める設定です。公開する画像に不要な編集データを含めないよう、内容と設定を確認しましょう。外部画像を図に貼る場合、その画像の利用条件は別途確認が必要です。

箱二つの図でも、説明の順番を考えやすくなる

今回の操作でよかったのは、図形の位置を動かしながら、説明の順番を考えられること。完成図を目指さず、箱と矢印だけでも意図が見えるようになりました。これは当サイトの操作範囲での感想です。

一方、細かい寸法や色を決める段階まで同じ道具で済ませようとすると、考えを整理する下書きなのか、完成画面の設計なのかが曖昧になります。まず構造を描き、その後は実画面で確かめる使い分けがよさそうです。スマホでの描画、共同編集、Excalidraw+の有料機能は今回検証していません。

出典と確認範囲

確認日：2026年9月27日。PCで長方形、日本語テキスト、矢印、選択と画像出力画面を操作しました。編集用ファイル・PNGの保存完了、共同編集、スマホ描画は未確認。スクショは実画面で、生成AI画像ではありません。

• Excalidraw公式アプリ
• 公式GitHub・機能案内
• 公式MITライセンス（Copyright © 2020 Excalidraw。ソフトの再配布条件と、外部画像の権利は別です）
• 発起人の制作記録

作者や開発チームの監修・推奨を受けた紹介ではありません。