【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
by
Akiko Kurono
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
ありがとう ございました!