Software Guide
清書ボード
使い方ガイド
手書きスケッチをなめらかに清書し、SVGベクターデータとして保存できるお絵かきツールです。
HTML + CSS + JavaScript
ブラウザで動作
SVG出力対応
インストール不要
Overview
このソフトウェアとは
✏️
2層構造の描画
「スケッチ」と「清書」の2つのレイヤーを持ちます。下書きを薄く参照しながら、清書レイヤーにきれいな線を重ねて描けます。
〜
スムージング機能
清書モードでは、マウスの手ブレを自動補正。なし・弱・中・強の4段階で、なめらかな曲線に清書できます。
💾
SVGベクター保存
清書レイヤーの内容をSVGファイルとして保存できます。拡大しても劣化しないベクターデータで出力されます。
Workflow
基本の使い方の流れ
STEP 01
✏️
スケッチを描く
「スケッチ」モードで下書きを自由に描きます。失敗しても大丈夫。
STEP 02
🔄
清書モードに切替
左パネルで「清書」タブに切り替えます。スケッチが薄く透けて見えます。
STEP 03
🖊️
清書で上からなぞる
スケッチを参考にしながら、きれいな線でなぞります。スムージングで自動補正されます。
STEP 04
💾
SVGで保存
右上の「SVG保存」ボタンでベクターファイルをダウンロードします。
Modes
2つの描画モード
Mode 01
スケッチ
下書き専用レイヤーです。
アイデアを気軽に描いてください。消しゴムや塗りつぶしも使えます。清書モードでは薄く（25%）表示されてトレース用ガイドになります。
Mode 02
清書
清書専用レイヤーです。
スムージング機能が有効になり、手ブレを補正したなめらかな線が描けます。
このレイヤーの内容だけがSVGに出力されます。
Tools
ツール一覧
✏️
ペン
P
フリーハンドで線を描きます。清書モードではスムージングで自動的になめらかになります。
╱
直線
L
ドラッグした始点〜終点をつなぐまっすぐな直線を引きます。
▭
矩形
R
ドラッグして長方形を描きます。塗りつぶし色を設定すると内側も塗れます。
○
楕円
C
ドラッグして楕円を描きます。正円も楕円も自由なサイズで描けます。
🧹
消しゴム
E
描いた線を消します。ブラシサイズは「太さ」スライダーで調整できます。
🪣
塗りつぶし
F
クリックした箇所を「塗りつぶし色」で一気に塗ります。
Smoothing
スムージングレベル（清書モード専用）
0
なし
補正なし。マウスの動きをそのまま描画します。
1
弱（デフォルト）
軽く補正。自然な手書き感を保ちつつ手ブレを軽減します。
2
中
しっかり補正。ゆるやかな曲線がきれいに仕上がります。
3
強
最大補正。細かい動きを大きく整え、なめらかな曲線になります。
Shortcuts
キーボードショートカット
P
ペンツールに切替
L
直線ツールに切替
R
矩形ツールに切替
C
楕円ツールに切替
E
消しゴムツールに切替
F
塗りつぶしツールに切替
Ctrl
+
Z
元に戻す（最大40手順）
Ctrl
+
S
SVGファイルを保存
SVG Output
SVG保存について
📐
清書レイヤーのみがSVGに出力されます
保存されるSVGには
清書モードで描いた内容だけ
が含まれます。スケッチレイヤーの下書きは出力されません。
SVGはベクター形式のため、
Inkscape（無料）・Adobe Illustrator・Figma
などで開けます。
また
Chrome・Firefox・Edge などのブラウザ
にドラッグ＆ドロップするだけでも表示できます。
拡大・縮小しても画質が劣化しないのがSVGの大きな特長です。