Googleの「Nano Banana Pro」と「Gemini Canvas & AIエージェント」で、ノンデザイナーがサムネイルとWebサイトを作る全技術

※本文中の画像は NotebookLM で生成しています。

見出し画像はAIで生成しました。プロンプトはこちら

2026年現在、私たちの目の前にある「サムネイル」「Webサイト」制作の景色は、数年前とは劇的に変化しました。

Adobeのデザインツールや、HTMLやCSSを記述するエディタ画面と睨めっこする時間は、もう過去のものです。

今、求められているのは「手で作る技術」ではありません。

「言葉で指揮する技術」です。

本記事では、Googleの最新AIモデル「Nano Banana Pro」と、「Gemini Canvas & AIエージェント」を組み合わせた、ノンデザイナーのための革命的なワークフローを解説します。

これは、デザイン業務の内製化に悩むマーケターや、表現の幅を広げたいすべての人に贈る、Web構築の最適解です。

note メンバーシップに参加する500本以上の記事が読み放題です。

書籍「AIでゼロからデザイン」好評発売中

1：デザイン制作は「作る」より「選ぶ」になった

かつてサムネイルやWebサイトを作るには、専門的なコーディング知識か、複雑なデザインツールの操作スキルが必要でした。

しかし、今は違います。

必要なのは「良い素材」と、それを「並べるセンス（指揮）」だけ。

極端に言えば、現代のデザイン制作は高度なエンジニアリングではなく、洗練された「コラージュ」作業に近いです。

このパラダイムシフトを受け入れることが、全てのスタートライン。

「自分で作らなきゃ」というプレッシャーを捨ててください。

あなたの役割は、優秀なAIという部下に指示を出し、上がってきた成果物をジャッジする「指揮者（コンダクター）」へと変わったのです。

2：デザインの「考え方」と「伝え方」

「AIで作った画像が、なんだか安っぽい」
「指示した通りのレイアウトにならない」

多くのノンデザイナーが抱えるこの悩み。

原因はAIの性能ではなく、指揮者であるあなたの「言語化（プロンプト）」にあります。

デザインとは「情報の整理」である

かっこいいビジュアルを作る前に、まず立ち止まってください。

「誰に、何を伝えたいのか？」

これを言語化できていない状態でAIに指示を出すのは、行き先を告げずにタクシーに乗るようなものです。

プロンプトは「レシピ」、メタファーは「12歳」基準で

最も重要なのが「12歳でもわかるメタファー」です。

AI（Nano Banana Pro）は非常に優秀ですが、抽象的な指示（例：「いい感じで」「おしゃれに」）は苦手です。

一方で、具体的な比喩や状況描写には驚くほど正確に反応します。

このように、あなたの頭の中にあるイメージを、誰にでも伝わる言葉に「翻訳」して伝える。

これこそが、指揮者に求められる唯一にして最大のスキルです。

デザインを「文字」と「図」に因数分解する

ここで、AIへの翻訳精度をさらに高めるためのコツをお伝えしましょう。

究極的に言えば、あらゆるデザイン画像は「文字」と「図」という2つの要素だけで構成されています。

AIへの指示がうまくいかないときは、漠然と全体像を伝えるのではなく、これらを細かく指定（因数分解）してみてください。

=== 文字要素（Text）===

• 階層構造: メインコピー、サブコピー、ボディコピー

• 誘導: プリヘッド、ヘッドライン、CTA（行動喚起ボタン）

• 情報: タイトル、サブタイトル、補足情報（日時、料金など）、アイコンラベル

=== 図解要素（Visual）===

• 主役: アイキャッチ

• 舞台: 背景

• 演出: あしらい（装飾）

さらに、これらをどう配置するかを【レイアウト】、どんな印象にするかを【スタイル・配色】で定義します。

しかし、最初から完璧を目指して難しく考える必要はありません。

基本は「文字」と「図」さえ指定すれば、「どう美しく見せるか（How）」は優秀なAIが提案してくれます。

もしイメージと違う出力になったら、そこだけを指示に加えればいい。

この対話を繰り返す過程で、あなただけの「唯一無二のプロンプト」が練り上げられていくのです。

全ては1枚画像の連続でしかない

ここで紹介した思考法は、単なる1枚の画像生成だけでなく、プレゼンスライドやWebサイト構築にもそのまま応用できます。

なぜなら、スライドは「1枚画像の連続」であり、Webサイトは「1枚画像を縦に並べた巻物」に過ぎないからです。

「文脈」という横糸を通す必要はありますが、基本構造は同じ。

まずは「文字」と「図」を指定する。

このシンプルな「因数分解」の視点を持つだけで、あなたの指揮能力は劇的に向上するはずです。

3：サムネイルを生成する〜Nano Banana Pro活用術

指示の出し方を理解したところで、実際にGoogleの最新モデル「Nano Banana Pro」を使ってサムネイルを生成していきましょう。

KAWAI流「縛りプロンプト」でトンマナを統一する

AI生成の最大の弱点は、生成するたびにテイスト（画風）が変わってしまうことでした。

これを解決するのが「縛りプロンプト」です。

ブランドカラー（例：#0052FF）や、デザインのトーン＆マナー（例：フラットデザイン、マットな質感、余白多め）を定義したプロンプトを固定し、それを「憲法」としてAIに守らせます。

このように制約（縛り）を与えることで、Nano Banana Proは統一感のある、まるで一人のデザイナーが描いたような素材セットを出力してくれます。

「ここだけ直して」で120点の素材へ

一発で完璧な画像が出なくても焦る必要はありません。

Nano Banana Proの真骨頂は、対話型の修正能力にあります。

「右上の光をもう少し強く」「アイコンの角を丸くして」と、部下に修正指示を出す感覚で微調整を行い、素材のクオリティを120点まで引き上げてください。

サムネイル・バナー制作の「前」に失敗しないための7つの掟

多くのノンデザイナーが、いきなりAIツールを開いて「どんな色にしようか」「文字をどう配置しようか」と考え始めます。

しかし、結論から言います。

その時点で失敗はほぼ確定しています。

なぜなら、サムネイルやバナーの成否は、デザインスキルやAIの性能ではなく、制作前の“思考プロセス”で9割決まるからです。

AIという優秀な部下に指示を出す前に、指揮者であるあなたが決めておくべき「7つのチェックリスト」を伝授します。

これを知らずに進めるのは、地図を持たずに航海に出るようなものです。

なぜ失敗するのか？

「作品」を作ろうとしているから、
「見た目」を作ろうとして、
「役割」を定義していないからです。

サムネイルやバナーは“作品”ではなく“装置”です。

• クリックさせる

• 指を止めさせる

• 読ませる

• 行動させる

このどれか1つを果たせば成功。

逆に、どんなに美しい画像ができても、これらを果たせなければ失敗です。

以下のフローで「設計」を済ませてから、初めてプロンプトを考えてください。

失敗を100%回避する「制作前フロー」

STEP 1｜「何のための画像か？」を1文で定義する

まず最初に、「このサムネイルの目的は何か？」を言語化します。

「認知獲得」や「ブランディング」といったふわっとした言葉はNGです。

• 「YouTubeで続きを見させる」

• 「Xのタイムラインでスクロールを止める」

• 「LP（購入ページ）まで進ませる」
  このように、行動レベルまで落とし込んでください。

STEP 2｜ターゲットを「属性」ではなく「状況」で決める

「20代ビジネスパーソン」のような属性では、刺さる画像は作れません。

重要なのは“今この瞬間の状態”です。

• × NG：副業したい人

• ◎ OK：仕事終わり、満員電車でスマホをだらだら見ている人
  その人が置かれている状況（シチュエーション）を想像することで、初めて響くメッセージが見えてきます。

STEP 3｜「この一瞬で何を感じさせるか」を決める

人が感じる感情は、せいぜい1つです。

「危機感」
「お得感」
「当事者意識（自分のことだ！）」

あれもこれも詰め込もうとせず、「理解させる前に、感情を動かす」という順番を意識してください。

STEP 4｜伝える情報を「1メッセージ」に削る

ノンデザイナー最大の失敗は「説明」しようとすることです。

画像は説明する場所ではありません。

• 主張は1つ

• 数字は1つまで

• ベネフィットは1方向
  「この画像を一言で説明できるか？」と自問し、できなければ情報過多です。削ってください。

STEP 5｜文字情報を「読む」前提で置かない

サムネイルの文字は読まれません。「認識」されるだけです。

• × NG：
  「AIを使えば作業効率が10倍になります」

• ◎ OK：
  「作業10倍速」
  美しい文章である必要はありません。視界の端に入った瞬間に意味が刺さるか、つまり「引っかかるか」だけで判断します。

STEP 6｜「どこで・どのサイズで見られるか」を先に決める

これを決めずに作るのは、サイズを知らずにポスターを描くのと同じです。

スマホかPCか？ タイムラインで並列表示されるのか？

デザインは、縮小された状態が完成形です。

小さくなった時に消えてしまう要素なら、最初から不要です。

STEP 7｜ここまで決まって、初めてAIを開く

配色、フォント、レイアウト、そして具体的なプロンプト。

これらを考えるのは、STEP 6までが完了してからです。

逆に言えば、ここまで決めていないのにツールを開けば、迷うのは当然なのです。

「制作前フロー」のまとめ：
デザインの失敗は「作る前」に起きている

サムネイル制作に必要なのは、センスや美的感覚ではありません。

「誰に、何を、どう動かすか」をどれだけ解像度高く決められたか。
これに尽きます。

「AIでいい感じの画像を作りたい」と思うなら、まずはこの“制作前フロー”を脳内で完了させてください。

AIは「How（どう作るか）」を解決してくれますが、「What（何を作るか）」と「Why（なぜ作るか）」を決めるのは、指揮者であるあなたの仕事なのです。

Nano Banana Pro に渡す「黄金のレシピ」

思考プロセスが完了したら、いよいよNano Banana Proに指示を出します。

ここでは、前項の「7つの掟」をクリアした上で、実際にどのようなプロンプトを入力すればいいのか、実務で使えるテンプレートを公開します。

AIへの指示は、情報を構造化して渡すのが鉄則です。

私が推奨する「構造化プロンプト」は、以下の3つの階層で構成されています。

この形式はNano Banana Proが最も理解しやすい構文（シンタックス）であり、再現性を高めるための「型」です。

プロンプトの解剖図：3つの階層

1. === 掲載する内容 === （The "What"）
   ここに書かれたテキストは、「文字情報」として画像内に必ず配置されます。
   AIに対して「これは絵ではなく、読むための文字だ」と認識させる重要なセクションです。

2. アイキャッチ & 背景画像 （The "Subject"）
   ここが**「絵作り」の核心**です。「何を（被写体）」「どこに（背景）」描くかを指定します。
   具体的な状況やメタファーを入力するのはこの部分です。

3. === デザイン === （The "How"）
   ここが**「指揮」の領域です。
   配色、フォント、余白の取り方、禁止事項など、ビジュアルの「ルール」を定義します。ここの指示は画像内に描かれるものではなく、AIが生成する際の「思考のガイドライン」**として機能します。

この3ブロック構成を守り、中身の単語を入れ替えるだけで、デザイナー顔負けのクリエイティブが数秒で生成されます。

それでは、実際のユースケース（事例）を見ていきましょう。

事例1：メディア更新情報の周知（基本形）

まずは、社内のニュースやメディア更新を知らせるスタンダードなバナーです。

「楽しそう」「自分たち向けだ」と直感させるために、人物と明るい配色を指定します。

▼ Nano Banana Pro 入力プロンプト