Slide 1

Slide 1 text

上⼿にFirefly に お願いして ウェブデザイン案を 出すぞ! 2025.05.14 DIST.49 Akiko Kurono a.k.a. crema booklista Co., Ltd. 再演版!

Slide 2

Slide 2 text

静⽌画撮影OK SNS 投稿OK #DIST49 動画撮影NG このセッションは…

Slide 3

Slide 3 text

私について ⿊野 明⼦ 株式会社ブックリスタ 新規事業開発室 デザイナー crema

Slide 4

Slide 4 text

ブックリスタ新規事業開発室のプロダクト

Slide 5

Slide 5 text

本題に⼊る前に…

Slide 6

Slide 6 text

2025.02.13 Adobe MAX Japan

Slide 7

Slide 7 text

2025.04.24 Firefly で使えるモデルが アップデート しましたね…!

Slide 8

Slide 8 text

Firefly の新モデル+Google 系+OpenAI 系も登場

Slide 9

Slide 9 text

同じプロンプトでもモデルによって出⼒結果が異なります GPT Image Imagen 3 Firefly Image 4 Ultra Firefly Image 4 Firefly Image 3

Slide 10

Slide 10 text

これ以降の話は Firefly Image 3 を 使っている前提で 聞いてください

Slide 11

Slide 11 text

本⽇のお題

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

なのですが

Slide 14

Slide 14 text

Firefly はワイヤーフレームを作るのは(まだ)得意じゃない たとえば こういうの とか

Slide 15

Slide 15 text

およそのワイヤーフレームを⽤意したうえで、詳細な デザインテイストを詰めていくのに、Firefly を活⽤

Slide 16

Slide 16 text

およそのワイヤーフレームを⽤意したうえで、詳細な デザインテイストを詰めていくのに、Firefly を活⽤

Slide 17

Slide 17 text

クライアント、カメラマン、イラストレーターなど、 制作チーム内でのイメージ共有をしっかり⾏える!

Slide 18

Slide 18 text

デザインの⽅向性をすばやく/しっかり決めるための⼿段

Slide 19

Slide 19 text

じゃあ、具体的に どうやって ⼿伝ってもらおう?

Slide 20

Slide 20 text

どうやって⼿伝ってもらおうか? ゆるめの指⽰で Firefly から ヒントを貰う話 強度で 画像内のテキストが 変わる話 脳内の 撮影イメージを 引き出す話 作るものの ベースを 3Dで⽤意する話 ❶ ❸ ❹ ❷

Slide 21

Slide 21 text

どうやって⼿伝ってもらおうか? ゆるめの指⽰で Firefly から ヒントを貰う話 ❶

Slide 22

Slide 22 text

⼤まかな構成はできていて、グラフィックの⽅向性を検討中

Slide 23

Slide 23 text

ゆるめの指⽰でFirefly からヒントを貰ってみる 今回は どういう⾒せ⽅で いこうかな…?

Slide 24

Slide 24 text

プロンプトをゆるくなげる 新発売の化粧品を紹介する ウェブサイトのレイアウト。

Slide 25

Slide 25 text

プロンプトをゆるくなげる 新発売の化粧品を紹介する ウェブサイトのレイアウト。 プロンプトの最適解は ケースによって違います

Slide 26

Slide 26 text

出⼒結果はこうなります 新発売の化粧品を紹介するウェブサイトのレイアウト。

Slide 27

Slide 27 text

これにプラスして 構成参照を使おう

Slide 28

Slide 28 text

構成参照とは

Slide 29

Slide 29 text

構成参照⽤にこんな絵を⽤意

Slide 30

Slide 30 text

構成参照を反映させる「強度」は三段階 弱 中 強

Slide 31

Slide 31 text

強度:中 参照画像

Slide 32

Slide 32 text

強度:強 参照画像

Slide 33

Slide 33 text

強度:弱 参照画像

Slide 34

Slide 34 text

この⽅向性で詰めていくことになりました!

Slide 35

Slide 35 text

ちなみに構成参照画像に⽂字がないと… ではなく にすると?

Slide 36

Slide 36 text

参照画像 ⽣成結果が変わります(コピーを⼊れる余⽩が考慮されにくい)

Slide 37

Slide 37 text

どうやって⼿伝ってもらおうか? 脳内の 撮影イメージを 引き出す話 ❷

Slide 38

Slide 38 text

こんなデザインを脳内で考えています 国際線の機内誌に 載っているような ラグジュアリーなイメージ

Slide 39

Slide 39 text

最初に試すプロンプト 男性向けオーデトワレの 新商品を紹介する ウェブサイト

Slide 40

Slide 40 text

構成参照無しでやってみます

Slide 41

Slide 41 text

プロンプト改良 男性向けオーデトワレの 新商品を紹介する ウェブサイトのレイアウト

Slide 42

Slide 42 text

「のレイアウト」を⾜すと結果が変化する

Slide 43

Slide 43 text

写真にフォーカスしてプロンプト改良 男性向けオーデトワレの新 商品を紹介する写真。周囲 に⽔が流れている

Slide 44

Slide 44 text

構成参照で使う画像はこんなのでもOK

Slide 45

Slide 45 text

参照画像 強度:中→こんな感じになります

Slide 46

Slide 46 text

レイアウトに⼊れるとこんな感じ

Slide 47

Slide 47 text

モバイル版だと写真のサイズがちょっと⾜りない このあたりの絵も無いと 後でレイアウトに 困りそう…!

Slide 48

Slide 48 text

Photoshop の⽣成拡張でモバイル⽤の写真も検討

Slide 49

Slide 49 text

参照画像 おまけ:この画像の場合、強度:強だとうまくいかず…

Slide 50

Slide 50 text

参照画像 Firefly Image 4 は「男性向け」というワードがNG っぽい 男性向けオーデトワレの新商品を紹介する写真。周囲に⽔が流れている

Slide 51

Slide 51 text

参照画像 Firefly Image 4 だと強度「中」でも上⼿くいかない 男性向けオーデトワレの新商品を紹介する写真。周囲に⽔が流れている

Slide 52

Slide 52 text

Firefly Image 4 だと これくらい正確性がある線画の 結果が良かったです

Slide 53

Slide 53 text

もう⼀例:紅葉狩りツアーのウェブサイト 秋の紅葉狩りツアーの ウェブサイト

Slide 54

Slide 54 text

「ウェブサイト」に引きずられてPCが⽣成されがち

Slide 55

Slide 55 text

写真にフォーカスしてプロンプト改良 ⽇本庭園で、 秋の紅葉狩りをする様⼦

Slide 56

Slide 56 text

加えて、構成参照しましょう

Slide 57

Slide 57 text

出⼒結果はこうなります 参照画像

Slide 58

Slide 58 text

レイアウトに⼊れるとこんな感じです

Slide 59

Slide 59 text

どうやって⼿伝ってもらおうか? 強度で 画像内のテキストが 変わる話 ❸

Slide 60

Slide 60 text

強度でテキストの扱いが変わる話 コーヒー30%OFF を 告知するLPを ⼿早く作りたい

Slide 61

Slide 61 text

プロンプトはこれです コーヒーショップの 宣伝バナーに使う グラフィック。

Slide 62

Slide 62 text

構成参照で使う画像

Slide 63

Slide 63 text

強度:中→⽇本語の⽂字が謎の⽂字に化ける 参照画像

Slide 64

Slide 64 text

強度:強→⽂字がほぼそのまま出⼒される 参照画像

Slide 65

Slide 65 text

レイアウトに⼊れるとこんな感じ

Slide 66

Slide 66 text

どうやって⼿伝ってもらおうか? 作るものの ベースを 3Dで⽤意する話 ❹

Slide 67

Slide 67 text

Illustratorの「3Dとマテリアル」で ⽴体感のある素材を作っておく

Slide 68

Slide 68 text

こんな感じで並べておきます

Slide 69

Slide 69 text

強度:強で反映すると、かなり忠実に⽣成してくれます 参照画像 カラフルなアイシングクッキー

Slide 70

Slide 70 text

同じ構成参照図版でプロンプトを変えてみた例 参照画像 ステンレスの板の上に置かれた氷

Slide 71

Slide 71 text

レイアウトに⼊れるとこんな感じ

Slide 72

Slide 72 text

まとめ

Slide 73

Slide 73 text

まとめ ゆるめの指⽰で Firefly から ヒントを貰う話 ❶

Slide 74

Slide 74 text

まとめ 脳内の 撮影イメージを 引き出す話 ❷

Slide 75

Slide 75 text

まとめ 強度で 画像内のテキストが 変わる話 ❸

Slide 76

Slide 76 text

まとめ 作るものの ベースを 3Dで⽤意する話 ❹

Slide 77

Slide 77 text

プロンプトの書き⽅と 構成参照図版を⼯夫して ウェブデザインに 活かしましょう!

Slide 78

Slide 78 text

ありがとう ございました!