手書きホワイトボードを全面リニューアル — 図形・テキスト・ズーム操作に対応しました

ブラウザだけで使える「手書きホワイトボード」を全面リニューアルしました。見た目の変更だけではなく、内部の仕組みから設計し直した大型アップデートです。

手書きホワイトボードは、アカウント登録やインストールなしで使えるブラウザ完結型の描画ツールです。データはお使いのブラウザ内に保存されるため、外部にデータが送信されることはありません。

すでにお使いの方も、ブラウザに保存されているデータはそのまま引き継がれます。

土台から見直したポイント

今回のリニューアルでは、描画の仕組みそのものを再設計しています。

項目	内容
描画エンジン	Canvas API + Pointer Events で統一。マウス・タッチ・ペンすべてに対応
データ構造	ストロークベースに刷新。ペン・図形・スタンプ・テキストを統一的に管理
自動保存	操作のたびにブラウザへ自動保存。ページを閉じても安心です
Undo/Redo	最大50ステップまで戻す・やり直しが可能
エクスポート	PNG画像とSVG（ベクター形式）の2種類でダウンロードできます
複数キャンバス	最大3枚のキャンバスを切り替えて使えます
レスポンシブ	スマートフォンでもツールバーが崩れず操作できます

新機能まとめ

追加した機能をカテゴリ別に紹介します。

描画ツール

機能	内容
ペン	3段階の太さ（細・普通・太）と6色+カスタムカラーで描けます
図形	直線・矢印・四角形・楕円の4種類。Shiftキーで正方形・正円・角度スナップにも対応
テキスト	キャンバス上をクリックしてテキストを入力できます。日本語入力にも対応しています
スタンプ	チェック・スター・ハートなど8種類のアイコンをワンタップで配置できます

編集・操作

機能	内容
消しゴム（部分消し）	こすった部分だけをピンポイントで消せます。線の途中だけ消すことも可能です
消しゴム（ストローク消し）	触れた線をまるごと削除します。素早く整理したいときに便利です
ズームコントロール	ツールバーの -/+ ボタン、Ctrl+マウスホイール、ピンチズームの3通りで拡大・縮小できます
倍率表示とリセット	現在のズーム倍率が常に表示され、クリックで100%に戻せます
背景切り替え	白紙・方眼・罫線の3種類を切り替えられます

キャンバス管理

機能	内容
複数キャンバス	最大3枚まで追加可能。用途ごとに使い分けられます
PNG/SVGダウンロード	描いた内容を画像またはベクターデータとして保存できます
キーボードショートカット	Ctrl+Zで元に戻す、Ctrl+Yでやり直し。PCでの操作がスムーズです

使ってみよう

「手書きホワイトボード」はアカウント登録不要、インストール不要です。ブラウザを開くだけですぐに使い始められます。

ちょっとしたメモ書き、打合せ中のアイデア整理、説明用の図の作成など、「紙とペンの代わり」として気軽にお使いください。

今後も使いやすさの改善を続けていきます。「こんな機能がほしい」などのご要望がありましたら、お気軽にお問い合わせください。