お絵描きボード（無料・登録不要・ブラウザ完結）
Canvas APIによるブラウザ完結のお絵描きボード。ペン/直線/矩形/円/消しゴム/フィル6ツール・カラーピッカー・線太さ1〜50px・透明度・アンドゥ/リドゥ30ステップ・背景画像drag&drop・PNG保存・LocalStorage自動保存・タッチ対応。インストール不要・登録不要・完全無料。
最終更新：2026年5月15日
概要
2026-05-15 時点の情報 | 最終更新: 2026-05-15
ブラウザだけで使えるオンラインお絵描きボード。6つの描画ツール（ペン・直線・矩形・円・消しゴム・フィル）・カラーピッカー・アンドゥ/リドゥ30ステップ・背景画像読込・PNG保存・LocalStorage自動保存・タッチ対応。インストール不要・登録不要・完全無料。詳細な使い方ガイド・各ツールの説明
- ツールバーの「背景画像」ボタンをクリック（またはキャンバスにファイルをドラッグ&ドロップ）
- JPG / PNG / GIF / WebP 形式の画像ファイルを選択
- 画像はキャンバスサイズにフィットして表示（アスペクト比維持）
- その上から通常通り描画できます
- 「背景クリア」ボタンで背景画像を削除できます
すべての描画データはお使いのブラウザのLocalStorageにのみ保存されます。サーバーへのデータ送信は一切行いません。ブラウザのキャッシュをクリアするとデータが消えますので、重要な作品は「PNG保存」ボタンでダウンロードして保管してください。
よくある質問
- お絵描きボードのデータはどこに保存されますか？
- すべての描画データはお使いのブラウザのLocalStorageにのみ保存されます。サーバーへの送信は一切ありません。ブラウザのキャッシュをクリアするとデータが削除されますので、重要な作品はPNG保存でダウンロードして保管してください。
- スマホ・タブレットでも描画できますか？
- はい、タッチ操作に完全対応しています。指でのフリーハンド描画、ピンチ操作なしでもキャンバス全体が表示されます。タブレット（iPad等）ではスタイラスペンも使用できます。
- 描いた絵はどのように保存しますか？
- ツールバーの「PNG保存」ボタンをクリックするとPNG形式でダウンロードできます。また、キャンバスの状態はLocalStorageに自動保存されているため、ブラウザを閉じて再度開いても続きから描画できます（ただしキャッシュクリアで消えます）。
- 矩形・円を塗りつぶしで描くにはどうすれば良いですか？
- 矩形または円ツールを選択すると、ツールバーに「塗りつぶし」チェックボックスが表示されます。チェックを入れると塗りつぶし、外すと枠線のみで描画されます。
- 全消去は元に戻せますか？
- はい、全消去もアンドゥ（Ctrl+Z）で元に戻すことができます。最大30ステップのアンドゥに対応しています。
- お絵描きボード（ホワイトボード）とは何ですか？
- お絵描きボード（ホワイトボード）とは、マウスやタッチ操作で自由に描画できるデジタルキャンバスです。物理的なホワイトボードやスケッチブックをブラウザ上で再現したもので、インストール不要でどのデバイスからでも使えます。会議の板書・教室での説明・アイデアスケッチ・お子さんの落書きなど幅広い用途に対応しています。
- キャンバスの背景色を変更できますか？
- はい、ツールバーの「背景色」ボタンから白・黒・グレーなどに変更できます。背景画像を読み込むことも可能です（JPG・PNG対応）。背景色はPNG保存時にも反映されます。透明背景での保存は現バージョンでは未対応です。
- Zoom・Google Meetの画面共有でホワイトボードとして使えますか？
- はい、Zoom・Google Meet・Microsoft Teams等のオンライン会議ツールで画面共有（「ウィンドウ共有」または「タブ共有」）することで、参加者に描画内容をリアルタイムで見せられます。フルスクリーンモードで表示すると見やすくなります。会議アプリ内蔵のホワイトボード機能が使えない場合の代替手段としても有効です。
お絵描きボードの活用シーン
ブラウザだけで使えるお絵描きボードは、さまざまなシーンで活躍します。
背景を白に設定してフルスクリーン表示。Zoom / Google Meet の画面共有やプロジェクターでホワイトボード代わりに使えます。
思いついたアイデアをサクっとスケッチ。ペンツールで自由に書き、矢印や矩形で構造化。PNGで共有できます。
写真や地図を背景に読み込み、マーカーや矢印で注釈を追加。「ここを見てください」の説明に最適です。
インストール不要でブラウザだけで使えるため、タブレットやPCでお子さんが安心して使えます。カラフルな色で自由に描けます。
矩形・円・直線を組み合わせてシンプルな図解を作成。パワーポイント不要で素早く資料に挿入できます。
白背景・黒線でサインを描きPNGで保存。ブログのアイキャッチやSNSアイコンの素材作りにも使えます。
PNG保存の解像度と印刷サイズの目安
お絵描きボードのキャンバスは横1200px × 縦700pxで固定されています。保存されるPNG画像もこのピクセルサイズのまま書き出されます（透過には対応していません）。
計算式は「ピクセル数 ÷ 想定解像度（dpi） = インチ」です。印刷して使う場合の目安は以下の通りです。
| 想定解像度 | 横1200pxの印刷サイズ | 縦700pxの印刷サイズ |
|---|---|---|
| 96dpi（一般的なディスプレイ表示） | 約12.5インチ（約31.8cm） | 約7.3インチ（約18.5cm） |
| 150dpi（家庭用プリンタの簡易印刷） | 約8.0インチ（約20.3cm） | 約4.7インチ（約11.9cm） |
| 300dpi（高品質印刷・入稿目安） | 約4.0インチ（約10.2cm） | 約2.3インチ（約5.9cm） |
- PNGは可逆圧縮形式のため、JPEGのような画質劣化は起きません。
- 背景色または背景画像を含めた状態で書き出されるため、透過PNG（アルファチャンネル）としては保存されません。
- 保存ファイル名は「drawing_年月日_時分.png」の形式で自動的に付与されます（例: drawing_20260904_1830.png）。
自動保存の仕組みと消えるケースの注意点
お絵描きボードは、次の操作を行うたびにキャンバス全体をブラウザのLocalStorageへ自動保存します。サーバーへの送信は一切行いません。
- ペン・直線・矩形・円・消しゴム・フィルいずれかの描画操作を1回終えた直後（マウスやタッチを離した瞬間）
- 全消去を実行した直後
- 背景色を変更した直後
- 背景画像を読み込んだ直後
| 制約項目 | 上限・仕様 |
|---|---|
| アンドゥ（元に戻す）可能回数 | 最大30ステップ。それを超えると最も古い履歴から自動的に破棄されます。 |
| 背景画像の自動保存サイズ上限 | Base64換算で約500KB。これを超える画像は自動保存の対象外となり、次回開いた際は描画内容と背景色のみが復元されます。 |
- シークレットモード / プライベートブラウジングでタブを閉じた場合（多くのブラウザでLocalStorageも同時に破棄されます）
- ブラウザの閲覧履歴・Cookie・サイトデータを削除した場合
- 別のブラウザや別の端末で開いた場合（LocalStorageは同一ブラウザ内でのみ有効なため引き継がれません）
対応ブラウザとタッチ操作の対応状況
お絵描きボードはHTML5のCanvas APIを使用しています。Canvas APIは2015年7月以降、主要ブラウザの最新版で広く利用可能な標準技術です（出典: MDN Web Docs「<canvas>」、2026-09-04確認）。
| 環境 | 対応状況 |
|---|---|
| PC（Chrome / Edge / Firefox / Safari 最新版） | 対応。マウス操作でペン・図形描画が可能です。 |
| スマホ・タブレット（iOS Safari / Android Chrome） | 対応。タッチ操作でのフリーハンド描画に対応しています。 |
| スタイラスペン（Apple Pencil等） | タッチイベントとして認識され、通常のタッチ操作と同様に描画できます。 |
キャンバス要素にはtouch-action: noneを指定し、指で描画している最中にページ全体がスクロールしてしまう誤動作を防止しています。また、タッチイベントはpassive: falseで登録されており、描画中のページスクロールを確実にブロックする仕組みです。古いブラウザでは一部機能が制限される場合があるため、最新のモダンブラウザでのご利用を推奨します。
freee会計 を試してみませんか？
PR確定申告・帳簿付けを自動化。フリーランス・個人事業主に選ばれるクラウド会計。
※ このリンクはアフィリエイト広告（A8.net）を含みます。