先日、私が講師をしているBINGOの生徒の50代男性・Sさんから相談を受けました。地元の店舗で毎月売上を手書きのノートに書いているそうなのですが、それを自作のWebアプリで綺麗な折れ線グラフにしたいとのこと。
今回は、Sさんがどこでつまずき、AIへどう指示（プロンプト）を出して解決したのか、会話形式で振り返ってみます。ちょっとした指示の工夫でAIの回答精度が一気に跳ね上がるコツをまとめました。
課題1：手書きノートの写真をどうやってテキストデータ化するか？
Sさん：「スマホで手書きの売上表を写真は撮ったんだよ。でも、ここからテキストデータにするのに一つずつ手入力するしかないのかな…？」
私：「いまのAIは画像の読み取り（OCR）が得意ですよ！そのまま写真を投げて『テキスト化して』と頼むだけでも行けますが、後でコードに組み込みやすい形式で出力してもらうのがコツです」
Sさん：「AIへの聞き方（プロンプト）にルールがあるの？」
私：「いきなり『これ読んで』と聞くより、役割や出力形式をカチッと指定してあげるんです。こんな感じでプロンプトを作ってみました」
1. 手書き表をデータ化するプロンプト
あなたは優秀なデータ入力・データ変換の専門家です。
添付された手書きの売上表画像からデータを読み取り、テキストデータとして出力してください。
【対象画像】
添付画像を参照してください。
# 出力してほしい内容
・日付（YYYY-MM-DD形式）
・売上金額（数値のみ）
・Markdownの表形式（Table）データ
それぞれの項目について、文字化けや読み間違いがないか慎重に抽出してください。
手書き文字の解読が難しい部分は、推測で埋めずに「[要確認]」と記載してください。
指示（プロンプト）のポイント
- 役割を指定：「データ入力の専門家」と伝えることで精度意識を高める
- 目的と入力を明示：画像を扱う旨を明確に
- 具体的な詳細：日付フォーマットや数値の扱い、Markdown表形式での出力を指定
- 注意点：あいまいな文字を「推測で適当に書かない」よう制約をかける
Sさん：「なるほど！『間違えそうなところは[要確認]にして』って指定しておけば、後から自分でチェックしやすいね。AIが勝手に数値をでっち上げるのを防げるんだ。」
課題2：抽出したデータをJavaScriptコードに組み込む
Sさん：「無事にテキストデータは取れた！で、これを事前に準備しておいたJavaScriptのコード（Chart.js）に当てはめたいんだけど、コードの書き換えでエラーが出そうで怖くて…」
私：「そこもAIに丸投げしましょう。『手元にあるコード』と『さっき取得したデータ』を両方渡して、合体させてくれと頼めば一発です」
ちなみに、Sさんが用意していたベースのコードはこちらです。
window.addEventListener('load', () => {
// HTMLのcanvas要素を取得
const ctx = document.getElementById('myLineChart').getContext('2d');
// グラフを作成
const myChart = new Chart(ctx, {
type: 'line', // グラフの種類を「折れ線グラフ」に指定
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月'], // 横軸のラベル
datasets: [{
label: '月別売上推移', // データのタイトル
data: [12, 19, 3, 5, 2, 3], // 実際の数値データ
borderColor: '#3b82f6', // 線の色（青）
backgroundColor: 'rgba(59, 130, 246, 0.1)', // 線の下側の背景色（薄い青）
borderWidth: 3, // 線の太さ
tension: 0.3, // 線のカーブ具合（0にすると直線の折れ線になります）
pointBackgroundColor: '#3b82f6', // ドットの色
pointRadius: 5 // ドットの大きさ
}]
}, options: {
responsive: true, // 画面サイズに合わせてレスポンシブ対応
scales: {
y: {
beginAtZero: true // 縦軸のスタートを0に固定する
}
}
}
});
});
このソースコードと売上データをAIにセットで渡し、組み込んでもらいます。
2. コードとデータを合体させるプロンプト
あなたは優秀なフロントエンドエンジニアです。
提供する売上データ（テキスト）を、既存のJavaScript（Chart.js）コードの該当箇所へ正確に組み込んでください。
【売上データ】
（※ステップ1でAIが抽出したテキストデータをここに貼り付け）
【既存ソースコード】
（※上記のJavaScriptソースコードをここに貼り付け）
# 出力してほしい内容
1. データを反映した完成版のJavaScriptコード
2. 修正・差し替えを行った箇所の簡単な説明
`labels` に日付、`datasets` 内の `data` に売上金額が正しく対応するように流し込んでください。
既存のオプション設定（色やレスポンシブ設定など）は一切変更せず、データ部分（labels と data）のみを差し替えてください。
Sさん：「あ、これならコードを直接いじらなくて済むから安心だね。『オプション設定は変更しないで』って注意点を入れておくのも大事なんだ」
私：「そうなんです。AIは良かれと思って余計なリファクタリング（コードの整形や書き換え）をしがちなので、変えてほしくない部分をガードしておくのが初級者のプロンプトテクニックですね」
生成されたjavascriptの折れ線グラフ
今回のまとめ
初心者段階を抜けてAIを実務や趣味で使いこなすコツは、「AIに何をさせたいか」の構造化です。
今回のプロンプト構成を型として覚えておくと、別の作業でもそのまま使い回せます。
- 役割：どんな立場として回答してほしいか
- 目的：何をしてほしいのか
- 具体的な情報：使ってほしいデータやコード
- 出力内容：どのような形式で出してほしいか
- 詳細な条件：フォーマットや項目の指定
- 注意点・制約：やってほしくないこと（勝手な改変、推測回答など）
単に「これやって」と頼むと何度もやり直すことになりますが、最初にこの型で条件を揃えてあげると、一発で思い通りのアウトプットが返ってくる確率が格段に上がります。
手元の画像処理やコード修正で迷っている方は、ぜひこの指示の出し方を試してみてください！