Vectornator、アイソメトリックグリッドと
垂直グリッドについて〜環境設定④。

アクセス。

グリッド機能にアクセスする手順です。

画面左上のナビゲーションバーの歯車をタップ。

するとクイック設定のウインドウが表示されるのですが、グリッド機能はデフォルトでここに含まれています。
常に１発アクセスできるのが嬉しいですね。さっそくタップしましょう。

「アートボードとグリッド」の設定ウインドウに移動しました。
「グリッドを表示」をオンにします。

グリッド表示をONにしたので、背面に見えるアートボード上にはすでにグリッドが表示されています。
ウインドウにはグリッドの種類と、間隔/角度の項目が出現しました。
ここでグリッドの設定を行います。

設定パネルを詳しく見てみましょう。

① 現在選択されているアートボード名。

② グリッド表示のON/OFF。

③ グリッドの種類です。垂直/等尺性から選択。

④ 間隔。格子１マスの間隔を指定します。

⑤ 角度。等尺性グリッドの場合、ここで角度を調整します。

グリッドはアートボードごとに表示/非表示および設定内容を変更することができます。
グリッドの設定を行なっているときは、現在選択されているアートボードが対象と成増。

またグリッドの表示/非表示の切り替えをクイック設定に登録することができます。
「環境設定▶︎作業面▶︎クイック設定を変更」と進み、「グリッドを表示」にチェックを入れます。

作業画面に戻ってクイック設定を呼び出すと、追加されていました。
イラスト作成中、グリッド表示のON/OFFは頻繁に行います。こうしておくとさらに便利ですね。

• Vectornator、クイック設定について〜環境設定①。
  

  2021.05.16
  目的の機能に１発アクセス。

クイック設定の使い方は、こちら⬆︎の記事で詳しく紹介しています。

垂直グリッド。

垂直グリッドはいわゆる通常の、縦横の線が垂直に交わって構成されている方眼です。

グリッド表示ONの状態で、種類から「垂直」を選択すると表示されます。

垂直グリッドでは、間隔を調整することができます。
「間隔」のボタンをタップしましょう。

するとテンキーが出現するので、数値を入力しましょう。
単位は環境設定で指定したものが採用されます。「↩︎」で決定。

作業目的に合った大きさに調整しましょう。

スナップさせてみる。

それではグリッドへのスナップをONにして、オブジェクトを操作してみます。
「環境設定」を開き、「作業面」→「スナップオプション」にアクセスします。

スナップ先の一覧から「グリッド」をONにします。

これでバウンディングボックス（オブジェクトを囲む最小の長方形）の頂点が、グリッドの交点にスナップします。

長方形を描画してみました。
グリッドに吸着させながら描くことができます。

選択ツールで移動。
グリッドに沿って動いてくれます。

ノードツールでは、選択したアンカーポイントがグリッドの交点にスナップします。

整然とした図を作成したり、レイアウトデザインを行うにはとても便利な機能です。

レイアウトなどで使う際には、アートボードにグリッドがちょうど収まるように調整すると作業がしやすいです。
⬆︎の例では、アートボード1024pxに対して縦横20マスのグリッドにしたかったので、間隔を

　1024/20 = 51.2（px）

としました。

• Vectornator、スナップ機能について（後編）。
  

  2021.03.22
  不思議なスナップも登場。

アイソメトリック（等尺性）グリッドとは？

Vectornator日本語版では「等尺性」と表示されていますが、デザインなどの分野では「isometric（アイソメトリック）」という呼び方が一般的のようです。
アイソメは、webデザインのトレンドにもなったりしますね。

アイソメトリック。

アイソメトリック。
そもそもは「等角投影図法」のことを指します。

等角投影図法 等角投影図法とは、平面上で立体を表現する図法の一種です。
画像は立方体を描いたものですが、幅、高さ、奥行きが等しい角度（120°）で交わっています。

２点透視図法 投影図法に対して、透視図法というものがあります。
透視図法は「消失点」を定めて、視線をそこに収束するように作図します。イラレの遠近グリッドがそうですね。

グリッドは「格子」ですね。
アイソメトリック図をVectornator上で簡単に描画できるようにしたのが、等尺性（アイソメトリック）グリッドです。
とても面白い機能です。試してみましょう。

アイソメ設定方法。

グリッドの設定ウインドウを開きます。
「グリッドを表示」をONにした状態で、「等尺性」を選択するとアイソメトリックグリッドがアートボード上に表示されます。

「間隔」をタップして、グリッドの間隔を調整しましょう。

垂直グリッドのときと同じくテンキーが出現するので、指定したい数値を入力して、「↩︎」で決定。
アイソメグリッドの「間隔」は、⬆︎で示しているように「２マス分の幅」に対して指定値が反映されます。

また等尺性グリッドでは、角度の設定が可能です。

かくど？

「等尺性グリッドの角度」とはどこの部分なのかというと、画像の立方体で言うところの「幅」や「奥行き」の軸。これが水平線と交わる時の角度を指しています。

言い換えると、「斜線が水平線に対してなす角度」をここで決定します。

項目をタップするとテンキーが現れ、10°~45°の範囲で数値を入力することができます。

◼︎ アイソメとダイソメ。

ちなみにアイソメトリック（等角投影図法）は３つの軸がすべて120°で交わるのでこの部分は30°になるのですが、

それ以外の角度を指定した場合。３つの交わる座標軸のうち、２つの角度が等しいという「ダイメトリック（二等角投影図法）」と成増。

スナップさせてアイソメ図。

準備ができたところで、グリッドにスナップさせてアイソメトリック図を描いてみましょう♪

ペンツールでアンカーポイントを打つと、グリッド線の交点に吸着します。

上の面が描けました。

横の面もペンツールで描いていきます。

グリッドにスナップが効いているので、大体の場所をタップすればグリッドに沿わせることができます。便利ですね。

はい。直方体のアイソメ図が簡単に描けました ♪

直方体の上に正方形を描きました。これもアイソメ化しましょう。

ノードツールをつかって、正方形の各頂点をグリッドに合わせていきます。

頂点の移動が完了したら、側面をペンツールで描いていきましょう。

直方体を重ねることができました。
みなさんも実際にやってみてください。とても楽しいですよ！

アイソメトリックどんどん描こう。

最後までお読みくださり、ありがとうございました。
今回はVectornatorのグリッド機能について紹介してきました。垂直グリッドも便利ですが、注目はやはり等尺性（アイソメトリック）グリッドです。これが標準で用意されているベクターソフトはなかなか見かけません。

スナップ機能と合わせて使えば、誰でも「今すぐ」アイソメ図を作成することができます。時折デザインのトレンドにもアイソメトリック。どんどん練習して、イラストやweb画像などに取り入れてみてください！ではまた〜 ♪