Illustrator の「テキストからベクター生成(AI生成機能)」で、統一感のあるアイコンを制作する方法

Illustrator に「テキストからベクター生成」というAI生成機能が搭載されました。
初めて触った時は、正直「これは実用は厳しいのでは?」という感触でしたが、ようやく使い方が分かってきました。

この記事では「統一感のある、ゲーム風ベクターアイコンの制作」を例に使い方を解説します。
ゲームだけでなく「独自の世界観を持ったWebサイトやアプリで、統一感のあるアイコンを制作したい」という場合でも応用できると思います。

参考にしたい画像がある場合、それを配置する

Illustratorで新規ドキュメントを制作し、作風の参考にしたい画像をアートボードに配置します。私は自分のTwitterアイコンを配置しました。

次に[プロパティ]パネル内の[テキストからベクター生成]内の[種類]は[アイコン]を選択、左下の黄色枠で囲った[スタイルピッカー]ボタンをクリックして、マウスカーソルがスポイトになったら、先ほど配置した画像をクリックします。

長方形を制作する

Illustratorの画面左端にある縦長のツールバー内の[長方形]ツールをクリックするか、またはキーボードの M キーを押し、アートボード上で斜めにドラッグして長方形を制作します。

次にツールバー内の[選択]ツールをクリックするか、またはキーボードの V キーを押します。

Webコーディングスクール 体験レッスン受付中

プロンプトを入力する

「プロンプト」とは、AIに対して何かを行うように指示するための命令や質問のことです。

今回は、かわいらしい作風のうさぎのアイコンにしたいので、[テキストからベクター生成]内の[プロンプト]欄に[かわいい うさぎ]と入力し、Enterキーを押すか[生成]をクリックします。

プロンプトの考え方

このセクションは読み飛ばしてもOKです。

「テキストからベクター生成」は、現状では生成できるものがとても少ないため、プロンプトを考える時はコツがいります。
たとえば多くの画像生成AIでは「東京スカイツリー」というテキストをプロンプトとして与えると、東京スカイツリーそのものや、デザインは違うもののタワーっぽい建物の画像を生成できます。

しかし、「テキストからベクター生成」ではタワーどころか建物ですらない謎の画像を生成してしまいます。
色々試したところ、「テキストからベクター生成」は、現状は「中学生の英語の教科書に載っている英単語、またはそのような英単語に翻訳可能な日本語の単語」程度であれば生成可能 という事が分かりました。

たとえば、以下のような単語は生成可能です。
ハウス、テント、たき火、うさぎ、ピザ、office building

ただし、単語のみだと「期待した見た目と大きく異なるベクター画像」が生成されてしまうことが多いです。
たとえば、自分の脳内では「日本のゲームに登場するようなかわいらしいドラゴン」をイメージしていたのに、「ドラゴン」というプロンプトだと恐ろしい見た目のドラゴンになってしまう、といったことが起きます。

そこで、プロンプトは「装飾語 単語」のように入力することをお勧めします。
装飾語は、たとえば以下のようなものが利用可能です。
かわいい、怖い、グラデーション、ミニマリズム

以下はそれぞれ、「かわいい ドラゴン」「かわいい お城」と、「怖い ドラゴン」「怖い お城」というプロンプトで生成した例です。

「かわいい ドラゴン」「かわいい お城」と、「怖い ドラゴン」「怖い お城」というプロンプトで生成した例

統一感のあるアイコンを制作したい場合、[スタイルピッカー]で参考にしたいアイコンをクリックすると、より確実に統一感が出しやすいと思います。

アイコンは3つずつ生成される

アイコンを生成した時、アートボードには1つしか表示されていませんが、プロパティパネル内の[テキストからベクター生成]内の[バリエーション]を見ると3つ生成されていることが分かると思います。
ここをクリックして切り替えても良いですし、イメージに合うものがなければ再度[生成]をクリックして新しく3つ生成しても良いと思います。

生成したアイコンの色を変更する

「生成したアイコンの形はイメージ通りだけど、色がイメージに合わない」ということもあると思います。
その場合は、[選択ツール]などで1度アートボード上の何もない場所をクリックしてから、再度生成したアイコンをクリックします。

するとアイコンの下に表示されるツールバーに[再配色]というボタンが出現しますので、それをクリックして再配色ダイアログを表示します。

ダイアログ上部には[再配色]と[生成再配色]タブがあり、[生成再配色]の[プロンプト]欄に色名を入れても良いですが、ここは日本語の認識力がかなり微妙で、たとえば「水色」と入れても水色が出てこなかったりします。
英語で[white and blue]などと入力しても良いですが、あまり期待した結果にならないことも多いと思います。

私は、現状は[生成再配色]より[再配色]タブを使用した方が早いと思います。

[再配色]タブで色相環部分の1番大きな○がメインカラーなので、その部分をドラッグして好きな色のところで離します。
○を色相環の中央に近づけると明るく低彩度に、色相環の外側に近づけると暗く高彩度になります。

Illustrator の「テキストからベクター生成」のメリットとデメリット

従来の多くの画像生成AIでは、画像はラスター画像(JPEG写真のようなピクセルの集まり)でできているため、一部を修正することが難しく、拡大すると荒れて見えるためアイコンやロゴなどには使いづらいといった問題がありました。

Illustrator の「テキストからベクター生成」は現時点では生成できるものがとても少ない(特定の建築物などはもちろん、ロゴマークのようなものも難しい)というデメリットはあるものの、再編集が容易であることや、一貫性のあるアイコンを素早く制作できることは他のAIにはないメリットだと感じました。

2023年10月の執筆時点ではまだベータ版のため商用利用は不可(追記: 商用利用可能になりました)ですが、今後対応可能なプロンプトのバリエーションを増やした上で正式リリースされることを楽しみにしています。

追記: 日本では商用利用可能だそうです。

以前に公式サイトを確認した時は「ベータ版は商用利用不可」と書かれていたため、記事公開時点では商用利用不可と記載しておりましたが、日本では商用利用可能だということが確認できました。

Adobe公式サイトが10月11日に更新され、以下のように記載されていました。

テキストからベクター生成 (Beta) は、アドビがサービスを提供しているすべての Illustrator アプリで利用でき、100 以上の言語に対応しています。ただし、中国では利用できず、商用利用もできません。

リンク: 生成 AI を使用して Illustrator でベクターグラフィックを生成

念のため日本では商用利用可能かサポートチャットで問い合わせたところ、以下の回答でした。

こちらについては、作成した素材は商用利用は可能となっております。
「こちらについては、作成した素材は商用利用は可能となっております。」「はい、わかりにくく恐縮ですが、現状商用利用は可能となっておりますので、ご安心くださいませ。」

掲載許可も頂けたため、回答のスクリーンショットも掲載しました。

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index