記事の挿絵をつくる技術

## 挿絵の価値

最近はQiitaなどで記事をつくる際には、挿絵に力を入れています。

単純にプログラムコードを紹介するような記事の場合は不要かもしれませんが、少し情緒をもたせる記事であったり、記事のテンポやリズムを整えるのに挿絵は効果があると考えるようになったからです。

近年は生成AIで簡単にイラストを作成できるようになったのも良いですね。

デザイナーにイラスト作成を依頼しながら、「文章の調整の結果、やっぱりいらなくなりました。」とは、言いづらいですが、生成AI相手であれば何度でもリテイクやお蔵入りが許されます。

## 具体的な事例

最近の記事はChatGPTで主に挿絵を作成しています。
例えば、下記の記事の例でやりとりを見てみましょう。

https://qiita.com/koji-yamauchi/items/e4a2aca8da1a2be187a4

```
全身が映る鏡で、パジャマの人が鏡に写った姿はスーツ姿のイラストを作成してください。
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/81b3753b-bcc9-1b16-79d9-4f3ab84e2cf7.png)

もっと大きな鏡にしたいなと思い、下記の追加依頼を投げました。

```
壁一面が鏡になっている想定で書き直してみてください
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/318bae31-24c9-1870-46a5-ebf831644d3a.png)

生活感が出ちゃっているのと、鏡の世界は何故か二人になってしまいました。
二人に増えたのはおそらくたまたまかな、と思い特に言及せずに次の依頼を投げました。

```
窓や家具の一切ない部屋で壁自体が大きな鏡になっている想定で書き直してみてください
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/52c701d4-2907-4d54-b00b-e1c6fa9b895e.png)

窓が引き続き存在するのと、「壁自体が大きな鏡」にはなっていないものの、おそらくAIは壁一面が鏡になっている状態をうまく認知できないのだろうと思い、これを最終版としました。

次に古谷実の「苦痛を液体にしたモノ」のイラスト作成を試みます。

```
ペットボトルに紫がかった黒い液体が入っているイラストをつくってください
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/5c6a2e58-2758-42d8-da28-f3d08bb65663.png)

イメージ通りとなりました。
これをベースに苦痛水を増やしましょう。

```
ありがとうございます。これを縦1:横2の横長の比率で、ペットボトルの本数を増やして描いてみてください
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/3d70bafa-2322-8589-011c-a83973bb78aa.png)

できました。最高にまずそうです。

## うまくいかないケース

### 意味のある作図

https://qiita.com/koji-yamauchi/items/0452da3f351152403fae

こちらの記事では、イラストの他に図表を用いています。
挿絵とテイストとあわせてこれらも生成AIにつくってもらおうとしていたのですが、意味のある図やチャートは難しいようでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/a429857c-7814-1f0c-aca3-d337b9cefca3.png)

```
さきほど挿絵のイラストをつくってくれましたが、同様のテイストで、添付の図をつくりなおしてください。
```

ある意味では面白いですが、意図通りの画像にはなりません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/686c03a8-b935-888c-6d52-923b05eee924.png)

何度試しても、夢の世界に迷い込んだようなイラストしか作成できなかったので、部品だけ（建物とバケツ）だけ個別に作成し、Adobeのソフトウェア上で色調補正と配置を行い下記のイラストを作成しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/81fe30df-08f1-cb79-62c6-a2726a03e66b.png)

下記のようなものも、生成AIからはつくれなかったので、Adobe Illustratorで作成しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/392d0527-1805-006f-5774-b3a097870d74.png)

### 生み出せなかったパーフェクトヒューマン

https://qiita.com/koji-yamauchi/items/99a7f1df2a68fbbea305

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/f774f81b-5c0c-60b9-0e86-90f9ef7d7fd4.png)

「[誰も完璧にプロジェクトを推進できない](https://qiita.com/koji-yamauchi/items/99a7f1df2a68fbbea305#%E8%AA%B0%E3%82%82%E5%AE%8C%E7%92%A7%E3%81%AB%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E6%8E%A8%E9%80%B2%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84)」の節で用いた挿絵です。
本当はこのような絵ではなく、サングラスをかけて、マイクを持ちながら首を傾けた日本人「パーフェクトヒューマン」を入れたいと考えていました。

まずはジャブがてら。

```
サングラスをつけたオールバッグの髪型の日本語男性が腕を組んでいるイラストを描いて
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/4334fd0b-2e4c-9484-1c15-cea1962df237.png)

まぁ、想定どおりですね。

```
上記のイラストに対して下記の修正をお願いします。

首を傾げる
黒いスーツを着る
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/83b06df2-d262-9b15-8f65-9a057e13eae1.png)

参考画像をアップロードして学習してもらおうとしましたが、それほど変わらず。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/48de3767-b573-e48c-f99e-b6c8b030e34e.png)

そのあと、何度も試してみましたが、「首を傾げる」という事と、「マイクを持つ」という事がとても難しいようでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/42782bc6-de0d-c16d-656b-1148adc283fb.png)

数々の失敗作。
マイクがないことを何度も指摘すると、ChatGPT自身も混乱しはじめて、作り直しのループに入ります。

```
再度修正しましたが、マイクが含まれていないようです。お手数ですが、再度試みます。具体的な指示を含めて、もう一度試行します。少々お待ちください。
```

何度かループして諦めたようです。

```
再度試みましたが、マイクが含まれていないようです。申し訳ありませんが、現在のツールではマイクを含めるのが難しいようです。

具体的なマイクのデザインや位置について詳細な指示を頂けると、さらに精度の高いイラストを作成する手助けになるかもしれません。それとも他のリクエストや調整があればお知らせください。
```

マイクの画像をアップロードして覚えさせると、一応マイクの絵が入るようになります。
なんどか会話を重ねる中で、「カラオケマイク」と伝えれば言いのかと気付き精度があがりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/c43b9ba1-45ae-3b0c-60f6-03526e257350.png)

しかし、正面を向いたまま首を傾げるというのはどう伝えても実現できず諦めました。


#### Leonardo.Aiでも

ツールをかえて、Leonardo.Aiでも試してみました。
やはりこちらでも正面を向いたまま、首を傾げるという概念が伝わらないようでした。

##### 「龍が如く」のような世界観になるLeonardo.Ai

どうやら、Leonardo.Aiの思考は `日本人 + オールバック + サングラス = 龍が如く` のようでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/d2378780-11a4-9950-2797-374c66d4d2cb.png)

Leonardo.Aiの手書きから絵を起こす機能を用いれば実現できたかもしれませんが、時間がかなりかかりそうなので、ここまでで諦めて冒頭の画像を用いることにしました。

## まとめ

正面を向いたまま、首を傾げるなどという普段はなかなか見かけないような造形や、意味のある作画や図表は画像生成AIでは少しハードルが高そうです。

一方で、水彩画風・油絵風・写真などのグラフィック生成は挿絵目的であれば十分な価値を発揮します。