メインコンテンツへスキップ
レッスン一覧に戻る

atom.training-designer.visual-asset-generation

図解やアイコンをAIで生成する

図解やアイコンをAIで生成する

generate-diagram-with-aigenerate-diagram-with-ai「generate diagram with ai」に関するスキルがこのレッスンで身につきます。generate-icon-with-aigenerate-icon-with-ai「generate icon with ai」に関するスキルがこのレッスンで身につきます。
想定時間未設定公開状態: draft
学習メモ

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc検証: basic_manual_check_v1

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。

diagramscreen_captureicon

レッスン本文

図解やアイコンをAIで生成する

どんなことができるようになるか

資料を作っているとき、「ここ、図があった方がわかりやすいのに…」と思ったことはありませんか? 料理でいえば、レシピの文章だけより完成写真がある方がぐっと作りたくなりますよね。それと同じで、説明文だけのスライドに1枚フロー図が加わるだけで、読み手の理解度はまるで変わります。

このレッスンでは、AIツール(=人工知能を使った便利なサービス)に言葉で指示を出して、フロー図アイコン画像を自分で生成できるようになります。所要時間は約15分です。

用意するもの

  • インターネットにつながるパソコンまたはスマートフォン
  • ChatGPT(=OpenAIが提供するAIチャットサービス)の無料アカウント

まだアカウントを作っていない場合は、ChatGPTの公式サイトにアクセスして「Sign up」ボタンから登録してください。メールアドレスがあれば無料で始められます。

図解生成の全体フロー

フロー図を生成する

手順1:ChatGPTを開いて新しいチャットを始める

ブラウザでChatGPTを開き、左上の「New chat」ボタンを押して新しい会話を始めます。

手順2:プロンプト(=AIへの指示文)を入力する

チャット入力欄に、生成したい画像の内容を言葉で書きます。ここが一番大事なステップです。

良い例:

以下の内容のフロー図を生成してください。
・日本語で書いてください
・白背景でシンプルなフラットデザインにしてください
・矢印でステップのつながりを示してください

「ユーザーが画面を開く → メニューから商品を選ぶ → カートに入れる → 購入完了」

悪い例:

図を作って

コツは「何を」「どんなデザインで」「どの言語で」の3つを必ず伝えることです。悪い例のように指示が短すぎると、AIがあなたの意図を推測するため、思い通りの結果になりません。

手順3:生成された画像を確認してダウンロードする

数秒〜数十秒で画像が表示されます。画像の右上にあるダウンロードボタン(↓マーク)をクリックして保存しましょう。

ChatGPTでの画像生成画面

手順4:気に入らなければ修正を依頼する

一度で完璧な画像が出ることは少ないです。同じチャットの中で修正指示を重ねられるのがAIの強みです。

修正プロンプトの例:

いい感じです!次の点だけ変えてください。
・矢印をもう少し太くしてください
・フォントサイズを大きくしてください

何度でもやり直せるので、「70点くらいかな」と思ったらどんどん追加指示を出してみてください。

アイコン画像を生成する

アイコン(=小さな絵柄で意味を伝える画像)も同じ手順で生成できます。スライドの見出し横やボタン画像に使うと、ぐっとプロっぽくなります。

良い例:

「学習」を表すアイコンを生成してください。
・青系の配色にしてください
・丸いシルエットにしてください
・背景は透明にしてください
・シンプルなフラットデザインにしてください

悪い例:

青いアイコン

「何を表すアイコンか」「配色」「形」「背景」を伝えるのがポイントです。

アイコン生成の例

画像の品質を確認する

生成された画像を資料に使う前に、次の3つを必ずチェックしましょう。「出来上がった料理の味見をせずにお客さんに出す人はいない」のと同じです。

確認項目具体的な見方OKの基準
文字の正確さ日本語が文字化け(=文字がぐちゃぐちゃに壊れること)していないかすべての文字が正しく読める
内容の正しさ指示した通りのステップ・順番・ラベルで描かれているか元の指示と一致している
用途への適合資料に貼ったときに見やすく伝わるかスライドに配置して違和感がない

うまくいかないときの対策

つまずき原因対策
画像が生成されないChatGPTが文章だけで回答した「画像を生成してください」と明示的に依頼し直す
日本語が文字化けするAI画像生成は日本語フォントが苦手なことがある英語の図にするか、文字なしの図を生成して後からPowerPointやCanvaで文字を手動追加する
思ったデザインにならないスタイル指定が足りない「白背景」「フラットデザイン」「シンプル」「線画風」などのキーワードを追加する
背景が透明にならないChatGPTの画像生成では透明背景に対応していない場合がある白背景で生成して、必要なら別ツール(remove.bgなど)で背景を消す

完成を確認する

以下の2つが手元にあれば、このレッスンは完了です。

  1. フロー図を1枚:自分の業務や学習に関係するステップをAIで図にしたもの
  2. アイコンを1枚:何かの概念を表す小さなアイコン画像をAIで生成したもの

それぞれについて、上の「画像の品質を確認する」の3項目をチェックして問題なければOKです。スクリーンショット(=画面を写した画像)を撮っておくと、あとで振り返るときに便利です。

まとめ

このレッスンでは、ChatGPTを使って図解やアイコンをAIで生成する手順を学びました。 ポイントは次の3つです。

  1. プロンプトは具体的に:「何を」「どんなデザインで」「どの言語で」まで書く
  2. 文字化けに注意:日本語が壊れていないか必ず確認し、ダメなら英語にするか文字なしにする
  3. 何度でもやり直す:修正指示を重ねて、満足いくまで微調整する

次は、生成した画像を実際の資料やスライドに貼り付けて、見栄えを整えてみましょう。

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc

検証: basic_manual_check_v1

証跡とメディア

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディア

diagramscreen_captureicon
前提 atom

必須

なし

あると楽

なし

学習完了