🎨

SumycaのイラストをMidjourneyを使って作った話

最近SumycaのTOPページリニューアルのデザイン作成をしましたが、サービスの説明セクションにイラストを配置することになりました。

今回、初めて画像生成AI「Midjourney」を利用し作成してみることにしましたので、その制作過程についてお話します。

# 採用したテイスト

昨今流行りの、フラットイラストを取り入れることにしました。
フラットイラストの洗練されたデザインは、サービスが高品質で使いやすいという印象をユーザーに与える役割も果たします。

# イラスト作成のプロセス

# 1.なんとなくのイメージを決める

どのようなイラストを作成するのかについて考えます。chatGPTに聞いてもいいですが、今回は私の中にイメージがあったのでそのイメージで進めることにしました。
部屋の中でくつろぐ人がいるイメージにしたいと思います。
また、Sumycaが青緑っぽいイメージで、同系色にすると馴染みすぎてしまいますので、補色であるオレンジっぽい感じで作りたいと思います。

# 2.promptの試行錯誤を繰り返す

実際にMidjourneyを使いながら、良いイメージを出してくれるpromptを探っていきます。

prompt例：

 flat illustration, person, room, interior, --v 5 --q 2

上記のpromptによって生成されたイラスト：

日本語でも可能ですが、小学生の家庭科の教科書のようなイラストになってしまいました。学習している内容と言語は結びついているのかもしれません。

フラットイラストで、居心地の良いインテリアシーンを作成してください。部屋の中で人が快適にリラックスしている様子を描いてください。環境の暖かさと居心地の良さを強調してください。部屋にはソファ、コーヒーテーブル、本棚、室内植物などの要素があるべきです。部屋の壁は透明にして、オンラインで使用するときにウェブの背景とシームレスに統合できるようにしてください。 

上記のpromptによって生成されたイラスト：

# 3.気に入ったものでガチャを回す

気に入ったテイストが出力されるようになったら、そのpromptで何度も生成し、これ！と思うイラストが出るのを待ちます。

同じpromptで生成したイラストの例：

# 4.気に入ったものを、画像編集ソフトでなおす

今回はこちらにしました！ 残念なことに、まだMidjourneyで生成したイラストは細部が破綻していたり、よくわからない感じになっていたりします。
「破綻していないイラスト」と「イメージ通りのイラスト」をどちらも叶えるのは難しく、叶えるためには何十回もガチャを回していく必要があります。
なので今回は「イメージ通りのイラスト」を、画像編集ソフトで修正する方法を取りました。
色の補正や、細部の修正、背景の切り取りなどを行いました。
いらない箇所を消すのはphotoshopのAI生成ツールを使い、加筆すべきところは手で描き足しました。

修正前と修正後の比較：

# 5.最終調整

実際に画面に入れてみて、背景の切り取り方や気になる箇所を修正するなどを行いました。
最終的には、以下のようなイラストになりました。

# まとめ

新しいツールを使用したイラスト制作はとてもおもしろかったです！
アイディアだし→ラフ作成→清書のフローを考えると、すべて自作するのと比べてMidjourneyの方が早く完成すると思います。
うまく活用できれば工数の削減にもつながります。
今回は修正作業にかなり時間がかかりましたが、その辺りはpromptの調整を繰り返すことで改善できそうです。
他プロダクトでも運用できそうだなーと思っています。