【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ！

2025年5月14日に開催された「DIST.49」にて、黒野明子が登壇したセッションのスライド共有です。
2月13日のAdobe MAX Japan版の内容に加え、4月24日に公開された「Firefly Image 4」などの新しいモデル群の振る舞いについても触れています。

---

このセッションでは、Adobe Fireflyを活用してウェブデザイン案のブレインストーミングを楽しく効率的に行うためのノウハウを紹介します。

プロンプトの設計や構成参照などの使い方を学ぶことで、Fireflyを自分のデザインパートナーとして最大限に活用するためのヒントを得られるでしょう。

対象者：
・ウェブデザイナーやクリエイター
・効率よくデザイン案を作成したいプロジェクトマネージャー
・AIツールを使ったクリエイティブに興味のある方

このセッションで学べること：
・Fireflyと人間の共同作業を円滑に進めるためのポイント
・Fireflyの提案を洗練させる指示の与え方
・Fireflyを使ったウェブデザイン案の実例紹介

Transcript

1. 上⼿にFirefly に お願いして ウェブデザイン案を 出すぞ！ 2025.05.14 DIST.49 Akiko Kurono a.k.a. crema booklista Co., Ltd. 再演版!
2. 静⽌画撮影OK SNS 投稿OK #DIST49 動画撮影NG このセッションは…
3. 私について ⿊野 明⼦ 株式会社ブックリスタ 新規事業開発室 デザイナー crema
4. ブックリスタ新規事業開発室のプロダクト
5. 本題に⼊る前に…
6. 2025.02.13 Adobe MAX Japan
7. 2025.04.24 Firefly で使えるモデルが アップデート しましたね…！
8. Firefly の新モデル＋Google 系＋OpenAI 系も登場
9. 同じプロンプトでもモデルによって出⼒結果が異なります GPT Image Imagen 3 Firefly Image 4 Ultra Firefly Image 4 Firefly Image 3
10. これ以降の話は Firefly Image 3 を 使っている前提で 聞いてください
11. 本⽇のお題
12. 上⼿にFirefly に お願いして ウェブデザイン案を 出すぞ！
13. なのですが
14. Firefly はワイヤーフレームを作るのは（まだ）得意じゃない たとえば こういうの とか
15. およそのワイヤーフレームを⽤意したうえで、詳細な デザインテイストを詰めていくのに、Firefly を活⽤
16. およそのワイヤーフレームを⽤意したうえで、詳細な デザインテイストを詰めていくのに、Firefly を活⽤
17. クライアント、カメラマン、イラストレーターなど、 制作チーム内でのイメージ共有をしっかり⾏える！
18. デザインの⽅向性をすばやく/しっかり決めるための⼿段
19. じゃあ、具体的に どうやって ⼿伝ってもらおう？
20. どうやって⼿伝ってもらおうか？ ゆるめの指⽰で Firefly から ヒントを貰う話 強度で 画像内のテキストが 変わる話 脳内の 撮影イメージを 引き出す話 作るものの ベースを 3Dで⽤意する話 ❶ ❸ ❹ ❷
21. どうやって⼿伝ってもらおうか？ ゆるめの指⽰で Firefly から ヒントを貰う話 ❶
22. ⼤まかな構成はできていて、グラフィックの⽅向性を検討中
23. ゆるめの指⽰でFirefly からヒントを貰ってみる 今回は どういう⾒せ⽅で いこうかな…？
24. プロンプトをゆるくなげる 新発売の化粧品を紹介する ウェブサイトのレイアウト。
25. プロンプトをゆるくなげる 新発売の化粧品を紹介する ウェブサイトのレイアウト。 プロンプトの最適解は ケースによって違います
26. 出⼒結果はこうなります 新発売の化粧品を紹介するウェブサイトのレイアウト。
27. これにプラスして 構成参照を使おう
28. 構成参照とは
29. 構成参照⽤にこんな絵を⽤意
30. 構成参照を反映させる「強度」は三段階 弱 中 強
31. 強度：中 参照画像
32. 強度：強 参照画像
33. 強度：弱 参照画像
34. この⽅向性で詰めていくことになりました！
35. ちなみに構成参照画像に⽂字がないと… ではなく にすると？
36. 参照画像 ⽣成結果が変わります（コピーを⼊れる余⽩が考慮されにくい）
37. どうやって⼿伝ってもらおうか？ 脳内の 撮影イメージを 引き出す話 ❷
38. こんなデザインを脳内で考えています 国際線の機内誌に 載っているような ラグジュアリーなイメージ
39. 最初に試すプロンプト 男性向けオーデトワレの 新商品を紹介する ウェブサイト
40. 構成参照無しでやってみます
41. プロンプト改良 男性向けオーデトワレの 新商品を紹介する ウェブサイトのレイアウト
42. 「のレイアウト」を⾜すと結果が変化する
43. 写真にフォーカスしてプロンプト改良 男性向けオーデトワレの新 商品を紹介する写真。周囲 に⽔が流れている
44. 構成参照で使う画像はこんなのでもOK
45. 参照画像 強度：中→こんな感じになります
46. レイアウトに⼊れるとこんな感じ
47. モバイル版だと写真のサイズがちょっと⾜りない このあたりの絵も無いと 後でレイアウトに 困りそう…！
48. Photoshop の⽣成拡張でモバイル⽤の写真も検討
49. 参照画像 おまけ：この画像の場合、強度：強だとうまくいかず…
50. 参照画像 Firefly Image 4 は「男性向け」というワードがNG っぽい 男性向けオーデトワレの新商品を紹介する写真。周囲に⽔が流れている
51. 参照画像 Firefly Image 4 だと強度「中」でも上⼿くいかない 男性向けオーデトワレの新商品を紹介する写真。周囲に⽔が流れている
52. Firefly Image 4 だと これくらい正確性がある線画の 結果が良かったです
53. もう⼀例：紅葉狩りツアーのウェブサイト 秋の紅葉狩りツアーの ウェブサイト
54. 「ウェブサイト」に引きずられてPCが⽣成されがち
55. 写真にフォーカスしてプロンプト改良 ⽇本庭園で、 秋の紅葉狩りをする様⼦
56. 加えて、構成参照しましょう
57. 出⼒結果はこうなります 参照画像
58. レイアウトに⼊れるとこんな感じです
59. どうやって⼿伝ってもらおうか？ 強度で 画像内のテキストが 変わる話 ❸
60. 強度でテキストの扱いが変わる話 コーヒー30%OFF を 告知するLPを ⼿早く作りたい
61. プロンプトはこれです コーヒーショップの 宣伝バナーに使う グラフィック。
62. 構成参照で使う画像
63. 強度：中→⽇本語の⽂字が謎の⽂字に化ける 参照画像
64. 強度：強→⽂字がほぼそのまま出⼒される 参照画像
65. レイアウトに⼊れるとこんな感じ
66. どうやって⼿伝ってもらおうか？ 作るものの ベースを 3Dで⽤意する話 ❹
67. Illustratorの「3Dとマテリアル」で ⽴体感のある素材を作っておく
68. こんな感じで並べておきます
69. 強度：強で反映すると、かなり忠実に⽣成してくれます 参照画像 カラフルなアイシングクッキー
70. 同じ構成参照図版でプロンプトを変えてみた例 参照画像 ステンレスの板の上に置かれた氷
71. レイアウトに⼊れるとこんな感じ
72. まとめ
73. まとめ ゆるめの指⽰で Firefly から ヒントを貰う話 ❶
74. まとめ 脳内の 撮影イメージを 引き出す話 ❷
75. まとめ 強度で 画像内のテキストが 変わる話 ❸
76. まとめ 作るものの ベースを 3Dで⽤意する話 ❹
77. プロンプトの書き⽅と 構成参照図版を⼯夫して ウェブデザインに 活かしましょう！
78. ありがとう ございました！