生成AIを使いこなす
WEBデザインを作る上で、生成AIを具体的にどう活用していけばいいのか悩んだので、まとめてみました。
まずはWEBデザインで使用できそうな生成AIについて
画像生成AI
◆Adobe Firefly :Adobe開発の生成AI。画像・音声・動画生成が可能。
◆ImageFX :Google開発の画像生成AI。テキスト入力で画像を生成。
◆Whisk :モデル×背景×スタイルで画像を生成。(試用版のため商用利用不可?)
WEBデザイナーの生成AIを使った仕事の効率化について、ネットを検索したり、AIに聞いてみたところ主に4点にまとまりました。
1.デザイン素材・アイディアの生成(画像・イラストやデザイン案の生成)
2.コーディングの効率化・自動化(モックアップからHTML/CSSなどを自動生成してくれるらしい)
3.コンテンツ制作・ライティングの支援(キャッチコピーなどの文章を生成してくれる)
4.業務プロセルの効率化(リサーチや調査・データ分析など)
いつも素材を探すのに時間がかかっていまったり、気に入った素材が有料だったりすることが多いので、生成AIで素材を作成してバナーを作ってみることにしました。
生成AIでバナー制作
Adobe Fireflyを使うことが多いのですが、人物を制作する際は海外の方が作られることが多いので、今回はImageFXを使うことにしました。
①プロンプト「笑顔の日本人女性がパソコンを持っている」

日本人女性が上手く生成されたと思ったのですが、手が3本ある!?ということでプロンプトの打ち直し。
ついてにビジネスっぽくスーツを着てもらうことにしました。
②プロンプト「スーツを着た日本人女性が笑顔でパソコンの仕事をしている」

ほぼイメージ通りの画像ができました!
プロンプトだけで生成してもイメージ通りにならない場合は、参照画像を設定できるようなのですが今回はこちらの画像を使用することにしました。
【バナー制作】
◆作成時間 :2時間半 Photoshop
◆ターゲット・ペルソナ :未経験からITクリエイターを目指す前後の女性
◆目的 :ITクリエイターになりたい人にまずは説明会に来てほしい
◆デザイン意図 :女性向けの明るい印象を意識して制作。
◆その他:パソコンにあるロゴは消しました。また女性を右側に配置したことにより空いてしまった左側の余白はPhotoshopで生成しました。

生成AIで素材を作ったことから、素材選びの時間が減り効率的に制作できました。
もっと時間があったら背景に載せる幾何学模様なども生成してみたいです。
また、今後は、キャッチコピーなども悩むことがあったら、生成AIを利用してみたいと思います。


