GENSEKIマガジン

モノづくりを広げる・支えるメディア

テンプレートを活用してWebバナーを超特急で作る方法【盛れる! グラフィックデザイン部】

 

【この記事はAdobe Expressの提供を受けています】

 

グラフィックデザインってなんだか難しそう。誰か親切な人が教えてくれないだろうか。できれば優しいギャルだといいんだけど……。そんなことを考えていた初郎(ういろう)君のもとに、どこからともなくグラフィックデザインに詳しいギャルが現れました! グラフィックデザインの初歩を学ぶ連載です。

この記事でわかること
  • Webバナーの作成のやり方
  • テンプレートを活用するときのコツ
  • Adobe Expressなら生成AIが使える

▼前回の記事はこちら

登場人物

ぎゃるの
グラフィックデザインに詳しい謎のギャル。その時の気分で優しくしたり詰めたりする。

初郎(ういろう)
グラフィックデザインについては右も左もわからない。できれば優しいギャルに教えてもらいたい。

 

今日も暑ち〜。まじ外出るの無理すぎるから涼しい部屋でネイルでもしよ〜っと。
なんのデザインにしようかな〜。

(プルルル)

 

ぎゃるのさん! 助けてください!

 

無理。ごめ。

 

ノーーーーーー!!! どうかお話しだけでも!!!

 

もー声だけで暑くてキレそう。
あれっしょ? ういろうが店長やってる、スーパー「超特急」のスイカ誤発注っしょ? ぅちが作った画像、そこそこバズってたから100ケースくらいさばけたんじゃね? 

 

その節はありがとうございました!! おかげさまで25ケースは無事にさばけたのですがまだ75ケースも残っていて……今手作りチラシを作って店前で配ってますがイマイチで……そして、暑い!!!

 

そりゃ、この暑い中チラシ配るのもしんどぃよな。ネット通販もやってるんなら、そっちに力を入れた方がよくね?
こないだ教えたAdobe Expressバナー広告作ったら?

 

バナー広告!!?? でも、僕バナーなんて作ったことないですし!!

 

大丈夫大丈夫〜。Adobe Expressならデザイン初心者でもCOOLなバナー広告がスピーディにできちゃうからまじ安心しろし!

 

はっはい……!! やってみます……!!

 

んじゃ、チャチャッと作っちゃお〜!

 

 

テンプレート選びのコツ

今日ぎゃるのさんはこちらに来られないんですよね? 最初から最後まで1人ってドキドキするなあ……。


安心しろし。オンラインで共同作業できっから!
ぅちを共同作業者として追加すれば、編集中のデータをリアルタイムでチェックしてコメント送れるから、ノータイムでフィードバック可能だょ。

 

それはなんと素晴らしい!! いつものようにご指導願います!

 

おけおけ。んじゃ、今回はWebデザインとグラフィックデザインの違いから、みっちり教えようか。この二つはぜんぜん違うからね~! 

 

は! はい! ドキドキ……!

 

Webデザインとグラフィックデザインの違いは……

 

違いは?!

 

Adobe Expressのテンプレを使っちゃえば、あんまり気にしなくてオケ!!!!!

 

ズコーーー!!!  それでいいんですか!?

 

もちろん依頼されてイチから作る場合はユーザー目線で細かいところ考えなきゃダメだけど、すでにバランスとか計算されたものがあるんだから、それを使うのが一番手っ取り早いよ〜。前にも言った通り、Adobe Expressのテンプレはセンス良いし!

 

おお! 本当だ! 「バナー広告 スイカ」で検索したらオシャレデザインがこんなに! 

わ〜これすごくさわやかでいいな〜! でもこういうのもオシャレで良いかも…!
でもやっぱり目を引くのはこれかな〜〜??
うわあああああ決められない!!!! どれも良すぎて迷う〜〜〜!!!

 

わかる。そんなときのために「テンプレ選びのコツ」を教えとくわ!

テンプレートは第一印象がまじ重要。一覧で見てピンと来たってことは、それだけ目を引くってことだし、用途にマッチしてるってことだから。

さまざまな気配りやコンセプトを何層にも重ねるほど味わいが出るのがグラフィックなら、極力シンプルな構成で「とにかく気になる!」って感覚的に訴えるものが良きWebデザインなんじゃないかなーと。

 

なるほど感覚的に……!
よおお〜〜〜〜〜し! 君に決めたっ!!!!

 

テンプレベースに足し算引き算「テキスト効果」もあるょ!

お、 写真もレイアウトも良い感じのがあるジャン!

Adobe Expressテンプレート「赤と緑と黒のスイカInstagram広告」より

まさに使えそうですね! ありがたや~。

 

あとはこれを実際の用途に当てはめながら、何を足して引いていくかだね〜。

それでは、当スーパーの販売実態にあうように文言を調整し、ロゴを挿入して……

できました!

 

なかなか良いんじゃね? 

 

このままでも使えますが、もうちょっと手を入れたいような……。
うーーーーーん、どうすれば!??

 

んじゃ「テキスト効果」使ってみようか。いわゆる生成AIね。

 

えっ? 生成AIですか?? なんか難しそうですし……やめときます……。

 

試しにやってみるから見てみ。
えっと、テキスト効果つけたい文字を選んで、テキスト効果ボタンをポチ、「どのような感じにしたいですか?」ってとこに「スイカ」とか入れて生成ポン。

 

ドキドキ……

うわ! 文字がスイカ柄になってる!!!!!

 

ねー。すごいっしょ。一瞬っしょ。

 

本当に…こんな簡単だなんて…! めちゃくちゃすごいし、やり方次第でめちゃくちゃおもしろいものができそうですね!

 

だよねー。でも背景がスイカの写真で、文字もスイカ柄になるとちょっと読みにくいから、今回はやめとこう。
文字のバランス調整して、ちょっとした擬音足すくらいが良いかもね。ぅちがパパッとやっちゃうね〜。

おおお! シャリシャリ!! 良いですね!!これで行きましょう!!
早速掲載の依頼してきます〜〜!!

 

おけいってら〜。
さて、ぅちはネイルしよ〜っと。

 

生成AIで制作モチベーションが湧き上がる

ぎゃるのさん! バナーのお陰で、ネット注文が増えています! それに、来店して買って行く人も増えたような……。
いつもながら本当にありがとうございます〜!

 

今回も爆速で解決したね〜。まじAdobe Express神。

 

いや〜本当に! 実はAIってよくわからないから敬遠していた部分があったんですが、文字の生成は簡単だしすごく便利ですね。 慣れれば理想的なものができそうです!

 

Adobe IllustratorのアピアランスやAdobe Photoshopの加工も、何度も使っていくうちにこなれてくるからねー。
たとえ使わなかったとしても、アイデアとして蓄積されるから、お試し感覚で色々作ってみたらいいんじゃね?

 

そうですね、ビビりすぎず、いろいろ作ってみたいと思います!

ひらめいたんですが、スイカ柄の文字は読みにくかったけど、他の食品ならイケるのでは……? 秋は焼きいも、冬は鍋、春は山菜とか……。
イベントごとに変えてもいいなあ~。クリスマスには七面鳥、節分は恵方巻き、お正月は餅……わあ〜アイデアが止まらないや!

 

(なんか一人でブツブツ言い出したし。そろそろ通話切っても良いかな)

 

やっぱりデザインって楽しいですね〜!
ハッ……!!! 僕は今、スーパー「超特急」の店長……!! デザイナーの道は諦めたんじゃなかったのか……??


あ! ぅちもひらめいた! ネイルのデザイン! やば! 絶対かわいい!
んじゃ、ういろう店長がんばれし〜!

(通話終了)ツーツーツー

 

ああ〜店長とデザイナー、どっちを目指せば良いんだああ〜〜!!!
どっちも両立する道はないのか〜〜〜〜〜〜〜!!!!

 

 

提供

Adobe Express

Adobe Expressは、アドビ社が提供する、誰でも簡単に、魅力的なコンテンツを作成できるデザインアプリです。

Adobe Expressの最大の特徴は、デザイン制作の経験がない人でも、すぐにはじめられる点です。誰でもかんたんに魅力的なコンテンツを作成できるデザインツールで、ロゴやチラシ、Instagramリールなどの動画も作成可能。Adobe Fireflyによる生成AIを活用して、あっという間に存在感のある作品を作れます。

「デザイン」というワードにハードル高く感じる人にも、体験することで日常にちょっとした創造性を拡げます。

Adobe Express 公式サイト

 

執筆・イラストきびのあやとら(GENSEKI/X:@kibinoayatra
グラフィックデザイナー歴16年目。小難しく考えすぎてしまう拗らせ期を経て、一旦デザインと距離を置くため廃業を決意。イラストや広告漫画をメインに方向転換するも、デザインはあらゆるクリエイティブの根底にあるズッ友のような存在だと気付きやっぱ好きだわ〜と思う。基本的なことやコツさえ抑えたらデザインはとても自由で楽しいからマジでみんなやろ〜?ということをギャルのノリで伝えていきたいと思っています。

 

編集斎藤充博GENSEKI/X:@3216Web