Excalidrawの使い方｜手書き風の図を作ってPNGで保存する

たとえば「問い合わせが来たら、内容を確認して、担当者に渡す」という流れを人に説明したいとします。文章だけだと伝わりにくいときは、箱と矢印の図にすると見やすくなります。ここではExcalidrawを開いて、図を1枚作り、PNG画像として保存するところまで進めます。

準備するもの：ブラウザとマウスだけ

公式サイトを開けば始められます。アカウント登録やソフトのインストールは不要です。マウスで図形を置き、文字を入力します。きれいな製図ではなく、考えを気軽に伝えるための図に向いています。

箱3つと矢印で、作業の流れを描く

1. 1公式サイトを開く

   画面に白い紙のような場所が表示されます。まずは説明したい内容を3つに分けます。例：「問い合わせ」→「内容を確認」→「担当者へ渡す」。

2. 2四角を3つ置く

   図形のツールから四角を選び、白い場所を3回クリックまたはドラッグして箱を置きます。大きさや場所は後から変えられるので、最初はおおまかで大丈夫です。

3. 3箱の中に短い言葉を入れる

   箱を選んで文字を入力します。「問い合わせ」「内容を確認」「担当者へ渡す」のように、ひと目で意味がわかる短い言葉にします。文字が長ければ、箱を広げるか、言葉を短くします。

4. 4矢印で順番をつなぐ

   矢印のツールを選び、最初の箱から次の箱へ、さらに3つ目へと線を引きます。線が箱の近くに吸い付く位置につながったことを確認します。うまくいかなければ、取り消して引き直せます。

5. 5PNG画像として保存する

   左上のメニューから「Export image（画像を書き出す）」を選び、PNGを選択して保存します。PNGは、PowerPointやGoogleドキュメント、チャットに貼り付けやすい画像形式です。拡大しても輪郭をきれいに保ちたい場合はSVGも候補です。

あとで直すなら、画像だけで終わらせない

PNGは見る・貼るのに便利ですが、あとから図形や文字を直すための作業データとは別物です。編集を続けたい図は、Excalidrawの作業データもファイルとして保存しておきましょう。ブラウザに残るデータは、設定やブラウザの状態によって消えることがあります。大事な図をブラウザ内だけに置かないでください。