デザイナーこそ活用したい！Adobe ExpressとFireflyだからできる時短術 #Fireflycamp

Creative Cloud のユーザーなら誰でも、Adobe Express が使えることをご存知でしょうか？Adobe Express は、ブラウザから素早く作業できるデザインツールで、Adobe Stock や Photoshop、Illustrator とも連携します。

6 月 19 日に開催されたオンラインイベント Adobe Firefly Camp では、マルチクリエイターの Natsuka さんに、仕事を効率化するための Express の活用法、そして Firefly の使いどころについて教えてもらいました。ここではその模様をダイジェストでレポートし、番組内で答えきれなかったご質問への回答をお伝えします。

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

Firefly トピックス

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

1 つ目は 6 月 17 日に発表されたばかりの、Adobe Acrobat に Firefly の機能が追加されたというニュースです。PDF 上に直接 Firefly でビジュアルを作成・編集できるようになったほか、Acrobat AI Assistant を利用して対話形式で複数のドキュメントの内容について質問したり、要約して議事録を作成することも可能です。

ただし、この機能は現在英語でしか使えません。日本語に対応した際には、改めて具体的な使い方を解説したいと話していました。

ついに Acrobat にもFireflyの機能が！日本語対応に期待です

2 つ目は、「C2PA（Coalition for Content Provenance and Authenticity）」と「CAI（Content Authenticity Initiative）」という、デジタルコンテンツを安全に使用するために設立された 2 つの団体とその取り組みです。C2PA と CAI は、IT 企業やニュースサイト、放送局といったデジタルコンテンツを扱う会社が集まって立ち上げた団体で、アドビもメンバー企業になっています。

この取り組みを具体的に紹介するために、轟さんは Adobe Stock の画像に Photoshop の「生成塗りつぶし」を使ってつくった合成画像のコンテンツ認証情報を見せてくれました。

コンテンツ情報が付加された画像は、 CAI の Verify サイトで確認するとこのように来歴が表示されます

この仕組みがさらに普及すれば、その画像に生成 AI の技術が用いられているかどうか、また生成されたのがどの部分なのか確認しやすくなります。生成 AI が急速に普及しつつある現在において、たいへん重要度の高い取り組みと言えるでしょう。

また元になった画像やその著作者をたどることで、画像が勝手に使用されていないかも確認できます。

デザイナーこそ活用したい Adobe Express と Firefly だからできる時短術

さてここからは、Natsuka さんの登場です！

Natsuka さんはグラフィックデザイナー、映像クリエイター、フォトグラファー、そして自身が被写体となってソーシャル配信も行うという、まさにマルチなクリエイターさん。 各種クリエイティブツールにも精通し、Adobe MAX Japan やワークショップへの登壇、Adobe Express アンバサダーとして CM にも出演されています。

Natsuka さんの Instagram には、撮る、編集する、そして見せる楽しさに溢れた作品が多数投稿されています

そんな Natsuka さんにとって Express の最大の利点は、多機能であること。今までいくつものツールを行き来しなければならなかった作業も、Express だけで完結させられます。また、テンプレートなどあらかじめ用意されているデザイン素材のクオリティが優れているため、高品質なデザインがつくれるのも大きな魅力だそうです。

Adobe Express は Web ブラウザから素早く利用することができます

Natsuka さんが今回紹介した Express のおすすめの使い方は全部で 7 つありましたが、このレポートではその中から 3 つをピックアップして紹介します。残りはぜひ上の動画をご覧になってください。

テンプレート

予算はあまりないけどクオリティのよいものにしたい場合に便利なのが、Express のテンプレートです。Express には非常に数多くのテンプレートが用意されていますが、検索機能を活用すると目的に合ったものを選びやすくなります。

今回は下のように 3 種類のテンプレートを選びました。

選んだ 3 種類のテンプレートに入っている画像やテキストを、それぞれ必要な内容に応じて置き換えます。今回はアパレルのセールのバナーという想定で、下図のように服や靴などのアイテムを追加したり（テンプレート 1）、写真やフォントを変更したり（テンプレート 2）、要素の置き換えを行いました（テンプレート 3）。

これで、クライアントにどの方向で進めるかを選んでもらうためのラフが完成です。テンプレートを活用することで、ゼロからデザインを起こすよりもはるかに時短になります。

Express なら、 Photoshop や Illustrator など他の Creative Cloud アプリケーションとの連携もスムーズです。今回のバナーデザインの例では、アイテムを追加したテンプレート 1 の方向で行くことに決まりました。テンプレートに追加したドレスや靴の画像は、Photoshop で作成して CC ライブラリに保存してあるため、Photoshop で修正すれば自動的に Express 上でも反映されます。これも時間がない時に活用したいテクニックですね。

このバナーで行くことに決まりましたが、ドレスの色を変更して欲しいとの要望が……

Expressに戻り、画像の［更新］をクリックするだけで変更が反映されます

サイズ変更

ひとつのバナーデザインを完成させたら、今度は各種サイトや SNS のバナーサイズに展開する番です。Express にはよく使われるバナーのサイズがプリセットで用意されているので、チェックしていくだけでサイズ展開が可能です。

縦長でも横長でも指定したサイズに合わせて自動的にレイアウトを調整してくれるので、時間のない中でバナーを量産するには便利そうな機能です。多少の手直しは必要かもしれませんが、ゼロから配置し直すのに比べればはるかに時短です。

左カラムによく使われる画像のサイズが用意されているので、必要に応じてチェックをつけるだけです

このようにさまざまなサイズや縦横比で自動的にレイアウトされます

方向性の定まらないクライアントへの提案

ここではアパレルブランドのポップアップストアの告知用ポスターを想定しています。

先のバナーデザインと同様に Express のテンプレートからレイアウトの候補を選び、テキストと写真を入れ替えます。これが提案の第一段階で、まずはここでざっくりとした方向性をクライアントに確認してもらいます。

レイアウトに着目してテンプレートを選びます]

テンプレートの画像をAdobe Stockで選んだものと入れ替え、テキストも打ち替えてラフとします

この例の場合では、向かって左の白地を活かしたポスターがイメージに合っていてよい、ということになりました。具体的なイメージがあることで、クライアントも方向性を選びやすくなります。

しかし、Adobe Stock で選んだ店舗の写真はクライアントのイメージとは少し違っていたようです。そこで Express の「テキストから画像生成」の機能を使って店舗のインテリアの画像を生成し、イメージをすり合わせていきます。元の Adobe Stock の画像を構成参照に使用することで、店内のレイアウトはそのままにインテリアや什器の色が異なる画像を生成することができます。

クライアントの要望を聞きながら、その場で画像を生成してよりイメージに近づけていくことが可能

Firefly の画像生成を活用すれば、その場でクライアントと一緒にデザインをブラッシュアップしていくことができるのがここでのポイントで、例えば植物をもっと増やしたい、店舗のサイズをもっと小さく、といった調整によってより具体的なイメージを固めていくことができます。

早い段階で写真のイメージまで固まれば、カメラマンににも依頼しやすく、認識を合わせやすくなりますね。

仕事の中で「それは先に言って欲しかったな」という瞬間は誰でも覚えがあるでしょう。それを避けるには、具体的なイメージを用いたすり合わせが重要です。今回のセッションを通じて教えていただいた通り、Express を使えば、作業全体の効率を上げつつ、具体的なイメージをクライアントに提示できます。幅広いジャンルで活躍している Natsuka さんですが、「デザインツールとしては私には Express が最適で充分です」と、締めくくりました。

Firefly デザインチャレンジ

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

今回は 、Illustrator や Photoshop では少し難しいアニメーションづくりに Express で挑戦しました。ちょっとした動きがあるだけで、グラフィックは格段に楽しく目を引くものになります。

つくり方は簡単。Express のテンプレートからイメージに合うアニメーション付きのテンプレートを選び、テキストと画像を入れ替えるだけです。今回は Instagram のストーリーズ用のテンプレートを選びました。テキストを打ち替えて、背景の画像を「生成塗りつぶし」で描いたら完成です。

選んだテンプレートのテキストを打ち替え、背景をプロンプト「mountain illustration colorful」で生成塗りつぶし

華やかなイラストにテキストがアニメーションで流れる動くバナーが簡単に作れました

最後に

Illustrator や Photoshop といった昔からあるアプリケーションに比べ、Express にはあまりなじみがないクリエイターさんが多いかもしれません。特に実務での活用方法については、これまであまり紹介されてこなかったように思います。今回 Express の機能や使い方のコツを伺ったことで、ラフやモックアップ、そしてアニメーションを自分でもやってみたくなりました。

Adobe Express は、Adobe CC ユーザーであれば誰でも使えるだけでなく、CC ライブラリとの連携も可能です。みなさんもぜひ気軽にトライしてみてはいかがでしょうか？

次回の『Adobe Firefly Camp』は、7 月 17 日（水）の 20:00〜の開催予定です。

ゲストはキャラクターデザイナーの北沢直樹さん。北沢さんならではの Illustrator の Firefly の使い方を紹介していただく予定です。どうぞお楽しみに！

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

以下は番組に寄せられた質問への Natsuka さんからの回答です。

Q: Photoshop/Illustrator と Adobe Express を使い分けるとしたら、何かお勧めの使い方はありますか？
A: テキストから画像生成・テキスト効果など、Firefly と多種なテンプレートで時短をしたかったら Express をお勧めします！ピクセル単位で作りこみたかったら Photoshop＆Illustrator がおすすめです！

Q: Photoshop 向きのバナー、Express 向きのバナーってありますか？
A: Photoshop 向きは、解像度が高い写真メインのバナーです Adobe Express 向きは、リサイズしたり、QRコードを埋め込むようなバナーが向いています。 Express は CC ライブラリと連携できるので、Photoshop で制作したものを素材として使うことによる併用も可能です！

Q: バナーのリサイズを Express で行った後、微調整ってどうやってやるんですか？ Photoshop に持って行って微調整ってできますか？
A: Adobe Express 内でリサイズしたバナーのレイアウトは、Express上でお好みのレイアウトに微調整できます。Photoshop に書き出すことはできません。

Q: Express の使い方を勉強する良い方法はありますか？
A: 多くの方が Express の使い方を公開していますが、アドビ公式の解説ページが一番分かりやすくて最新の情報なので、最初はこちらから始めることをお勧めします！