INDEX
目次
前の章に戻る1章 バナー制作のための準備とデザインの基礎
この章の目安学習時間：90分
この章で到達できるゴール：
・AI生成に必要なツールの基本操作環境を整える
・訴求力の高いバナーを作るためのデザインの基礎知識を理解する
・デザインフィードバックメンタープロへのアウトプット方法を把握する
・訴求力の高いバナーを作るためのデザインの基礎知識を理解する
・デザインフィードバックメンタープロへのアウトプット方法を把握する
【1-1】高速制作ワークフローの環境構築とツール連携
目安の学習時間：30分
画像生成AIツール Gemini (Nano Banana Pro) の設定と利用準備
本講座のワークフローの核となる、画像生成AI「Nano Banana Pro」の準備を行います。
Nano Banana Pro は、Googleの生成AI「Gemini」上で利用できる画像生成ツールです。
複雑な設定は不要で、Geminiのチャット画面から呼び出すだけですぐに使用できます。
まずは、Geminiにアクセスし、Nano Banana Pro を使う準備を整えます。
Nano Banana Pro は、Googleの生成AI「Gemini」上で利用できる画像生成ツールです。
複雑な設定は不要で、Geminiのチャット画面から呼び出すだけですぐに使用できます。
まずは、Geminiにアクセスし、Nano Banana Pro を使う準備を整えます。
Google Gemini
Google の AI アシスタント、Gemini へようこそ。文章やリストの作成、計画の立案、アイデア出しなど、さまざまなことができます。生成 AI の力をぜひ体験してください。
1. Google アカウントで「Gemini」にサインインしてみましょう。
2. 入力欄の左下のアイコンから「画像生成」を選択すると、自動的にNano Banana Proが適用されます。
Nano Banana ProからCanvaへの連携
Nano Banana Proで生成した画像は、お使いのPCにダウンロードしてからCanvaにアップロードします。
1. Nano Banana Proで生成された画像の中から、使用するデザインを選択します。
2. 「ダウンロード」ボタンをクリックし、画像（PNG形式）をPCに保存します。
2. 「ダウンロード」ボタンをクリックし、画像（PNG形式）をPCに保存します。
3. Canvaの編集画面を開き、ダウンロードした画像をドラッグ＆ドロップでCanvaにアップロードします。
4. 「Use in a new design」を選択し、「カスタムサイズ」を選択します。
WEBCOACH独自のAIツール「デザインフィードバックメンタープロ」の登録と基本機能
次に、本ワークフローの「品質保証」を担う、WEBCOACH独自のAIツール「デザインフィードバックメンタープロ」を準備します。
「デザインフィードバックメンタープロ」とは？
- このツールは、単にデザインの見た目を評価するだけでなく、「クライアント視点」と「デザインメンター（専門家）視点」という2つの異なる立場から、多角的なフィードバックを提供するAIです。
- 実務では、「クライアントのビジネス目的」と「デザインの専門的品質」の両方を満たす必要があります。このツールは、その両面からの評価をシミュレーションします。
メンタープロの主な機能
メンタープロは、より実務に近いフィードバックを生成するために、デザインデータ以外にもいくつかの情報を入力します。
|
入力項目
|
概要
|
|---|---|
|
プロジェクト情報
|
デザインの目的（例：認知度向上、売上向上）、ターゲット層などを入力します。
|
|
クライアントペルソナ設定
|
デザインを発注するクライアント像（例：コスト重視、ブランドイメージ重視など）を設定します。
|
|
デザインデータ
|
フィードバック対象のデザイン（画像ファイル、URL、Figmaリンクなど）を読み込ませます。
|
これらの入力に基づき、AIは「クライアント視点のフィードバック」と「メンター視点のフィードバック」を分けて出力します。
まずは、基本的なデザインデータの提出方法を確認しましょう。
まずは、基本的なデザインデータの提出方法を確認しましょう。
【1-2】AI生成物に活かすバナーデザインの基礎知識
目安の学習時間：30分
AIが生成したデザインベースは、あくまで「素材」です。
これを実務レベルの「成果物」に引き上げるには、デザインの基礎知識が不可欠です。
AIはレイアウトや配色を提案してくれますが、その提案が「なぜ良いのか」「どこを修正すべきか」を判断するのは人間のデザイナーの役割です。
このセクションでは、AIの生成物を評価し、改善するために必要な3つの基礎知識を学びます。
これを実務レベルの「成果物」に引き上げるには、デザインの基礎知識が不可欠です。
AIはレイアウトや配色を提案してくれますが、その提案が「なぜ良いのか」「どこを修正すべきか」を判断するのは人間のデザイナーの役割です。
このセクションでは、AIの生成物を評価し、改善するために必要な3つの基礎知識を学びます。
視線誘導と情報整理の基本（レイアウト）
バナーデザインにおいて最も重要なのは、「伝えたい情報を、伝えたい順番で」見てもらうことです。
そのために「視線誘導」というテクニックを使います。
人間の視線は、特定のパターンで動く傾向があります。
そのために「視線誘導」というテクニックを使います。
人間の視線は、特定のパターンで動く傾向があります。
-
Fの法則： Webサイトなどで、視線がアルファベットの「F」の形に動くパターン。左上から右へ、次に少し下の行を左から右へ、最後は左側を縦に流し読みします。
-
Zの法則： チラシやバナーなど、一枚の画像の中で視線が「Z」の形に動くパターン。左上→右上→左下→右下と視線が移動します。
また、デザインに「余白（ネガティブスペース）」を意図的に設けることも重要です。
情報を詰め込みすぎると、何が重要かわからなくなります。余白は、各要素を独立させ、重要な情報を際立たせるための「スペース」として機能します。
AIが余白のないデザインを生成した場合、Canvaで要素を整理・縮小してでも余白を確保する必要があります。
情報を詰め込みすぎると、何が重要かわからなくなります。余白は、各要素を独立させ、重要な情報を際立たせるための「スペース」として機能します。
AIが余白のないデザインを生成した場合、Canvaで要素を整理・縮小してでも余白を確保する必要があります。
伝わる色使いとフォントの選び方（配色・タイポグラフィ）
色は、デザインの印象を瞬時に決定づける強力な要素です。
-
配色の基本： AIが提案した配色が「なぜその色なのか」を分析します。 基本は「ベースカラー（最も面積の広い色）」「メインカラー（デザインの主役となる色）」「アクセントカラー（目立たせたい部分に使う色）」の3つです。
-
心理的効果： 赤は情熱やセール、青は信頼や冷静、緑は自然や安心など、色が与える心理的な効果を考慮し、バナーの目的と合っているか評価します。
-
AI生成画像との調和： Nano Nanana Proが生成した画像の色味を、Canvaのスポイトツールなどで抽出し、その色をベースにテキストやボタンの色を調整すると、デザインに統一感が生まれます。
文字情報（タイポグラフィ）も同様に重要です。
-
フォントの選び方： ターゲットや商材に合わせて選びます。例えば、高級感を出したいなら明朝体、親しみやすさならゴシック体（または丸ゴシック体）などです。 AIが生成したテキストの雰囲気に合わせて選びましょう。
-
可読性： 最も重要なのは「読みやすさ」です。AIは時々、背景に文字を馴染ませすぎる（コントラストが低い）デザインを生成することがあります。 その場合、Canvaで文字に影をつけたり、背景を敷いたりして、読みやすさを最優先に調整します。
フォントについて詳しく知りたい方は、以下の教材も確認してみましょう。
考えてみよう！
あなたが今まで見たバナーの中で、「情報が多すぎる」「色がごちゃごちゃしている」と感じたものはありますか？
初心者が陥りがちなデザインの失敗（情報過多、配色ミスなど）を一つ選び、それをどのように改善すれば訴求力が上がるか考えてみましょう。
初心者が陥りがちなデザインの失敗（情報過多、配色ミスなど）を一つ選び、それをどのように改善すれば訴求力が上がるか考えてみましょう。
解答例
失敗例：
キャッチコピー、サブコピー、限定情報、ボタンなど、すべてのテキスト要素を同じサイズや同じ色で目立たせようとして、情報が渋滞している。
AIが多くの要素を生成したときに、それをそのまま使ってしまうとこの状態に陥りやすい。
キャッチコピー、サブコピー、限定情報、ボタンなど、すべてのテキスト要素を同じサイズや同じ色で目立たせようとして、情報が渋滞している。
AIが多くの要素を生成したときに、それをそのまま使ってしまうとこの状態に陥りやすい。
改善案：
1. 情報の優先順位付け：
バナーで最も伝えたい情報（例：「50% OFF」）を一つだけ決める。
2. メリハリをつける：
AIの生成物に対して、Canvaで最も伝えたい情報だけ文字サイズを最大にし、色もアクセントカラーを使う。
3. 情報を削る（引く）：
AIが生成した要素であっても、補足的すぎる情報は思い切って削除する。または、メインのキャッチコピーから離して小さく配置する。
1. 情報の優先順位付け：
バナーで最も伝えたい情報（例：「50% OFF」）を一つだけ決める。
2. メリハリをつける：
AIの生成物に対して、Canvaで最も伝えたい情報だけ文字サイズを最大にし、色もアクセントカラーを使う。
3. 情報を削る（引く）：
AIが生成した要素であっても、補足的すぎる情報は思い切って削除する。または、メインのキャッチコピーから離して小さく配置する。
【1-3】1章 -章末課題- [デザイン基礎知識のチェック]
目安の学習時間：30分
問題
以下の3つの条件でバナーの企画を立て、その企画に合う「デザインの方向性」を具体的に言語化し、ご自身のSlackチャンネルで投稿してみましょう。
この作業は、次章以降でNano Banana Proに指示を出す前の「思考の整理」として行います。
1. 目的: 30代女性をターゲットにしたダイエットサプリのSNS広告バナー
2. 訴求: 「忙しいあなたでも楽々！1ヶ月で-3kg達成」
3. 媒体: Instagramのフィード広告（正方形）
この作業は、次章以降でNano Banana Proに指示を出す前の「思考の整理」として行います。
1. 目的: 30代女性をターゲットにしたダイエットサプリのSNS広告バナー
2. 訴求: 「忙しいあなたでも楽々！1ヶ月で-3kg達成」
3. 媒体: Instagramのフィード広告（正方形）
解答手順
- ターゲット（30代女性）が好みそうな配色とフォントを決定します。
- 視線誘導（Zの法則など）を考慮したレイアウト案（写真、コピー、ボタンの配置）を決定します。
- 次章でNano Banana Proへ指示するプロンプトのイメージ（どのような画像・テキストを含めるか）を箇条書きで作成します。
解答例
以下は解答の一例です。
この通りである必要はありませんが、思考のプロセスを参考にしてください。
この通りである必要はありませんが、思考のプロセスを参考にしてください。
1. 配色とフォント
・配色：ターゲットが好みそうな、清潔感と信頼感のある配色を採用する。
・ベースカラー：白（清潔感、余白）
・メインカラー：落ち着いたピンクまたはミントグリーン（女性らしさ、健康）
・アクセントカラー：ゴールド（少しの高級感、実績）
・フォント：
・メインコピー（-3kg達成）：視認性が高く、少しデザイン性のあるゴシック体。
・サブコピー（忙しいあなたでも）：親しみやすい丸ゴシック体。
2. レイアウト案（Zの法則を意識）
・左上：
ターゲット（30代女性）が共感できるような、忙しい日常（例：PC作業中）でも笑顔の女性の写真。
・右上：
権威付けや安心感を与えるアイコン（例：「医師推奨」「満足度98%」など）。
・中央〜左下：
メインのキャッチコピー「1ヶ月で-3kg達成」と、サブコピー「忙しいあなたでも楽々！」。
・右下：
CTA（行動喚起）ボタン。「今すぐチェック」や「詳しくはこちら」。
3. Nano Banana Proへの指示イメージ（プロンプトの種）
・画像イメージ：
・30代の日本人女性、笑顔、自宅のリビングでリラックスしている
・背景は明るく、清潔感があり、観葉植物が少し見える
・スタイル：ナチュラル、ソフトフォーカス、ハイキー（明るめ）
・テキストイメージ：
・「1ヶ月で-3kg達成」（メインテキスト）
・「忙しいあなたでも楽々」（サブテキスト）
・全体トーン：
・温かみがあり、希望が持てるデザイン。
・配色：ターゲットが好みそうな、清潔感と信頼感のある配色を採用する。
・ベースカラー：白（清潔感、余白）
・メインカラー：落ち着いたピンクまたはミントグリーン（女性らしさ、健康）
・アクセントカラー：ゴールド（少しの高級感、実績）
・フォント：
・メインコピー（-3kg達成）：視認性が高く、少しデザイン性のあるゴシック体。
・サブコピー（忙しいあなたでも）：親しみやすい丸ゴシック体。
2. レイアウト案（Zの法則を意識）
・左上：
ターゲット（30代女性）が共感できるような、忙しい日常（例：PC作業中）でも笑顔の女性の写真。
・右上：
権威付けや安心感を与えるアイコン（例：「医師推奨」「満足度98%」など）。
・中央〜左下：
メインのキャッチコピー「1ヶ月で-3kg達成」と、サブコピー「忙しいあなたでも楽々！」。
・右下：
CTA（行動喚起）ボタン。「今すぐチェック」や「詳しくはこちら」。
3. Nano Banana Proへの指示イメージ（プロンプトの種）
・画像イメージ：
・30代の日本人女性、笑顔、自宅のリビングでリラックスしている
・背景は明るく、清潔感があり、観葉植物が少し見える
・スタイル：ナチュラル、ソフトフォーカス、ハイキー（明るめ）
・テキストイメージ：
・「1ヶ月で-3kg達成」（メインテキスト）
・「忙しいあなたでも楽々」（サブテキスト）
・全体トーン：
・温かみがあり、希望が持てるデザイン。
制作イメージ
企画をチェックしよう
- ターゲット（30代女性）と目的（ダイエット）の解像度は高いか？
- 配色の意図（なぜその色を選んだか）は説明できるか？
- レイアウト案は、視線誘導（F/Zの法則）の基礎に沿っているか？
- AIへの指示イメージは、具体的で、デザインの方向性と一致しているか？
これで「高速制作のための準備とデザインの基礎」の解説を終わります。
次の章に進みましょう。
次の章に進みましょう。