本文へ
ハクソク

世界を動かす技術を、日本語で。

Show HN: Lofi Cities – ブラウザ生成のローファイ音楽と共に楽しむピクセルアートの都市の夜

元記事: 原文(loficities.com)

概要

Lofi Cities は、ピクセルアートの都市夜景と無限生成される lofi音楽 を組み合わせた無料ウェブアプリ。 インストール不要・アカウント不要・広告なし で、PCやスマホ、タブレットで利用可能。 各都市ごとに異なる 天候・ランドマーク・環境音 が楽しめ、学習や作業、リラックスの背景に最適。 チャットや絵文字、ビルボード広告 などのインタラクティブ機能も搭載。 音楽は Web Audio API でリアルタイム生成され、スタイルや気分、都市音を自由にカスタマイズ可能。

Lofi Citiesとは

  • Lofi Cities は、世界各都市の夜景ピクセルアニメーションと 無限lofiミュージック を組み合わせたウェブアプリ
  • インストール・アカウント・ポップアップ不要、完全無料で利用可能
  • PC・スマホ・タブレット対応、どこでも利用できる利便性
  • 各都市は 480×270ピクセル の4分間ループアニメーションで、 天候・ランドマーク・環境音 が都市ごとに異なる
  • lofi音楽 はリアルタイムで生成され、毎回新しいトラックが流れる

主な機能

  • 都市選択 :Paris、Tokyo、New York、Londonなど、世界15都市の夜景から選択可能
  • 天候変更 :雨、雪、秋の落葉、晴れなど、都市ごとに天候を自由に切替
  • 環境音ミキサー :雨音や交通音、鐘の音など、各都市の環境音を個別に調整可能
  • Vibeパネル :Jazzhop、Piano、Ambient、Bossa、Synth、House、Guitar、Sad、Medievalなど、音楽スタイルを選択
    • chill/アップビート や フルバンド/ドラムなし/コードのみ も選択可
  • トラックタイトル は都市にちなんだ名前、 都市音と音楽の音量スライダー でバランス調整
  • チャット機能 :同じ都市の利用者同士で短文メッセージや絵文字で交流可能
    • ランダムな2単語ネーム で匿名性確保、リンク不可、不要なユーザーは非表示可能
  • ビルボード広告 :各都市に架空広告が表示、希望すれば自分のビジネス広告も掲載可能

最新アップデート

  • 2023年9月28日 :チャットに絵文字追加、コロン+名前で絵文字検索・挿入可能(例::coffee:)
  • 2023年9月28日 :都市ごとのチャット機能強化、直近1時間の短文メッセージを表示
  • 2023年9月28日 :都市選択画面で、現在利用者数が多い都市を上部に表示

収録都市例と特徴

  • Paris :屋根裏部屋の雨、遠くにEiffel Towerの輝き
  • Tokyo :Tokyo Towerとネオン、桜、電車
  • New York :Brooklyn Bridgeの雪夜景、Manhattanのスカイライン
  • London :Thamesの霧、ParliamentやLondon Eye
  • Rio de Janeiro :Copacabanaのバルコニー、花火とChrist the Redeemer
  • Istanbul :Bosphorusの夜、フェリーとカモメ
  • Hong Kong :Victoria Harbourの光景、フェリーやライトショー
  • Sydney :Jacarandaの咲く公園、Opera HouseとHarbour Bridge
  • San Francisco :Golden Gateの霧、ケーブルカー
  • Hamburg :Elbeの港、ElbphilharmonieやSpeicherstadt
  • Amsterdam :運河沿いの春夜、橋と家屋
  • Dubai :Burj Khalifaと噴水、カフェテラス
  • Madrid :Gran Víaの夏夜、メトロポリスビルとネオン
  • Rome :Colosseum近くの夏夜、トラットリアと流星
  • Prague :Charles Bridgeのランプ、城とトラム
  • Munich :Marienplatzのクリスマスマーケット、巨大なツリー

音楽生成の仕組み

  • Web Audio API により、コード進行・ドラム・ベース・メロディをリアルタイム合成
  • サンプルや録音音源は不使用、すべてブラウザ内で生成
  • Vibeパネル でスタイル選択、都市ごとに異なる環境音をミックス
  • 「Up next」リスト で次のトラックを事前選択可能
  • 都市音ミキサー で各環境音の音量を細かく調整
  • Weatherチップ で天候を変更、音やトラック名も連動

ショートカットキー

  • ←→/1–9/0 :都市切替
  • / :都市プレビューと検索
  • C :都市ツアー(自動切替)
  • W :天候変更
  • Space :再生/一時停止
  • N :次のトラック
  • Q :次のトラックリスト
  • A :都市音ミキサー
  • V :Vibe(スタイル・気分)変更
  • T :タイマー(ポモドーロ/スリープ)
  • G :Together(リアクション・ランタン)
  • L :ランタンを飛ばす
  • Enter :チャット
  • M :ミュート
  • F :フルスクリーン
  • P :ミニプレイヤー
  • H :インターフェース表示切替
  • S :現在のシーンをPNG保存
  • ? :ヘルプパネル表示

よくある質問

  • Lofi Citiesとは? 無料ウェブサイト(loficities.com)で、世界の都市夜景と無限生成lofi音楽、各都市の環境音を楽しめるサービス
  • 無料で使える? 完全無料、ダウンロード・アカウント不要、広告なし
  • 音楽の仕組みは? Web Audio APIでリアルタイム生成、サンプル不使用、毎回新しいトラック
  • すぐに音楽が流れない理由は? ブラウザの仕様で、ページ操作(クリック・キー入力)後に音楽開始
  • 作業や勉強のBGMに使える? フルスクリーンやミニプレイヤーで作業中のBGMに最適
  • 都市自動切替は可能? ツアーモードで5〜30分ごとに都市自動変更や、時差に合わせた夜景表示が可能
  • 天候や季節は変更できる? Weatherチップで変更可能、都市音も連動
  • 現在の利用者数は? 都市名下にリアルタイム表示、都市ごとの利用者数も確認可能
  • ポモドーロやスリープタイマーは? タイマー機能あり、集中や睡眠用に最適
  • OBS背景として使える? 専用URLでOBSに組み込み可能、インターフェース非表示・音声制御対応
  • スマホ・タブレット対応? 縦画面でもランドマークやビルボード表示、スワイプ操作対応
  • オフライン利用は? 一度オンラインで開けば、オフラインでも都市・音楽とも利用可能
  • 壁紙保存は? 保存ボタンまたはSキーで1080p PNGとして保存可能
  • ビジネス広告掲載は? 各都市のビルボードに自分のカフェやショップ広告を掲載可能

ビジネス向け広告掲載

  • 各都市のビルボード は架空広告が表示され、希望者は自身のビジネス広告を出稿可能
  • カフェ・ショップ・スタジオ等 の宣伝媒体として活用可能

ご質問や詳細な使い方は、 loficities.com 公式サイトをご参照ください。

提供: ハクソク · 要約更新:

AIによる日本語要約です。内容は原文とあわせてご確認ください。

Hacker Newsの議論を読む

Hackerたちの意見

すごくクールだね。ロサンゼルス、ケープタウン、フィレンツェ、カイロ、アテネ、バンクーバー、サンパウロも追加してほしいな。実際、AIを使ってリクエストに応じてどんな都市でも自動生成できるようにすればいいんじゃない?

└

ある程度はそうかもしれないけど、これはただ誰かがSeeddanceを使って最初と最後のフレームの動画ループを生成して終わりってわけじゃないよ。確実に手動でのキュレーションがあると思う。水の中を動いているボートみたいに、明らかにシーンに配置されているアセットもあるし。理論的には、どんな都市景観でも使えるアニメーションスプライト(鳥、人、車など)をすべて生成できるけど、それらのアセットを配置すべき「パス/ウェイポイント」を自動でセグメント化・検出するのは、かなり雑な見た目になりそうだね。

└

AIで街をあらかじめ作っておいて、ループを準備してから追加してるんだ。アプリはまだオンデマンドで街を生成できないけど、そのアイデアはいいね。

美しいし、すごくよくできてるね。多分、主なリクエストはもっと都市を増やしてほしいってことだと思うけど、ちょっと違う視点で言うと、もっといろんな景色も見てみたいな。同じ都市のセットで、パリのビューみたいにスタジオからの景色も見られたらいいな。オフィスからとか、カフェからとか。

└

室内の景色もロードマップに追加するね。カフェやアパートがあれば、各都市に違った雰囲気が出せると思う。

プロダクトハントの広告が没入感を壊してる感じがする。ほとんどの都市には広告があるのはわかってるけど、やっぱり広告なしのピクセルアートが好きだな。それに、現実的じゃないよね。ある風景では、看板が9階建てのビルより高いし。

└

それ自体はクールなものに、無理やり付け足した感じがする。ボードの角度を変えたり、ぼかしたり、色を暗くしたり、言語をローカライズしたりするだけでも、もっと馴染む感じになると思う。

└

これ言ったらバカみたいに聞こえるかもしれないけど、ディザリングの使い方がすごく「生成された」感じでカオスだよね。人間のピクセルアートは、各ピクセルの色や配置にすごくこだわるけど、理想的(でも必ずしも幾何学的ではない)な形に従うことが多い。こんなに雑なディザリングを見たのは数十年前、低色数の画像として写真をスキャンしてた頃以来だよ。それ自体の雰囲気はあるけど、冷たくて粗い感じだね。これらのアーティファクトは「リアル」な感じがするけど、その頃もやっぱり雑だった。

└

隠すオプションがあった方がいいのかな?それとも、ビルボード自体がもっとシーンに溶け込むべき?

└

どうでもいいよ。HNでは、たった1ピクセルずれてるだけで誰かが不満を言うことがあるけど、そんなの完全に小さいことだよ。もうやめなよ。

└

時々、プロダクトハントから「ここに広告を出す」っていう広告に切り替わって、次のような(適当な)テキストがポップアップで表示されることがある: > パリのビルボードにあなたのカフェ、ショップ、スタジオ、ブランドを載せてみませんか?手描きのピクセルアートスタイルで描かれ、音楽に合わせて勉強したり、仕事をしたり、リラックスしたりしている人々の中で光り輝くシーンです。これは情熱や善意から生まれたものじゃなくて、明らかにお金儲けのための取り組みだよね。アートでもないし。

ここには好きなところがたくさんあるけど、ちょっとAI生成っぽすぎるかな。東京と香港のピクセルアートは、ちゃんとした漢字や日本語の文字を使ってないし、非ピクセルUIの脈打つバッジも、ちょっと気を散らすAIっぽさがあるね。

Hacker Newsで議論の続きを見る