RadarScope Calendar

予定をレーダースコープ上の光点として表示するカレンダーアプリ。

「今どれくらい先に予定が迫っているか」を一目で捉えられるように、レーダースコープの見た目でカレンダーを表示するWebアプリです。予定を中心からの距離で示す光点として描画し、ホバーで内容をポップアップ表示、一覧表示や設定パネルも用意しています。Next.js（App Router）とTypeScriptで実装し、予定と設定はlocalStorageに保存するため、ログインもサーバーも不要です。

使用技術

Next.js
TypeScript
React
localStorage

担当

コンセプト設計
レーダーUI実装
予定管理機能の実装

成果

wakame.dev 配下で公開中
レーダー表示・予定登録・設定保存までを実装
Next.jsの静的書き出しで、サーバーもログインも不要

制作期間

公開中

ステータス

公開中

設計上のポイントと利用の条件

予定までの時間をレーダー上の距離へ置き換えることが、このアプリの表現上の特徴です。通常の月間カレンダーでは日付の並びを追いますが、こちらは「近づいている予定」を光点の位置から眺めます。ホバー表示と一覧を併用することで、印象だけでなく日時や内容も確かめられます。

保存先をlocalStorageにすることで、ログインや予定保存用サーバーを必要としない静的な公開形態になっています。一方、別の端末への同期やブラウザデータ削除からの復元は、そのままでは実現しません。表示の実験としての面白さと、重要な予定を扱う道具として必要な保存範囲を分けて理解できる構成です。