【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ！

2025年2月13日に開催された「Adobe MAX Japan 2025」にて、黒野明子が登壇したセッションのスライド共有です。

---

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

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

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

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

Transcript

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