JEITA HID 委員会 Adobe Firefly 活用ワークショップ開催レポート

目次

  • AI を使ったクライアントとのコミュニケーション(TG 1-1)
  • 非デザイナーが Firefly を業務の中で活用できるか(TG 1-2)
  • 面白い変わったレストランを AI の力を借りてつくる(TG 2-1)
  • 数が必要なデザインを AI で楽して生成(TG 2-2)
  • ペルソナに対する提案資料を AI を使って生成(TG 3)
  • 架空のシーンスケッチを Firefly でつくる(TG 4)

一般社団法人 電子情報技術産業協会(JEITA)のデザイン部会に属するヒューマンインタフェースデザイン(HID)委員会は、2022 年度から「AI とインタフェースデザイン」をテーマに研究活動を実施してきました。活動 2 年目の今年は 9 月に Adobe Firefly が公開されたこともあり、活動の一環として、Firefly の機能や使い勝手を実際に体験することを目的にしたワークショップを実施しました。

ワークショップの内容は、テーマごとに 6 つのグループに分かれて、Firefly を使用しながら 1 時間 45 分でアウトプットを作成するというものです。特徴的だったのは、すべてのグループが Firefly と ChatGPT を併用していたことでした。複数の生成 AI の特長を活かしながら作業を進めるのは、今後、様々な領域で標準的な働き方になっていくのかもしれません。

グループワークの時間の後は、それぞれのグループの代表者がマイクを手にして、Firefly を活用した成果、及び、実践を通じて学んだ Firefly の使いこなし術を発表しました。短時間ではありましたが、複数のグループにより多角的な利用が試みられたことで、現時点における Firefly の得手不得手が浮き彫りになる、有意義な学びの時間になりました。

AI を使ったクライアントとのコミュニケーション(TG 1-1)

タスクグループ(TG)1-1 は、デザインに詳しくないクライアントとの対話というテーマのもと、新しいクリスマスツリーのデザインを商業施設の社長からお願いされたという想定で、要望を具体化したコンセプトスケッチを制作する過程に Firefly を用いました。最初に伝えられた要望は、「今っぽい、他に無さそう、色は赤」とかなり曖昧なものです。

社長からのインプット

このグループは、ChatGPT に生成させたキーワードを材料に社長への提案を行い、そこで少し具体的な言葉を得られたらまた ChatGPT に戻ってキーワードを生成するという工程を繰り返しました。そして、「ダイナミックレッド」や「フューチャリスティックオーナメント」等のコンセプトを得られたところで、それらを Firefly に入力していくつかの画像を生成しました。

Firefly から出力されたクリスマスツリー

そして、社長が気に入ったデザインを GPT-4 に言語化させてさらに新しいキーワードを追及し、それをプロンプトに追加して画像生成を繰り返すことにより、デザインを深めていきました。そうして 4 つの方向性に辿り着き、それぞれのバリエーションを出してコンセプト段階での最終提案としました。どれか一つに決められないくらい品質の高いデザインスケッチが出来上がったと感じたそうです。

クリスマスツリーのデザインの 4 種類の方向性

以上の作業を行って感じた Firefly の強みは、深めると広げるの両方をバランスよくできることです。「お気に入り機能を使ったり画像でスタイルを指定すれば方向性を与えられますし、日本語と英語の使い分けやセッションごとに方向性が変わる偶発性がセレンディピティーを生み出してくれます」

今まで出てきたキーワードを全部入力したところ、特徴のない普通のツリーが出力されたという経験もしたそうです。プロンプトは絞った方が、尖ったデザインが出やすいことは、多くの参加者が感じていたようでした。

ごく普通のクリスマスツリー

非デザイナーが Firefly を業務の中で活用できるか(TG 1-2)

TG 1-2 は、絵を描けない人が業務に Firefly を活用するという前提で、2 つのシナリオを実践しました。一つは製品の使い方を伝えるための人物イラスト作成、もう一つは販売用カタログポスターの作成です。

製品の利用シーンを表現するには、同じ人物の異なる姿勢のイラストが必要になります。しかし、Firefly では同一人物の生成が難しいと分かったため、「紺色のスーツ&眼鏡を着用」のような特徴を持たせて、細部は異なるが同じように見える人を生成しました。参照用の人物画像を固定して人手である程度の調整を加えると、マニュアルに使えそうな画像に近づけられたそうです。

紺色のスーツを着て眼鏡をかけている人物の画像

ポーズの指定にも苦労していて、「電車のつり革につかまっている」と入力したら全く違うものが出てきたため、「右手を上げている」というプロンプトに変えてそれらしい絵柄を生成しました。こういった工夫を重ねていけば、絵が描けない人でもマニュアルのイラストができるのではと感じたそうです。

両手で木につかまっている人と右手を上げている人

2 つ目のシナリオの販売用ポスター作成では、介護ロボットをメインに、そこに宣伝テキストをレイアウトして、伝わる形にできるか挑戦しました。Firefly のプロンプトに売り文句を入力してみて最初に発見したのは、生成時の指定を写真からアートに変えるとポスターらしくなることです。

写真を指定した時のアウトプット、アートを指定した時のアウトプット

それだけでは介護というテーマが強く出なかったため、ChatGPT で将来の介護のあり方をテキストとして生成し、その中から描写的なものを選んで Firefly のプロンプトに入れました。「心温まるコミュニケーション」「介護ロボットは声、表情、動作などを通じてユーザーとコミュニケーションを取れます」などを使うと、イメージに近い絵を生成できたそうです。

介護ロボットによる将来の介護のイメージ

そのロボットの絵を元に、高齢者をシーンに加えようとしたときには、かなり苦労したとのことでした。なかなかそれらしいものが出てこなくて、かなり文字やニュアンスを変えないと難しいと感じたそうです。

介護ロボットと高齢者のポスター

面白い変わったレストランを AI の力を借りてつくる(TG 2-1)

TG 2-1 は、変わったレストランをつくろうとして、まずは ChatGPT の助けを借りながら、「65 歳以上の人が食事を通じて過去の懐かしい瞬間や地域の歴史にタイムトラベルできる沖縄の限界集落地にあるレストラン」というコンセプトにたどり着きました。そして、そこから導き出した「時空旅食堂」という言葉と「クリスマス」をキーワードに、Firefly を使った具体的なイメージの生成を始めました。

クリスマスディナーのメニューは ChatGPT からの出力を、そのまま Firefly に入力して生成しました。ありえない食べ物ばかりですが、絵として並ぶとそれほど違和感を感じないのが面白い点です。

生成されたクリスマスディナーのメニュー

ロゴの作成には Illustrator のベクター生成機能が使われています。簡単にロゴっぽい表現がつくれて、不要な要素の削除などの修正も手軽にできるのが便利だと感じたそうです。

Illustrator のベクター生成機能を活用して作成されたロゴ

店の外観や内装も Firefly で生成されました。「タイムトラベル」のような抽象的なワードでは自分のイメージに合う画像が出なかったため、さらに噛み砕いて具体的にしたワードが必要であることを感じたそうです。生成されたお店の画像に人を追加しようと Photoshop の生成塗りつぶしを使用したところ、「65 歳のお客さん」を驚くほど簡単に追加できました。

Photoshop の生成塗りつぶしで人物を追加したお店の様子

苦労した点としては、沖縄らしさを出そうと思ったときに、「日本」と入れると富士山が出てきてしまうなど地域性の表現が難しかったことです。そのため、「海」や「ヤシの実」など、沖縄をイメージさせる具体的な何かを考える必要がありました。また、日本に関する単語から生成される画像が、中華っぽいテイストになってしまったため、日本らしくすることが困難だったそうです。

Firefly で生成した店員の制服

数が必要なデザインを AI で楽して生成(TG 2-2)

TG 2-2 は、数が必要とされるデザインへの AI 活用というテーマの下、デザイナーあるあるカルタ、想像上のモンスター、架空のデザイナーの 3 シリーズの作成に取り組みました。最終的な結論としては、短時間に大量のアウトプットをつくれるのは AI の大きなメリットであると感じたそうです。一方で、何となくたくさん出力されるために、そこから一つに絞る意思決定が難しいという課題もあったそうです。

デザイナーあるあるカルタ

作成手順は 3 シリーズとも共通で、ChatGPT でアイデアを言葉としていくつも出してから、その中で面白そうなものを Firefly で絵にしています。プロンプト入力に関しては、例えばモンスターに「幻の」「伝説の」のような曖昧な言葉を入力しても思い通りにならなかったため、具体的に「白い」「羽がはえている」などと入力したところ、言葉による指示が綺麗に再現されたそうです。以下は作成された想像上のモンスターの画像です。

想像上のモンスター

モンスターの一覧を表示するための図鑑や巻物も Firefly を使って生成されてました。生成された本の見た目を整える作業には Photoshop が使用されています。すべてを Firefly で生成しようとするのではなく、まず Firefly でイメージを出して、その後 Photoshop で加工するるのが良い方法だと感じたそうです。

図鑑にまとめられたモンスター

また、気になった点として、複数人のイメージをまとめて出すことがまだ難しいという印象を受けたそうです。バージョン 2 になって、人物のクオリティが向上したという Firefly ですが、まだ苦手なリクエストもあるようです。この先の改善を楽しみに待ちつつ、現時点では、一人ずつ生成して合成するのが良いのかもしれません。

架空のデザイナー

ペルソナに対する提案資料を AI を使って生成(TG 3)

TG 3 は、ファッションにこだわりのある女性「ベラ」のペルソナを作成し、彼女に対するソリューションの提案資料を作成しました。その際、ファッション業界における課題の言語化には ChatGPT が、その課題を表現するビジュアルの作成には Firefly が使われています。言葉だけだった提案が画像になると、提案としての力が増したと感じたそうです。他にも、未来の動向のビジュアル化にも取り組みましたが、こちらはメッセージ性のある画像が出てこなくて苦労したとのことです。

ファッション業界の課題を画像として生成

未来の動向を画像として生成

課題の後は、ベラに対するソリューションの検討を行いました。ベラの関心事は、ファッションを通じた自己表現、コスパ、環境問題の 3 つです。そうした女性のためのサービス名、ビジョン、概要のアイデアを ChatGPT に考えさせて、出力されたテキストから言葉を選んで Firefly でビジュアライズを行ったところ、よくわからない感じになったといいます。追加で「ウェブページ」のような指示をしたところ、少し素材に使えそうなものに近づいたそうです。

Firefly で生成したウェブページのイメージ

アプリに関しては、ChatGPT にアプリの機能を考えさせて、各機能のビジュアルイメージを一つひとつ Firefly を使って描きました。その際に便利だったのが、Firefly のスタイルを指定する機能だったそうです。単純に画面イメージを生成すると画面ごとにテイストが違ってしまうわけですが、アプリのスタイルを画像で指定すると、複数の画面を生成しても、統一感のあるアプリイメージを生み出せます。

Firefly で生成した一連のアプリ画面

Firefly でソリューションを生成する際に難しさを感じたのは、自分が言語化できないことは指示できないことだったといいます。ペルソナのベラはゴージャスな女性として設定されていたため、そうした女性に響くビジュアルを表現したかったのですが、その意図を具体的に言語化できていなかったために、環境への配慮を表す色である緑が闇雲に使われているデザインになっているということでした。

緑色の服が並ぶアプリ画面

架空のシーンスケッチを Firefly でつくる(TG 4)

TG 4 は、シーンスケッチを Firefly でつくることを目標に、日本人らしい人物の生成など、思ったような画像を生成するために必要なプロンプトを探りました。最初のプロンプトは、「インドを旅行で訪れてその文化に触れている日本人 20 代女性二人」といったものでしたが、そこから生成されたのはインド色の強く出た人物でした。

インドっぽい衣装や顔立ちの女性が生成された

発見した解決策の一つは、日本人の代わりに東アジア人と書くことだったそうです。また、「旅行中の日本人の 20 代女性二人」と、「インド」を含まないプロンプトで生成した画像を参照画像に指定すると、より登場人物が日本人に見えるようになったといいいます。「インドの夜の屋台で食事を楽しむ日本人女性二人」というプロンプトからは、日本人っぽい女性にシチュエーションを追加した画像が生成されました。

インドの夜の屋台で食事を楽しむ日本人女性二人の画像

そこからは、Firefly のライティング設定オプション等を調整して雰囲気を出したり、「現地の人と会話している」のような情報をプロンプトに追加する形でシーンを構成したりして、徐々につくりたい画像が生成できるようになったとのことでした。

現地の人が加わった画像

TG 1-1 と同様、複雑なプロンプトを組むよりも、箇条書きでぶつ切りの言葉を入力した方がリアルなものが出てくると感じたそうです。これは特徴のあるデザインを Firefly で生成したいときに、覚えておくと役に立つルールになるかもしれません。