WEBデザイナー向け無料電子Book >受け取りはこちら

【たった5分】AIを使った広告バナー作成術を大公開!

【わずか5分】AIを使った広告バナー作成術を大公開!

こんにちは!久保です!

最近、AIが何かと話題ですよね。

「AIを使って作るデザインってどんな感じなの?」「どうやってAIを使いこなすの?」と疑問を抱いている方も多いと思います。

そこで、今回は1年以上前からAIを活用してWEBデザインをしている、デザイン会社の社長、大坪に「Midjourney(ミッドジャーニー)」「Chat GPT」「Photoshop」の3つを使った広告バナー作成術を紹介してもらいました!

既にWEBデザインをしている方はもちろん、まだWEBデザインしたことがないという人でもできるやり方なので、記事を参考にバナーを作ってみてくださいね。

この内容を「動画で見たい!」という方は、下の動画をクリックしてご覧ください。

目次

AIを使ったデザイン制作①:クリスマスバナーの作成

久保なつ美

それでは大坪さん、お願いします!

大坪拓摩

はい。何か作って欲しいものある?バナーとか?

久保なつ美

そうですね!じゃあ、クリスマスバナーお願いします!

AIを使ってバナーを作成する手順
  1. Midjourneyで画像を生成する
  2. Chat GPTでコピーを作る
  3. Photoshopで画像とコピーを組み合わせる

Midjourneyで画像を生成する

大坪拓摩

じゃあ、やっていこうか。まずは、Midjourneyを開いてと。

久保なつ美

なんだこの画像は!?怖い!

大坪拓摩

前作ったのが残ってた。AIに「ハッピー」と打ち込んだら出てきたんだよね。AI的なハッピーはこれらしいです(笑)

久保なつ美

全然ハッピーじゃないですよ!(笑)

大坪拓摩

そうね(笑)まあ、AIってまだこれくらい適当ってことだよね。

とりあえずMidjourneyに「クリスマス」と打つと、、、。

久保なつ美

あー!すごい!

大坪拓摩

候補が出たら、下に「U1〜U4」と「V1〜V4」っていうメニューが出てくるから、それをクリックして画像を拡大したり、バリエーションを増やしたりするんだよね。

U=広告バナーにできるくらいサイズを大きくする

V=1つの画像のバリエーションを増やす

大坪拓摩

左下の画像のバリエーションを増やしたいから「V3」をクリックするんだけど、そしたら、こういった(↓)画像が出てくる。

大坪拓摩

この中から1つ拡大しようと思うんだけど何番がいい?

久保なつ美

右下の4番かな!

大坪拓摩

じゃあ、4番を拡大して。これでとりあえず画像は完成。

Chat GPTでコピーを作る

大坪拓摩

次はコピーだね。Chat GPT使おうか。

久保なつ美

うわ、なんか英語ばっかり、、、。

大坪拓摩

そう。基本英語だね。とりあえず雑に「クリスマスのキャンペーンを行いたいです。キャッチコピーを10案ください。」と入力してみようか。

久保なつ美

なんか部下に指示するみたいですね!うわ!たくさん出してきてる。

大坪拓摩

本当はもっと細かく指示を与えて、精度の高いコピーを出してもらうんだけど、今回はデモだからこれくらいで。この中で使いたいのある?

久保なつ美

「クリスマスの贈り物で大切な人を喜ばせよう」かな!

大坪拓摩

了解。これでコピーも決まったね。

Photoshopで画像とコピーを組み合わせる

大坪拓摩

画像とコピーが出来上がったら、あとはPhotoshopで編集するだけ。

STEP
Midjourneyから画像をPhotoshopに移す
STEP
Chat GPTからコピーをPhotoshopに移す
STEP
テキストを調整する
STEP
完成
大坪拓摩

なんかこういうの広告で出てこない?

久保なつ美

出てくる!

大坪拓摩

こんな感じ。まあ、もっとクオリティを上げようと思えば、いくらでもできるんだけど。

久保なつ美

デザインとしてはイマイチだけど、広告とかだとクリックしてもらえそう!意外とこういうのがクリック率高かったりするんだよな〜。

大坪拓摩

「売れるデザイン」がわからない人は、こういうの使ったほうがいいね。

AIを使ったデザイン制作②:ほくろ除去の広告バナー

大坪拓摩

じゃあ、もう1個くらい作っていこうか。とりあえず、ギャラリーサイトでバナーのネタがないか探そう。

大坪拓摩

ちゃんとデザインをしたバナーには敵わないんだけど、たまにこうやってAIで超えられそうなやつがあるよね。

英語を使ってMidjourneyで画像を生成する

大坪拓摩

AIの精度を高めるために、今回は英語で指示を出そうか。とりあえず翻訳ツールを開いてと。

久保なつ美

英語だと精度が高まるんですね!

大坪拓摩

そう。本当はもっと複雑に指示を出すんだけど、今回は簡単でいいや。翻訳した文章を「Midjourney」に入れるとこんな感じ。

久保なつ美

お!

大坪拓摩

カミソリとかの広告にありそうだよね。まあ、ところどころ体が変な風に曲がってたり、指の本数が少なかったりするんだけどね(笑)

久保なつ美

本当だ。こわ!

大坪拓摩

日本人って入力しても中国人が出てくるし。そういう意味ではまだまだって感じだよね。ちょっといい画像が出てくるまで何回か試してみようか、、、。

何回か試した結果
大坪拓摩

これなら、なんとかいけそうだね。

Photoshopでバナーを仕上げる

大坪拓摩

よし、じゃあPhotoshopで軽く編集していこう。

STEP
不要なところをトリミングする
STEP
白色のレイヤーを置き文字のスペースを作る
STEP
テキストを入力する
STEP
テキストの色・位置・大きさを調整する
STEP
完成
大坪拓摩

普段、こんないい加減な作り方しないから、スクールの生徒に真似られても困るんだけど、まあ、一旦こんな感じかな。

久保なつ美

Facebook広告にはありそう!

大坪拓摩

うん。うちの生徒の作品と比べたらクオリティは高くないけど、これくらいのデザインが実務で出回ってるから、売り方次第ではお金もらうこともできるんじゃないかな。

まとめ:AIでのデザイン制作を見て

久保なつ美

大坪さん今回はありがとうございます!デザインとしてはイマイチだけど、広告のテストとかに使えそうな感じしたね。反応意外と良かったりして。

大坪拓摩

そうね。

久保なつ美

あと、AIも使いにくいところがあって「まだまだだなっ!(まだ仕事を奪われることはないな)」とわかったので良かったです🎵

大坪拓摩

嬉しそうね(笑)まあ、「Midjourney」で作れる画像は結構ダークな感じだからね。

久保なつ美

ほんと怖いよ!

大坪拓摩

(笑)

出し方工夫すると、これくらいのやつはできる。

久保なつ美

おぉ、すごい!イラスト使った案件だと使えそうですね。まあ、それがなかなかないんですけど。

大坪拓摩

それはそうね。

久保なつ美

ただ、こういうのが作れるって知ってるだけでデザイン幅は広がるから、試しに使ってみるってのはありかもしれないですね。

大坪拓摩

うん。ユニークな素材は作れると思う。

久保なつ美

確かに!見ていても面白かったですね。改めて今日は実演を見せていただき、ありがとうございました。何か新しいニュースがあったらまた来てください!

大坪拓摩

そうね。

▼ ▼ 限定公開中 ▼ ▼

当メディアを運営している日本デザインスクールは、これまで14364人WEBデザイナーの仕事についてお伝えする無料セミナーを開催してきました。

その中で気づいたのが、WEBデザイナーへの誤解がある方が多いということ。中には一度勉強に失敗してからセミナーに来て「先に知りたかった」という方もいらっしゃいます。

そのような方が増えないために、特に多かった15の誤解を1つの資料にまとめました。勉強を始めてから後悔しないよう、ぜひ受け取ってください。

※非常に人気の資料であり、今後有料化する可能性もあるのでお早めに手に取ってくださいね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

質問や感想があればご記入ください

コメントする

目次