【全30駅網羅】山手線の音を完全再現した「Yamanote.fun」を作りました

10年前に初めて日本を訪れて以来、東京の山手線が奏でる独特の「音」の魅力にすっかり取り憑かれてしまいました。発車メロディの素晴らしさは言うまでもありませんが、何度か東京へ足を運ぶうちに、ドアチャイムや車内アナウンス、そして走行音までもが織りなす極上のサウンドスケープに深く魅了されるようになったのです。

自宅で仕事をする際、YouTubeで山手線の走行動画を流すと、その環境音と穏やかな日本語のアナウンスが信じられないほど心地よく、集中力を高めてくれることに気づきました。しかし、既存の動画は音質が粗かったり、情報が古かったりと「これじゃない」と感じることも多く、それなら自分で理想の音体験を再構築しようと決意しました。

Reddit、YouTube、そして日本のファンサイトから素材をかき集め、Logic Pro Xを駆使して、メロディ・チャイム・アナウンス・走行音を完璧に合成。2019年にはAlexaスキルとして公開しましたが、今回ついにWebサイト「Yamanote.fun (https://www.yamanote.fun/) 」としてブラウザで手軽に楽しめるようになりました。

このサイトは、全30駅の内回り・外回りに対応したプログレッシブ・ウェブアプリ（PWA）です。主な機能は以下の通りです：

• プレイリスト形式での再生
• メロディ、チャイム、アナウンス、走行音を細かくスキップ可能なスクラブバー
• 駅ごとのシェア用URL発行（例: yamanote.fun/jy13-ikebukuro-inner）
• オフライン再生対応

技術スタックはシンプルで、HTML/CSS/JavaScriptを採用。オーディオはCloudflare R2で配信し、Netlifyでホスティングしています。プロダクトデザイナーとしてFigmaでデザインを行い、Claude Codeの力を借りてUIの洗練、PWAの実装、キャッシュ処理などを構築しました。無料枠だけでここまで完成度の高いものを作れたことには正直驚いています。

実際に山手線を日常的に利用している皆さんのフィードバックをいただけると嬉しいです！

すごく丁寧で癒やされるプロジェクトだね！これだけ多様なオーディオ素材を組み合わせて、最終的にPWAとしてまとめ上げた手腕に感動したよ。オフラインで動作してネイティブアプリのように使えるっていうのが、集中して作業するための環境音として最高だね。
PWAのバックエンドやオフラインキャッシュ周りでClaude Codeを使ったって書いてあったけど、普段自分で全部実装する身としては、実際どうだったか気になってるよ。Service Workersやキャッシュの技術的な部分をこれだけでバッチリ使いこなせた感じ？それとも、仕上げるまでにかなり試行錯誤が必要だったのかな？

特に批判的な意見はないよ、純粋に素晴らしい！ドア上のディスプレイに次の駅を表示するバージョンがあると面白いかもしれないけど、指摘の通りみんなバックグラウンドで流すだろうから、実際どれくらい需要があるかはわからないね。

これすごくいいね。以前は山手線の走行音のYouTube動画を睡眠用に使ってたよ。

一つだけフィードバックさせてもらうと、睡眠用としてはメロディやドアのチャイムが結構大きくて頻繁に鳴る気がするんだ。もっと「環境音寄り」なバージョンで、走行中のアンビエント音を長くして、チャイムやメロディを少し控えめにしたものがあったら嬉しいな。人の話し声とかをマスキングしてくれるような感じなら最高。

これ最高！まさに今、通勤中の山手線の中で読んでるよ！

これ大好き :) 作ってくれて本当にありがとう、デザインもすごく洗練されてるね。

せっかくフィードバックを求めてくれたので伝えると、操作性に関して「次へ」「前へ」ボタンが少し分かりにくいかも。左右に配置されてるのに上下の動きを制御してて、ループの設定で左右の方向が変わっちゃうからね。（ループの切り替えで「進む」「戻る」の意味が変わるから、そこがわかるインジケーターがあれば助かるかな）。マウスホイールでの操作にも対応してくれたら完璧だね。

さらに要望しちゃって申し訳ないけど、個人的には「ドアが閉まります」のアナウンスや発車メロディ、警報音なんかも追加して、サウンドスケープを完璧に再現してくれたら嬉しいな。

わがまま言ってごめん！今のままでも十分すぎるほど楽しんでるよ。

これ最高！UIも素晴らしいし、初期のWebサイトっぽい雰囲気がすごくいい。作ってくれてありがとう。東京の空気感が完璧に再現されてる！

すごく面白い！没入感がたまらないね。

自分も似たようなのを作ったよ。Tokyo Train Orchestra (http://tokyo-train-orchestra.netlify.app/) って言って、実際の電車の時刻表データを使って音楽を生成するやつ。

本当によくできてる。作り手のこだわりが伝わってきて最高だよ。

JR東日本はワンマン運転への移行に伴って、発車メロディを廃止していく方針だから、残念だけどこれらも近いうちになくなっちゃうんだろうね。南武線や常磐線では去年廃止されたし、山手線も2030年までにはなくなる予定みたいだよ [1]。

RFIDとかを使って、いつか自分たちで独自のメロディを鳴らす方法を見つけてくれると確信してるけどね。京急はパタパタ表示機を復活させる方法を編み出したし [2]。JRは人件費削減で批判を浴びる状況を考えると、すぐに何かを導入するのは難しいのかもしれないけど。

[1] https://japantoday.com/category/features/travel/jr-east-axes-nambu-line-station-departure-melodies
[2] https://soranews24.com/2026/07/04/japanese-train-company-brings-back-beloved-patapata-departure-boardwith-a-clever-digital-twist/