今日はスマホでどこでも気軽にベクターのイラストを作成できる「Vector Motion」をご紹介します。
Vector Motionは、パソコンソフトで例えるとInkscapeの簡易版にほんのちょっとだけBlenderを組み合わせたようなスマホアプリです。
本格的なベクターのイラストが制作でき、機能もシンプルで簡単なのでご紹介しようと思います。
こんにちは、K06です。最近、Vector Motionを使い、ブログのサムネイルを制作しています。(以下の記事のサムネイル画像はVectorMotionで作りました。指紋マークはイラストACから無料でダウンロードできますので、よければ使ってください。)
指紋マークのダウンロードはこちらから↓ www.ac-illust.com
Vector Motionは、先ほども言った通り、Inkscapeと使い方が似てます。
ベクタードローイングアプリを使いこなすことで、表現の可能性が広がりますので是非覚えていってくださいね。
なお、Vector MotionのUIやツールの名前は、検索しても見つからないため、InkscapeやBlenderに合わせた呼び方をしてます。なので本当の名前では無いかもしれませんのでご注意ください。（例: ペンツールなど）
機能を全部ご紹介すると、とてつもなく長い動画になるので今日は、インストールからツールの使い方までをご紹介します。
また、ほぼ同じ内容ですが動画を作りましたのでよければ御覧ください。
インストール
Vector MotionはAndroidとiOSで使うことができます。
Androidをお使いの方は下記リンクからインストールすることができます。
iOSの方は下記リンクからインストールできます。
それではツールの使い方からご紹介します。
My Project
Vector Motionを起動するとMy Project画面が出てきます。
新規プロジェクトの製作は右下の+ボタンから作ることができます。
はじめは何もないと思うので、プロジェクトがあることを仮定してご紹介すると、プロジェクトをロングタップすることでRename(名前変更)、Duplicate（複製）かDelete（削除）することができます。
画像の読み込み
画像の読み込みはMy Project右上の3つの点のボタンを押すとImage library（画像一覧）という項目がありますのでタップし、右上の＋マークがついた写真のアイコンをタップ → 読み込みたい画像を選択すると読み込めます。
Image libraryは後からでもアクセスできるため、今読み込まないといけないわけではありません。
ベースにしたい画像がある場合に読み込んでおくと良いでしょう。
カメラで撮った画像をそのまま読み込み
画像の読み込みボタンの左にあるカメラに＋マークがついたボタンを押すことで、カメラが起動し、撮った画像をそのままVector Motionに読み込むことができます。
写真はその都度撮らないといけませんが、読み込見たい画像をフォルダから毎回探すのがめんどくさい時に使うといいでしょう。
フォントの管理と追加
フォントの管理と追加はMy Project右上の3つの点のボタンを押すとFont Library（フォント一覧）という項目がありますのでタップしてください。
Font Libraryではフォントの検索、追加、目印付け、タグ付けができます。
フォントの追加
Font Libraryボタンを押し、右上のプラスボタンをタップすることでファイラーが開き、ダウンロードしたフォントを選択するとVector Motion内で使うフォントを追加する事ができます。
最近のアプリでよくあるフォントがずらっと並び、そこから選んでダウンロードして使うタイプではなく、ダウンロードしたフォントをインストールする形ですので事前にダウンロードが必要です。
My Projectの概要は以上です。
フォントの管理
Font Libraryを初めて起動すると何もない状態です。
もしインストールしたフォントが並んでるとしてご紹介を続けますと、フォントのアイコンをロングタップすることでStar（星）、Edit Tag(タグを編集) 、Dlete（削除）ができます。
フォントの検索
Font Libraryのフォントの追加ボタンの左横にある虫眼鏡のアイコンがフォントの検索ボタンです。
タップすると検索窓が出てくるのでフォント名を入力すると検索できます。
New Project画面の使い方
My ProjectからNew Projectボタンを押すとNew Project画面です。
New Projectではプロジェクトの名前と解像度を変更できます。
解像度は沢山のプリセットが用意されており、使いたいものが大体あると思いますが、なければNet Project 画面下部のWidth（幅）やHeight（高さ）に値を入力することで好きなサイズに調整できます。
Unitと書かれたドロップダウンメニューは単位で、Vector Motionで作った画像をWeb上で使う場合はデフォルトの「px」のままで良いです。
プリントアウトしたい場合はCentimeter（センチメートル）や、Millimeter（ミリメートル）を選択しておくと良いでしょう。
ツールの使い方
画面左上にあるツールボックスの上から順に選択ツール、パスツール、ペンツール、シェイプツール、テキスト、タイムライン表示となります。
選択ツール
選択ツールは移動や回転、拡大縮小をしたい場合に使います。
選択ツールをタップ→目的のオブジェクトをタップし選択すると選択できます。
選択したオブジェクトが青くなりますのでそれが選択出来てる証です。
ハンドルが出てきますね。
長いハンドルは回転のハンドルで、四隅のハンドルはタップしたまま指を動かすと動かした方向にフリーハンドで拡大縮小することができます。
上下左右のハンドルは上下が横幅を固定したまま高さを変更、左右が高さを固定したまま拡大縮小することができます。
移動したい場合はオブジェクトのハンドルがないところをタップしたまま移動したいところに持っていくと移動できます。
移動する時は二本指でズーム（ピンチイン）してから移動すると扱いやすいです。
これに後からご紹介するダイアログの設定を付け加えるともっと沢山のことができるようになります。
オブジェクトを複数選択
選択ツールを選択すると横に2つのアイコンが出てくると思いますが、そのうちの上のアイコンをタップすると複数のオブジェクトを選択できるようになります。
複数選択の下のツール
複数選択の下にあるツールは使ってみたところ、筆者には理解できなかったため、わかりませんでした。
分かり次第更新します。
パスツール
パスツールはパスを編集したいときに使います。
パスツールを選択し、Vector Motion内で作ったオブジェクトや読み込んだSVGをタップするとパスの点が出てくると思います。
この点をタップしたまま移動するとパスを編集することができますね。
複数のパスを選択
ツールボックスの横にある一番上のボタンは複数のパスを選択できるボタンです。
複数のパスを選択したいときに押しましょう。
単純な形なら矩形選択すると複数パスを選択できますので押す必要はないです。
矩形選択はパソコンでマウスをドラッグする容量でタップしたまま指を動かすと四角が出てくると思います。
その四角内に入ったパスを選択することができますね。
パスを追加
複数のパスを選択ボタンの下にあるボタンが、パスを追加するボタンです。
このボタンをタップすることでパスの間にパスを追加することができます。
パスの回転
パスを追加アイコンの下にあるボタンが、パスの回転ボタンです。
複数パスを選択した状態でパスの回転ボタンを押すと、真ん中にあるアイコンを中心にパスを回転することができます。
真ん中のアイコンも原点同様に動かすことで回転の中心変えることができます。
パスの拡大縮小
パスの回転ボタンの下にあるアイコンがパスの拡大縮小ボタンです。
中心にある、アイコンを移動し、パスをスワイプすることでアイコンを中心に拡大縮小できます。
ハンドルのだし方
ハンドルを出したいパスを選択し、ロングタップするとどのタイプのハンドルを表示するかを決めれます。
ハンドルのタイプは4種類あり、
ペンツール
ペンツールはパスをフリーハンドで描くことができます。
ペンというとスワイプするのかなと思いますが、基本タップしてパスを置いていく感じになります。
スワイプするとハンドルが出てきてパスの操作が格段に難しくなりますので基本タップでパスを置いていく方がおすすめです。
ペンツールの横のアイコンの使い方はわかりませんでした。
こちらも分かり次第更新します。
多角形ツール
多角形ツールはスワイプすることで多角形を作ることができます。
多角形ツールでは横のボタンを選択することで、矩形、円、星型、三角を作ることができます。
また、多角形ツールで矩形か、星形を作るとダイアログにプロパティが表示されます。
デフォルトでは矩形になっており、四角形を描くことができますね。
矩形ダイアログ
矩形で四角形を作ると、ダイアログにCornerというプロパティが表示され、左右にスワイプすることで四隅の角を丸くすることができます。
星型ダイアログ
星型を作るとダイアログにStar Factorというプロパティが表示され、左右にスワイプすることで星の内側ポイントを拡大縮小し、見た目を変える事ができます。
またsideをスワイプすると、星の尖った部分を増減させることができますね。
テキストツール
テキストツールは普通のベクタードローイングソフトのテキストとは違い、最初にスワイプする必要があります。
テキストを書きたいとこあたりをスワイプし、テキストボックスを表示します。
テキストボックスにはNew Textと最初から書いてますが、テキストボックスが小さすぎると何も表示されませんのでご注意ください。
テキストボックスが小さすぎて何も表示されてない場合は一度選択ツールをタップし、拡大してあげるといいと思います。
テキスト編集方法
テキストを編集するにはテキストを選択した状態で、ダイアログにあるTextの鉛筆マークのアイコンを押すとTextContentsウインドウがでてくるのでそこでテキストを編集することができます。
Align
ダイアログのAlignでは2行以上のテキストの横方向を揃える方向を決めることができます。
一番左のデフォルトが左揃えで、真ん中の左のボタンが中央揃え、真ん中の右側のボタンが右揃え、最後のボタンが均等割り付けになります。
Size
テキストは選択ツールで拡大縮小できないため、ダイアログのSizeから変更しましょう。
Sizeを左にスワイプすると小さくなり、右にスワイプすると大きくなります。
また決まった数値を入力したい場合は数字のところをロングタップし、仮想キーボードから数値を入力することも可能です。
Font
ダイアログのFontはFontを選択したり、ダウンロードしたFontをVectorMotionに登録することができます。
VectorMotionのデフォルトフォントはRobotoしか入っておらず、好きなFontをWeb上からダウンロードしてきて使える様になっております。
ダウンロードしたFontをインストールする方法はManageFontをタップし、Fontl library右上の＋ボタンからWebからダウンロードしたFontが入ってるフォルダに移動し、ダウンロードしたフォントをタップするだけです。
Style
StyleはBマークとIマークのボタンがあると思いますが、Bマークのボタンを押すとボールド（太字）になり、Iマークのボタンを押すと、イタリック（斜体）になります。
Direction
Directionは例えば日本語は縦書きしなければ左から右に文字を書いていきますが、右から左に文字を描く国の言語を使った時に変更することができるんだと思います。
日本語や英語で試したところ逆さまにならなかったのでよくわかりません。
Layout
LayoutはBOXとOn Pathを選択することができ、デフォルトではBOXになってます。
On Pathは読んでそのままの意味で文字を円形のパスに沿わせたい時に使用します。
なぜ円形のパスと限定したかというと、別に描いたパスに添わせて文字を配置できるわけではなく、On Pathを選択すると自動的に円形のパスに沿わせることができるからです。
その円形のパスは選択ツールで拡大縮小することが可能で、Alignで中央揃えにしておくときれいな円に沿わせて文字を並べることができます。
Sceneツール
SceneツールはSceneを新たに作ったり、シーンのサイズを調整することができます。
グレーのところでスワイプすると新しいシーンを作ることができ、シーンをスワイプすると移動することができます。
蛇足ですが、SceneツールはInkscapeで言うところのページツールで、Inkscapeであればページ外でも編集ができますが、VectorMotionはScene内でしか編集ができません。
Sceneのサイズ変更
Sceneツールを選択し、スワイプしてシーンを作るとダイアログにSizeがありますので、値をロングタップし、入力し直すか、スワイプして調整するとサイズを変更できます。
タイムライン
ツールの一番最後のボタンを押すとタイムラインを表示できます。
タイムラインはアニメーションで使うキーフレームを編集することができます。
今回はInkscapeの代わりとして使用するのが目的ですのでタイムラインについてはこのくらいで終わります。
がっつりInkscapeのようなことができるかといえばそうではありませんが、カナリ使えると言っても過言ではないでしょう。
まだまだVectorMotionは便利な機能がありますのでご紹介できたらなと思います。
最後までご視聴頂きありがとうございました！
