【完全無料】NanoBananaProで図解・手順書を作らせるプロンプト紹介

手順解説の図解を作るのは、意外と手間がかかりますよね。
余白のバランスをどう取ればいいのか迷いますし、デザインセンスが問われる作業であるにもかかわらず、デザイナーではない人が対応しなければならない場面も少なくありません。
その結果、デザイン面について指摘を受けることも多いものです。

たとえば、「吹き出しはどこに配置すればいいのか？」や「説明文はどのあたりに置くのが適切なのか？」など、デザインの感覚が求められる場面が多く、想像以上に大変な作業になります。

ところが、最近登場した「Nano Banana Pro」を使えば、こうした図解も簡単に作成できます。

プロンプト次第では、すでに実務で十分に使えるレベルに達しています。

現時点でも仕事で活用できるクオリティではありますが、AIが生成した画像をビジネス利用してよいのかについては、業界全体がまだ戸惑っている段階です。

現在は過渡期にあたるため、AI画像をそのままビジネス利用するのは、まだ難しい状況といえます。

そのため、実務では以下のような工程を挟んでいます。

1. 図解をNano Banana Proで作成し、デザインカンプとして使用する

2. Nano Banana Proで作成した図解を、Figmaで作り直す

今回は、図解の手順を生成AIで手早く作る方法をご紹介します。
プロンプトもあわせてご紹介しますので、ぜひ活用してみてください。

ナノバナナプロで図解画像を生成するプロンプトと流れ

本記事では、Google広告の操作手順マニュアルを作成します。

用意するものは、以下の２つです。

・図解画像のスクリーンショット
・プロンプト

まず、図解する対象は、Google広告の「広告見出し」を設定するページです。
本記事では、広告見出しを「ピン留め」する設定手順について解説しています。
（※Google広告が何か、また各機能の詳細については、特に知る必要はありません。）

この画像がプロンプトにかかると、以下のような画像になります。

実行するプロンプトは、以下です。

/* この部分の文章だけ変更する */
{Google広告の広告文の固定方法を解説する図解です。
固定方法の手順を解説する手順図解を作成してください。}

# 役割
あなたは優れたUIデザイナー兼テクニカルライターです。
添付のラフ図を、ユーザーの視線を迷わせない「明快な手順図解」にリファインしてください。

# 具体的な改善ポイント
- **「操作の焦点」を強調**:
  画像の中で最も重要なアクション（クリック箇所や入力箇所）が主役になるよう調整してください。
  状況に応じて画像をトリミングし、対象部分をクローズアップすることでインパクトを出しても構いません。

- **余白による視認性向上**:
  強調したい要素の周りに十分な余白（パディング）を取り、他の要素と混同しないように配置を整理してください。

- **シンプル化**:
  装飾は控えめにし、機能美を重視したデザインに仕上げてください。

# アウトプットイメージ
パッと見た瞬間に、次のアクションが理解できるクリアな画像。

上のプロンプトのうち、
「Google広告の広告文の固定方法を解説する図解です。 固定方法の手順を解説する手順図解を作成してください。」
の部分だけをあなたの作りたい図解用に変更してください。

このようにプロンプトを実行すると、オレンジ色で囲まれた図解が完成します。

「プロンプトの制作過程」を有料販売

ここまでで、すでに生成AIを使って図解を作れるようになったと思います。
「とにかく図解を作りたい」という方は、ここまでの内容で十分です。

ここからは、「図解生成プロンプト」を作った流れをご紹介します。
（※ここまでは、図解生成プロンプトそのものについて紹介してきました。）

プロンプトを作る流れを理解できれば、図解だけでなく、バナーやSNS投稿を作る際にも応用が利きます。

では、ここから図解を作成できるプロンプトの作り方をご紹介します。