クリエイターのスキマ時間を有効活用！ 思いついたデザイン案をその場でビジュアルにできる Adobe Firefly モバイル版

アイディアはスキマ時間にやってくる

移動中の電車、予約の待ち時間、会議と会議の合間――そんな PC を開けないスキマ時間に限って、良いデザインのアイディアがひらめくことはありませんか？

メモ帳にテキストだけ残しても、見返したときには熱量が落ちてしまいます。でも、アイデアをできる限り具体的にビジュアルに落とせたなら、解像度を高めに保ったまま続きの作業ができます。そんな場面で便利な、スマホで使える生成 AI がアドビから公開されました。それが Adobe Firefly モバイル版です。

アドビアカウントでログインすれば、自分が持っている生成クレジットを利用できます。生成したアセットは、Firefly の［ファイル］タブに自動同期されて、オフィスや自宅の PC からアクセスすれば、続きができます。

実践：スマホだけでトップページの HERO 画像案をつくってみる

では早速、実践していきましょう。

いま、都心の会社から郊外の自宅に帰宅する電車に乗っていて、ボランティアで参加している「秋のきのこ狩りツアー」の LP で使うグラフィック案を脳内で考えています（という設定で進めていきます）。

Fresco で落書き → 写真アプリに保存

席に座ってボンヤリしていたらアイデアが閃きました！ビビッドなイメージが消える前に、情報量の多いビジュアルとして残したいと思います。まずはスマホを手にして、指で線画を描けるようなお絵かきソフトを開きます（筆者は Adobe Fresco を利用します）。

新規ドキュメントを作成したら、ブラシを使って指でざっくりと構図のイメージをスケッチします。メインのモチーフとタイポグラフィの位置をざっくり描くだけで十分です。

相当ひどいですが、スマホで落書きしたキノコの絵です

描き終えたら JPG や PNG でカメラロールに保存します。

Firefly モバイル版で、第 1 段階の画像を生成

落書きを見て拍子抜けした人もいるかもしれませんが、安心してください。これは Firefly に欲しい構図を伝えるための素材です。早速、Adobe Firefly モバイル版を起動して、［テキストから画像生成］をタップします。

［一般］タブ →［モデル］をタップし、［Firefly Image 4］を選択します。

［一般］タブ →［縦横比］をタップし、［ワイドスクリーン（16:9）］を選択します。

［コンテンツの種類］タブをタップし、［アート］をタップします。

［構成］タブをタップし、［画像を追加］ボタン →［写真ライブラリ］→ 先ほど描いた落書き画像を選択します。［強度］のスライダーは中央にしておきます。

以下のようにごく短いプロンプトを書き、生成ボタンをタップします。 「ファンタジックな森の切り株からきのこが生えている」 （Firefly のプロンプトには 3 語以上の単語を使うことが推奨されています）

4 枚の画像が生成されます。この中から構図が気に入った画像を選んでタップし、［ダウンロード］→［画像を保存］しておきます。

今回はこの画像を保存することにします。

この操作で生成された画像の一枚

生成された画像から構造化されたプロンプトをつくる

落書きに近い構図の画像ができました。もちろん、これで終わりではありません。ここから質感をさらに変えていきたいと思います。

そのためには、より長くてより構造化されたプロンプトを用意する必要があります。ただ、スマホで長文プロンプトを打つのは面倒だし、電車内で音声入力も気が引けます……。そこで、画像生成プロンプトの作成を支援してくれる AI サービスを使います。先ほど生成した画像を参照させて、「足りない要素があったら私に質問してください」という指定をして、AI からインタビューしてもらうスタイルで進めていくと、チャットのような感覚で作業しやすくなります。

たとえば、「クレイアニメーションのような質感で、温かい光の画像にしたい」という内容をリクエストします。これを繰り返して、構造化されたプロンプトをつくっていきます。

今回筆者が得たプロンプトはこちらです。

“Whimsical clay-animated scene: ten hand-crafted clay mushrooms (3 large, 7 small) glowing with bright warm light, perched on moss-covered tree stumps in an enchanted pastel forest. Dominant pastel orange palette with yellow, lavender, and red accents. Handcrafted clay texture with subtle grain, soft volumetric back-light, fairy-dust sparkles swirling in the air, dreamy bokeh background. 16:9 cinematic wide shot from a low angle, natural path receding into depth, blank right 30 % of canvas for headline text. High detail, shallow depth of field, stop-motion vibe, 3-D render quality.”

もういちど Firefly モバイル版を使い、欲しい画像の精度を上げていく

ここまでの作業で、大まかな構図を示した画像と、構造化されたプロンプトを作成しました。これらを使って、もう一度 Firefly モバイル版で画像を生成します。

設定は先ほど生成した時と同じです。［構成］タブをタップし、落書き画像の右上の ✗ ボタンで落書き画像を消したあと、Firefly で生成して保存しておいたキノコの画像を追加してください。［強度］のスライダーは中央のままです。

先ほど作成した構造化プロンプトをコピペして、生成ボタンをタップします。

参照した画像の構図をある程度維持しながら、構造化プロンプトで指定した質感に近い、クレイアニメのような質感でやわらかなライティングの画像が生成されました。

プロンプトを使って生成した画像

質感を調整したければ、プロンプトをつくり直すとよいでしょう。大体イメージが合っているようなら、次のステップに進みます。

生成塗りつぶし機能を使って要素を追加

かなり良い感じのキノコ画像を生成できたので、中央に主人公を追加します。画像の左上にある［編集］→［生成塗りつぶし］をタップします。

画面下にある［挿入］をタップして、中央あたりのキノコの分け目部分をなぞり、選択範囲をつくります。プロンプトに［キノコを見上げている小人が向こう向きで 2 人いる］と書きます。

画面の中央に小人が 2 人現れました。イメージを共有するには十分な出来栄えです。

保存した画像を使って PC でレイアウトを進める

電車内で 20 分ほど作業を進めて、欲しいメイングラフィックの方向性をほぼ固め、画像として保存することができました。自宅に帰って PC から Firefly web 版にアクセスし、気に入った画像を Photoshop web 版に保存すれば、続きを作業できます。必要なら、Photoshop デスクトップ版で追加の作業もできます。筆者は下のような画像を作成しました。

Firefly web 版からPhotoshop web 版に保存して、タイトルやセリフを足してみたもの

家に帰るのを待たずに Firefly モバイル版から Adobe Express を開いて画像を保存すれば、電車内からアイデアをメンバーに共有して、フィードバックを求めることも可能です。

まとめ

ここまで見てきたように、スキマ時間に Firefly モバイル版を使うことで、移動中や待ち時間に、かなり精度の高いイメージを作成することが可能です。実際に筆者は、30 分ほどで 3〜4 のグラフィック案を作成し、チームメンバーに送ってフィードバックをもらうことで、大幅に進行を効率化できています。

PC を開かなければデザイン作業が進まないという常識を覆す、新しい「アイディアの下書き帳＝ Firefly モバイル版」をぜひ試してみていただければと思います。

上手に Firefly にお願いしてウェブデザイン案を出すぞ！

筆者は、2025 年 2 月開催の Adobe MAX Japan と 5 月の DIST という勉強会で、「上手に Firefly にお願いしてウェブデザイン案を出すぞ！」というセッションを行いました。

これらのスライドでは Firefly web 版を使い、ゆるく描いた線画を構成参照画像として、Firefly にウェブデザインのアイディアを出してもらうテクニックについて解説しています。

Firefly を利用するには生成クレジットが必要です。現在お持ちの生成クレジットを確認する方法は、こちらをご覧ください。

その他の生成クレジットに関するよくある質問は、こちらのページをご覧ください。