バイブコーディングで公開データを可視化｜Claude CodeとAzureで”今の海”を見るWebアプリを3日で作った

公開データだけを使って、Claude Codeで「今の海」を可視化するWebアプリを気軽に作りました。

世界中の船がリアルタイムで動き、海流が流れ、海面水温が色で見える。3D地球儀をぐるっと回して、そのまま2Dの衛星地図まで降りていける。そんなアプリです。Microsoft Azure 上で公開していて、今も動いています。

作り方は単純です。コードは1行も書いていません。Claude Codeに「こういうものを作りたい」とチャットで伝えて、出てきたものを確認し、直したいところをまた伝える。いわゆる**バイブコーディング（Vibe Coding／自然言語のチャットだけで開発を進めるやり方）**です。期間は実質3日。

公開データを使えばここまでできる、という話でもあります。ただ今回いちばん伝えたいのは、Claude Codeを使えば、ここまでのものがコードを書かずに作れてしまう、ということです。作ったアプリの中身と、どう作ったかを順に書きます。

何を作ったか：ブラウザで見る「今の海」

まず完成形を見てもらうのが早いです。実際に動いています。

https://yellow-mud-0b3a81a00.7.azurestaticapps.net

開くと、宇宙から見た地球が出てきます。日本の周りにシアン色の点が散らばっていて、これが今この瞬間に航行している船です。マウスで地球を回して、ホイールで寄っていくと、そのまま2Dの衛星写真の地図に切り替わります。船をクリックすると、その船の目的地・速力・全長・到着予定時刻まで出ます。

船だけではありません。レイヤーを切り替えると、次のものが重なって見えます。

海流（流れの速さで青→オレンジに色分け）
海面水温・波の高さ・海面の高さ・海氷・植物プランクトン（クロロフィル）・塩分
世界の漁業活動のヒートマップ
AISを出していない「ダークシップ」のレーダー検出
船どうしの接舷・洋上での漂泊・寄港といった「動きのイベント」

地球儀の状態でも、2Dの地図でも、同じものが見られます。画面そのものを動画で録画してSNSに出す機能まで付けました。

ひとつ正直に書いておきます。このアプリは個人で趣味として作って公開しているものなので、予告なく公開を停止する場合があります。いつまで見られるかは保証できません。今このURLが開けたら、それは運が良かったと思ってください。

元になったのは、全部「無料で公開されている海のデータ」

このアプリは、私が独自に船を観測しているわけでも、自前で海を測っているわけでもありません。世界が無料で公開しているデータを、地図の上に重ねているだけです。使っているのは主に4つです。

ひとつ目は船の位置。AISという、船が自らの位置を電波で発信する仕組みがあって、それを世界規模で集めて配信している無料サービスがあります。これでリアルタイムの船が出せます。

ふたつ目は海の状態。ヨーロッパが運営するCopernicus（コペルニクス）という海洋データのサービスです。海流・水温・波・海氷・塩分など、海の物理状態を無料で公開しています。これは1日に1回更新されるデータなので、アプリ側では「準リアルタイム（基準時刻つき）」として正直に表示しています。

みっつ目は漁業活動。Global Fishing Watchという団体が、船のAISと衛星レーダーから「世界のどこで漁が行われているか」を推定して公開しています。非商用なら無料で使えます。

よっつ目は地図そのもの。衛星写真の地図と、水深が分かる海図は、Esri（地図サービスの大手）が公開しているものを使っています。

つまり、海を可視化するための材料は、もう全部そこに転がっている。問題は「それをどう組み合わせて、どう見せるか」だけでした。そして、その組み立てをやってくれたのがClaude Codeです。

コードは1行も書いていない

ここがこの記事の本題です。

このアプリ、中身はそれなりに本格的です。リアルタイムの通信、3Dの地球儀（WebGLという、ブラウザで3Dを描く技術を使っています）、大量の点を60fpsで滑らかに動かす描画、地図、動画録画。普通なら、フロントエンドのエンジニアが何人かで何週間もかけて作る規模です。

私はこの中身のコードを、1行も書いていません。

やったことは、Claude Codeというツールに対して、チャットで指示を出しただけです。「3D地球儀で世界中の船をリアルタイムに表示したい」「海流を青からオレンジのグラデーションで、白は使わずに」「夜の側がのっぺりした輪に見えるから、滑らかなグラデーションに作り替えて」。こういう日本語の指示を投げると、Claude Codeが必要なコードを書き、ファイルを作り、修正していきます。

私がやるのは、出てきた画面を見て「ここがおかしい」「ここをこうしたい」と次の指示を出すこと。作りたいものを言葉にして、出てきたものを確認する。この往復だけでアプリができていきます。最近よく聞く「バイブコーディング」は、まさにこのやり方です。

途中で「この機能を足したい」と思ったら、その都度チャットで頼みます。船の航跡を残す機能、航路標識（ブイや灯台）を表示する機能、海面水温のレイヤー。全部、後からチャットで追加しました。コードエディタを開いて私がキーボードを打った場面は、一度もありません。

CI/CDもクラウドも、チャットだけで用意できた

「コードは書かなくても、公開するのは大変なんでしょう？」と思うかもしれません。これも、ほぼチャットで済みました。

このアプリはMicrosoftのAzureというクラウドに置いています。クラウドにアプリを置くには、普通は管理画面をあちこち触ったり、設定ファイルを書いたりする手間があります。ところがClaude Codeは、Azureを操作するコマンド（Azure CLI）を自ら実行できるので、「Azureに公開する場所を用意して、そこに置いて」と頼むと、必要な準備を自分で進めてくれます。

さらに、「コードを直したら自動でテストして、問題なければ自動で本番に反映する」という仕組み（CI/CD）も入っています。これも私が設定したのではなく、Claude Codeに「テストが全部通ったときだけ自動デプロイされるようにして」と頼んで作ってもらいました。

海のデータを定期的に取りに行って最新に保つ「お使い」も、自動で回る仕組みにしてあります。要するに、作る・直す・テストする・公開する・データを更新し続ける、という一連を、ほぼ全部チャットの指示だけで組めたわけです。

3日でここまで来た

時系列で言うと、こうです。

1日目で、3D地球儀にリアルタイムの船を出すところまで動きました。最初に「動く実物」が出てきた瞬間が一番興奮しました。

2日目から3日目で、海流・海面水温・波などの海のデータを次々に重ね、2Dの衛星地図との行き来、動画録画、見た目の作り込み（夜の表現、配色、船の3Dモデル）を足していきました。

正味3日。これを一人で、コードを書かずにやった、というのが今回の一番の驚きです。「これ作って」と言ってから動くものを触るまでの距離が、信じられないくらい短くなっています。

それでもハマった話（正直に）

きれいごとだけ書くと嘘になるので、詰まった話も書きます。むしろここが、Claude Codeとどう付き合うかのコツです。

一番大きかったのは「データの正直さ」です。最初の段階で、海流が実際の観測データではなく、それっぽく作った仮のデータで表示されていた時期がありました。見た目はきれいでも、これは中身が嘘です。私はここで「合成データは一切やめて、実在の公開データだけにして。取れないときは正直に『未接続』と出して」と方針を切り直しました。今のアプリは、データが取れない日は古いデータのまま「○時間前」と表示し、嘘の値は出しません。

技術的なハマりもありました。海流の流れが、太平洋の真ん中（経度180度のライン）でスパッと途切れる時期がありました。世界地図を1枚の平面に広げるときの、つなぎ目の処理が抜けていたのが原因です。これも「ここで途切れる、根本原因から直して」と伝えて直しました。

外部データならではの問題もあります。海のデータを配っているCopernicus側が、たまに一時的につながらないことがあって、その日は更新に失敗します。ただこれはアプリが壊れるわけではなく、前回取れたデータを表示し続けて、翌日には自動で復活します。外部のデータに頼る以上、相手の都合で失敗することはある。だから「失敗しても壊れない」作りにしておく。ここはClaude Codeに作らせるときも、私が意識して指示した部分です。

こういう「うまくいかない場面」で、何がおかしいのか・どう直すべきかを言葉にできるかどうか。ここが、ただチャットするのと、ちゃんと動くものを作るのの分かれ目でした。

かかっているお金（月いくらか）

気になるコストの話です。

このアプリの運用費は、月にだいたい15〜20ドルくらいです。しかもその大半は、リアルタイムの船データを24時間受け続けるための、常時起動のサーバー代です。海のデータそのもの（Copernicus・漁業データ・地図）は、全部無料の公開データなので、データ利用料はかかっていません。

船のリアルタイム表示をあきらめれば、この常時起動分も削れて、もっと安くできます。「どこまでリアルタイムにこだわるか」で費用が決まる、という構造です。個人が趣味で世界中の海をリアルタイムに眺めるアプリを、月20ドルで持てる。これも数年前なら考えられなかったことです。

私がやったのは「何を作るか」と「ちゃんとできているかの確認」

ここまで読んで、「じゃあClaude Codeがあれば誰でも一発で作れるのか」と思うかもしれません。そこは正直に線を引きます。

Claude Codeはコードを書いてくれます。でも、「何を作るか」を決めて、出てきたものが本当に正しいかを確認するのは、人間の仕事です。

たとえば「海流が途切れている」「データが仮物になっている」「夜の表現がのっぺりして美しくない」。これは、画面を見て違和感に気づき、原因の見当をつけ、言葉で指示できないと直りません。私はこのアプリを作る間、ずっと私自身がブラウザで動かして、おかしいところを探して、Claude Codeに「ここをこう直して」と返し続けていました。

実装そのものはAIがやる。でも、何を作るべきか・どこがダメか・どう直すべきかという判断は、経験のある人間が担う。この組み合わせが、今いちばん速くて確実です。コードを書く力よりも、「作りたいものを正しく定義して、出てきたものを評価できる力」の価値が上がっている、と私は強く感じています。

この作り方は、あなたの会社のデータでも効きます

海の話をしてきましたが、本質は海ではありません。

「公開されているデータを、見やすく組み立てて、意味のある形で見せる」。これは、会社の中に眠っているデータでも全く同じです。日々たまっている売上、設備の稼働記録、現場のセンサーの数値、問い合わせの履歴。多くの会社で、これらは表計算ソフトやばらばらのシステムに埋もれたままになっています。

それを「今の状態がひと目で分かるダッシュボード」や「異常があったら気づける画面」に変える。今回の海のアプリでやったことと、技術的にはほとんど同じです。そして、それがコードを書かずに、短期間で、安く作れるようになりました。

「うちにもデータはあるけど、活かせていない」。もしそう感じているなら、何ができるかを一度整理してみる価値はあります。

まとめ

公開データ（船のAIS・海のCopernicus・漁業のGlobal Fishing Watch・地図のEsri）だけで、「今の海」をリアルタイムに見せるWebアプリを作って公開できた。すべて無料のデータです。
私はコードを1行も書いていません。Claude Codeにチャットで指示し、出てきたものを確認して直す、その往復だけで作りました。クラウドへの公開も、自動テスト・自動反映の仕組みも、チャットで用意できました。
期間は実質3日。運用費は月15〜20ドルで、その大半はリアルタイム表示用の常時起動サーバー代。データ利用料はゼロです。
実装はAIがやる時代になりました。だからこそ「何を作るか」「どこがダメか」を判断できる人間の役割が、これまで以上に効きます。

「うちにも使えていないデータがある」「こういう”見える化”を自社でやれないか」と思った方は、無料の30分オンライン診断で、何ができそうかを一緒に整理できます。埋もれているデータが、見える形になるだけで、判断が変わります。

この事例のような実装を、現場で動くまで一緒に進めたい方へ

AI×IoTの技術顧問として、月額契約で継続伴走しています。PoC設計・技術判断・組織設計・ベンダー管理・実装支援まで、現場で動くまで一緒に進めます。受託開発（請負）ではありません。

→ AI技術顧問サービスの詳細／無料30分オンライン診断／料金一覧