Adobe Firefly で生成して動かす！リッチな広告バナーの効果的な制作ステップ #Fireflycamp

「動きをつけることで目を引くバナーやコンテンツをつくりたい」でも、「どこから始めたらいいかわからない」というクリエイターは少なくないでしょう。実はそんな人にも Adobe Firefly が強い味方になってくれます。

2024 年 10 月 23 日に開催された Adobe Firefly Camp は映像講師の山下さんをゲストにお迎えし、Firefly で生成したパーツを Adobe After Effects で動かす工程や、Adobe Illustrator で生成したベクターイラストを動画に活かす方法を紹介してもらいました。

番組 MC はアドビの Adobe Firefly 製品担当轟啓介さんと、アクセンチュアのデザイナー木村優子さんです。

実際のイベントの様子や詳細な内容は、下記のリンクからアーカイブ動画をご覧ください。このブログではイベントの模様をダイジェストでレポートし、番組内で参加者からご質問いただいた項目への回答をお伝えします。

Firefly トピックス

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

今回のトピックスは、10 月 14 日〜16 日にマイアミで開催された Adobe MAX 2024 のタイミングで発表された Firefly 関連の新機能についてです。

Web ブラウザから利用できる Firefly Web アプリには、「高速モード」「アップスケール（×4）」「履歴」の 3 つの機能が加わりました。「高速モード」は、画像の解像度を下げる代わりに画像生成を素早く行う機能です。「高速モード」で素早く目的に合った画像を生成して、「アップスケール（×4）」の機能を使って解像度を引き上げるという使い方ができます。また「履歴」には、これまで生成した画像の履歴がサムネイル表示されるので、何度もやり直した場合や以前の生成の設定を調べたい場合に便利です。

Firefly Web アプリには、「高速モード」「アップスケール（×4）」「履歴」の３つの効率的な新機能が加わりました

Adobe Photoshop の生成機能には最新の Image Model が搭載され、「不要な要素を削除」「類似を生成」「背景を生成」といった機能が追加されました。

Photoshop に追加された生成 AI 機能についても紹介がありました

中でも「不要な要素を削除」は、これまでクリエイターを悩ませ続けてきた電線や人物などの不要な映り込みを簡単に消すことのできる大変便利な機能です。

電柱は［削除ツール］でドラッグして消し、短時間で処理が終わりました

このほかにも被写体の背景をプロンプトで描き出す「背景を生成」など、強力な新機能が多数加わっているので、詳しく知りたい方はぜひ本編の動画アーカイブをご視聴ください。

Adobe Firefly で生成して動かす！リッチな広告バナーの効率的な制作ステップ

ここからは今回のゲスト、映像講師の山下大輔さんの登場です。

アドビのコミュニティエバンジェリストで、After Effects に精通する山下さんが今回のゲストです

Firefly は Firefly Web アプリや Photoshop で使われることが多い機能ですが、今回山下さんは After Effects で動きのあるバナーをつくるための Firefly 活用術について解説してくれました。

After Effects × Photoshop（生成塗りつぶし）

山下さんは、After Effects で動かすための素材の多くを、Photoshop で作成しているそうです。例えば新聞の画像を動かしたいときに、元になる新聞や写真などの画像がなければ光の当たり方やエフェクトをかけた時の雰囲気を正確につかむことができません。そこでまずモックアップとして、新聞の文字部分ややその中に掲載されている写真の画像を生成して入れ込みます。

新聞の紙面をなめるようにカメラが動いていくような映像をつくります

ここでは紙面の中にはめ込む写真のつくり方を見てみましょう。 After Effects で写真のサイズを決めてオブジェクトをつくります。［レイヤー］→［新規］→［Adobe Photoshop ファイル］を選ぶと、 Photoshop にシームレスに切り替わり指定したサイズのファイルが開きます。コンテキストタスクバーが表示されるので、生成塗りつぶしのプロンプト「空撮の街」を入力して画像を生成し保存します。

After Effects で［Adobe Photoshop ファイル］のレイヤーを作成すると、Photoshop に切り替わるのでプロンプトを入れて生成塗りつぶしを行います

生成された画像を保存すると After Effects に戻り、画像がレイヤーとして配置されまました。After Effects 上ですでにエフェクトを設定しているのでモノクロの新聞写真らしく仕上がっています。モックアップではありますが、ただ四角い枠があるだけより仕上がりのイメージがつかみやすくなりました。

生成した画像が配置できました。エフェクトは After Effects で設定しています

After Effects × Illustrator（生成ベクター）

今度は Firefly Camp をイメージしたバナーの例を見てみます。秋をイメージさせる配色のシンプルなイラストが盛り込まれ、その中をカメラが動きながら撮影しているような奥行き感のあるバナーです。美しいバナーの仕上がりは、ぜひアーカイブ動画でご確認ください。

重なり合うイラストをカメラがパンや引きの動きで美しく見せてくれる奥行き感のあるバナーです

動きをつけるには、After Effects 上で前景・中景・遠景といった具合に位置を決めてパーツを配置する必要があるため、パーツごとにレイヤーをつくっておきます。またベクターデータなら、位置関係を前後に動かしても（拡大・縮小の操作と同様に）画質が落ちないので、元になるイラストは Illustrator で描くのがおすすめだそうです。

After Effects でパーツごとの配置や動きを見るとこのような状態になっています

こちらが元になった Illustrator のファイルを開いたところです。レイヤー構造はそのまま After Effects でも保持されますが、レイヤー名は英数字でつけておく方がよいとのことでした。

画面外にもはみ出すようにイラストが配置され、パーツはグループごとにレイヤー分けしてあります

イラストは［生成ベクター］の機能で描きました。描き方を紹介するため、遠景の山のイラストを追加します。パーツのだいたいのサイズで矩形を描き、コンテキストメニューから［生成ベクター（beta）］を選択します。パネルが表示されたら、プロンプトに「遠くの山　秋　シンプル　ピクトグラム」と入力します。［スタイル参照］を選択し、すでに描かれているイラストをクリックすると、ほかのイラストとタッチや色のトーンを揃えられます。

この方法で、すべてのイラストを描き終わったら、After Effects でそれぞれのパーツに動きをつけるとリッチで美しいバナーの完成です。

現段階で After Effects には生成 AI の機能はありまませんが、山下さんはほかのアドビアプリと連携する機能によって After Effects でも生成 AI が活用できると教えてくれました。また生成 AI の機能を使うことで、これまで Photoshop や Illustrator だけで制作していた人も、After Effects で動きを加えればリッチなバナーがつくれるのでぜひ試してみて欲しいと締め括りました。

今回ご紹介した例のほかにも、キャラクターが呼吸しているような微妙な動きをつけるために画像を補完する画像の生成方法や、After Effects 上でテクスチャを加えて深みを出す方法についても解説がありました。ぜひアーカイブ動画でこれらのテクニックについてもチェックしてください。

Firefly デザインチャレンジ

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

今回は「理想通りのパッケージをつくる」というテーマで、サイズやマテリアルを指定したパッケージのモックアップを生成するチャレンジを紹介してくれました。

まずは Illustrator でつくりたいパッケージの立体的なオブジェクトを作成します。使うのは、［効果］→［3D とマテリアル］→［回転体］と［押し出し］です。ライトとシャドウの設定も、ここで行なっておきます。

Illustratorの［3Dとマテリアル］の機能を使って立体的なオブジェクトをつくります

続いて Firefly Web アプリで、［参照］に先ほど制作したファイルを指定します。［強度］のスライダは最大に設定しました。プロンプトは「パステルカラーの化粧品」と入力し、つくりたいイメージを［スタイル］から選んで生成を行います。

Firefly Web アプリで［参照］に Illustrator の画像を指定して、プロンプトを入力します

プロンプトの内容と選んだ［スタイル］に沿ったパッケージ画像が生成されます。あらかじめパッケージの形状を［参照］で指定してあるので、つくりたいイメージにより近い画像が生成されるのがポイントです。

参照画像の立体物に、さまざまな演出を加えることができます

［スタイル］を変えることで、生成されるパッケージのイメージも大きく変わります

プロンプトや［スタイル］を変更することで、パッケージのプロポーションはそのままにさまざまなデザインのバリエーションをつくり出すことが可能です。木村さんは併せて Illustrator でラベルを加える方法も紹介してくれました。詳しく知りたい方は、アーカイブ動画を参照してください。

最後に

Firefly を用いた機能は日々凄まじいスピードで進化しています。Adobe MAX で紹介された新しい機能はどれもパワフルで作業スピードの向上に役立つものばかりです。

さらに今回山下さんが紹介してくれた、After Effects と Photoshop や Illustrator の組み合わせ、あるいは木村さんのチャレンジコーナーの Illustrator と Firefly Web アプリのように、アプリケーションを自在に組み合わせることによっても、生成機能の可能性はさらに無限に広がっていくように感じられました。

次回の『Adobe Firefly Camp』は 11 月後半に開催予定です。今年の 3 月から始まったこの Firefly Camp も、次回開催をもって今シーズンを終了します。最終回は再登場となるタマケンさんをゲストにスペシャルな内容を企画中とのこと。ぜひ次回もお楽しみに！

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

Q: 実際にクライアントに AI 関連のことを言われたことはありますか？
A: あります。使用するイラストに生成 AI は利用しないでほしい。イメージに関わるため。

Q: Firefly を使用する際に気をつけていることはありますか？
A: メインで使うのではなくあくまで補佐として使うように心がけています。自分がコントロールできる範囲で利用を続けていきたいと思います。

Q: バナーを少しだけ動かしたい時に After Effects 以外のツールを使う方法はありますか？
A: Adobe Express は簡単なアニメーション機能も追加されているのでオススメかもしれません。

Q: アニメーションをつける際に心がけていることはどんなことですか？
A: 画面に込められている感情を伝えられるようにしたいといつも思っています。

Q: アニメーションのアイデアはどのように集めていますか？
A: Pinterest などはもちろんですが普段の生活で目に入るものは動きのヒントになるなといつも思います。現実ってすごいです。