Launched
LOFI WINDOWのアイコン

LOFI WINDOW

世界中のライブカメラ映像をLoFi音楽と一緒に楽しめるWebアプリ「LOFI WINDOW」を作りました。窓越しに世界を旅する感覚で作業・勉強・リラックスに使えます。ポモドーロ機能も実装で仕事や勉強にも使える。今ここにしかない景色を音と共に楽しめるハイパーローカルなLoFi体験

レビューする
Visit Product
プロダクトの感想・意見はこのエリアに表示されます
アイキャッチ画像

世界を窓越しに旅するWebアプリ「LOFI WINDOW」を作りました

どんなアプリか

LOFI WINDOWは、世界各地に設置されている24時間ライブカメラの映像を、LoFi音楽と組み合わせて楽しめるWebアプリです。日本の街角からナミブ砂漠まで、リアルタイムの景色を「窓越し」に眺めるような感覚で旅できます。

🔗

主な機能

  • 3Dインタラクティブ地球儀：Three.jsで描画した地球をぐるぐる回して目的地を選べる
  • 日本3Dマップ：47都道府県を立体地図でズームしながら探索
  • ポモドーロモード：お気に入りの景色を背景に作業セッションが回せる
  • アドベンチャーページ：街以外のユニークなライブカメラ（砂漠、自然系など）
  • ビジュアルエフェクト：VHSノイズ、CRTスキャンライン、クロマティック収差などで没入感を演出
  • i18n対応：日本語/英語をURLパス（/ja、/en）で切替

なぜ作ったのか

個人開発の孤独と「窓越しの景色」

カフェで作業しているとき、窓越しの景色にふと癒されることがあります。個人開発は孤独になりがちですが、街を行き交う人や景色を眺めていると、世界に溶け込んだような感覚になれる。あの感覚を、家にいても再現したかったんです。

宝の持ち腐れだったライブカメラ

世界中には24時間ライブカメラが無数にあって、「今この瞬間」の景色が無料で観られる。これって冷静に考えるとすごいことなのに、活用の仕組みが乏しくて宝の持ち腐れになっています。そこに、以前リリースした「VIBE MIX LAB」のLoFi曲繋ぎ知見を掛け合わせたら面白いんじゃないかと着想を得て生まれたのがLOFI WINDOWです。

ハイパーローカルなLoFi体験へ

LoFiは年々市場が拡大している一方、AI生成で似た映像と音が量産されてリスナーの飽きも見え始めています。LOFI WINDOWは「今ここにしかない景色」をライブで届けるので、二度と同じ瞬間がない。これは"ハイパーローカル"なデザインの一形態であり、次世代のLoFi体験のひとつの答えになり得ると考えています。

技術的に工夫したところ

1. Next.js 15 App Router × React 19の構成

フロントは Next.js 15（App Router）+ React 19 + TypeScript。Tailwind CSSでスタイリングし、Framer Motionでトランジションを統一しました。RSCとClient Componentの境界をスポット詳細・3Dビュー・LoFiプレイヤーで明確に切り分け、初期ロードを軽くしています。

2. Three.js + React Three Fiberによる3Dビジュアライゼーション

地球儀と日本立体地図はReact Three Fiber + Dreiで実装。緯度経度から3D空間上にスポットマーカーを配置し、カメラのインタラクションで都市にズームしていく導線を作りました。3Dを"派手な装飾"ではなく"探索の入口"として使っているのがポイントです。

3. middlewareでのi18nルーティングと301リダイレクト

middlewareで /en、/ja のロケールprefixをハンドリングし、Accept-Languageに依存しないURLベースの言語切替を実現しています。さらに旧仕様の /lofi/{country}/{city}/{location} パスを /spots/... に301リダイレクトしてSEOの被リンクを毀損しないようにしています。

4. ライブカメラ自動収集 & 埋め込み可否の自動検証

日本全国のライブカメラは camera-map.com をクローラで収集し、Playwrightのheadless Chromiumで「埋め込み禁止」「ご覧いただけません」エラーを検出する検証パイプラインを組んでいます。oEmbed + YouTubeのplayabilityStatus + headless実機チェックの三段構えで、リンク切れや非iframe対応動画を弾いています。

今後の展開

  • 掲載するライブカメラ件数の拡充（まずは日本国内→世界主要都市）
  • ライブカメラを自動巡回できる"旅モード"
  • VIBE MIX LABとの連動でLoFi楽曲レイヤーの差し替え
  • ユーザーカスタマイズ要素の追加
  • SNSでの面白ライブカメラ発信

FAQ

Q1. 無料で使えますか？

はい、現時点で全機能無料で利用できます。アカウント登録も不要です。

Q2. スマホからも使えますか？

基本的にPCブラウザの使用を想定としつつPC・タブレット・スマートフォンでレスポンシブに動作します。3Dマップはタッチ操作にも対応しています。

Q3. ライブカメラの映像はどこから来ているのですか？

公開されているYouTubeライブ配信を中心に、埋め込み許可されている映像のみを掲載しています。配信側で停止・削除された場合は自動検証スクリプトで検出して除外しています。

Q4. オフラインでも使えますか？

ライブ配信を扱うサービスのため、インターネット接続が必須です。LoFi音楽もストリーミング再生になります。

Q5. 自分の街のライブカメラを追加してほしい場合は？

SNS（X: @akifumi_ai）でリクエストいただければ検討します。掲載基準は「24時間配信・iframe埋め込み許可・公序良俗に反しない」ことです。

Q6. ポモドーロの時間設定はカスタムできますか？

現在はカスタムで設定できます

Q7. 個人開発ですか？

はい、すべて一人で企画・設計・実装・運用しています。世界一周した経験や旅行系アプリを開発している流れで世界を旅できるようなアプリを作れたら良いなと思いLOFI WINDOWを作りました。SNSでも開発の進捗を発信しているのでよかったら覗いてみてください。

Explore More
関連記事はありません。
Trends
  • akifumi | 一人で世界を相手にアプリを届けるソロプレナー。これまでフロントエンドエンジニアとして業務委託を続けながら、10年前から「自分のサービスを作りたい」と思い続けるも誰かの役に立つレベルまでいかない中、AIの力を借りて世界中の人の役に立つサービス（アプリ）を作ろうと仕事もお休みして奮闘中です キャッチアップのために作ったWebアプリ、自分が欲しいだけのアプリ…いくつも作っては誰にも使われず、自己満足で終わった経験を繰り返してきました。 そのたびに学び、反省し、「次こそは自分が本気で欲しい、そして多くの人が本当に使いたいと思えるものを作ろう」と決意。そこからマーケティングを最重視するスタイルにシフトしました。今は自分の実体験から生まれた課題を解決するアプリだけを作っています。 ・発音がそのまま翻訳できる「SayScan」 ・紙の本に直接メモできる「BookLeaf」 ・撮った動画・音声をAIが自動で音楽MIXしてくれる「VIBE MIX LAB」 企画・設計・開発・デザイン・マーケティング・改善まですべて一人で。 まだまだ試行錯誤の途中ですが、「一人でもちゃんと使われるプロダクトを世界に届けられる」を証明したくて、今日もコードを書き続けています。→ Twitter: https://x.com/akifumi_ai 使ってもらえたら、それだけで報われます。よろしくお願いします！
  • 技術