【無料】ブラウザホワイトボード｜手書き・図形・文字をブラウザで描ける

Webミーティングで図を使ってカンタンに説明したいとき、手書きのメモを画像として残したいとき、ちょっとしたお絵描きで遊びたいとき。そんなときに、ブラウザだけでさっと描けるホワイトボードがあると便利です。

「ブラウザホワイトボード」とは

ブラウザホワイトボードは、ペンや図形、文字、スタンプで描いて、PNG か SVG の画像で保存できる無料のホワイトボードです。もともとは、シンプルなホワイトボードをブラウザで使いたくて作ったのが始まりです。

画面の上に道具の帯があり、その下の描く場所（キャンバス）に描きます。会員登録は要りません。リンクフリーです。

「ブラウザホワイトボード」の使い方

3つのステップで使えます。

描く道具

図形は、ボタンの横の▼から「直線」「矢印」「四角」「楕円」を選べます。Shift を押しながら引くと、四角は正方形に、楕円は正円になり、直線と矢印は角度がそろいます。

スタンプは、星のボタンを押すと8つの中から選べます。選んでからキャンバスを押すと、その場所に置かれます。

文字の入力では、Shift + Enter で改行でき、Esc でやめられます。文字の大きさは、太さのボタンで変わります。

消しゴムは、ボタンの横の▼で「部分消し」と「ストローク消し」を切りかえられます。▼で選んだあとは、消しゴムのボタンが選ばれた色（灰色）になっているかを見てから消してください。なっていないときは、消しゴムのボタンを押します。部分消しは、ペンの線ならなぞった所だけを消します。ストローク消しは、触れた線をひと筆まるごと消します。図形・文字・スタンプは、どちらでも触れた物がまるごと消えます。

描きまちがえたときは、帯の曲がった矢印のボタン（元に戻す・やり直す）で、元に戻したり、やり直したりできます。キーボードでは Ctrl + Z で元に戻し、Ctrl + Y でやり直せます（Mac では ⌘ + Z と ⌘ + Y）。ページを開き直すと、それより前の操作は元に戻せません。

表示・背景・キャンバス

「−」と「＋」で、表示を50%から300%まで縮めたり大きくしたりできます。Ctrl を押しながらマウスのホイールを回しても変わります。まん中の数字を押すと100%に戻ります。

背景のボタンを押すたびに、白紙、方眼、罫線と切りかわります。背景は保存した画像にも入ります。

キャンバスは、下の「＋」で3枚まで増やせます。キャンバスごとに道具の帯とメニューがあります。

保存と消し方

描いた物は、描くたびに、いま使っているブラウザへ自動で残ります。残すためのボタンやスイッチはありません。同じブラウザでもう一度ページを開くと、そのまま出ます。ただし、描いてすぐページを閉じると、最後に描いた分が残らないことがあります。

ブラウザのアップデートなどで消えることもあるので、残しておきたい絵は、メニューの「PNG保存」か「SVG保存」で画像にしておいてください。PNG と SVG は、表示の倍率にかかわらず、100%のときに見える範囲で保存されます。縮小して、その外側に描いた物は入りません。

人の名前などを描いたときは、使い終わったら消しておきましょう。メニューの「クリア」と「キャンバス削除」は、元に戻せません。残したい絵は、先に画像で保存しておいてください。消すときは、次の順に進めます。

1. ほかのタブでもこのページを開いているときは、そのタブを先に閉じる（開いたままだと、そのタブを触ったときに古い絵が書き戻されます）
2. キャンバスごとに、メニューの「キャンバス削除」を押して「実行」を押す（最後の1枚は、中身が消えて白紙で残ります）
3. 1秒ほど待ってからページを閉じる（すぐ閉じると、消す前の絵がブラウザに残ることがあります）

このツールは、描いた内容をどこにも送りません。それでも、描いた物はこのブラウザに残るので、個人情報などは保存したままにしないようにご注意ください。

まとめ

ブラウザホワイトボードでできることと、気をつけることを整理します。

---

ほかにも、ブラウザで使える無料のツールをブラウザツールの一覧にまとめています。Webサイトやシステムの制作のご相談は、お問い合わせフォームからお願いします。