ホワイトボードとは？
Whiteboard はスケッチ、図解、ブレインストーミングに使える無料のホワイトボードです。ペンで自由に書き、図形やテキストラベルを並べ、選択ツールで自在に配置できます。PNG や SVG でエクスポートできるほか、プロジェクト全体を JSON に書き出して別日に再編集することも可能です。
ツールバーにはペン、図形(四角、円、三角形、ひし形、直線、矢印)、テキスト、付箋、消しゴム、選択ツールが揃い、選択ツールで既存要素の移動・リサイズ・削除に加え、図形が重なったときの前面/背面の入れ替えも行えます。描画前に線色、塗り色、線幅を指定します。プロジェクトは PNG、SVG、JSON で出力可能で、保存した JSON を読み込めばキャンバスは要素ごとに完全復元されます。
使い方
- ツールバーから描画ツールを選びます。フリーハンドはペン、四角・円・三角形・ひし形・直線・矢印は図形ツール、ラベルはテキストツール、付箋ツールでカラフルなアイデアカードを置き、すでに描いた要素の移動・リサイズ・前後の並べ替えは選択ツールで行います。
- キャンバスをドラッグして描画します。線の色、塗り色、太さはツールバーから引き継がれるので、次の要素を描く前に設定しておきます。
- 画像共有なら PNG、Illustrator や Figma で続きを編集してほしいなら SVG、後日続きを描くなら JSON プロジェクトとして保存します。
使用するタイミング
- Figma を開くまでもない、サクッとワイヤーフレームやフローチャートを描きたいとき。
- 画面共有しながら同僚にシステムを説明し、話しながら図を描き加えていきたいとき。
- タブレットで授業をして、図形に注釈を付け、最後にエクスポートして生徒の教材にしたいとき。
結果
決済フローを描き起こしています。「カート」を表す四角を描き、ラベルを入力、矢印で「決済」の四角へつなぎ、さらに緑塗りの「完了画面」の円へつなぎます。SVG で書き出してデザイナーに渡し、Figma へ貼り付けてもらいます。
よくある質問
- 作業を保存して後日続きを描けますか?
- できます。Save Project からダウンロードできる JSON ファイルに、キャンバス上のすべての図形・線・テキストが含まれます。再度読み込ませると元の状態にそのまま戻ります。サーバーに保存される情報は一切ありません。
- PNG、SVG、JSON のエクスポートはどう違いますか?
- PNG はピクセル画像で、スクリーンショットやチャット共有向き。SVG は図形ごとに編集できるベクター形式で、デザイナーに続きを頼むときに使います。JSON はプロジェクトファイルで、後で再度開いて編集できる唯一の形式です。
- ズームすると手描き線がギザギザに見えるのはなぜ?
- PNG は画面のピクセル単位で書き出されるため、拡大すると階段状の縁が見えます。SVG で書き出せばベクターパスとして保存されるので、どんなサイズに拡大しても線が滑らかです。
- ホワイトボードに画像を追加できますか?
- はい。「画像を追加」ボタンを押すか、ファイル選択ダイアログで PNG・JPEG・WebP・GIF・SVG を選ぶと、画像がキャンバスの中央に配置され、ドラッグや拡大縮小で自由に扱えます。ファイルは端末内に留まり、サーバーへアップロードされることはありません。
- 描いた内容はサーバーへ送られますか?
- 送られません。描画、アンドゥ、エクスポートはすべてページ内の Canvas 要素で完結し、タブを閉じればメモリから消えます。任意でダウンロードする JSON が、作業内容を端末外に持ち出す唯一の手段です。