AIで説明図を作る方法｜比較・手順・関係で描き方を選び、内容を点検する

こんにちは。バナナデスクです。

文章をAIに渡して図解にすると、矢印も色も整った画像がすぐに出てくることがあります。ただ、その矢印を順番にたどると、本来はまだ確定していない予約が、先に確定している。見た目より先に直したいのは、こういう箇所です。

説明図は、情報をきれいに並べるだけのものではありません。何と何を比べるのか、どの順番で進むのか、何が何に属するのかを読者へ伝えます。図の型を決める前に、伝える関係を一つの文にすると、AIへの指示も確認も具体的になります。

ここでは、架空の体験教室の受付手順を使い、意図的に順序を誤らせた初稿と修正版を作ります。本文に合う図の選び方、矢印の点検、スマートフォンでの確認、編集可能な保存形式まで進めましょう。

執筆：バナナデスク｜WEBビジネスの設計・集客・改善

比較・手順・関係のどれを見せるかを決める

例えば「無料と有料の違い」を示すなら、同じ項目を横に並べる比較が向いています。「申し込み後に何が起きるか」なら流れです。「サイトの中にカテゴリーと記事がある」なら階層や包含関係です。

「AIだから矢印をたくさん使う」という選び方はしません。横並びで済む比較に矢印を付けると、先に進む手順や因果関係に見えてしまうからです。「Aの後にB」と「Aが原因でBが起きる」も違います。順序しか確かめていないものを、原因の証明に変えないようにします。

図にする前に、原文を固定する

今回の原文は次のとおりです。実在の教室の運用や、実際の受付を測定した記録ではありません。

架空の無料体験教室の受付手順です。フォーム送信時点では申込内容を受け取るだけで、予約は確定しません。担当者が空席を確認します。空席があれば予約確定を連絡します。満席なら待機の選択肢を案内します。待機リストへ加える場合は本人の希望を確認してから行います。この図では待機の案内までを描きます。

図で見せる要点は「受領しただけでは予約確定ではない」です。決済やキャンセルなどを追加すると、別の条件まで説明しなければなりません。今回は、空席確認からの分岐までに範囲を区切ります。

範囲を絞るのは、例外を隠すためではありません。待機の案内後には本人の希望確認が必要なことを本文に残し、図の終点と業務全体の終点が違うと分かるようにします。

整っていても、順序が違う初稿は採用しない

次は、問題を見つける練習のために、予約確定と空席確認を意図的に逆にした図です。AI製品が自然にこの失敗を起こしたと報告するものではありません。編集担当AIが作成した教材です。

左からたどると、申込を受領し、予約を確定してから空席を確認しています。色や余白を直しても、原文との不一致は残ります。また、満席だったときの行き先も描かれていません。

この初稿に「もっと洗練されたデザインに」とだけ依頼すると、誤った順番のまま見た目が整う可能性があります。修正指示では、どの接続を変えるのかを明示します。

予約確定の前に空席確認を移してください。
空席ありの場合だけ予約確定へ進めてください。
満席なら待機の案内へ進め、予約確定には接続しないでください。
申込受領から予約確定へ直接つながる線は作らないでください。

修正版を原文と照合する

修正版では、申込受領の次に空席を確認し、空席ありなら予約確定、満席なら待機の案内へ進みます。矢印は処理の順序を示しています。受領から確定への直結をなくし、分岐先を2つに分けました。

表で照合するのは、図が原文の運用を正しく表しているかです。この図どおりの受付システムを動かした検証ではありません。実運用に使う場合は、担当者が実際の受付方法と一致するかを確認してください。

AIには要点・範囲・出力形式を渡す

最初から図を作る場合には、原文と一緒に次のような指示を渡せます。「分かりやすく」だけで終わらず、読者に分かってほしいことと図の範囲を具体化します。

次の原文を、受付の順序が分かる説明図にしてください。
伝える要点：申込を受領しただけでは予約確定ではない。
図の範囲：申込受領から、空席ありなら予約確定、満席なら待機の案内まで。待機リストへの登録はこの図の範囲外。
640×360。ラベルは短くし、条件分岐の矢印に意味を付けてください。
装飾の写真や人物は不要。編集可能なSVGと公開用PNGを作り、ラベルと接続を原文に照合してください。
見た目を整えるために手順を入れ替えたり、原文にない自動処理を追加したりしないでください。

今回のSVGとPNGは、編集担当AIが作成した図形と文字を描画して制作しました。見出しや矢印を正確に変えたい説明図には、このように要素を分けて編集できる形式が使えます。一方、世界観や情景を伝えるイラストは、画像生成が向く場面もあります。

無料で使えるかは、サービスの利用上限だけでなく、SVGの書き出し、透かしの有無、商用利用の条件などを確認します。ここで配布する自作SVGとPNGは登録なしで取得できますが、特定のAIサービスの無料プランで同じ制作が完結したという意味ではありません。

図解のSVG・PNG・原文・制作指示をダウンロード（ZIP）

640×360で作り、掲載幅でも読む

このブログの基本画像サイズは640×360pxです。ただ、ファイルがそのサイズだからスマートフォンで読みやすいとは限りません。幅390pxの画面でも、本文の左右に余白がある分、実際の画像幅はさらに小さくなります。

今回のローカルプレビューでは、ページの表示幅375pxで、画像は339px幅に縮小されて表示されました。誤った初稿と修正版のラベル・線を目視し、ページ全体の横はみ出しがないことも確認しています。ブログへ入れた後には、掲載先でも改めて確認します。

掲載先の本文を開き、主要ラベルがそのまま読めるか、分岐の線が文字に重ならないか、横へはみ出さないかを見ます。拡大クリックで読ませるのではなく、その場で主要な関係が分かる大きさに整えます。細かな条件を図内へ詰めるときは、本文へ戻した方がよい場合があります。

図を読めない状況にも備え、関係を本文で説明し、画像には内容に合うaltを付けます。W3C WAIの複雑な画像の解説でも、図を識別する短い説明と、図に含まれる重要な情報の文章による説明を組み合わせる方法が示されています。

修正できる原本と、公開する画像を分けて残す

PNGはブログへ掲載するために、SVGは文字や接続を変更するために残します。原文も一緒に保存しておけば、運用が変わったときに図だけが古いままになるのを防ぎやすくなります。

次に図解を作るときは、まず「この図で何が分かればよいか」を一文にしてみてください。その文と元の説明を横に置き、図の線を一本ずつたどります。見た目の調整は、その関係が合っていることを確かめてから進めましょう。

関連記事：AIに手順書を作らせる方法｜作業メモから他の人が迷わないマニュアルへ