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