Adobe FireflyでWebデザインのアイディア出しを楽しもう！ #Fireflycamp

Web デザインを考えていると行き詰まりを感じてしまったり、ちょっとしたアイディアやヒントが欲しくなることはありませんか？実はそんなとき、Adobe Firefly が助けになってくれる場合があります！

2024年9月27日に開催されたAdobe Firefly Campではゲストに黒野さんと湯口さんをお迎えし、デザインやパターン出しの際にアイデアの可能性を広げてくれる Firefly のアプローチを紹介していただきました。

このブログではイベントの模様をダイジェストでレポートし、番組内で参加者からご質問いただいた項目への回答をお伝えします。

番組 MC はアドビの Firefly 製品担当轟啓介さんと、アクセンチュアのデザイナー木村優子さんです。実際のイベントの様子や詳細な内容は、ぜひ下記のリンクからアーカイブ動画をご覧ください。

Firefly トピックス

まずはアドビの轟さんが、急速に進化を続ける Firefly の最新情報や活用のヒントを紹介してくれる『Firefly トピックス』のコーナーからスタートです。

今回は、リリースが待ち望まれている Firefly Video Model がテーマで、現在開発中の動画生成機能を7つ紹介してくれました。

• プロンプトによる動画生成
• 補完シーンの生成
• カメラのコントロール
• エフェクトへの応用
• 2D／3D アニメーション
• 画像から動画を生成
• 生成拡張

中でも、プロンプトを書くだけでリアルで躍動感のある映像がつくり出せる「プロンプトによる動画生成」や、別のアングルのインサートカットを生成してくれる「補完シーンの生成」。映像の動きに合わせてエフェクトを追加できる「エフェクトへの応用」は、すぐにでも試してみたい機能です。

吹き出すマグマ、駆け寄ってくる犬、踊るキャラクターなど、プロンプトを書くだけで映像が生成されます

元の子供の映像を参照し、子供が見ている植物の拡大映像を補完生成する機能

生成されたエフェクトを映像のダンサーの動きに合わせて追加することができます

ここで取り上げた以外の機能については、アーカイブ動画で詳しくご覧ください。

今回はデモ映像での紹介でしたが、轟さんからは「もう間もなくお試しいただけるようになると思います」というコメントがありましたので、実装を楽しみに待ちたいと思います。

上手にFireflyにお願いして、いい感じのウェブサイトレイアウト案を出すぞ！

さて、ここからはゲストの登場です！

前半はプロダクトデザイナーで、アドビのコミュニティエバンジェリストでもある黒野明子さんが、Webデザインのアイディア出しのヒントを教えてくれました。

今回黒野さんが使用しているのは、ブラウザから利用できる Firefly の Webアプリです。

インターネット上ではかわいいイラストとともに、 crema（くれま）さんというお名前で知られている黒野さん

黒野さんは、Webサイトのイメージを左右する画像イメージを Firefly で生成する際に、どのようなやり方をすれば自分のつくりたいものに近づけられるか試行錯誤したそうです。その結果を、以下の3つのお話にまとめてくれました。

❶かなり Firefly におまかせする話

❷脳内の撮影イメージを引き出す話

❸画像の文字サイズで結果が変わる話

いずれも画像内のレイアウトやテキストの配置までを考えた実践的な内容ですが、ここでは❷の「脳内の撮影イメージを引き出す話」についてレポートします。フルで知りたい方は、ぜひアーカイブ動画をご覧ください。

Firefly に手伝ってもらうコツ。どの項目も気になりますが、ここでは❷をご紹介しましょう

黒野さんの脳内には、高級感のある香水の広告画像のイメージがあります。まずは「男性向けオーデトワレの新商品を新商品を紹介するウェブサイト」というプロンプトで画像生成を行なってみます。すると香水のボトルと男性モデルの画像が生成されました。「ウェブサイト」と入力しているので、レイアウトもなんとなくWebサイトでよく見る形になっています。

プロンプトに「男性」「女性」と入力すると、生成結果に人物のモデルさんが登場しがちなのだそうです

今回つくりたいイメージに男性モデルは含まれていないので、削除したいところです。そこでプロンプトの最後に「レイアウト」という言葉を足して再生成してみます。すると、生成結果は香水のボトルだけになりました。短い言葉を追加するだけで結果がかなり違ってくることがわかります。画像はいい雰囲気になってきましたが、このままだとテキストを入れるスペースがありません。また黒野さんのイメージとしては、香水のボトルの周囲に水がパッシャーン！となっていて欲しいそうです。

プロンプトを追加して男性はいなくなりましたが、このままではテキストスペースがありません

さらにプロンプトを「男性向けオーデトワレの新商品を紹介する写真。周囲に水が流れている」に変更します。また今度は［構成参照］として以下のラフを設定しました。［構成参照］は画像の構図や被写体の形状を指定できる機能です。Adobe Stock の写真など別の画像を指定することもできますが、黒野さんの例のように手描きの簡単なラフでも大丈夫です。

「ちょっとお恥ずかしいんですが……」と言いながら見せてくれた黒野さんの手書きラフ

生成結果に反映させる度合いは、［強度］のスライダーでコントロールできます。生成された結果を見ながらスライダーを調節し、今回は［中］を選びました。生成結果を見るとラフの通りに右側にテキストを配置するスペースができています。またボトルの配置や水の動きなども、黒野さんの脳内にあったイメージ通りの仕上がりになりました！

プロンプトや画像参照の機能を組み合わせ、脳内イメージに近づけることができました

Illustrator × Fireflyで アイコン生成チャレンジ！

後半は UX デザインディレクターの湯口りささんです。湯口さんは Web デザインに欠かせないアイコンをテーマに、自分のイメージに近いアイコンを生成するためのコツを教えてくれました。

「とにかく検証がすごいんです」と轟さんも絶賛するUXデザイナーの湯口さん

アイコンの生成には、Adobe Firefly のWebアプリから行う方法と Adobe Illustrator から行う方法とがあり、同じプロンプトを入力しても生成結果が異なります。いずれの場合もプロンプトに「アイコンセット」と入力しておくと、たくさんのアイコンを一度に生成することができます。また「Webサービスで使う」などの具体的な指示を入れておくのもプロンプトを書く際のポイントだそうです。

Firefly と Illustrator の生成結果の違い。今回は Illustrator のベクター生成を中心に検証します

自分の求めるアイコンのイメージに近づけるためには、ひとつのやり方で一気に片付けようとするのではなく少しずつトライしていくことが重要だと湯口さんは言います。今回は、

• 見本から生成
• 基本形状からアイコン
• アイディアを形に

という3つの切り口で、それぞれのポイントを詳しく解説してくれました。ここではその内容をダイジェストでご紹介します。

一度に目的を目指すのではなく、少しずつ近づけることが大事なのだそうです

例えばTry2の「基本形状からアイコン」では、アイコンを生成する際に指定する［スタイル参照］の画像についてが解説されました。

Illustrator でアイコンを生成する方法の一つに、コンテキストタスクバーからプロンプトを入力する［ベクター生成］の機能があります。生成オプションの［スタイル参照］で元になるイラストや図形を指定すれば、そのテイストを生成結果に反映させることができます。

湯口さんによれば、［スタイル参照］の元にするイラストや図形のつくり方によって生成の結果も変化するのだそうです。どのように異なるのかを検証してくれました。

1. グループ化された図形
2. 図形のグループにアピアランスで塗りを追加したもの
3. グループの背面に塗り（白）の長方形を配置したもの
4. 図形それぞれにアピアランスの塗りを追加したもの

それぞれの列の左に書かれているワードが生成に使用したプロンプトです

Illustrator のアイコンづくりには、［ベクター生成］だけでなく、［生成塗りつぶし（シェイプ）］も使えます。一度にたくさんのアイコンをつくりたい場合や、ふわっとした柔らかい雰囲気のアイコンづくりに向いているそうです。

アイコンをつくる上で違いを知っておきたい Illustrator の生成機能

［生成塗りつぶし（シェイプ）］でつくったアイコンは、そのまま使用するだけでなく、先ほどの［生成ベクター］の［スタイル参照］で元画像に設定することもできます。生成方法を組み合わせることで、よりつくりたいイメージのアイコンに近づけることが可能になると説明してくれました。

上のテキストをプロンプトにして［生成塗りつぶし（シェイプ）］で作成したアイコン（左）。さらにこのアイコンを参照して新たなアイコンをつくることもできます

湯口さんはこのように検証を重ねるだけでなく、目的に合った生成を行うためのプロンプトや機能を調べるために ChatGTP を活用しているそうです。その成果はいずれ公開してくださるそうなので、ぜひ湯口さんの SNS での発信をチェックしておきましょう。

Firefly デザインチャレンジ

続いて MC の木村優子さんが、5 分で Firefly を使ってチャレンジをする『Firefly デザインチャレンジ』のコーナーです。

今回は「Webデザインで使える配色テクニック」をテーマに、Illustratorの［生成再配色］の機能を使った配色にチャレンジしてくれました。

［生成再配色］を使った Web デザインの配色テクニックにチャレンジです

Illustrator で［編集］メニューの［カラーを編集］→［生成再配色］を選ぶと、パネルが表示されます。オブジェクトを選んでプロンプトを入力するか、パネル内にあらかじめ用意されているサンプルプロンプトをクリックするだけで配色が自動的に置き換わります。

［生成再配色］のパネルに並んでいるキノコが配色のサンプルです

サンプルプロンプトの［サーモンの寿司］を選ぶと、このような配色に置き換わります。元のイラストの塗り分けや色の明度を維持しつつ、イメージに合ったカラーに配色してくれるとても便利な機能です。

［サーモンの寿司］というサンプルの配色。確かにサーモン色ですね

［生成再配色］では、配色の基本となるセオリーをプロンプトに入力して反映させることができます。木村さんは基本となる色として「水色」を入力し、それぞれ「補色」「トライアド配色」「類似色」といったセオリーのワードをプロンプトに加えて生成しました。

配色セオリーに則っているので、いずれも調和の取れた配色に仕上がっています

配色のイメージは人それぞれで、プロンプトとして書くのは難しいケースもあります。このようにキーワードを利用し調和の取れた配色に仕上げられるのはとても便利なので、ぜひ試してみたいですね。

最後に

木村さんは今回、プロンプトに「。（マル）」を加えるだけで生成結果が変わってくることにとても驚いたそうです。 Firefly Camp で Web デザインをテーマに取り上げたのは初めてのことでしたが、轟さんは Web での使いどころはまだまだ数多くありそうなので、情報があればぜひお聞かせくださいと締め括りました。

次回の『Adobe Firefly Camp』は10月23日（水）、映像講師の山下大輔さんをゲストにお呼びして開催する予定です。Adobe MAX 2024 の直後でというタイミングでもあり、情報も内容も盛り沢山になりそうです。ぜひお楽しみに！

番組参加者からの質問への回答

まず、黒野さんへの質問への回答を紹介します。こちらは Web アプリや Photoshop で使われている Image 3モデルについての答えになります。

Q: Firefly で構成参照を指示するのとしないのでは生成されるものがどのくらい変わってきますか？
A: 構成参照画像を指定し、強度を「中」もしくは「強」にした場合、画像を指定しない場合とは、生成結果がかなり大きく変わります。構成参照画像内に描かれた線を再現するようなモチーフが、生成された画像内に現れます。下記の画像で例にあげたように、黒線で描いた丸を元に、丸い鏡や丸い化粧品が生成されることが確認できます。プロンプト「新発売の化粧品を紹介するウェブサイトのレイアウト」

Q: 構成参照の画像は雑な手書きでも大丈夫だという感じでしょうか？
A: 2024年10月現在、雑な手書きでもまったく大丈夫そうです。下記に画像の例を挙げておきますが、マウスを使って描いたような雑な線のラフでも、プロンプトと組み合わせることで、水しぶきの表現が上手に生成されました。

Q: 構成参照て、「構成参照」てファイル名にすると認識されますか？それともただ「参照」を設定すれば、構成参照と認識される感じでしょうか？
A: 構成参照に利用する画像のファイル名には、特に指定はありません。ファイル名に関わらず、ウェブ版Adobe Fireflyの画面左側にある「合成」セクションから画像をアップロードすれば、利用可能です。

Q: マルで変わるとのことですが、改行も影響しますか？
A: 配信内では、プロンプトの最後に読点「。」をつけるかつけないかで生成結果が変わるというお話をしました。例: プロンプト「コーヒーショップの宣伝バナーに使うグラフィック。」と「コーヒーショップの宣伝バナーに使うグラフィック」では、生成結果が異なる。更に、プロンプトを「コーヒーショップの（改行）宣伝バナーに使う（改行）グラフィック。」と変更した場合、「コーヒーショップ」に焦点があたった生成結果に変化しました。つまり、改行も生成結果に大きな変化を与えるので、ぜひいろいろ試してみてください。

Q: Firefly でワイヤーフレームを構成参照で指示して Web デザインの案を生成することは出来ますか？
A: 配信中にご質問をいただいたので、帰宅後に実験してみましたが、結果…「そんなに良い結果でもないけれど、一定のアイディア出しになっているかも？」という所感です。このようなワイヤーフレームを用意し、プロ

ンプト「フランス生まれの高級路線化粧品のウェブサイトのレイアウト。」と指定してみました。

生成結果としては、ヘッダや商品写真のグリッドレイアウトなどがうまく表現されず、どうしても画面全体で1枚の作品のような表現になってしまいました。しかし、写真を大切に大きく使ったウェブサイトデザインのアイディア出しとしては、一定の役割を果たしそうです。

では、構成参照がまったく働いていないかというとそうでもなく、同じプロンプトを構成参照無しで試すとこのような画像が生成され、結果が明らかに違うことが分かります。

私見ですが、2024年10月時点では、Fireflyは画像内の文字情報を論理的に判断して画像生成しているわけではなく、ワイヤーフレーム内に表現された論理構造をそのまま採用できるウェブデザイン案として生成することは、得意ではなさそうです。

なお、構成参照画像だけではなく、レイアウトを細かく文章化してプロンプトに入れると、出力結果に一定の変化が見られる場合もあるようです。指示の書き順や句読点の位置で出力結果が大きく変わるので、いろいろ試してみてください。

ここからは、湯口さんへの質問への回答です。こちらは Illustrator で使われているベクターモデルについての答えになります。

Q: プロンプトのスタイル指定と、参照画像のスタイル指定はどっちが優先されますか？
A: 色は、参照画像のスタイル指定の方が強いです。しかし、それを越えられる設定もあります（画像左）。形状は、参照画像のスタイル指定の方が強いです。おそらく越えられる設定はありません（画像中）。番外編ですが、何を描いて欲しいかのオブジェクトはプロンプトが優先されます。白鳥はワルにはなれましたが、鷲には変身しませんでした（画像右）。

Q: 句読点ではなく;を使用されていますが、句読点よりメリットがあったり違いがあったりするのでしょうか？
A: 放送時は句点セミコロンに差はなく、句点と読点には差があり。句点の方が並列したものを全て書いてくれる確率が上がりました。10/7現在極端なメリットはないですが、それぞれを使うことで表示差はあります。いろいろ試してみることをお勧めします。