Vectra
ベクター描画、パス、タイポグラフィ、ブール演算とパスファインダー、さらにブランド、ロゴ、アイコン、パターン、パッケージ、インフォグラフィック、UX向けの11個のデザインワークスペース。
一言で言うと#
くっきりと、どんなサイズにも無限にスケールするシェイプとテキスト。ロゴ、アイコ ン、UIモックアップなど、あらゆるサイズでシャープさを保つ必要があるもののための スタジオです。
レイアウト#
| メニューバー | File・Edit・Object・Type・Select・View・Plugins |
| ドキュメントタブ | タブごとに1つのアートボードセット |
| ツールバー | アンドゥ／リドゥ、複製、SVGコードビュー、ブール演算、ロック、ストローク幅付きのfillとstrokeのスウォッチ、整列・分布ボタン |
| ガイドバー | 間隔付きのGrid・Snap・Rulers・ロゴ用グリッド・Safe area・Smart guides |
| 左レール | 選択、ダイレクト選択、テキスト、線、長方形、ペン、シェイプ、回転、はさみ、ブラシ、アンカー追加、アートボード、手のひら |
| 右 | Properties・Layers・Text・Illust |
| ステータスバー | アートボード、そのサイズ、オブジェクト数、選択数、履歴位置、アクティブツール、ズーム |
ここで行うこと#
描く#
ペンでアンカーとハンドルを配置し、direct selectで後から編集します。シェ
イプ、線、テキストはそれぞれ独立したツールです。ヒントはツールバー上にあり、一度
は読んでおく価値があります。Shiftで拘束、Altで中心から描画、矢印キーで微調整
できます。
正確に配置する#
Transformセクションは、Flip H、Flip V、0°へのリセットとあわせて正 確な数値（X、Y、幅、高さ、回転）を受け付けます。ツールバー上の整列・分布ボタンは 選択範囲に対して働き、Smartガイドはグリッドではなく他のオブジェクトにスナッ プします。
フィルとストローク#
どちらも独立して切り替えられます。シェイプはストロークのないフィルにも、フィル のないストロークにも、どちらもなしにもできます。色は16進数として編集できます。 Appearanceの下には、不透明度、ブレンドモード、表示・非表示があります。
シェイプを組み合わせる#
ツールバー上のPathfinderとブール演算：union、subtract、intersect、 exclude。ブールグループは編集可能なままで、パーツを元に戻したいときは Release boolean groupがコマンドパレットにあります。
タイポグラフィ#
Textタブには文字組みの各種コントロールがあり、Typeメニューにはテキスト をアウトライン化するなどの操作があります。
エフェクト#
Effectsセクションは非破壊で適用されるため、その下にあるジオメトリは、あなた が描いたジオメトリのままです。
SVGを読む#
ツールバー上のコードボタンは、ドキュメントをSVGとして表示します。実際に何が書き 出されるかを確認するのに便利で、他所からパスを貼り付ける際にも使えます。
右パネル：4つの主要タブ、その先に11のワークスペース#
主要タブ、常に使う4つです。
| Properties | トランスフォーム、フィル、ストローク、外観、エフェクト、整列、パスファインダー |
| Layers | すべてのオブジェクト。並べ替え、表示・非表示、ロックが可能 |
| Text | 文字組みの各種コントロール |
| Illust | イラストレーション側。ブラシと、種類ごとに編集可能なブラシライブラリ |
その下には、Workspacesというラベルのアコーディオンが、必要になるまで11個の シナリオ別パネルを隠しています。この部分こそがVectraを単なる描画ツールではなくデ ザインアシスタントにしているところで、デフォルトで折りたたまれているため見落とし やすい部分です。
| ワークスペース | 用途 |
|---|---|
| Brand | ブランドアイデンティティ：成果物チェックリスト（正位置・反転・モノクロのロゴ、アイコン／シンボル、ブランドガイドラインPDF）。セクションは有効・無効を切り替え可能 |
| Logo | ロゴの種類、モックアップ、書き出しプリセット：ロゴが対応しなければならないバリエーション |
| Icon | アイコンセット：サイズ、キーライン、アプリプラットフォームごとのプリセット |
| Pattern | 繰り返しパターン：タイルの種類（rope、chain、dashedなど）、ウォールペーパーグループ、モチーフプリセット |
| Pack | パッケージング：製品用の箱、その他のダイライン用テンプレート |
| Infog | インフォグラフィック：図の種類、フローチャートのシェイプ（平行四辺形としてのデータ、円柱としてのデータベースなど）、チャートの種類 |
| UX | 画面デザイン：デバイスフレームとブレークポイントのプリセット |
| DA | アートディレクション：プロジェクトのメタデータ、スタイルタイル、デザイントークンの書き出し |
| Auto Layout | 選択したフレームやグループに対するFigma風の自動レイアウト |
| Components | 再利用可能なシンボル：一度定義して、何度でも配置 |
| Export | フォーマットごとのオプションを切り替えるフォーマットセレクター |
あるワークスペースのタブがすでにアクティブな場合、アコーディオンは自動的に開 き、ヘッダーにどれが開いているかが表示されます。昨日使っていたパネルが見当たら ない場合は、Workspacesの中に入っています。
書き出す#
Vectraは8通りの方法で書き出せ、パネルは推測させるのではなく、それぞれが何のため のものかを説明します。
| フォーマット | |
|---|---|
| PNG | 透過対応のラスター、ウェブとUI向け |
| JPG | 圧縮ラスター、透過なし |
| WebP | モダンなウェブ向け、軽量、透過対応 |
| AVIF | 最良の圧縮率、幅広いサポート |
| SVG | ベクター：スケーラブルで、なお編集可能 |
| 汎用ドキュメント、印刷とウェブ向け | |
| EPS | プロ向け印刷、Adobe互換 |
| JSON | データとしてのドキュメント |
何を書き出すかも選べます。選択範囲、アートボード、すべてのアートボー ド、あるいはスライス。Slice Toolはキャンバスを名前付きの領域に切り分けて まとめて書き出せるようにするもので、これによりUIモックアップは1枚の画像ではなく アセットの集合として出て行きます。
印刷用データ作成#
Vectraを、単なる描画ツールではなく製版ツールにしている部分です。Print Productionは印刷業者が期待するマークを追加します。
| Crop marks | どこで裁断するか |
| Registration marks | 印刷機用の位置合わせターゲット |
| Colour bars | CMYKキャリブレーション帯 |
| Bleed (mm) | トリムラインを越えて伸ばされたアートワーク。1ミリのズレが白い縁として現れないようにする |
| Overprint preview | インクが重なる箇所で実際に何が起こるか |
| Scale bar | 縮尺で印刷される図面向け |
⚠️ ここでのCMYKはシミュレーションです。 パネル自体がそう明言していま す。表示される値はプレビューであり、正確な印刷色にはカラーマネジメントが確立さ れたワークフローが必要です。CMYKの表示は証明ではなく目安として扱ってくださ い。またCMYK書き出しには透過がありませんが、これはVectraの制限ではなく、 色モデルそのものの性質です。
読み書きできるファイル#
| ネイティブ形式 | .vectra |
| インポート | .svg |
| エクスポート | .svg・.pdf・.eps・.png・.jpg・.webp・.avif・.json |
他のスタジオへ作業を送る#
作り出すもの：ベクターアートとVectraオブジェクト。同じ絵を2つの形で持 つということです。受け取れるもの：ベクターアートと画像。
最後の1つが、ゲーム制作におけるVectraの意義です。Engineに送られた画面のモッ クアップは、Engineがレイアウトしてスクリプトできる構造として届きます。組み立 て直す必要のある1枚の平たい画像としてではなく、ボタンはボタンのままです。
他の人と一緒に作業する#
Vectraは操作単位で同期します。オブジェクトの追加、削除、更新、丸ごとの置き換 え。レイヤーとその並び順。アートボードサイズ。アクティブなレイヤー。
制限とよくあるつまずき#
- 見当たらないパネルは、たいてい Workspaces の中にあります。 表示されてい るのは4つのタブだけで、残りの11個は折りたたまれたアコーディオンの裏にありま す。
- フィルもストロークもないシェイプは見えないだけで、そこには存在しています。 ステータスバーのオブジェクト数がその手掛かりです。
- Smart guidesはオブジェクトに、グリッドはグリッドにスナップします。 何か が思った場所に収まらないときは、どちらがオンになっているか確認してください。