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

atom.data-analyst.create-comparison-charts

比較グラフを作る

比較グラフを作る 買い物をするとき、「A商品とB商品、どちらがお得?」と迷ったことはありませんか? 価格や機能を並べて比べると、違いが一目でわかりますよね。 それを視覚的な「グラフ」にまとめるのが 比較グラフ です...

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

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

種類: markdown_doc検証: basic_manual_check_v1

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

screenshot

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

diagramscreen_capture

レッスン本文

比較グラフを作る

買い物をするとき、「A商品とB商品、どちらがお得?」と迷ったことはありませんか? 価格や機能を並べて比べると、違いが一目でわかりますよね。 それを視覚的な「グラフ」にまとめるのが比較グラフです。

たとえるなら、料理のレシピを「文字だけ」で読むのと「写真付き」で見るのとでは、わかりやすさがまったく違いますよね。 数字も同じで、表で見るより棒の高さで見たほうが、一瞬で大小がわかります。

このレッスンでは、AIツール(=人工知能を使った便利なWebサービスのこと。ChatGPTやClaudeなど)を使って、15分で比較グラフを1つ完成させます。プログラミングの知識は一切不要です。

比較グラフ作成フロー

用意するものを確認する

次の2つだけ準備してください。

  • インターネットに繋がったパソコン
  • AIツールのアカウント(以下のどれか1つでOK)
    • ChatGPT(無料プランでもグラフ作成可能)
    • Claude(Artifacts機能でグラフを表示できる)
    • CursorClaude CodeなどのAIコーディングツール(Pythonでグラフを自動生成してくれる)

どれを使うか迷ったら、ChatGPTかClaudeがおすすめです。ブラウザだけで完結します。

比較テーマを決める

まずは「何と何を比べたいか」を1つ決めましょう。テーマ選びはグラフの出来を大きく左右します。

良い例

  • 「スーパーで売っている調味料A・B・Cの価格を比べる」
  • 「今月と先月の家計の支出カテゴリ(食費・交通費・娯楽費)を比べる」
  • 「3つのサブスク(動画配信サービス)の月額料金を比べる」

悪い例

  • 「すべての商品を比べる」→ 範囲が広すぎてグラフが読めなくなる
  • 「テーマが決まっていない」→ AIに何を出せばよいか伝わらない
  • 「10個以上の項目を比べる」→ 棒が細くなりすぎて見づらい

コツは**「2〜5項目くらい」**に絞ることです。項目が少ないほど、違いがはっきり見えます。

AIにグラフを依頼する

AIツールのチャット画面を開き、次のようなメッセージをコピペして送りましょう。

プロンプト例1: 基本の棒グラフ

次のデータで棒グラフ(=棒の高さで値を比べるグラフ)を作ってください。
タイトルは「調味料の価格比較」、Y軸の単位は「円」でお願いします。

商品名, 価格
調味料A, 380
調味料B, 520
調味料C, 290

何をしているか: AIに「データ」「グラフの種類」「タイトル」「単位」をまとめて伝えています。最初から情報を揃えると、やり直しが減ります。

プロンプト例2: 自分のデータに差し替える場合

次のデータで横棒グラフを作ってください。
項目の多い順に並べてください。
タイトルは「今月の支出内訳」、単位は「円」です。

カテゴリ, 金額
食費, 45000
家賃, 80000
交通費, 12000
娯楽, 8000

ポイント: 自分のデータに差し替えるときは、「商品名, 価格」の形式をそのまま真似して、「カテゴリ名, 数字」で1行ずつ書くだけです。

プロンプト例3: グラフの見た目を調整する

グラフが出てきたあとに、追加でこう伝えると見た目を良くできます。

このグラフの色を青系に統一して、いちばん高い棒だけ赤色にしてください。
フォントサイズを大きくして、数値を棒の上に表示してください。

何をしているか: 一度できたグラフを、さらに見やすく改善しています。AIは「もう少しこうして」という追加の修正依頼が得意です。

AIツールでのグラフ作成画面

結果を確認する

AIがグラフを表示したら、次の4つのポイントをチェックしましょう。

チェック項目確認方法OKの基準
項目の数棒の本数を数える渡したデータの行数と一致
値の大小関係いちばん高い棒を確認数値がいちばん大きいデータと一致
タイトルグラフの上部を確認指定したタイトルが表示されている
単位Y軸のラベルを確認「円」などの単位がある

すべてOKなら完成です。

1つでも「NG」があれば、AIにこう伝えましょう。

棒が2本しかありません。データは3行あるので、3本の棒にしてください。
Y軸に「円」の単位を追加してください。

コツ: 「何がおかしいか」と「どうなってほしいか」をセットで伝えると、AIは1回で正しく直してくれます。

成果物を保存する

完成したグラフを画像として保存しましょう。

ChatGPTの場合

  1. グラフ画像の上にマウスを乗せる
  2. 表示されるダウンロードボタンをクリック

Claudeの場合

  1. Artifacts(=AIが作った成果物の表示エリア)の右上にあるダウンロードボタンをクリック

どちらでも使える方法

  1. グラフの上で右クリック →「名前を付けて画像を保存」
  2. ファイル名は「comparison-chart.png」など分かりやすい名前にする

保存した画像が、このレッスンの成果物(=あなたが作った結果物)です。

つまずきやすいポイントを知る

つまずきなぜ起きる?こうすれば直る
グラフが表示されないデータの書き方がAIに伝わっていない「項目名, 数字」の形式で1行ずつ書く。カンマ区切りを忘れずに
値がおかしい(0になる等)数字に「円」などの文字が混ざっているデータ部分では「380」のように数字だけを書く。単位は別途指定する
意図と違う種類のグラフになるグラフの種類を指定していない「棒グラフで」「円グラフで」と必ず種類を書く
文字化け・日本語が消えるAIが英語のフォントだけを使った「日本語フォントを使ってください」と追加で伝える
グラフが小さすぎるサイズ指定をしていない「横800px、縦500pxで作ってください」と追加する

完成を確認する

次のすべてに「はい」と答えられたら、このレッスンは完了です。

  • 比較テーマを自分で決められた
  • AIにプロンプトを送ってグラフを1つ作れた
  • グラフの項目数・大小関係・タイトル・単位が正しいことを確認した
  • グラフを画像ファイルとして保存した

おめでとうございます! これであなたは「AIを使って比較グラフを作れる人」になりました。 次は、もっと複雑なデータ(月別の推移など)をグラフにすることにも挑戦してみましょう。

振り返る

  • 比較グラフは「比べたいものを2〜5項目に絞る」ことがコツ
  • AIには「データ」「グラフの種類」「タイトル」「単位」をまとめて伝える
  • 結果は必ず目で確認し、おかしければ「何がおかしいか」+「どうしてほしいか」をセットで伝える
  • 修正は何度でもお願いできる。一発で完璧にする必要はない
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc

検証: basic_manual_check_v1

証跡とメディア

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

screenshot

メディア

diagramscreen_capture
前提 atom

必須

なし

あると楽

なし

学習完了