これは公開前記事の共有用画面です。
見出し画像

【Day3セミナー参加者・課題提出者限定・⚠️12/22(月) 23:59までの使用期限あり】思考を「一瞬」で図解にする。Googleの最新AI「Nano Banana Pro」を搭載した「わど図解生成AIエージェント」を完全解説

画像
わど図解生成AIエージェント

みなさん、こんにちは!

突然ですけど...

複雑なアイデアとか会議のメモとか、

「これ、一枚の画像でパッと伝えられたらいいのに」

って思ったことないですか?

私、めちゃくちゃ思ってました。

でも現実はというと...

・PowerPointで四角や矢印を並べてたら気づいたら30分経ってる
・なんかダサい。センスないのバレる
・プロに頼むと高いし、イメージ伝えるのも大変

結局「まあいいか、文字で説明しよ...」ってなっちゃうんですよね。

私も何度もそれで諦めてきました。

でも今回、ついに作っちゃいました。

テキストを入れるだけで
プロ級のインフォグラフィックを一瞬で作ってくれるAIツール
「わど図解生成AIエージェント」です!

画像
わど図解生成AIエージェント

Googleの最新AIモデル「Nano Banana Pro」をフル活用してます 😊


【Day3セミナー参加者・課題提出者限定・⚠️12/22 23:59までの使用期限あり】 わど図解生成AIエージェント


【〆切:12/22 23:59までの使用期間限定】わど図解生成AIエージェント
*同接が増えて安定しない場合があるため、下記アプリケーションを分割


① https://unionai-wado-illustration-generation-ai-agent-474710872664.us-west1.run.app/ (1月生まれの人)

② https://unionai2-wado-illustration-generation-ai-agent-239205121349.us-west1.run.app/ (2月生まれの人)

③ https://unionai3-wado-illustration-generation-ai-agent-615909245126.us-west1.run.app/ (3月生まれの人)

④  https://unionai4-wado-illustration-generation-ai-agent-845654484298.us-west1.run.app/ (4月生まれの人)

⑤  https://unionai5-wado-illustration-generation-ai-agent-745545195034.us-west1.run.app/ (5月生まれの人)

⑥ https://unionai6-397907973450.us-west1.run.app/ (6月生まれの人)

⑦ https://unionai7-401272073852.us-west1.run.app/ (7月生まれの人)

⑧  https://unionai8-552424922876.us-west1.run.app/ (8月生まれの人)

⑨ https://unionai999-380123491272.us-west1.run.app/ (9月生まれの人)

⑩ https://unionai10-wado-illustration-generation-ai-agent-166998908460.us-west1.run.app/ (10月生まれの人)

11  https://unionai11-838433104734.us-west1.run.app/ (11月生まれの人)

12  https://wado-zukai1-371422722438.us-west1.run.app/ (12月生まれの人)


*⚠️ご自身以外に外部への共有はご遠慮ください。

*エラーの場合は、別のリンクより優先的にアクセスしてご利用ください。


https://unionai11-838433104734.us-west1.run.app/

https://wado-zukai1-371422722438.us-west1.run.app/


⚠️注意点:Geminiの最新AIモデルNano Banana Proを搭載した有料ツール(gemini-3-pro-image)のため、
全体で1日250回の使用制限があります!図解ドラフトやデザイン生成で失敗(エラー)になりましたら、1日時間を空けるか、別の番号のリンクからお試しください🙌

画像

【1. わど図解生成AIエージェントとは?】

画像
わど図解生成AIエージェントとは?

要するに...

「文字情報の構造化」から「デザインの仕上げ」まで、
全部AIがやってくれるツールです。

ここがミソなんですけど、

普通の画像生成AIって「こんな図解を作って」って言っても、
なかなかイメージ通りにならないですよね?

「違う、そうじゃない...」って何回言ったことか(笑)

このツールは違うんです。

人間のデザイナーが頭の中でやってることを、
ちゃんと順番通りにAIがやってくれる。

だからメモ書きレベルの雑なテキストでも、
ちゃんと「伝わる図解」になっちゃうんですよね!

難しく考えなくてOKです 😊


【2. なぜ今、図解ツールが必要なのか】

画像
なぜ今、図解ツールが必要なのか

ここ、けっこう大事な話なんですけど...

●情報過多の時代に「一瞬で伝わる」が武器になる

SNSでも、ブログでも、プレゼンでも...

文字だけの情報って、正直スルーされちゃいません?

私もタイムライン流し見してるとき、
文字びっしりの投稿はスーッと通り過ぎちゃいます。

でも図解があると、手が止まるんですよね。

「お、なんかわかりやすそう」って。

●デザイナーさんに頼むと高い問題

これ、地味にキツくないですか?

インフォグラフィック1枚で5,000円〜数万円。

週に3本コンテンツ出すなら、月に6万円以上...

私も最初は外注してたんですけど、
「これ、自分で作れたらなあ」ってずっと思ってました。

●アイデアは鮮度が命

「今これ思いついた!」ってときに、
「来週デザイン上がります」じゃ遅いんですよね。

そのときの熱量で出したいじゃないですか。

結局、自分で作れる人が最強の時代になったんです。


【3. ここがヤバい!3ステップ生成の仕組み】

画像
ここがヤバい!3ステップ生成の仕組み

このツールの最大の特徴...

いきなり完成画像を作らないんです。

「え、それ遠回りじゃない?」って思うかもしれないんですけど、
これがミソで。

プロのデザイナーさんって、いきなり色塗り始めないですよね?

まず構成考えて、ラフ描いて、それから仕上げる。

その流れをAIが再現してるんです。

■Step 1: 構造化(Structure)

最新の言語モデル gemini-3-pro-preview が、
入力されたテキストを読み解きます。

画像
■Step 1: 構造化(Structure)
画像
■Step 1-2: 構造化(Structure)続き
画像
■Step 1-3: 構造化(Structure)続き

ここがヤバいんですけど...

「これは比較図がいいな」「タイムラインで見せよう」
みたいな判断を、AIが勝手にやってくれるんです。

対応してる構造は8種類:

画像
対応している構造8種類

◯比較・対比(A vs B)
◯プロセス・手順(Step 1-2-3)
◯年表・タイムライン(時系列)
◯階層・ピラミッド構造
◯循環・サイクル図
◯マインドマップ・放射状
◯マトリックス・4象限
◯解剖図・構成要素

もちろん「いや、比較じゃなくてプロセスで」って
手動で変えることもできますよ 😊

■Step 2: ラフスケッチ(Draft)

次に、画像モデル Nano Banana Pro (gemini-3-pro-image-preview) が、
白黒のラフ画を描きます。

画像
■Step 2: ラフスケッチ(Draft)ワイヤーフレーム的な白黒のラフスケッチ画面①

「この配置でいい?」って確認できるから、失敗がないんですよね。

私、最初これなかったとき、
完成してから「あ、違う...」ってなること多かったんです。

今は「もうちょい左」とか「要素増やして」とか、
この段階で調整できるから本当に助かってます。

■Step 3: 仕上げ(Final Design)

最後に、選んだスタイルで色塗って、ディテール描き込んで完成!

30秒〜1分で出てきます。

正直、最初見たときシビれましたね...


【4. 選べるデザインスタイル13種類】

画像
選べるデザインスタイル13種類

今の気分とか、使う場所に合わせて、
いろんなスタイルが選べます!

画像
選べるデザインスタイル13種類

・ビジネス・プロ → プレゼン資料にそのまま使える信頼感
・ポップ・インフォ →鮮やかで視認性の高いフォントデザイン
・手書きスケッチ → ホワイトボードに書いたみたいな親しみやすさ
・ミニマリスト → シンプルイズベスト
・3Dアイソメトリック → 箱庭っぽくて可愛い
・サイバーパンク → 黒背景にネオン、かっこいい
・漫画風 → インパクト重視のとき
・クレイアニメ風 → 粘土っぽい温かみ
・レトロゲーム風 → ドット絵テイスト
・水彩画風 → アートっぽい質感
・切り絵風 → 和のテイスト
・黒板アート風 → 教育系コンテンツに最適
・ネオンガラス風 → モダンで洗練された感じ

さらに、色味とか雰囲気も自然言語で調整できます。

「パステルピンクと水色で優しい感じに」とか、
「紺と金で高級感出して」とか、

そのまま伝えるだけでOK 😊


【5. 新機能:リファレンス画像で自分のキャラが登場!】

画像
新機能:リファレンス画像で自分のキャラが登場!

今回のアップデートで一番推したいのがこれ。

「リファレンス画像」機能です!

自分のアイコンとか、製品の写真とか、
登場させたいキャラの画像を最大4枚までアップできます。

画像
参考画像/キャラクター(任意):最大4枚まで

で、AIがそれを「参考」にして、
図解の中に登場させてくれるんです。

例えば自分のアバター画像入れておけば、
自分が解説してるような図解が簡単に作れちゃう。

これ、すごくないですか?

ブランドの統一感保ちながら、
オリジナルコンテンツ量産できちゃいます...!


【6. 実際に使ってみよう(ステップバイステップ)】

画像
実際に使ってみよう(ステップバイステップ)

ここからは実際の使い方を見ていきましょう!

【Day3セミナー参加者・課題提出者限定・⚠️12/22 23:59までの使用期限あり】 わど図解生成AIエージェント


【〆切:12/22 23:59までの使用期間限定】わど図解生成AIエージェント
*同接が増えて安定しない場合があるため、下記アプリケーションを分割


① https://unionai-wado-illustration-generation-ai-agent-474710872664.us-west1.run.app/ (1月生まれの人)

② https://unionai2-wado-illustration-generation-ai-agent-239205121349.us-west1.run.app/ (2月生まれの人)

③ https://unionai3-wado-illustration-generation-ai-agent-615909245126.us-west1.run.app/ (3月生まれの人)

④  https://unionai4-wado-illustration-generation-ai-agent-845654484298.us-west1.run.app/ (4月生まれの人)

⑤  https://unionai5-wado-illustration-generation-ai-agent-745545195034.us-west1.run.app/ (5月生まれの人)

⑥ https://unionai6-397907973450.us-west1.run.app/ (6月生まれの人)

⑦ https://unionai7-401272073852.us-west1.run.app/ (7月生まれの人)

⑧  https://unionai8-552424922876.us-west1.run.app/ (8月生まれの人)

⑨ https://unionai999-380123491272.us-west1.run.app/ (9月生まれの人)

⑩ https://unionai10-wado-illustration-generation-ai-agent-166998908460.us-west1.run.app/ (10月生まれの人)

11  https://unionai11-838433104734.us-west1.run.app/ (11月生まれの人)

12  https://wado-zukai1-371422722438.us-west1.run.app/ (12月生まれの人)


*⚠️ご自身以外に外部への共有はご遠慮ください。

*エラーの場合は、別のリンクより優先的にアクセスしてご利用ください。


https://unionai11-838433104734.us-west1.run.app/

https://wado-zukai1-371422722438.us-west1.run.app/

⚠️注意点:Geminiの最新AIモデルNano Banana Proを搭載した有料ツール(gemini-3-pro-image)のため、
全体で1日250回の使用制限があります!図解ドラフトやデザイン生成で失敗(エラー)になりましたら、1日時間を空けるか、別の番号のリンクからお試しください🙌

■STEP 1: 情報の入力

画像
■STEP 1: 情報の入力

図解したい内容をテキストエリアに入力します。

メモ書きレベルで全然大丈夫ですよ!

詳細設定では...

・構造タイプ → 自動でOK(AIが判断してくれる)
・追加指示 → 「ユーモア入れて」「小学生向けに」とか

「構造化を開始する」ボタンをポチッ!

■STEP 2: 構成案の確認・編集

画像
■STEP 2: 構成案の確認・編集

AIがテキストを分析して、図解の設計図を作ってくれます。

ここでポイントなんですけど...

参考画像をアップするのはこのタイミング!

自分のアイコンとか製品画像追加すると、
最終デザインに反映されます 😊

「ドラフト(設計図)を作成」ボタンを押します。

■STEP 3: レイアウトの確認

画像
■STEP 3: レイアウトの確認

白黒のラフスケッチが出てきます。

配置とか構図、イメージ通りか確認!

微妙だったら「レイアウトを再生成」で何度でもやり直せます。

OKなら「このレイアウトでデザインする」へ!

■STEP 4: デザインスタイルの選択

画像
■STEP 4: デザインスタイルの選択

好きなスタイルを選びます。

私のおすすめは...

・プレゼン用 → 「ビジネス・プロ」
・SNS用 → 「手書きスケッチ」か「3D」
・印象に残したいとき → 「サイバーパンク」
・水彩画アート→滲みと濃淡が美しい芸術的なタッチ

色味とか雰囲気も詳細設定で調整できます!

「インフォグラフィックを生成」ボタンをポチッ!

■STEP 5: 完成・保存

画像
■STEP 5: 完成・保存

フリーチャット微調整機能

修正指示を入力して、微調整できます!!

画像
フリーチャット微調整機能

30秒〜1分で完成!

「画像を保存」でPNG形式でダウンロードできます。

画像
図解生成した画像をダウンロード

「スタイルを変えて再生成」で、
同じ構成のまま別の画風も試せる 😊

各ステップに戻って作り直すこともできます!

画像
各ステップに戻る機能

また右上の「履歴」ボタンから、
過去に生成した画像も確認できますよ!

画像
生成履歴

生成履歴の注意点

履歴が多く溜まってくるとエラーになりますので、
定期的に履歴をクリアしてください。(最大4枚程度までが履歴目安)
保存したら履歴を削除しましょう!!

画像
生成履歴の注意点

【7. ここから先は実践ワークフローです】

画像
有料パート収録内容(プロのノウハウを解禁)

ここから先では、以下をお届けします:

✅ 実際に作成したワークフローの全体像
(比較図、プロセス図、マインドマップの3パターン)

✅ 各ステップの具体的なプロンプトと設定値
(コピペで使える実践テンプレート)

✅ 私が試行錯誤して見つけた「最適な指示の出し方」
(失敗パターンと成功パターン、両方見せます)

✅ リファレンス画像を活用した応用テクニック
(自分のキャラを自然に溶け込ませるコツ)

✅ よくある質問と解決方法
(初心者がつまずきやすいポイントを網羅)

一緒に学んでいきましょう!


【実際にワークフローを作成してみました】

3つのパターンで実際に図解を作ってみたので、
その全工程をお見せします...!

(※ここで画像を挿入:3つの完成図解を並べた全体像。「比較図」「プロセス図」「マインドマップ」)


【ワークフロー1: 比較図を作る】

最初、比較図を作ろうとしたとき、
「A vs B」って入力しただけだったんですよね。

そしたら全然伝わらない図解ができちゃって...

「なんか違う...」って5回くらいやり直しました(笑)

でも、ある書き方を発見してから一発でイメージ通りに!

ポイントはこれ:
比較対象それぞれの「強み」と「弱み」を箇条書きで入力しておくこと。

■入力テキスト例

テーマ: 従来の資料作成 vs AI図解ツール

【従来の資料作成】強み:

細部までコントロールできる

独自性を出しやすい弱み:

時間がかかる(1枚30分〜)

デザインスキルが必要

修正が大変

【AI図解ツール】強み:

数分で完成

スキル不要

修正も一瞬弱み:

細部の調整に限界がある

独自性を出すには工夫が必要

結論: 用途に応じて使い分けが最強

■構造タイプの設定

アーキタイプ: 比較(自動検出でもOK)
画像
■構造タイプの設定

■生成されたラフスケッチ

画像
■生成されたラフスケッチ

左右に対比される形で、情報が整理されてるのがわかりますね!

■デザイン設定

スタイル: ビジネス・プロ
テーマカラー: ネイビーとオレンジ
雰囲気: 信頼感のある
密度: リッチ詳細

■完成した図解

画像
■完成した図解

これが2分でできちゃいます...!


【ワークフロー2: プロセス図を作る】

手順とかフローを説明するとき、プロセス図は最強です。

■入力テキスト例

テーマ: わど図解生成AIエージェントの使い方

ステップ1: テキスト入力

図解したい内容をメモ書きで入力

詳細設定は省略可能

ステップ2: 構造化

AIが自動で情報を整理

タイトル・要点・イメージに分解

ステップ3: ラフスケッチ確認

白黒の配置図を確認

必要なら修正依頼

ステップ4: スタイル選択

13種類から好みを選ぶ

色味や雰囲気も調整可能

ステップ5: 完成・保存

PNG形式でダウンロード

履歴から再編集も可能

■構造タイプの設定

アーキタイプ: プロセス
画像
■構造タイプの設定:プロセス

■完成した図解

画像
■完成した図解:黒板アート風 → 教育系コンテンツに最適

【ワークフロー3: マインドマップを作る】

アイデアを広げるとき、マインドマップって便利ですよね。

でも最初、うまく指示できなかったんですよ。

「中心から放射状に広がる」ってイメージしかなくて、
テキストでどう伝えればいいかわからなかった。

試行錯誤した結果...

「階層」を意識して書くのがコツでした!

■入力テキスト例

中心テーマ: AI活用の可能性

枝1: コンテンツ制作

記事執筆

画像生成

動画編集

枝2: 業務効率化

データ分析

レポート作成

議事録要約

枝3: 顧客対応

チャットボット

FAQ自動生成

問い合わせ分類

枝4: 学習・教育

パーソナライズ学習

教材作成

進捗管理

■構造タイプの設定

アーキタイプ: マインドマップ
画像
■構造タイプの設定:マインドマップ


■デザイン設定

スタイル: 手書きスケッチ
テーマカラー: パステルカラー
雰囲気: 親しみやすい
密度: リッチ詳細
画像
■デザイン設定

【リファレンス画像の活用テクニック】

ここからは応用編!

自分のキャラクターを図解に登場させる方法を詳しく解説します...!

■基本の使い方

  1. STEP 1の画面で「リファレンス画像」エリアを開く

  2. 登場させたいキャラ画像をアップロード(最大4枚)

  3. 追加指示に「アップロードしたキャラクターを解説者として配置」と記載

画像
STEP 1の画面で「リファレンス画像」エリアを開く

■うまくいくコツ

最初、複雑な背景の画像をアップしたら、
キャラがうまく認識されなかったんですよね...

「あれ、なんか違うキャラになってる...」って(笑)

解決策は、背景がシンプルな画像を使うこと。


白背景とか単色背景がベスト!

あと、キャラの特徴がはっきり見える正面からの画像だと認識率高いです 😊

■応用例

例1: 自分のアバターが解説する図解

追加指示: リファレンス画像のキャラクターを講師として左下に配置し、吹き出しでポイントを説明している構図にしてください
画像
例1: 自分のアバターが解説する図解



例2: 製品と一緒に機能を説明

追加指示: リファレンス画像の製品を中央に配置し、周囲に機能を説明するテキストボックスを矢印でつないでください



【よくある質問】

画像
よくある質問

■Q1: 生成した画像の著作権はどうなりますか?

A1:
生成された画像は、商用利用を含め自由に使用できます!
ただし、Gemini APIの利用規約に従う必要があるので、
詳しくはGoogleの公式ドキュメントをご確認ください 😊

■Q2: 日本語のテキストが文字化けすることはありますか?

A2:
基本的に日本語は正しく認識されます!
ただ、図解内に日本語テキストを入れたい場合は、
追加指示で「日本語で」って明記すると成功率上がります。

■Q3: 生成に失敗することはありますか?

A3:
まれにあります!
そのときは「レイアウトを再生成」か「構造内容を編集する」で戻って、
少し表現を変えてみてください。

よくある失敗パターン:

・情報量が多すぎる → 要点を5〜7個に絞る
・抽象的すぎる → 具体例を1つ入れる
・複数の構造が混在 → 1つの図解に1つの構造

■Q4: スマホでも使えますか?

A4:
使えます!
ただ、画面が小さいと編集しづらいので、
細かい調整はPCがおすすめです 😊


【まとめ】

画像
まとめ:「わど図解生成AIエージェント」の全貌

「わど図解生成AIエージェント」の全貌、いかがでしたか?

大事なポイントは3つ:

  1. 3ステップ生成で失敗しない
    構造化 → ラフスケッチ → 仕上げ
    各段階で確認できるから安心

  2. 13種類のスタイルで用途に合わせられる
    ビジネスからアートまで、一瞬で切り替え

  3. リファレンス画像で自分だけの図解が作れる
    自分のキャラや製品を登場させてオリジナリティ出せる

最初は完璧じゃなくていいんです。

私も最初は10枚作って2枚採用、とかでした。

「うーん、なんか違う...」って何度も思いましたよ(笑)

でも続けてたら、今は8割以上が一発OKになってます 😊

コツは「続けること」。

一緒にがんばりましょう!



【Day3セミナー参加者・課題提出者限定・⚠️12/22 23:59までの使用期限あり】 わど図解生成AIエージェント


【〆切:12/22 23:59までの使用期間限定】わど図解生成AIエージェント
*同接が増えて安定しない場合があるため、下記アプリケーションを分割


① https://unionai-wado-illustration-generation-ai-agent-474710872664.us-west1.run.app/ (1月生まれの人)

② https://unionai2-wado-illustration-generation-ai-agent-239205121349.us-west1.run.app/ (2月生まれの人)

③ https://unionai3-wado-illustration-generation-ai-agent-615909245126.us-west1.run.app/ (3月生まれの人)

④  https://unionai4-wado-illustration-generation-ai-agent-845654484298.us-west1.run.app/ (4月生まれの人)

⑤  https://unionai5-wado-illustration-generation-ai-agent-745545195034.us-west1.run.app/ (5月生まれの人)

⑥ https://unionai6-397907973450.us-west1.run.app/ (6月生まれの人)

⑦ https://unionai7-401272073852.us-west1.run.app/ (7月生まれの人)

⑧  https://unionai8-552424922876.us-west1.run.app/ (8月生まれの人)

⑨ https://unionai999-380123491272.us-west1.run.app/ (9月生まれの人)

⑩ https://unionai10-wado-illustration-generation-ai-agent-166998908460.us-west1.run.app/ (10月生まれの人)

11  https://unionai11-838433104734.us-west1.run.app/ (11月生まれの人)

12  https://wado-zukai1-371422722438.us-west1.run.app/ (12月生まれの人)


*⚠️ご自身以外に外部への共有はご遠慮ください。

*エラーの場合は、別のリンクより優先的にアクセスしてご利用ください。


https://unionai11-838433104734.us-west1.run.app/

https://wado-zukai1-371422722438.us-west1.run.app/


#生成AI #Gemini #個人開発 #図解 #インフォグラフィック #デザイン #業務効率化 #React #プログラミング #AIツール

【プレビュー】【Day3セミナー参加者・課題提出者限定・⚠️12/22(月) 23:59までの使用期限あり】思考を「一瞬」で図解にする。Googleの最新AI「Nano Banana Pro」を搭載した「わど図解生成|わど|AI界隈のマスコット|note
word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word

mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1