はじめに：なぜ今「地図の可視化」と「プロンプトエンジニアリング」なのか
日々の業務やWeb開発において、「生成AIにコードを書いてもらったけれど、思った通りの動的なプログラムにならない」「複雑なアニメーションやデータ可視化を頼むと、途中でエラーになってしまう」と頭を悩ませた経験はないでしょうか。
AIに対してざっくりとした指示を出すだけでは、実務でそのまま使えるコードを出力してもらうのは難しいのが現実です。そこで重要となるのが、AIに対して最適な命令・対話を行う技術であるプロンプトエンジニアリングです。
今回取り上げる題材は、最近国連（UN）でも注目を集め、採択や投票に関する議論がなされた新しい地図の描き方（投影法）である**「Equal Earth（イコール・アース）」と、古くから親しまれている「Mercator（メルカトル図法）」**の間のインタラクティブなアニメーション遷移です。
技術ブロガーとして知られるSimon Willison氏は、ChatGPT Work上の「GPT-6 Astra (medium)」というAIモデルに対し、プロンプトを活用してウェブ上のデータ可視化ライブラリ「D3.js」を用いたスムーズなアニメーションツールを作成させました。
この記事では、この「メルカトル図法とEqual Earth図法をスムーズに変形・遷移させるWebツール」の作成事例を題材に、実務で役立つプロンプトエンジニアリングの導入・設計・運用ガイドを分かりやすく解説します。専門知識がない方でも「どのようにAIへ指示を出せば、高度なプログラミング成果物を得られるのか」が自分ごととして理解できるように順を追って説明していきます。
MercatorとEqual Earthの基本：何が違ってなぜアニメーション化が難しいのか
プロンプトエンジニアリングの実践に入る前に、まずは今回のテーマとなる「2つの地図の描き方（投影法）」と「可視化の難しさ」について、専門用語を交えずに整理しておきましょう。
メルカトル図法（Mercator）とは？
私たちが学校の授業やWeb上の地図サービスで最も見慣れている世界地図です。特徴として、角度や形が正確に保たれるため、航海やナビゲーションには非常に適しています。しかし一方で、**「赤道から離れた高緯度の地域ほど、実際よりも極端に大きく描かれてしまう」**という大きな歪み（特徴）を持っています。たとえば、グリーンランドがアフリカ大陸と同じくらいの大きさに見えてしまいますが、実際の面積はアフリカ大陸の約14分の1しかありません。
Equal Earth（イコール・アース図法）とは？
近年開発され、国連でも話題となった新しい地図の描き方です。最大の特徴は、**「世界中のすべての国や大陸の『実際の面積比』を正確に保っている」**点にあります。メルカトル図法のような極端な面積の歪みがなく、各国の実際の大きさを正しく比較することができます。見た目も自然で美しいバランスに調整されています。
なぜこの2つをスムーズに切り替える（アニメーションさせる）のが難しいのか？
メルカトル図法とEqual Earth図法では、緯度と経度を画面上の位置（X座標・Y座標）に変換するための数学的な計算式がまったく異なります。
これら2つの地図をウェブ上でスムーズに変形させながら切り替える（アニメーション遷移させる）には、次のような高度なステップが必要です。
- 地球上の各地点のデータ（国境線など）を用意する
- メルカトル図法での画面上の位置を計算する
- Equal Earth図法での画面上の位置を計算する
- その2つの位置の間を、コマ送りのように滑らかにつなぐ補間計算を行う
- ウェブブラウザ上で動かすためのJavaScriptライブラリ「D3（ディー・スリー）」を正確に操作する
これを人間がゼロから手動で実装しようとすると、数学的知識とD3の深いライブラリ知識が必要となり、非常に時間がかかります。しかし、適切なプロンプトエンジニアリングを施すことで、AIにこの複雑なアニメーションコードを一から構築させることが可能になります。
プロンプトエンジニアリングの実践：導入・設計・運用ガイド
ここからは、Simon Willison氏の取り組みをもとに、実務でAIに高度なタスクを成功させるためのプロンプトエンジニアリングのプロセスを「導入」「設計」「運用」の3つのステップに分けて解説します。
ステップ1：【導入】課題の明確化とAIモデルの選定
プロンプトエンジニアリングの第一歩は、「何を作りたいのか」というゴールを明確に定義し、適切なツール（AIモデル）を選ぶことです。
Simon Willison氏は、国連での話題をきっかけにEqual Earth図法に興味を持ち、「メルカトル図法からEqual Earth図法へアニメーション変化するD3ツール」という明確な目標を設定しました。そして、最新のAIモデルであるChatGPT Workの「GPT-6 Astra (medium)」を利用して開発を行いました。
実務に導入する際は、以下のポイントを意識します。
- 目的の解像度を上げる：「地図を表示したい」ではなく、「MercatorとEqual Earthという特定の2つの図法間をD3を使ってスムーズに遷移するアニメーションを作りたい」まで具体化する。
- モデルの特性を考慮する：コード生成や複雑なロジックが得意なモデルを選定する。
ステップ2：【設計】AIに正しく伝えるためのプロンプト構造設計
AIから一発で高品質なアウトプットを引き出すためには、プロンプト（指示文）の構造化が欠かせません。プロンプトを設計する際は、以下の4つの要素を組み込むことが推奨されます。
- 役割（ロール）の指定：「あなたはD3.jsと地理データ処理に精通したシニアWebエンジニアです」と役割を定義します。
- 前提条件と文脈（コンテクスト）の提示：「Equal Earth図法は正確な面積比を持つ投影法であり、国連でも注目されています。メルカトル図法との視覚的な違いをユーザーに提示するWebツールを作りたいです」と背景を伝えます。
- 具体的な技術制約（フォーマット）：「JavaScriptのD3ライブラリ（d3-geo等）を使用し、単一のHTMLファイルとして動く形式でコードを出力してください」「MercatorからEqual Earthへの切り替えをトグルボタンまたはスライダーでアニメーション制御できるようにしてください」と制約を設けます。
- 出力ステップの指示：「まず全体の構成案を示し、その後に完全なソースコードを出力してください」と段階を踏ませます。
このように明確な枠組み（プロンプトフレームワーク）を用意してAIに投げかけることで、漠然としたコードではなく、そのまま動くプロダクトレベルのコードが得られやすくなります。
ステップ3：【運用】試行錯誤（イテレーション）とトラブルシューティング
一度のプロンプトで完全に意図通りのツールが完成することは稀です。実務運用で最も重要なのは、**「AIが出力した結果を受けて、いかに的確に追加のプロンプトを出せるか」**という対話の技術です。
例えば、最初にAIが出力したコードを実行した際、次のような問題が発生することがあります。
- アニメーションの動きが途中でカクつく、または図形が途切れる
- 使用しているD3ライブラリのバージョンが古く、関数が動かない
- 見た目（CSS）が崩れていて直感的に操作できない
このような場合、「動きが変です。直してください」といった抽象的な指摘をしてはいけません。
効果的な運用プロンプトの例：
「作成してもらったコードを実行したところ、メルカトルからEqual Earthに遷移する際、大陸の輪郭線が一瞬消えてしまう問題が発生しました。D3の補間機能（interpolate）を使って、座標の変化が滑らかになるように修正したJavaScript部分のコードのみを再提案してください。」
このように、**「現象（何が起きたか）」「原因の推測や希望する対処法（補間処理を使う）」「期待する出力形式（該当箇所のコード）」**をセットにしてフィードバックを与えることで、迅速にコードを修正・洗練させていくことができます。
実務で直面する注意点と罠：ハルシネーションと未確認事項への備え
プロンプトエンジニアリングを活用して高度な可視化ツールやプログラムを作成する際には、いくつか注意すべき罠（ハマりポイント）があります。実務で失敗しないための対策を確認しておきましょう。
1. AIの「ハルシネーション（嘘・幻覚）」とライブラリのバージョン差異
AIは時に、存在しないD3の関数やプロパティを「あたかも存在するかのように」出力することがあります。特にD3.jsのようなアップデートが頻繁に行われるライブラリでは、バージョン5の古い記述とバージョン7の新しい記述が混ざってしまうトラブルがよく起こります。
- 対策：「使用するD3.jsのバージョンはv7とします。v7の公式APIに準拠した記述のみを使用してください」とプロンプトで明示的にバージョンを指定する。
2. 未確認事項の扱いと動作検証の重要性
今回の事例において、GPT-6 Astra (medium)が具体的にどのようなプロンプトのやり取りを経て一発でコードを完成させたのか、あるいは何回の修正対話（イテレーション）を行ったのかというプロンプトの詳細履歴やモデル内部の完全な生成ステップについては、参照元情報では一部未確認な点があります。
AIを活用する際は、「AIが出したコードは一見正しく見えても、内部の計算精度や特殊な境界値（極点付近のデータ処理など）で例外エラーを起こす可能性がある」という前提（ゼロトラストの姿勢）を持つことが大切です。出力されたコードは必ず自身の環境で実行・テストし、仕様通りの挙動を示しているか検証するプロセスを省略してはいけません。
まとめ：プロンプトエンジニアリングで変わる可視化開発の未来
今回は、国連でも話題となった「Equal Earth」図法と「メルカトル」図法のアニメーションツール作成を題材に、実務におけるプロンプトエンジニアリングの導入・設計・運用ガイドをお届けしました。
要点を振り返りましょう。
- 明確な目的設定：メルカトル（形・角度重視）とEqual Earth（実際の面積比重視）の違いなど、作りたいものの背景と技術仕様を言語化する。
- プロンプトの設計：AIに「役割」「文脈」「制約条件」「出力形式」を提示し、具体的な技術スタック（D3.jsなど）を指定する。
- 対話的な運用：エラーや表示崩れが発生した場合は、具体例と期待する動作を添えてフィードバックを繰り返し、コードを洗練させる。
- 検証の徹底：AIのハルシネーションやバージョン混同に注意し、生成された成果物は必ず実環境で動作テストを行う。
プロンプトエンジニアリングは、単に「AIに質問するコツ」ではありません。頭の中にある「実現したいこと（アイデア）」を論理的に整理し、AIという優秀なパートナーへ正確に要件を伝えて形にするための現代のソフトウェア設計技術そのものです。
地図投影法の変化をインタラクティブに可視化するような高度な取り組みも、適切なプロンプト構築があれば短時間で実現できる時代になりました。ぜひ皆さんも、日々の実務やWeb開発の中でプロンプトエンジニアリングの設計原則を取り入れ、AIとの協働による新しいデータ表現やツール開発に挑戦してみてください。