atom.training-designer.visual-asset-generation
図解やアイコンをAIで生成する
図解やアイコンをAIで生成する
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。
レッスン本文
図解やアイコンをAIで生成する
どんなことができるようになるか
資料を作っているとき、「ここ、図があった方がわかりやすいのに…」と思ったことはありませんか? 料理でいえば、レシピの文章だけより完成写真がある方がぐっと作りたくなりますよね。それと同じで、説明文だけのスライドに1枚フロー図が加わるだけで、読み手の理解度はまるで変わります。
このレッスンでは、AIツール(=人工知能を使った便利なサービス)に言葉で指示を出して、フロー図とアイコン画像を自分で生成できるようになります。所要時間は約15分です。
用意するもの
- インターネットにつながるパソコンまたはスマートフォン
- ChatGPT(=OpenAIが提供するAIチャットサービス)の無料アカウント
まだアカウントを作っていない場合は、ChatGPTの公式サイトにアクセスして「Sign up」ボタンから登録してください。メールアドレスがあれば無料で始められます。

フロー図を生成する
手順1:ChatGPTを開いて新しいチャットを始める
ブラウザでChatGPTを開き、左上の「New chat」ボタンを押して新しい会話を始めます。
手順2:プロンプト(=AIへの指示文)を入力する
チャット入力欄に、生成したい画像の内容を言葉で書きます。ここが一番大事なステップです。
良い例:
以下の内容のフロー図を生成してください。
・日本語で書いてください
・白背景でシンプルなフラットデザインにしてください
・矢印でステップのつながりを示してください
「ユーザーが画面を開く → メニューから商品を選ぶ → カートに入れる → 購入完了」
悪い例:
図を作って
コツは「何を」「どんなデザインで」「どの言語で」の3つを必ず伝えることです。悪い例のように指示が短すぎると、AIがあなたの意図を推測するため、思い通りの結果になりません。
手順3:生成された画像を確認してダウンロードする
数秒〜数十秒で画像が表示されます。画像の右上にあるダウンロードボタン(↓マーク)をクリックして保存しましょう。

手順4:気に入らなければ修正を依頼する
一度で完璧な画像が出ることは少ないです。同じチャットの中で修正指示を重ねられるのがAIの強みです。
修正プロンプトの例:
いい感じです!次の点だけ変えてください。
・矢印をもう少し太くしてください
・フォントサイズを大きくしてください
何度でもやり直せるので、「70点くらいかな」と思ったらどんどん追加指示を出してみてください。
アイコン画像を生成する
アイコン(=小さな絵柄で意味を伝える画像)も同じ手順で生成できます。スライドの見出し横やボタン画像に使うと、ぐっとプロっぽくなります。
良い例:
「学習」を表すアイコンを生成してください。
・青系の配色にしてください
・丸いシルエットにしてください
・背景は透明にしてください
・シンプルなフラットデザインにしてください
悪い例:
青いアイコン
「何を表すアイコンか」「配色」「形」「背景」を伝えるのがポイントです。
![]()
画像の品質を確認する
生成された画像を資料に使う前に、次の3つを必ずチェックしましょう。「出来上がった料理の味見をせずにお客さんに出す人はいない」のと同じです。
| 確認項目 | 具体的な見方 | OKの基準 |
|---|---|---|
| 文字の正確さ | 日本語が文字化け(=文字がぐちゃぐちゃに壊れること)していないか | すべての文字が正しく読める |
| 内容の正しさ | 指示した通りのステップ・順番・ラベルで描かれているか | 元の指示と一致している |
| 用途への適合 | 資料に貼ったときに見やすく伝わるか | スライドに配置して違和感がない |
うまくいかないときの対策
| つまずき | 原因 | 対策 |
|---|---|---|
| 画像が生成されない | ChatGPTが文章だけで回答した | 「画像を生成してください」と明示的に依頼し直す |
| 日本語が文字化けする | AI画像生成は日本語フォントが苦手なことがある | 英語の図にするか、文字なしの図を生成して後からPowerPointやCanvaで文字を手動追加する |
| 思ったデザインにならない | スタイル指定が足りない | 「白背景」「フラットデザイン」「シンプル」「線画風」などのキーワードを追加する |
| 背景が透明にならない | ChatGPTの画像生成では透明背景に対応していない場合がある | 白背景で生成して、必要なら別ツール(remove.bgなど)で背景を消す |
完成を確認する
以下の2つが手元にあれば、このレッスンは完了です。
- フロー図を1枚:自分の業務や学習に関係するステップをAIで図にしたもの
- アイコンを1枚:何かの概念を表す小さなアイコン画像をAIで生成したもの
それぞれについて、上の「画像の品質を確認する」の3項目をチェックして問題なければOKです。スクリーンショット(=画面を写した画像)を撮っておくと、あとで振り返るときに便利です。
まとめ
このレッスンでは、ChatGPTを使って図解やアイコンをAIで生成する手順を学びました。 ポイントは次の3つです。
- プロンプトは具体的に:「何を」「どんなデザインで」「どの言語で」まで書く
- 文字化けに注意:日本語が壊れていないか必ず確認し、ダメなら英語にするか文字なしにする
- 何度でもやり直す:修正指示を重ねて、満足いくまで微調整する
次は、生成した画像を実際の資料やスライドに貼り付けて、見栄えを整えてみましょう。
種類: markdown_doc
検証: basic_manual_check_v1
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディア
必須
なし
あると楽
なし