AIでチラシの大本を作り、VectorCraftに渡して編集する流れを試しました。
今回確認したのは、AIが裏側でファイルを編集する「CLI方式」と、起動中のVectorCraft内の文書を直接編集する「ブリッジ方式」です。さらに、同じデータを自分でも操作しました。
どちらの方式も使えました。ただし、細かな修正までAIに任せることが、常に作業時間の短縮につながるわけではありません。大本のデザインと編集可能なデータをしっかり作り、その後は作業に応じてAIと手動操作を使い分ける構成が実用的です。
1．今回試した構成
題材は、架空の「AI活用ミニ相談会」のチラシです。Windowsに導入したVectorCraftを使い、ローカルで作業しました。
| 工程 | 使用した方法 |
|---|---|
| チラシの原案作成 | AIが文字・図形を含むSVGを作成 |
| VectorCraftへの受け渡し | SVGを読み込み、ネイティブ形式で保存 |
| 裏側からの編集 | VectorCraftのCLIをAIが操作 |
| 起動中アプリの直接編集 | ローカルの制御ブリッジへAIから接続 |
| 細部の仕上げ | VectorCraft上で自分でも操作 |
今回の原案は、画像生成AIが出力した1枚のPNGではありません。文字と図形を分けて扱えるSVGとして作成しました。
そのため、読み込み後も見出しの文字、背景、装飾、イラストを個別に変更できました。その後、同じチラシをPNGの1枚絵にして自動分解も試しました。結果は「4．大本のデザインとデータ形式を先に決める」の追加検証に記載しています。
2．CLI方式とブリッジ方式の違い
両者の違いは、AIから指示を出しているかどうかではなく、どの文書を編集しているかです。
| 比較項目 | CLI方式 | ブリッジ方式 |
|---|---|---|
| 編集対象 | ファイルから読み込んだ文書 | 起動中アプリで開いている文書 |
| 操作の流れ | 読み込み→変更→保存→結果を開く | 接続→変更→画面で確認 |
| 画面への反映 | 保存結果を開いて確認 | 接続先の画面に直接反映 |
| 今回の用途 | 初期制作、文字・配色・位置の変更 | タイトル変更の検証、文字の拡大 |
| 注意点 | 開いている画面へ自動反映されるとは限らない | 接続先のウィンドウと文書を確認する必要がある |
CLI方式：裏側で編集し、結果を開く
最初は、AIがVectorCraftのCLIを使ってSVGを読み込み、文字や色、配置を変更しました。その結果をファイルとして保存し、VectorCraftで開きました。
「AI活用ミニ相談会」から「仕事に使えるAI相談会」へのタイトル変更までは、この方式です。
ここでは、画面に表示中のチラシを直接操作していたわけではありません。 ファイルを裏側で編集し、保存結果を表示する流れでした。
ブリッジ方式：起動中の文書を直接編集する
次に、VectorCraftを制御ブリッジ付きで起動し、AIから接続しました。
タイトルへ一時的に「［接続確認］」を追加したところ、起動中のVectorCraftの画面にも変更が表示されました。その後、取り消し操作で元のタイトルへ戻せることも確認しました。
続いて、タイトルを約1割大きくし、行間を調整して保存しました。この工程は、起動中のVectorCraft内の文書に対する直接編集です。
ブリッジ方式でも、AIは編集コマンドを送ります。マウス操作をまねることだけが、直接編集の方法ではありません。
3．ブリッジ構成を作る手順
今回使ったのは、WindowsのPC上で動くCodexのデスクトップ環境です。Codexに日本語で依頼し、VectorCraftの起動、チラシを開く操作、ブリッジ接続まで進めました。ここでは、その流れを初めての方にも分かるように説明します。
役割は、指示を受けて操作するのがCodex、チラシを編集するのがVectorCraft、両者をつなぐ操作用の窓口がブリッジです。VectorCraftにCodexという機能を追加するわけではありません。
ブリッジを起動する前に、本文末尾の公式手順で接続の待受先と認証条件を確認し、接続できる範囲をこのPC内に限定します。認証トークンを使う構成では、本人だけがアクセスできる場所で管理し、トークンの値をAIへの指示文、共有するログ、公開URLへ入れないようにしてください。ここでは、個々の環境でこれらの設定を確認してから接続することを前提にしています。
手順1 WindowsでCodexを使える状態にする
Codexをすでに使っている方は、普段のデスクトップアプリを開いてください。未導入の方は、OpenAI公式のクイックスタートからWindows向けデスクトップアプリの導入案内へ進み、インストールしてChatGPTアカウントでサインインします。
2026年10月18日に確認した公式案内では、ChatGPTデスクトップアプリの切り替えメニューから「Codex」を選びます。Codexの画面が直接開く版を使っている場合は、その画面から進めます。以下は、PC内の作業フォルダーを指定してCodexを使う手順です。ブラウザー上で普通にChatGPTへ質問する手順とは異なります。
今回の方法では、CodexがWindows上でPowerShellのコマンドを実行します。読者が自分でコマンドを書いたり、PowerShellの画面を操作したりする必要はありません。 必要な起動・接続の操作をCodexへ文章で依頼します。Codexを利用できる契約・アカウントであることも確認してください。
手順2 チラシ用のフォルダーを作り、Codexで開く
- Windowsのエクスプローラーで「ドキュメント」など、自分が保存できる場所を開きます。
- 「新規作成」からフォルダーを作り、例として「VectorCraft試作」と名付けます。
- 編集するチラシのコピーをその中に置きます。この記事ではファイル名を「チラシ.vectorcraft」とします。元のファイルは別に残します。
- Codexに戻り、「Add new project（新しいプロジェクトを追加）」またはフォルダーを開く操作で、この「VectorCraft試作」フォルダーを指定します。Windows版では、
Ctrl + Oでもフォルダー選択を開けます。 - そのフォルダーを対象に、新しいチャットを始めます。実行先を選べる場合は、このWindows PCで作業するローカルのチャットを使います。
ここで指定するフォルダーは、Codexが今回の仕事で読む・書く場所です。Gitリポジトリの作成は今回の編集には必要ありません。既存プロジェクトを使う場合は、プロジェクトのメニューから「Edit project（プロジェクトを編集）」→「Add folder（フォルダーを追加）」で作業フォルダーを関連付けられます。初心者の方は、今回の試作フォルダーだけを指定すると対象を確認しやすくなります。公式：プロジェクトとチャット
VectorCraft本体も、このPCへインストールしておきます。今回の本体の場所はC:\Program Files\VectorCraft\vectorcraft.exeでしたが、読者のPCで同じとは限りません。導入していない方は、本文末尾のVectorCraft導入ガイドを先に参照してください。すでにチラシを開いて編集している場合は、その変更を先に保存しておきます。
作成済みチラシがない場合は、同じCodexのチャットへ次のように依頼できます。これは、今回の「AIがSVGを作り、VectorCraftへ渡した」流れを小さく試すための指示例です。
この作業フォルダーに、架空の「AI活用ミニ相談会」のチラシを作ってください。
文字と図形を後で個別に編集できるSVGにし、チラシ.svgという名前で保存してください。
日時・会場は架空と明記してください。まだVectorCraftでの編集は始めないでください。
保存したファイルのフルパスを報告してください。この指示例を使った場合、以下の指示文にある「チラシ.vectorcraft」を「チラシ.svg」へ置き換えます。SVGを開いた後は、編集用の原本をVectorCraft形式で保存します。
手順3 Codexに起動・ファイルを開く操作・接続をまとめて依頼する
Codexのチャット入力欄へ、次の指示文をコピーして送ります。フォルダーは手順2で指定済みなので、自分で長いパスを入力する代わりに「このチャットの作業フォルダー」と指定します。ファイル名だけ、実際の名前に合わせてください。
このWindows PCのVectorCraftをブリッジ付きで起動し、
このチャットの作業フォルダーにある「チラシ.vectorcraft」を開いてください。
最初に、次の内容を確認して報告してください。
・このチャットの作業フォルダーのフルパス
・指定したチラシが実際に存在すること
・インストール済みVectorCraft本体（vectorcraft.exe）の場所
確認できたら、次の操作まで進めてください。
1. 起動中のVectorCraftに接続できるブリッジがあるか調べる。
2. 接続できなければ、--control 7979を付けてVectorCraftの画面を起動し、指定ファイルを開く。
3. --automation-read-root と --automation-write-root は、この作業フォルダーに限定する。
4. Codexから127.0.0.1:7979の制御ブリッジへ接続する。
5. 接続先の文書名、ファイルパス、現在のタイトル文字を読み取って報告する。
これは、起動中のVectorCraft内の文書を直接編集するための準備です。
ヘッドレスCLIでファイルを書き換える方式へ、黙って切り替えないでください。
既存ウィンドウは勝手に閉じず、未保存の編集を破棄しないでください。
別ウィンドウで開いた場合は、そのことを報告してください。
ファイルやアプリが見つからない場合は、推測で進めず不足を報告してください。
この段階では、文字・図形の編集や上書き保存はしないでください。Codexがアプリの起動やローカル接続について許可を求めた場合は、実行対象がVectorCraft、開くファイルが今回のチラシ、読み書き先が試作フォルダーであることを確認します。内容が一致していれば、その操作を許可します。PC全体へのアクセスを一括許可することを前提にはしません。会社のPCで管理者の制限がある場合は、その運用に従ってください。
今回の検証では、Codexがコマンド実行機能からVectorCraftを起動し、ローカルの制御ポートへ要求を送りました。この方法では、新たにVectorCraft用MCPプラグインを登録する作業は行っていません。 「ブリッジモード」というCodexの設定ボタンを探すのではなく、CodexにVectorCraftの制御ブリッジを有効にして起動してもらいます。
Codexから「起動しました」と返事が来たら、VectorCraftのウィンドウに指定のチラシが表示されていることを自分でも確認します。アプリが開いただけでは、ブリッジ接続まで完了したことにはなりません。 次の手順4で、Codexが文書の内容を読み取れたことまで照合します。
Codexの画面名・フォルダー操作は2026年10月18日に確認した公式クイックスタートとWindows版の公式案内を参照しています。画面構成はバージョンによって変わる場合があります。VectorCraftとの接続は、今回のPCで確認できた方法です。
手順4 開いたファイルとブリッジ接続を確認する
自分の画面にVectorCraftと目的のチラシが表示されていることを確認します。そのうえで、AIの報告について次を照合します。
- 文書名とファイルパスが、手順2で指定したファイルと一致している。
- AIが読み取ったタイトルが、画面上のタイトルと一致している。
- 保存結果を開いただけではなく、起動中のVectorCraftにブリッジ接続できている。
- 複数のウィンドウがある場合は、どのウィンドウがAIの接続先か分かっている。
今回、先に開いていたウィンドウには制御ポートがなかったため、同じ保存済みチラシをブリッジ有効の別ウィンドウで開きました。元のウィンドウの未保存状態を引き継いだわけではありません。以後の編集対象は、新しく接続したウィンドウです。
手順5 小さな変更と取り消しで、直接編集できるか試す
接続確認後、次のように依頼します。AIの操作中は自分で同じ文書を編集せず、変更と取り消しを見届けます。
接続中のVectorCraftで、今開いているチラシのタイトル末尾に
一時的に「［接続確認］」を追加してください。
画面に反映されたことを確認したら、取り消し操作で元に戻してください。
元のタイトルに戻り、検証による未保存の変更が残っていないか確認してください。
この検証の変更は保存しないでください。今回も、画面への反映と取り消し後の状態を確認してから、本来の編集へ進みました。失敗した場合は、接続先の文書、保存状態、制御ポートを確認し、原因が分かるまで編集を続けません。
手順6 AIへ編集と保存を指示する
直接編集できることを確認したら、変更箇所と希望する仕上がりを具体的に伝えます。今回のタイトル拡大なら、次のように依頼できます。
ブリッジ経由で、今開いているチラシのタイトル
「仕事に使えるAI相談会」を約1割大きくしてください。
2行の配置を保ち、周囲の文章と重ならないように行間を調整してください。
画面で仕上がりを確認したうえで、同じファイルへ保存してください。
保存完了と、未保存の変更が残っていないことを確認して報告してください。AIの「できました」という返答だけで終えず、自分でも画面を確認します。保存処理が進行中なら、完了まで待ちます。接続先のVectorCraftを終了するとブリッジも終了するため、次回は同じ起動・接続確認から始めます。
4．大本のデザインとデータ形式を先に決める
大本になるデザインをしっかり作った方がいいのは、言うまでもありません。
何を伝えるチラシなのか、誰に読んでもらうのか、どの情報を最初に見せるのか。ここが曖昧なままでは、編集方法を増やしても修正が続きます。
最初に整理したいのは、次の内容です。
- 見出しと本文の優先順位
- 日時・場所・参加条件などの掲載情報
- 配色、余白、イラストの役割
- 後から差し替える文字や画像
そのうえで、受け渡す形式を選びます。
| 元データ | 向いている使い方 |
|---|---|
| PNG・JPEGなどの1枚絵 | 写真や質感を生かした素材として使用 |
| 文字・図形を分けたSVG | 文字の差し替え、配色・配置の調整 |
| VectorCraft形式 | 読み込み後の編集状態を保存して継続作業 |
画像生成AIで背景やイラストを作り、見出しや日時は編集可能な文字として重ねる構成も、追加で試しました。後述の「AI生成の背景に編集可能な文字を重ねる」で、実際の手順と結果を紹介します。
見た目の完成度と、後から直せることの両方を考えて作るのが、受け渡し時のポイントです。
追加検証：1枚絵を文字や図形へ自動分解できるか
続いて、今回のチラシを1枚のPNG画像（794×1123px）にして、VectorCraftへ読み込む検証も行いました。元のSVGが持っている文字や図形の情報を使わず、画像だけからどこまで分解できるかを確かめるためです。この追加検証は、CodexからCLIを操作し、原本とは別のファイルへ保存する方式で行いました。
PNGを読み込んだ直後は、チラシ全体が1個の画像として配置されました。そこで、自動トレース（画像の色や輪郭をベクターの線・面に変える処理）を実行し、結果を展開しました。
- 通常のAuto Color設定では、パスや一部の図形へ分かれましたが、小さい文字の欠落や断片化が目立ちました。
- 細部を優先する設定へ変えると、小さい文字の見た目は改善しました。ただし、レイヤーやグループを含む全体のオブジェクト数は5,991個まで増えました。
- どちらの設定でも、編集可能なテキストのオブジェクトは0個でした。文字も輪郭のパスに変わっています。
つまり、見た目をベクター化することと、文字やレイアウトを編集しやすいデータへ戻すことは別です。今回の結果では、タイトルを選んで別の文章へ打ち替えたり、元のフォント情報を使って調整したりすることはできません。細かいパスが増えるため、元のSVGと同じ編集のしやすさも得られませんでした。
文字が編集可能なテキストに戻らないことを考えると、AIでチラシを生成する段階から、文字を別にする構成を考慮した方がいいと思います。背景やイラストは画像生成AIで作り、見出し、日時、場所、申込案内などは、VectorCraft上で編集可能なテキストとして重ねる方法です。後から修正する情報を1枚絵の中へ焼き込まず、大本のデザインと文字を分けて用意しておく方が、その後の編集につなげやすくなります。
この自動分解の結果は、今回のPNGと2通りのトレース設定で確認した範囲です。OCRで文字を読み取り、テキストとして再配置する処理は未検証です。背景画像と文字を分けて作る方法は、次の追加検証で試しました。
追加検証：AI生成の背景に編集可能な文字を重ねる
そこで、背景・イラストだけを画像生成AIで作り、文字をVectorCraftで重ねる方法も実際に試しました。背景画像1個と、編集可能なテキスト19個でチラシを作成でき、文字の変更、保存、再読み込みまで確認できました。
進めた手順は、次のとおりです。
- 画像生成AIに「文字・数字・ロゴを入れず、背景とパソコンなどのイラストだけを作る。見出しと本文を後から置く余白を空ける」と指示し、縦長のチラシ用画像を生成しました。
- 生成したPNGを埋め込んだSVGをVectorCraftへ読み込み、背景画像をロックしました。自動トレースは使っていません。
- CodexからVectorCraftのCLIでテキスト作成コマンドを実行し、タイトル、説明文、日時、会場などを別のテキストとして配置しました。画像の曲線やパソコンと重ならないように、位置と改行を決めています。
- 日時を「14:00–14:30」から「15:00–15:30」へ、定員を4名から6名へ変更し、VectorCraft形式で別名保存しました。保存後に再読み込みし、変更内容とテキストの状態を確認しました。
- 保存したファイルを実際のVectorCraftで開き、ブリッジからタイトルを「仕事に使える」→「仕事に役立つ」へ一時変更しました。取り消すと元のタイトルへ戻り、未保存の変更が残っていないことも確認しました。
保存したデータには、画像1個とテキスト19個が残っていました。日本語フォントはYu GothicのRegularとBoldで、フォント不足、欠落文字、読み込み警告はいずれもありませんでした。文字を変えるために背景画像を生成し直す必要はありません。
ただし、背景とイラスト自体は1枚の画像のままです。パソコンや植物を個別の図形として動かせるわけではありません。絵の部品も別々に編集したい場合は、それぞれを別素材として生成するなど、最初の作り方を変える必要があります。この構成も、次の追加検証で実際に試しました。
今回試した範囲では、後から日時や見出しを直すチラシなら、AIで背景・イラストを作り、修正する文字は編集可能なテキストとして重ねる構成が使いやすいと感じました。大本の画像を生成するときに、文字を置く余白まで考えておくことが、この方法でも大切です。
追加検証：背景・イラスト・文字を別々に配置・移動する
さらに、背景とイラストも別々にAIで生成し、VectorCraftで個別に配置・移動できるかを試しました。背景画像1個、透過PNGのイラスト1個、編集可能なテキスト19個という構成で作成できました。
- 文字やパソコンを入れない背景画像と、背景が透明なパソコンのイラストを、それぞれ別の指示でAI生成しました。
- VectorCraftで背景を読み込み、別の画像としてパソコンを配置しました。どちらもファイル内へ埋め込み、背景はロックしました。見出し、日時、会場などの文字は、別のテキストとして作成しています。
- CLIでイラストだけを左へ42px・上へ26px移動し、保存して再読み込みしました。イラストの移動が保存され、背景と文字19個の位置は変わっていないことを照合しました。
- 実際のVectorCraftを起動し、ブリッジからイラストだけを移動して取り消しました。続いて背景のロックを一時解除し、背景だけを移動。他の部品が動かないことを確認して、移動とロック解除を取り消しました。タイトルの書き換えと取り消しも試しています。
保存後のデータは、画像2個とテキスト19個を保持していました。フォント不足、欠落文字、読み込み警告はありません。ブリッジでの一時的な変更はすべて取り消し、背景をロックした元の状態へ戻しました。
後から動かしたい部品を、最初から別素材として生成しておく方法は、このチラシで実行できました。文字を差し替えるだけでなく、イラストの位置を見ながら調整する場合にも使えます。
ただし、個別に動かせる単位は、生成・配置した素材ごとです。パソコンと一緒に生成した小さな飾りは同じ画像の一部で、背景の曲線や帯も背景画像の一部です。画面やキーボードなどを別々の図形として編集できるようになったわけではありません。さらに細かく変更したい部品は、素材を分けるか、VectorCraftの図形として作る必要があります。
5．自分で操作した方が早い場面
今回、自分でも文字の大きさや色を変更しました。
変更する対象と希望が決まっていて、操作方法も分かる方なら、自分で編集した方が早い場面があります。AIに指示を出し、結果を待ち、確認して修正を伝える時間もかかるからです。
| 作業の状態 | 選びやすい方法 |
|---|---|
| 文字を少し大きくする、色を1か所変える | 手動操作 |
| 画面を見ながら微妙な位置を決める | 手動操作 |
| 原案の構成や配色を複数考える | AIで案を作り、人が選ぶ |
| 条件が明確な変更をまとめて行う | CLIやブリッジでのAI操作を検討 |
| 起動中の画面を見ながらAIに変更を頼む | ブリッジ方式 |
これは、今回の作業から考えられる使い分けです。手動とAI操作の所要時間を計測して比較したわけではありません。
AIを使えるからといって、すべてをAI経由にする必要はありません。操作に慣れている方は、自分で仕上げればよいと思います。
6．導入するかを判断する基準
まずは、AIで編集可能な原案を作り、VectorCraftで自分が仕上げる構成から試すと、必要な機能を判断しやすくなります。
裏側でまとまった変更を行いたいならCLI、画面を共有しながらAIに編集を頼みたいならブリッジを追加する、という選び方です。
今回確認できたのは、SVGの受け渡し、日本語の文字編集、配色・位置の変更、ブリッジ経由での直接編集と取り消し、保存までです。追加検証ではPNGの1枚絵をパスや図形へ変換できましたが、文字は編集可能なテキストには戻りませんでした。一方、AI生成の背景に別のテキストを重ねる方法では、文字の変更、保存、再読み込みまで確認できました。さらに背景とイラストも別々に生成・配置し、他の部品を動かさずに個別移動できることも確認しました。印刷入稿に必要な塗り足しやCMYK、OCRによる文字の再配置は未検証です。
大本をAIでしっかり作り、細部は自分で直す。必要なときだけAIにも編集を頼む。今回試した範囲では、この使い分けが現実的だと感じました。
検証日：2026年10月18日。製品情報と制御方法は、VectorCraft公式ページおよび公式の制御プロトコル資料も参照してください。