【AI画像生成】統一感のあるイラスト生成～WebデザインのためのChatGPT, Google Gemini活用術～

AIでイラスト系画像を生成するというと、CG感あふれるグラフィック系や、萌え絵のようなテイストの画像をイメージされるかもしれません。

ですが、イマドキの生成AIは本当にすごい。
Webサイトでも違和感なく使えるようなシンプルなイラストや、アイコンなども生成することができます。今回はChatGPT, Google Geminiを中心に「Webページ内で使っても違和感のない、統一感を持たせた画像」の生成方法をご紹介します。AIの画像生成を活用すると「STEP2だけ良いイメージ画像が見つからない！」なんて素材探しの悩みからも解放されるかもしれません。

• 今回の内容について
• 今回の目標
• 使用する生成AI
• 統一感のあるイラスト画像を生成しよう
• ChatGPT
• Google Gemini
• どちらを採用するか決めて、Webページを修正してみよう
• バリエーション+プロンプトテンプレートを作る
• ベクター形式のアイコンを生成
• Adobe Firefly
• Claude
• まとめ

今回の内容について

今回の目標

「ある程度デザインが出来ている状態のWebページに、テーマに沿った追加画像をAIで生成する」という、実際のお仕事に近いシチュエーションを想定して画像生成を試していきます。

使用するのはWebデザイン×AIシリーズで度々登場している、架空の動物園サイトのWebページです。
前回ファーストビュー（スライダー）用に写真風の画像を作りましたので、今回はイラストを追加してみましょう。

素材ダウンロード

1. 統一感のあるイラスト画像

「ズーロッパ東京とは」の下部分、タブ幅を狭めて左右に動物のイラストを配置します。
好き嫌いがわかれず、無難なシンプルな線画風イラストを生成して追加します。

2. 拡大縮小可能なベクターアイコン画像

ヘッダー部分で使っているパンダのアイコンを、もう少しキャラクターっぽいアイコンに変えます。
またフッター部分も新しいパンダのキャラクターを使って、少し作りこんでみたいと思います。

使用する生成AI

本記事では以下の４つの生成AIを使用します。
どれもオーソドックスな生成AIで、特別な設定等なくブラウザ上で無料で使用できます。

• ChatGPT
• Google Gemini
• Adobe Firefly
• Claude

統一感のあるイラスト画像を生成しよう

まずは、同じような雰囲気のイラストをAIで生成します。
前回の記事でもご紹介したように、Adobe Fireflyは統一感のある画像を作るには向いていないので、ChatGPTとGoogle Geminiの２つを使いながら比較していきます。

ChatGPT

ChatGPT

STEP1: プロンプトを考えて試す

生成してほしい画像について、テキストでAIに指示を出します。
何を書いてほしいか、どんなテイストの画像にしてほしいのか、どんな色遣いにしてほしいのか…具体的に書くほど、イメージに近い画像が生成される可能性は高まります。

と言っても、プロンプトの書き方は人によって様々。
私は全部を文章でまとめるのが苦手なので、以下のように箇条書きで要件を書いています。

以下で指定する画像テイストに準じて、シンプルなイラストを生成してください。

### 描画する要素
- キリンのイラスト

### 画像テイスト
- シンプルでミニマリスティックな線画。
- 背景色は白（#ffffff）、線の色は黒(#1a1a1a)のみを使用する。
- 一色のみ塗り色を入れてアクセントにする。使用色は黄色（#ffed32）
- ストロークは細めで繊細、太さを変化させず均一に保つこと。
- 陰影やハッチングは一切使用しないこと。
- 全体的に軽やかで洗練された構図で描くこと。

お…このまま使っても良いくらいの画像が出ましたね。

STEP2: イメージに近い画像になるように調整

ChatGPTが生成した画像が気に入らない、もっと「ここをこうしてほしい」という要望があれば追加でプロンプトを入れていきます。

そのままチャット形式で続けても構いませんが、今より良くなるか不安・追加プロンプトがうまく認識してもらえるかちょっと怖いという時は、ChatGPTの場合は「新しいチャットに分岐」を使う方法もあります。
生成された画像の下にある三点リーダー（…）のアイコンをクリックすると使えます。

「新しいチャットに分岐」すると、ここまでのAIとのやり取りを引き継いだ新しいチャットが作成されます。
上手くいかなかったら破棄（削除）して、分岐する前のチャットに戻れば良いので、気楽に色々な指示を試すことができますよ。

しっぽの先に色を入れるように指示すると…やってくれましたね！
良い感じの画像が出来たら、ダウンロードしましょう。

STEP3: バリエーションを作る

作成された画像のテイストに準じて、他のイラストを作ることもできます。 あまり難しい指示はせず、以下のように書くだけでも対応してくれますよ。

このキリンと並べても違和感が無いよう、同一のテイストでライオンのイラストを作成してください。

- ライオンはたてがみがあるオスライオン
- 使用する塗り色は赤（#e83636）に変更する

ちゃんと指示通りテイストは合わせてくれていますね。

こちらも追加要望があれば、それを入力して送信します。
今回の場合はタテガミが分かりにくいので以下のように送りました。

Google Gemini

Google Geminiの場合も、基本的な手順はChatGPTと同じです。

Google Gemini

STEP1: プロンプトを考える

生成してほしい画像について、テキストでAIに指示を出します。
今回は上記のChatGPTと同じプロンプトを入れてみましょう。

以下で指定する画像テイストに準じて、シンプルなイラストを生成してください。

### 描画する要素
- キリンのイラスト

### 画像テイスト
- シンプルでミニマリスティックな線画。
- 背景色は白（#ffffff）、線の色は黒(#1a1a1a)のみを使用する。
- 一色のみ塗り色を入れてアクセントにする。使用色は黄色（#ffed32）
- ストロークは細めで繊細、太さを変化させず均一に保つこと。
- 陰影やハッチングは一切使用しないこと。
- 全体的に軽やかで洗練された構図で描くこと。

プロンプトの指示に従って、画像を生成してくれます。
今回の場合はChatGPTより写実的で、繊細な線の画像が生成されました。

STEP2: イメージに近い画像になるように調整

Google Geminiが生成してくれた画像もとてもクオリティが高いのですが、今回の動物園サイトだとちょっとリアルすぎるかもしれません。

もう少しシンプルにデフォルメしてくれるように、追加の指示を送信します。
（このあたりは、それぞれ生成された画像に合わせてどうぞ）

STEP3: バリエーションを作る

納得のいくイメージが生成されたら、同じテイストを維持したまま別の要素を描画してもらいましょう。

このキリンと並べても違和感が無いよう、同一のテイストでライオンのイラストを作成してください。
- ライオンはたてがみがあるオスライオン
- 使用する一色のみの塗り色は赤（#e83636）に変更する

どちらを採用するか決めて、Webページを修正してみよう

ChatGPTとGoogle Geminiが生成した画像を見比べてみましょう。
追加プロンプトこそ少し違いますが、ほぼ同じテキストでも結構差がありますね。

どちらを使うのかを考えて、「ズーロッパ東京とは」のタブ部分に画像を入れてみましょう。簡単にでOKです。

デモではGoogle Geminiの方を、余白部分をトリミングして使いました。

<div class="container section-padding">
    <div class="tab"><!-- ★ ここにラッパー要素を追加し、CSSを加えます -->
        <div class="tab__nav">
            <button class="tab__btn active">園内マップ</button>
            <button class="tab__btn">アクセス</button>
            <button class="tab__btn">Q&A</button>
        </div>
        <div class="tab__content">
        ...
        </div>
    </div>
</div>

.tab {
  position: relative;
  padding-inline: 180px;
}

.tab::before,
.tab::after {
  position: absolute;
  bottom: 0;
  content: "";
  width: 180px;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  mix-blend-mode: multiply;
}

.tab::before{
  left: 0;
  background-image: url(images/gemini01.jpg);
}

.tab::after{
  right: 0;
  background-image: url(images/gemini02.jpg);
  transform: rotateY(180deg);
}

もちろん違う方法で画像を入れても良いです。
どうして良いかわからない…なんて時はCursorのAIに相談してみるのもおすすめですよ。

バリエーション+プロンプトテンプレートを作る

ここまではシンプルに動物のイラストを作ってきました。
生成されたイラストを使って、人間を入れた、少し複雑な構図を作ってもらいましょう。

ChatGPT, Google Gemini、Webページに採用したほうのAIサービスを使用してください。
Webページに使用した画像を、参考画像として添付します。チャットの入力欄にドラッグアンドドロップすると添付できます。

そして、以下のプロンプトのように作成してほしい画像の詳細を伝えます。
飼育員の髪型や服装、背景など、描いてほしいものが詳細に決まっていれば、描画シーンの説明に加えるとさらに良いです。

添付した画像のテイストを順守して、以下のイメージを生成してください。

### 描画シーン
飼育員がキリンに餌をやっているシーン。
飼育員は女性、笑顔。

### 画像テイストの条件
- シンプルでミニマリスティックな線画。
- 背景色は白（#ffffff）、線の色は黒(#1a1a1a)のみを使用する。
- ストロークは細めで繊細、太さを変化させず均一に保つこと。
- 陰影やハッチングは一切使用しないこと。
- 全体的に軽やかで洗練された構図で描くこと。

あとはこれまでと同じですね。
生成された画像をもとに、良くない点や直してほしいところを打ち込んでいって調整します。

前回の記事でもGPTで行いましたが、良い感じだなと思う画像が出来たら、AIに「どんなプロンプトを入れたら今のような画像ができますか？」とプロンプトのテンプレートを作ってもらうのもアリです。

以下、 Google Geminiが返してきたプロンプト例です。

### プロンプト例

これらのポイントを踏まえたプロンプトの例です。

**シンプルな線画で、飼育員の女性がキリンに餌をやっているシーンを描いてください。**

-   **テイスト:** シンプルでミニマリスティックな線画。
-   **配色:** 背景は白（#ffffff）、線は黒（#1a1a1a）のみを使用。
-   **描画:** 細く均一なストロークで、陰影やハッチングは一切使用しないこと。
-   **構図:**
    -   女性は笑顔でキリンの前に立っている。
    -   女性が持つ葉を、キリンが首を曲げて食べている。
    -   キリンは女性よりも大きく描く。
-   **全体的な印象:** 軽やかで洗練された構図。

このプロンプトをひな型にして、他に作りたい画像を指示していくと便利です。

例）

**シンプルな線画で、動物園に遊びに来た子どもたちが動物と戯れているシーンを描いてください。**
添付した画像は、テイスト・配色の参考です。

-   **テイスト:** シンプルでミニマリスティックな線画。
-   **配色::**
    -   背景は白（#ffffff）、線は黒（#1a1a1a）のみを使用。
    -   赤（#e83636）を使って、一色だけアクセントとして色を入れる。
-   **描画:** 細く均一なストロークで、陰影やハッチングは一切使用しないこと。
-   **構図:**
    -   男の子がキリンに餌の葉をあげてようとしている。キリンは葉を食べようと首を曲げている。
    -   女の子がウサギを抱っこしている。
    -   キリンは子どもたちよりもかなり大きく、ウサギは子どもが抱けるくらいのサイズ感で描写。
-   **全体的な印象:** 軽やかで洗練された構図。

赤単色と指示したのでキリンに色がないですが、その辺は追加指示を入れればOK。
日本のWebサイトでよく見かけるテイストのイラストになったんじゃないでしょうか。

大体のテイストが一貫しているので、同じWebサイト/Webページ内で使っても浮かないのが良いところ。
↓ 試しに生成された「飼育員」と「子どもたち」を載せてみましたが、ちゃんと統一感があります。

◆ プロンプトのベースは汎用的に使える

いやいや、動物園の画像なんて他に使わないし…と思った方。
描画する要素や構図の指示だけ変えれば、ビジネス寄りの画像にもなりますよ。

**シンプルな線画で、「業績アップに喜ぶビジネスマン」を描いてください。**
添付した画像は、テイスト・配色の参考です。

-   **テイスト:** シンプルでミニマリスティックな線画。
-   **配色::**
    -   背景は白（#ffffff）、線は黒（#1a1a1a）のみを使用。
    -   青（#327efb）を使って、一色だけアクセントとして塗り色を入れる。
-   **描画:** 細く均一なストロークで、陰影やハッチングは一切使用しないこと。
-   **構図:**
    -   ビジネスマンはスールを着た30歳前後の男性。ショートヘアで、前髪は眉上。
    -   パソコンを見ながらガッツポーズをしている。
    -   ビジネスマンは正面を向き、パソコンは背面が描画されている。
    -   パソコンから吹き出しで右肩上がりのグラフを描画する。（業績アップに喜んでいるとわかるように）
-   **構図に含めてはいけない要素
    -   眼鏡
    -   ヒゲ
-   **全体的な印象:** 軽やかで洗練された構図。

素材サイトなどで見かけても違和感のない画像ができました。

目や口を小さく、髪を塗る…などなど変更したい部分を指示→再びプロンプト例を作ってもらう…という流れを繰り返すと、自分だけのプロンプト集が増えていきます。
一発百中・一撃で100点満点の画像が出てくるということはないですが、プロンプトを考える手間が省け、再生成を繰り返す回数や時間も確実に減ります。

ベクター形式のアイコンを生成

現時点でChatGPT, Google Geminiはラスター形式画像（JPEG, PNG）のみですが、ベクター形式の画像を生成できるAIサービスもあります。 以下では無料でも試すことができる Adobe Firefly と Claude の２サービスをご紹介します。

Adobe Firefly

同一のテイストで画像バリエーションを作るのは苦手なAdobe Fireflyですが、単品でベクターアイテムを作る場合には結構使えます。 トップページで「ベクター画像」を生成すると、ベクター形式の画像生成ができますよ。

Adobe Firefly

 パンダの顔だけのアイコン。白と黒の2色のみを使用し、シンプルでフラットなデザインにする。

出来た画像は…相変わらずプロンプトが無視されていますね。

Fireflyは「画像のテイストは左のパネルで指定せよ」みたいなところがあります。
左側のパネルの設定から「フラットデザイン」を選んで追加すると、結構シンプルなものに変えてくれます。

ベクター生成の良いところは、illustratorなどを使えば自分で修正できるところ。
良さそうなものがあったら、色やいらない影は自分で消しちゃうのもアリです。

Claude

ClaudeはFireflyよりももっとシンプルなアイコンを作るのに適しています。 「お電話」や「お問い合わせ」に使うようなアイコン生成にはすごく良いです。更に、HTMLで使えるSVGタグと、画像としてのSVGファイルを両方出してくれるのが強み。

基本の使い方

Claude

ChatGPTなどと同じく、プロンプトを入力するエリアがあります。
作成してほしい内容を入力して送信すればOKです。

SVG形式で「電話」のアイコンを作成してください。
Webサイトで電話番号表記の前に配置して、わかりやすくするためのアイコンです。

* シンプルでフラットなデザインにする。
* 塗り色は1色のみ。
* 角は4pt程度丸める。

SVGを生成してくれます。
右上のメニューアイコンから「SVG形式でダウンロード」を選ぶとダウンロードが可能です。

ChatGPTやGoogle Geminiと同じく、生成された画像に対しての修正指示やバリエーション作成も可能です。

Webで使うなら…

上部のスイッチをコードのほうに切り替えると、HTMLにそのまま貼り付けて使えるSVGタグも取得できます。

電話アイコン

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="#333333" rx="4" ry="4"/>
</svg>

メールアイコン

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" fill="#333333" rx="4" ry="4"/>
</svg>

このコードを、HTMLにそのまま貼り付けてもアイコンが表示できます。
サイズや色はコード上で変更出来ちゃいます。

• svg要素に書かれているwidth="24" height="24"を変えると、サイズが変更できます。
• SVGのpath要素にある fill="#333333" の色コードを変えると、アイコンの色が変えられます。

<ul class="infolist">
    <li>
        <svg width="21" height="21" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="#FFF" rx="4" ry="4"/>
        </svg>
        0120-123-123
    </li>
    <li>
        <svg width="21" height="21" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" fill="#FFF" rx="4" ry="4"/>
        </svg>
        zooloppa@zooloppa.com
        </li>
</ul>

HTMLのコードで出力してくれると、「一個か二個しかアイコンを使わないのにCDNでWebアイコン読み込むの嫌だなぁ…」とか「ポチポチDLして名前を変えて作業フォルダに入れるの面倒」という時にも嬉しいですね。

まとめ

汎用性の高いシンプルなイラスト系画像生成、Webページで使いやすいSVG形式のアイコン作成…いかがだったでしょうか？
この記事の作成時点ではラスター画像だとGoogle Geminiのクオリティがきわめて高い結果に終わりましたが、生成AIの進化スピードは驚異的。新モデルのリリースタイミングなどによっても結果は変わります。皆さんも、気になるAIを試してみてください。

なお、すべてにおいて100点満点なサービスは無いと思ったほうが良いです。 例えば、ClaudeはWeb制作（コーディング）で活用しやすいSVGを出してくれる半面、複雑な構図は得意ではない印象があります。一つの生成AIですべてを完結させなくて良い場合は、ChatGPTやGoogle Geminiで生成されたラスター形式画像（JPEG, PNG）を元に、手を加えてベクター画像化するなどの方法もあります。

自分の作りたいものを、どう効率よく作るか。
ぜひ調べて、実践してみてください。