【AIツール】プロのWebデザイナー業務に役立つ？（バナー制作編）

AIや自動化が進む昨今。Webデザインなどを学ぼうとしても「今からデザインを学んで大丈夫？」「Photoshopスキルは無駄になる？」と不安に思う方も少なくないと思います。

今回は「プロのWebデザイナーがバナー制作を受託した」と条件を絞って、AIツールをどう活用していくか紹介します。生成AI、AIツール類はなんの役に立つのか、デザイナーの仕事はどう効率化できるか考えていきましょう！

• AIはWebデザイナーの“バナー制作”に役立つ？
• AIが素晴らしいってよく聞くけど…
• 想定するバナー制作の流れ
• バナー作成基本7STEPとオススメツール
• 1. 目的とターゲットを明確にする
• 2. デザインの方向性を考える
• 3. 掲載内容・メインコピーを考える
• 4. 大まかなレイアウトの設計
• 5. 画像やグラフィック素材の選定・下ごしらえ
• 6. 素材を配置する
• 7. ディティールを詰める
• まとめ

AIはWebデザイナーの“バナー制作”に役立つ？

AIが素晴らしいってよく聞くけど…

Webデザイナーの業務範囲でも、何かとAI技術が取り上げられています。
画像生成AI×Canvaとか結構目にしますが「結局テンプレートの差し替えじゃない？」「え、そのクオリティで良いの？」みたいに、ちょっとモヤッとしたものを抱えるWebデザイナーの方もいらっしゃるはず。

結論から言うと、0から完成まで全部AI任せは無理。
ただし、デザインのインスピレーションを提供したり、メインコピーの提案や素材の選定など、アシンタントとしては非常に優秀です。以下では、具体的なツールや活用方法を紹介していきます。

想定するバナー制作の流れ

Webバナー制作の流れは、人（企業）や条件によって異なります。
これが正解！という順序・方法はありませんが、本記事では以下７つの順番で進めていくと想定しています。

1. 目的とターゲットを明確にする
   バナーの目標とターゲット層を明確にし、デザイン制作に一貫性を持たせます。

2. デザインの方向性を考える
   デザインのスタイルやトーンを大まかに考え、全体の方向性を決めます。

3. 掲載内容・メインコピーを考える
   バナーに掲載する内容、メインコンテンツとなるコピーを考えます。

4. 大まかなレイアウトの設計
   要素の配置や構成を大まかに決めます。

5. 画像やグラフィック素材の選定
   デザインに合った画像やグラフィック素材を用意します。

6. 素材を配置する
   画像やテキストを適切に配置し、バランスの取れたデザインを作成します。

7. ディティールを詰める
   カラー、フォント、字間などを調整してバランスを整えます。

この７つの順番で、それぞれ役立つツールやAIツールを紹介します。
特にクライアント次第で１～３は、キッチリした作り込んでから渡される場合もあります（我々は指示に従うだけ）。どういった流れか把握しておくと備えになりますが、必要ない方は、上記のテキストリンクから気になるところへジャンプしてください。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

バナー作成基本7STEPとオススメツール

1. 目的とターゲットを明確にする

バナー制作を始める前に、まずはバナーの目的とターゲットを明確にすることが重要です。宣伝したい商品やサービス、達成したいゴール（認知拡大、クリック誘導、購入促進など）を具体的に定めましょう。この段階で目的が曖昧だと、デザイン全体に一貫性がなく、効果的な広告を作るのが難しくなります。

次に、ターゲット層を設定します。誰に向けてメッセージを発信するのか、性別や年齢、興味関心などを具体的にイメージしましょう。ターゲットに合ったメッセージやデザインを選ぶことで、バナーの効果が高まり、集客や売上に結びつけることができます。

お役立ちAIツール

◆ ChatGPT

ChatGPTは、OpenAIが開発した対話型AIで、会話を通じて質問に答えたり、文章を生成することができます。多様なトピックに対応し、アイデア出しや創造的な発想にも優れているため、バナーの目的やターゲットを具体化する際に役立ちます。ブレインストーミングにも最適なツールです。

プロのマーケッターも顔負け? 速攻で“ターゲティングするAI活用術”
https://the21.php.co.jp/detail/11067

◆ perplexity

PerplexityはAIを活用した検索エンジンで、ユーザーの質問に対して最新の情報を元に適切な回答を提供します。情報源が明示されるため信頼性が高く、スマートフォンアプリも利用できるため、どこでも便利に使えます。バナー作成時のターゲットや市場動向を調べる際に重宝します。

これはGoogle検索を超えた…！AI検索エンジン「Perplexity AI」を【超・徹底解説】
https://seleck.cc/perplexity

◆ Genspark

Gensparkは、複数のAIエージェントが協力して情報を整理・提供する次世代の検索エンジンです。様々な視点から情報をまとめ、リアルタイムでカスタマイズされたページを作成できます。専門的な情報や詳しい分析が得意で、バナーの対象となる商品やサービスについて深く調査するのに便利です。

Gensparkの使い方！日本語対応の無料AI検索エンジンが話題。Perplexityとの比較も解説！
https://jitera.com/ja/insights/71087

◆ ラッコキーワード（関連キーワード取得ツール（仮名・β版））

ラッコキーワードは、特定のワードから、関連キーワードや関連タイトルを一括取得して表示するツールです。ターゲットの興味や関心を探るのに役立ち、バナーに使う訴求ポイントを見つけやすくなります。近年ではAIによる提案機能も追加されています。消費者が何を求めているのかを理解し、より効果的なメッセージを作成するサポートをしてくれるでしょう。

ラッコキーワード
https://rakkokeyword.com/

定番・便利ツール

◇ Googleドキュメント

Googleドキュメントは、クラウド上で文書作成ができるアプリで、リアルタイムでの共同編集が可能です。チームでアイデアを出したり、情報を共有したりするのに便利です。自動で保存されるので、作業中のデータが消える心配もなく、効率よく進められます。

◇ Notion

Notionは、文書作成やタスク管理、データベース機能をひとつにまとめたワークスペースツール。複数人でのアイデア共有にも適しています。自由にカスタマイズできるページ構造が特徴で、プロジェクトの全体像を把握しやすく、バナー制作の計画や進捗管理に役立ちます。

◇ Milanote（ミラノート）

Milanoteは、ビジュアル重視のアイデア整理ツールです。画像やテキスト、リンクを自由に配置できるので、バナーデザインのインスピレーションを集めたり、コンセプトを練ったりするのに最適です。直感的に操作でき、クリエイティブな作業がはかどります。

クリエイター向けノートアプリ「Milanote（ミラノート）」の使い方を徹底解説！
https://www.sungrove.co.jp/milanote/

2. デザインの方向性を考える

目的・ターゲット層を踏まえて、デザイン方向性を決めていきます。
ここでは、ブランドのトーンやスタイルを考えつつ、視覚的にどのように訴求したいか定めます。色使いや全体の印象もここで検討しましょう。トレンドや競合のバナーも参考にしながら、独自性やブランドイメージをプッシュできる方向性を探っていきます。

ここでしっかり配色等のルールを決めてしまう方法もありますが、画像素材などを探して使う予定の場合、カッチリ決めすぎると苦しくなります。この段階では大まかな方向性を決める程度に留めたほうが、作業効率は良いでしょう。

お役立ちAIツール

◆ DALL·E

DALL·EはOpenAIが開発した画像生成AI。ChatGPT Plus（月額$20）以上を契約している場合、追加料金無しでGPTと同じように使えます。プロンプトに細かく説明を打ち込めば、それを元に文字入りの画像も生成してくれます。そのまま書き出してバナーとして使えるクオリティでは無いですが、アイディア探し・インスピレーション元として活用できます。

ChatGPTを使って広告バナーを作成する方法！作成例やプロンプトも紹介
https://www.ai-souken.com/article/designing-ad-banners-with-chatgpt

◆ MidJourney / Stable Diffusion

画像生成AIの中でトップクラスの知名度を誇るMidJourneyとStable Diffusion。どちらも高品質な画像生成が可能で、多様なスタイルや表現に対応しています。テキストの指示を基に独自の画像を生成してくれますが、テキスト（特に日本語）の表現はちょっと残念。デザインのインスピレーションを得たいときのサポートとしては最適です。

時々すごく良い画像を作ってくれることがあるので、それをベースに自分で文字入れをする、という方法を取る方もいらっしゃるようです。

生成AIでバナーを自動作成する方法を徹底解説｜弊社ツールもご紹介
https://www.adcal-inc.com/column/ai/generativeai-banner/

◆ Microsoft Designer

Microsoft DesignerはAIを活用したデザインツールで、テキストプロンプトから自動的にバナーやソーシャルメディア投稿を作成できます。AIが提案してくれたデザインを元に編集もできる、というのが売りですが、現時点でそこまでクオリティの高いものは出来ません。デザインツールではなく、インスピレーション収集ツールとして利用するのが吉。

Microsoft Designerを使って、AIデザイナーにデザイン案を作らせてみた
https://www.tc3.co.jp/microsoft-designer-first-impression/

定番・便利ツール

◇ Pinterest

Pinterestは、世界中のクリエイティブなアイデアやデザインを簡単に閲覧できるビジュアル探索プラットフォームです。ユーザーは画像やリンクを「ピン」して、自分のボードに保存し、デザインの参考やインスピレーションとして活用できます。

URL：https://jp.pinterest.com/

◇ Behance

Behanceは、プロのクリエイターやデザイナーが自分の作品を公開し、共有できるプラットフォームです。さまざまなクリエイティブ分野のプロジェクトを閲覧することができ、デザインの参考に役立ちます。ただし、日本っぽいデザインはあまりないので、影響を受けてターゲット層などを置き去りにしたデザインをしないよう注意しましょう。

URL：https://www.behance.net/

◇ Canva

CanvaにもAI機能は搭載されていますが、デザインの方向性決定やインスピレーションを得る目的であれば、豊富なテンプレートやスタイルを中心に見るのがおすすめです。このまま使える（実際に使う方もいらっしゃる）クオリティなので参考にもなりますし、「Webデザイナーを名乗る以上はこれより良いデザインを作ろう！」とやる気も出ます。

https://www.canva.com/ja_jp/facebook-ads/templates/

3. 掲載内容・メインコピーを考える

バナーに文字情報として掲載する内容を精査し、決定します。
バナーの中でも注目されるメインコピー。バナーの中で視覚的にも目立つように配置されます。内容としても、シンプルかつ魅力的である必要があるので、ターゲットにとっての魅力的な訴求点を考え、それを簡潔なフレーズにまとめます。メインコピーはできるだけ短く、インパクトのあるものにするのが無難。

メインコピー以外の情報は必要最低限に絞ったほうが、ユーザーの視点が散らばらず、デザインのクオリティも上がります（クライアントに任せると細々した文字情報を載せたがりますが、相談して可能な限り絞れると良いです）。

使用ツール

• Googleドキュメント
• Notion
• Evernote
• ほか、テキストエディタ類

この作業は、いくつかの候補をテキストエディタなど（人によっては手書き）で思いつく限り書き出して、まとめていくという方法が多いです。とりあえず思いつく限り、思いつかなくても絞り出す……みたいなパワープレイが一般的でしたが、AIの力を借りるとすごく楽になります。

お役立ちAIツール

◆ ChatGPT

ChatGPTは、会話形式で様々な文章を作ることが得意。バナーのメインコピーを作成するときも、ターゲット層や商品の特徴を入力すれば、シンプルで魅力的なフレーズを提案してくれます。幅広い表現力があり、クリエイティブなアイデア出しにも役立ちます。

◆ Gemini

Googleが開発したAI「Gemini」は、複雑な情報を簡潔にまとめてくれます。テキストだけでなく、画像も理解できるため、バナー全体を考慮したコピー作成にも役立ってくれるでしょう。

◆ Claude

Claudeは、Anthropic社が開発したAIアシスタントで、高い言語理解能力を持っています。信頼できるフレーズを提案してくれるのが特徴で、事前にブランドの価値や商品のポイントを伝えると、それにぴったりな表現を提案してくれます。

◆ Copy.ai

Copy.aiは、コピーライティングに特化したAIツールです。豊富なテンプレートと業界別の最適化機能があり、メインコピーに加え、補足情報やCTA（行動を促すメッセージ）も簡単に作成できます。
直感的な操作ができ、AI初心者でも高品質なコピーを手軽に作れるのが魅力です。

【2024年最新】Copy AIとは？ 5つのメリットと3つの使い方を徹底解説！
https://www.llmsouken.com/?p=1211

◆ その他

その他にも、SAKUBUNやCatchyなどAIライティングアシスタントツールは沢山リリースされています。
どれが良いかは、使う人と業務範囲によるでしょう。たまにクライアントに投げられる、くらいのWebデザイナーさんであれば、GPTやGeminiで足りることも多いと思います。自社メディアなどで頻繁にコピーや文章を作らなくてはいけない場合は、無料プランで色々試してみてください。

キャッチコピーの生成AIとは？驚くべき機能とその効果を解説！
https://n-v-l.co/blog/catch-copy-generation-ai

4. 大まかなレイアウトの設計

まずは、バナー全体の大まかなレイアウトを設計します。この段階では、メインコピーやサブテキスト、「詳しくはこちら」など）の位置をざっくりと決めます。ここでは、具体的なデザインや詳細にこだわるのではなく、重要なメッセージが目立つ位置に配置されているか、全体のバランスが取れているかを確認します。

この段階でのレイアウト設計は、ユーザーがどの順番で情報を目にするかを意識することが大切です。視線の流れに沿った配置や、メインコピーが自然と目に入るような構成を意識しましょう。まだ詳細なデザインは不要なので、全体の骨格を決め、後で素材や詳細を詰めていく際の基盤を作ります。

定番・便利ツール

◇ デザインツール類

• Adobe Photoshop
• Adobe Illustrator
• Figma
• Adobe XD など

オリジナリティあふれるバナーをデザインする場合は、Adobe Photoshopで作る、もしくは素材化処理をPhotoshopで行ったあとにIllustratorで組み立てるのが定番ではあります。ですので、この２つのツールを使用する場合は、最初からこちらを使いましょう。

次点としてFigmaやXDなどでも、かなり自由度高くレイアウトは作れます、ただし、どちらもUI作成がメインでPhotoshop/Illustratorほど自由度の高いデザインは出来ない点は理解しておきましょう。

◇ テンプレートがあるツール類

• Adobe Express
• Canva

こちらの２つのアプリもよく使われていて、目にしたことがある方も多いと思います。
ただし、メインユーザー層は非デザイナー。テンプレートを使って、簡単にクオリティの高いものを作ろうぜ、というのがメイン。

テンプレートは所詮テンプレート、画像やテキストを差し替えて多くの人が使っています。レイアウト作りの参考として役立たせるには良いですが、そのまま使ってしまうのは、個人的にはおすすめしません。

お役立ちAIツール

• DALL·E
• MidJourney
• Figma
• Stable Diffusion など

このあたりは、2. デザインの方向性を考えると同じです。
プロンプトに掲載したいテキストなどを入れることで、レイアウトのアイディアを得ることができるでしょう。レイアウト作りをお任せすると言うよりは、煮詰まった時のヒント探しとして活用するのがベスト。

5. 画像やグラフィック素材の選定・下ごしらえ

デザインの方向性が決まったら、バナーに使用する画像やグラフィック素材を選定します。
適切な画像やグラフィックは、視覚的なインパクトを強め、メッセージを効果的に伝えるのに役立ちます。ブランドに合ったビジュアルを選ぶことで、バナー全体の完成度が上がります。

画像のクオリティにも気を配りましょう。画質が悪いと全体の印象が損なわれ、ユーザーの信頼を失う可能性があります。素材の選定では、無料画像サイトや有料のストックフォト、オリジナルのグラフィックなどを活用し、メッセージにふさわしい素材を使いましょう。

定番・便利ツール

◇ 無料画像プラットフォーム

素材探しの基本と言えるのが、無料の映像・画像素材プラットフォーム。有名どころとしては、UnsplashやPexelsが挙げられます。これらは高品質な無料画像を提供するプラットフォームで、商業利用可能な幅広いジャンルの写真を簡単に入手できます。

Unsplash：https://unsplash.com/ja
Pexels：https://www.pexels.com/ja-jp/

◇ Adobe Stock

Adobe Stockは有料サービスですが、より専門的で高品質な商業利用可能な画像やグラフィック素材を提供しています。特に、人物は画像生成AIだとどうしても「CGっぽい」仕上がりになるので、日本人の人物写真を使用する場合に使うことが多いです。

URL：https://stock.adobe.com/jp/

◇ アイコンなどの素材サイト

アイコンやイラストに特化した素材サイト、フリー素材のプラットフォームなどもたくさんあります。このあたりは、作りたいデザイン・欲しい素材に合わせて探していく事が多いです。バナーなどを作る時に探しながら「あ、ここ良い」とお気に入り登録する→ブクマがパンパンになる、はあるあるです（笑）

おすすめフリーデザインサイト一覧
https://zenn.dev/ryotoitoi/articles/design_icon_list

お役立ちAIツール

◆ DALL·E

DALL·Eはテキスト入力から独自の画像やグラフィック素材を生成できるAIツールで、ユニークな視覚表現を可能にします。

◆ Adobe Firefly

ブラウザ上で動作する、Adobe社の画像生成AIです。こちらもテキスト入力を元に画像やグラフィック素材を生成してくれます。Adobe Creative Cloud を契約中の方であれば、毎月クレジットがもらえる（実質無料で結構使える）ので、利用する機会が多いかと思います。著作権の心配がいらないのもメリット。

Adobe感溢れる画像が生成されがちなので、プロンプトなどを公開されている方の記事も参考に使っていくと良いです。

画像生成AIの『Adobe Firefly』を用いたキービジュアル作成のメリットとコツ
https://note.com/aiogura/n/n6089fb384890

◆ Adobe Express

無料から利用できる、Adobe社のコンテンツ制作アプリAdobe Express。先程テンプレート使うのはちょっと…とご紹介しましたが、実は背景除去機能が優秀。元画像にもよるのでしょうが、Photoshopよりも安定したクオリティの印象。
効率よく透過素材を作りたい時に役立ちます。

無料のAdobe Expressで画像のリサイズや背景を透化する
https://mik2062.jp/adobe-express/

◆ Adobe Illustrator

Illustratorに搭載されている「テキストからベクター生成」を使うと、プロンプトに従ってベクターアートやアイコンなどを生成してくれます。編集可能なベクターデータとして生成されるのが、一般的な画像生成AIとの大きな差。思っているビジュアルが出てくるわけではないですが、アイコンやイラストを探すのが面倒すぎる方は試してみる価値アリです。

生成AIでロゴ・キャラ・アイコンの作り方を簡単解説！無料で商用利用
https://eco-utilize.sando-sanyo.co.jp/blog/039

6. 素材を配置する

選定した画像やグラフィック、メインコピーなどの要素をバナーに配置します。
素材の配置には、視認性とバランスを意識し、各要素がユーザーに伝わりやすいことを心がけます。重要なメッセージが埋もれないように、メイン要素とサブ要素の優先順位をしっかりと考えることが大切です。

また、サイズ感や余白の使い方もポイントです。要素が詰め込まれすぎているとバナー全体が散らかって見えてしまうため、メイン要素を強調した効果的なレイアウトを目指しましょう。

使用ツール

• Adobe Photoshop
• Adobe Illustrator
• Figma
• Adobe XD
• Adobe Express
• Canva　など

4. 大まかなレイアウトの設計で使ったツールを、そのまま使います。

7. ディティールを詰める

最後に、バナーのディティールを詰めます。色使いやフォント、字間などを微調整し、全体のバランスを整えましょう。色はブランドイメージやメッセージに合ったものを選び、コントラストを強めることで、重要な要素が際立つようにします。

フォントや字間も、視認性や読みやすさを考慮して調整します。テキストが読みにくいとユーザーにとって不親切なデザインになるため、適切なサイズや字間で最終調整を行います。細部まで注意を払い、完成度の高いバナーに仕上げましょう。

定番・便利ツール

◇ Adobe Color

Adobe Colorは、直感的なインターフェースでカラースキームを簡単に生成できるツールです。Adobe製品との連携も強み。ブランドカラーに基づいた配色や、調和の取れた色の組み合わせを素早く作成できるため、バナーデザインの色彩計画に最適です。

URL：https://color.adobe.com/ja/

◇ Coolors

Coolorsは、シンプルな操作で色の組み合わせを作成できるツールです。スペースキーを押すだけで新しい配色が生成され、直感的に好みの組み合わせを見つけられます。また、既存の色から調和の取れた配色を提案してくれる機能もあり、ブランドカラーを基にしたバナーデザインの配色決めに役立ちます。

URL：https://coolors.co/

◇ WhatFont

フロップデザインは、日本発の無料デザイン素材サイトで、商用利用可能なアイコンやイラスト、フォントを提供しています。日本語フォントを探したい！クオリティの高い、個性的な日本語フォントが欲しくなったら覗いてみましょう。

URL：https://www.flopdesign.com/

お役立ちAIツール

◆ Colormind

Colormindは、機械学習を用いて最適なカラースキームを提案してくれます。ただランダムに色を並べる、配色パレットを表示するのではなく、自分で使いたい色を指定することもできます。「#1d5169と##c59d04を使いたいから、それに合う色を考えて」のような使い方ですね。画像からの色抽出にも対応しています。

登録不要、ブラウザでアクセスすれば即使えるのも良いですね。

http://colormind.io/

◆ Adobe Illustrator

Illustratorに搭載されている「再配色」ツールと、プロンプトから配色し直してくれるAI「生成再配色」ツールも結構使えます。ノーマルの再配色ツールは地味だけど有用。生成再配色は、ちょっと“生成ガチャ”な感じはありますが、自分では思いつかない配色でヒントをくれます。

まとめ

Webデザイナーの仕事はAIに取って代わられる…みたいなことも結構囁かれていますが、現時点では、人間のプロが作ったほうが品質は間違いなく高いです。これはバナーなど情報量が多い画像も、Webサイトやアプリケーションのデザインも、どちらもです。

AI「で」作るのではなく、AI「も」使って早く高品質なものを作る。
Webデザイナーとして生き残るためにも、生成AIの活用術を知っておくのは重要事項と言えそうです。