写真からベクターイラスト。
web｜Vectorizer.AIを試すついでに遊ぶ
こんばんは、さじです。
Adobeの画像生成AI、Fireflyでは現在ベクター生成まで至っていませんが、Illustratorで画像トレースをすればベクター化はできます。ピクセルイラストをベクターイラストにしたい場合、Illustratorが必須。かと思えば。
JPEG、PNGから SVGへの変換サービスがある、というタレコミを見つけました。去年からベータ版が開始され、現在無料。ベータ版では登録も不要で使えます。vectorizer.ai という海外のサービスです。
で、AIの精度がどんなものなのかなー、と偵察してみることにしました。
Adobestockで良さげなお姉さんを見つけたのでこちらの画像をベクター化してみたいと思います。
ちょっとみくびってたのもありますが、少し画質を落とすぐらいではかなり高精細にトレース。時間は数十秒ってところです。画像が大きすぎるとトリミングを促されます。
ダウンロード前に細かく設定ができるのですが、なんせ英語なので。
ブラウザの日本語訳で見てみたところ、ベジェ曲線などの使用するパスの制限やレイヤーの種類など、ダウンロード前に決められるそう。
今回は写真をイラスト風にしてみたいので、画質をうんと落としてアップロードし直し、設定は特に変えずダウンロード。Illustratorで開くと、まー綺麗なパスです。デザイナーより細かい（笑）
ほんの十数秒でパスのいじれるイラストになりました。なんて優秀な。。映画の看板みたいですね（笑）
せっかく 生まれたイラスト姉さんなのでIllustratorでちょっとブラッシュアップしてみようと思います。
元画像の画質を落としたがために、ちょっと目力が弱まってしまったので。
何かもの足りない。唇かな？
うーん。肌の質感がリアルでイヤかも。
背景は消しちゃうか？
おっ。胸と肩、肘のラインをAIが拾えていなかったようだ。
もうちょっとこう。動きというかストーリー感が欲しい。もやっとく？
乗っけてみよう！
所要時間13分。自分で描いてないけどイラストレーターの気分w 左上にスマートウォッチの製品ロゴと写真入れて大判ポスターとかね？
てことで、三流デザイナーでも画像を元にイラストっぽい絵を簡単に作れるというチートですw
Illustratorの画像トレースと同じような感じですが、軽いし速いし正確だしUI良しと使い勝手は抜群でした。
ところで当然と言えば当然なんですが、人間のイラストレーターが作るデータと違い「一部のパーツ（スマートウォッチなど）を変えたい」みたいな加工はちょっと厄介です。その点では現在のAIが生成するイラストは、ベクター化は出来たとしても人間のデータより使い勝手は悪いだろうな、ということがわかりました。
なので、AdobeStockにもAIイラストは爆増してますが、デザイナーにとってプロのイラストレーター（Adobeコントリビューター）さんはまだまだ絶対必要！と思いました。AI時代に挫けずがんばってほしい。
さじ
注：著作権的には、元画像が購入したロイヤリティフリーであっても作成したイラストを「個人の作品として」発表することはNGです。トラブルの元になりますので細心の注意を！
追記 図形の重なりは設定によりある程度可能なようなので、一部内容を訂正しました。
5/18追記 ＬＳＳ (id:little_strange)さんより「SVGのグラデーションの概念」でご質問いただきました。Vectorizer.AIの現状の用途が「ビットマップ（ピクセル）画像」のベクター化なので、グラデーションは分割した幾何学図形で段階的に表現することを目標としているのかなーと思いました。ダウンロードしたSVGは、CSSなどで機能するグラデーション（radialgradientなど？）にはなりませんでした。
上の赤サークルをコードで埋め込みしたところは別途サンプルを作成しましたが見られるかどうかはちょっとわかりません。（https://conasaji.hatenablog.com/entry/SVG-gd-sample）事前プレビューではiPhoneアプリでは全部見られませんでした。
2種類のSVGコードをHTML編集画面に入力していますが、環境に依っては開かない、一部抜け落ちるなどエラーになると思います。
いずれ有料化に伴いサービス自体がアップデートされていけば、radialgradientなど単純なものであれば反映することも可能かも？と思いましたが、開発関連はさっぱり詳しくないので、参考になれば幸いでございます！<了>
