フリーウェア ベクタードロー

Vector
Draw Pro

HTML + CSS + JavaScript — 完全ブラウザ動作

Inkscape にインスパイアされた、ブラウザだけで動く本格ベクターグラフィックツール。
インストール不要・無料・オープン。13種類のツールSVG/PNGエクスポートを搭載し、プロクオリティのベクター作品を制作できます。

ファイル編集オブジェクト表示
T
VectorDraw Pro 選択ツール X:60 Y:50 W:80 H:55
プロパティ
レイヤー
13
描画ツール
50
段階 Undo/Redo
SVG
ベクター出力
PNG
ビットマップ出力
0円
完全無料
DRAWING TOOLS

13種類の
描画ツール

基本図形からフリーハンド、ベジェ曲線まで。あらゆる表現に対応するツールセットを搭載しています。

選択ツール
オブジェクトを選択・移動・リサイズ・回転。複数選択・ラバーバンド選択に対応。
矩形ツール
ドラッグで長方形・正方形を描画。塗り・線・角丸など豊富なスタイルオプション。
楕円ツール
円・楕円を自在に描画。比率を保ちながら正円も作成可能。
直線ツール
2点間を結ぶ直線を描画。線幅・色・破線スタイルを細かく設定。
多角形ツール
六角形など任意の頂点数の正多角形を作成。ゲームUIや図解に最適。
星形ツール
5芒星などの星形図形をドラッグで即座に生成。ロゴやアイコン制作に。
ペンツール
クリックで頂点を追加してパスを構築。ダブルクリックで確定する本格ベジェ描画。
フリーハンド
マウスで自由曲線を描画。自動スムージング処理でなめらかなパスに変換。
T
テキストツール
任意の場所にテキストを配置。フォントサイズ・色を自由に設定。ダブルクリックで編集。
塗りつぶし
クリック一つでオブジェクトの塗り色を変更。現在選択中の色を即座に適用。
スポイト
キャンバス上の任意のピクセルから色を取得。既存作品の色を再利用するときに便利。
ノード編集
パスの頂点(ノード)を個別に操作し、形状を精密に調整するアドバンスモード。
🔍
ズームツール
クリックでズームイン。右クリックでズームアウト。細部の精密な作業をサポート。
CORE FEATURES

プロが求める
すべての機能

Inkscape から着想を得た多機能ドローエンジン。レイヤー管理から整列・分布まで、本格的なグラフィック制作に必要な機能を網羅。

01 — LAYERS

レイヤー管理

複数レイヤーでオブジェクトを整理。表示/非表示の切り替えで作業効率を向上。レイヤーごとに色分け表示され、複雑な構成でも迷いません。ダブルクリックで名前を自由に変更可能。

追加/削除 表示切替 名前変更 色分け
02 — COLOR

高機能カラーピッカー

グラデーションパレットと色相スライダーでフルカラー指定。透明度(アルファ値)も個別に設定可能。塗り・線それぞれ独立したカラー管理で、16進数HEX入力にも対応。

HEX入力 HSL選択 アルファ 塗り/線独立
03 — TRANSFORM

オブジェクト変換

X/Y座標・幅・高さ・回転角度を数値で精密指定。8つのリサイズハンドルでインタラクティブに変形。矢印キーによる1px/10px単位の微調整も可能。

座標入力 回転 ハンドル キー移動
04 — ALIGN

整列・分布

複数オブジェクトを6方向に整列(左・右・上・下・中央縦横)。さらに水平・垂直の等間隔分布で、デザインの整理整頓を自動化。プロのレイアウト作業に欠かせない機能。

左右上下 中央揃え 等間隔分布
05 — Z-ORDER

重なり順の制御

オブジェクトの前後関係を最前面・最背面・一段移動で自在に操作。複雑なイラストでも直感的な奥行き管理が可能。メニューとツールバーの両方から実行できます。

最前面 最背面 前面へ 背面へ
06 — HISTORY

50段階 Undo/Redo

すべての操作を最大50ステップまで記録。失敗を恐れずにアイデアを試せます。Ctrl+Z で元に戻し、Ctrl+Y でやり直し。非破壊的なワークフローを実現します。

50ステップ Ctrl+Z Ctrl+Y 非破壊
07 — GRID & SNAP

グリッド & スナップ

20pxグリッドの表示でレイアウトの基準線を可視化。スナップONでオブジェクトがグリッドに自動吸着し、ピクセルパーフェクトな配置が可能。トグルで即座に切り替え。

グリッド表示 スナップ ピクセル精度
08 — STROKE

線スタイル詳細設定

線幅は0〜50pxまで自由設定。線種は実線・破線・点線・一点鎖線の4種類から選択。塗りと線のアルファ(透明度)をそれぞれ独立して制御できます。

線幅 実線 破線 一点鎖線
WORKFLOW

制作の流れ

VectorDraw Pro での典型的な制作フローを4ステップで紹介します。

1
ドキュメント作成
ファイルメニューから「新規作成」。サイズをプリセット(A4・HD・FHDなど)またはカスタムで指定し、キャンバスを用意する。
2
図形を描く
ツールパネルから描画ツールを選択。ドラッグして図形を作成し、カラーピッカーで色・透明度を設定する。
3
整列・調整
整列パネルで複数オブジェクトをきれいに並べ、プロパティパネルで座標・サイズを数値で精密調整する。
4
エクスポート
SVGでベクターデータとして保存するか、PNGとして書き出してほかのツールやWebサイトで活用する。
FILE FORMATS

2種類の
出力フォーマット

ベクターとビットマップ、用途に応じて使い分けられる2つのエクスポート形式をサポートしています。

SVG
スケーラブル・ベクター・グラフィック
解像度に依存しないベクター形式。どんな大きさに拡大してもエッジが鮮明なまま。Webブラウザ、Inkscape、Illustratorなど多くのツールで開いて編集継続が可能です。
無限拡大でも画質劣化なし
ファイルサイズが小さい
Webページにそのまま埋め込み可能
他のベクターソフトで再編集可能
すべてのオブジェクト情報を保持
PNG
ポータブル・ネットワーク・グラフィック
透過背景対応のビットマップ形式。PhotoshopやWebでの利用に最適。他の画像編集ソフトとの連携もスムーズで、汎用性の高いフォーマットです。
背景が透過された状態で出力
あらゆるソフトで開ける汎用性
Web・SNS・印刷物に幅広く対応
ロスレス圧縮で品質を保持
Photoshopなどとの連携が容易
KEYBOARD SHORTCUTS

キーボード
ショートカット

よく使う操作はすべてキーボードから実行可能。マウスとキーボードを組み合わせた高速ワークフローを実現します。

🖊
ツール切替
選択ツール
S
矩形
R
楕円
E
直線
L
ペン
B
フリーハンド
F
テキスト
T
ズーム
Z
多角形
P
編集操作
元に戻す
Ctrl+Z
やり直し
Ctrl+Y
コピー
Ctrl+C
貼り付け
Ctrl+V
複製
Ctrl+D
削除
Del
全選択
Ctrl+A
グループ化
Ctrl+G
表示・移動
ズームイン
+
ズームアウト
全体表示
3
グリッド
#
スナップ
%
1px移動
↑↓←→
10px移動
Shift+↑↓←→
選択解除/中断
Esc