ベクター系のデザインツールとして有名なIllustrator(イラストレーター、通常イラレ)。
デザインのことを調べていると一度は必ず耳にしたことがありますよね。
数年前まではウン万円する買い切りソフトでしたが、現在はサブスクリプション式に。iPad版もあるので嬉しい反面、ソフトを使用するためには毎月数千円の費用がかかります。

興味はあるんだけど、毎月数千円も払えない…
そんな理由で諦めているあなたに、Vectornator(ベクターネーター)という無料アプリをご紹介します!
- イラレに興味があるが高くて手をだせない
- イラレに憧れているが正直仕組みがわかってない
- 「ベジェ曲線」「パス」という言葉に魅力を感じる
そんな初心者(私のことです)でも大丈夫。
Vectornatorの基本的な使い方と、参考になりそうなサイト情報をまとめました!
これであなたも憧れのベクター系イラストレーターに…なれるかも?!
Illustratorがなくてもベクターイラストは描ける
私は30代主婦、超文系のオタク。
デザインの勉強は当然したことありません。
手元にあるのはパソコン…ではなく、iPadひとつ。
そんな私が描いたアイコンがこちら。

これ、無料アプリで描けます!
iPadで、無料で、しかも広告なし。
Illustratorほど多機能ではないですが、基本を学ぶのには最適なベクター系ドローツール。
その名も『Vectornator(ベクターネーター)』です!
(※Windows・Macでも使えるPC版もあります)
Vectornatorってどんなアプリ?
Vectornatorはベクター形式のイラストを制作できるデザインツール。ベクター形式で描写することを「ドローする」ということから、「ドローツール」と呼ばれることも。
点や線などの情報を数値化して表現する画像形式。
縮小・拡大など変形させても画像の境界線が荒くならないため、ロゴや印刷物などに利用されることが多い。
「無料で広告無し!初心者向けiPadお絵かきアプリ3選」で記事にした一般的なデジタル絵のお絵かきアプリでは、ブラシで線を描いたり色を塗ったりして絵を描きました。(ちなみにこれらのアプリで描けるイラストはラスター形式と呼ばれています。)
一方、Vectornatorは基本的に「図形」を組み合わせて絵を描きます。

Excelのオートシェイプみたいな感じです。
細かい図形を重ねたり変形したりして組み合わせることで、平面的だけどポップでおしゃれなイラストを描くことができます。
- 無料で広告なし
- 直線も曲線もきれいに描ける
- イラレと同じAi拡張子でも保存可能
- iCloud経由でファイル共有できる ←New!
- 無料で広告なし(大事なことなので2回言う)
元々約1,000円程度の買い切りツールだったのですが、今では無料。しかも使用に制限はありません!それでいて継続的にアップデートされており、どんどん使い勝手が良くなっています。

ありえない…収入増えたら寄附しよ…。
Vectornatorの基礎知識
初めてベクター形式で絵を描く人が、最初に戸惑う部分を簡単に説明します。
アプリをダウンロードしたら、新規作成で画面を開いて見てください。
こちらがVectornatorのワークスペース(描画の画面)。様々なツールがあります。

何をするツールなの?と思ったら、アイコンを長押しすると説明が出てきます。

初心者にはありがたいヘルプ機能ですね!
全てを説明したいところですが、今回はベクター形式ならではの3つのツールを解説します。
- 線と塗りつぶし
- パス
- アウトライン
線と塗りつぶし
さて、まずは試しに円(○)を描いて、色を塗ってみましょう。



円を描きたい時は、円形ツールですぐ描けます。
さて、色はどうやって塗るのでしょうか?

バケツツールがない…?
ベクター形式では、色を塗る時は「色付きの図形を描く」という考え方をします。
左メニューの下に「塗りつぶしカラー」と「線カラー」のメニューがあります。


メニューの一番上にある選択ツール(矢印アイコン)で選択すれば、いつでも色を変更することができます。
アプリのバージョンによっては、左下にカラーメニューが表示されてないことも。
その場合は右上のスタイルメニュー(ブラシマーク)から同じ設定を行うことができます。

- 図形ツールやペンツールなどで図形を作る
- 「塗りつぶし」スイッチをオンにして色を選ぶ
- 線や塗りつぶしの色が不要なときは、スイッチをオフにする
パス
まずはこの雲のアイコンを見てください。

曲線の上に、いくつかの点があります。
点からはマッチのような細い棒が2本生えていますね…。
この点や棒を使った方法で描かれた線のことをパスと言います。

点のことを「ノード(アンカーポイント)」、
点から出たマッチ棒のことを「ハンドル」と言うらしい…
とりあえずパスだけ覚えとこ。
点から生えた棒を伸ばしたり回したりすると、パスもそれに沿って動きます。


これぞベクター形式!という特徴ですね。
アウトライン
アウトライン、直訳すれば外側の線。
その名の通り、線や図形の外側をパスにすることです。

パスで描いたぐにゃぐにゃの棒です。
(見えにくいですが、黒い線の中心にパスがあります)
[パス]メニューの「アウトライン」をタップすると…

線の周りがパスになりました!
文字や線の一部を変形させるときに役立ちそうです。

- 縮小・拡大した時に、線の太さを保ちたい
- 線をアレンジしたい
- グラデーションをつけたい
線のままだと色や形に制限が出て、思うようにアレンジができません。作業環境によってデザインが崩れたり、思っていたデザインと違う見た目で出力されてしまうことも。
アレンジにこだわりたい線は、アウトライン化するとデザインの幅が広がります。
Vectornator関連のお役立ちサイト
Vectornatorの弱点の一つは日本語の公式マニュアルサイトがないこと。

圧倒的情報不足…!
しかし、Vectornatorの操作方法を公式並みに手厚く解説してくれるありがたーいサイトやメイキング動画チャンネルが存在します!
フーノページ

Vectornatorについて検索した方は必ず一度は目にしたことがあるはず。
日本におけるVectornatorの第一人者(と私は思っています)「ふ」さんのVectornator使い方サイトです。
ツールの使い方やアレンジの方法など、図解付きでわかりやすく説明してくれるとってもありがたいサイト。
Vectornator初心者は必見です!
Vectornator 公式YouTubeチャンネル
全て英語ですが、英語がわからなくても動画ならなんとなくわかります。
使い方を詳しく説明してくれるチュートリアル動画から、Vectornatorで描いた作品のメイキング動画まで。「こんなこともできるのか!」連発の公式チャンネルです。

Vectornatorアーティストさんの手際の良さ、憧れる…!
Vectornatorは無料なので気軽に試そう
とっつきにくそうなツールですが、触るとなかなか面白いです!
「どうやって描くのか気になる!」という方は実際にVectornatorでアイコンを描いた記事もあるので参考にしてください。

ロゴを作成したり、印刷物のイラストカットを作成したり…もちろんWEB用のイラストもきれいに描けるベクターイラストツール。
曲線やパスなんてわかんないし、絵を書くのは難しそうだな…
そんな方は自動トレース(オートトレース)機能も充実しています!
興味のある方はぜひ使ってみてくださいね!
