はじめに
巨大駅を使ったことがある人なら、一度はこんな経験があると思います。
- 改札は出られたのに、その先で迷う
- 案内板を見ても「本当に合っているか」確信が持てない
- Googleマップを開いても、駅構内ではほぼ役に立たない
特に新宿駅のような巨大駅では、
「どの出口から出ればいいか分からない」こと自体がストレスになります。
この問題を、地図や方角ではなく
人間の直感に合った方法で解決したいと思い、
駅内出口案内アプリ Dexit を個人開発しました。
※ 本アプリは、駅構内で歩きながら使うことを前提に、スマートフォン向けに設計しています。
👉 アプリはこちら
https://dexit-mauve.vercel.app/
なぜ作ったのか
駅で迷う理由を整理すると、
「情報が足りない」ことよりも、
情報が抽象的すぎることが原因だと感じました。
- 出口番号
- 方角
- 距離
- 地図
これらは論理的には正しいですが、
現実の景色と結びつかないため判断に迷いが生まれます。
一方、人間は本来、
「この景色になったら、ここだ」
という 視覚的な一致 で判断するのが得意です。
そこで、
- 読ませない
- 考えさせない
- 迷わせない
出口案内を作ろう、というのが出発点でした。
そのため、あらかじめ決められた目的地に限らず、
ユーザー自身が「今向かいたい場所」を起点に案内できる設計を目指しました。
コンセプト
Dexitのコンセプトはシンプルです。
写真と最小限の文章で、
「出るべき改札」から「最適な出口」までを
一気通貫で案内すること
ユーザーはまず、行きたい目的地を選びます。
すると、
- 出るべき改札
- 改札を出た直後の景色
- 改札から出口までの道中
- 出口付近の景色
が、写真を中心に順番に表示されます。
文章は判断の補助として最小限にし、
地図・距離・方角といった抽象情報には頼りません。
ユーザーは
画面の写真と実際の景色を照らし合わせながら進むだけで、
自然に出口まで辿り着ける設計にしています。
どう解決するか
Dexitは、駅構内の案内を次のように整理しました。
- ユーザーが、駅周辺の任意の目的地を選ぶ
- その目的地に対して
- 出るべき改札
- 最適な出口
- 改札から出口までの道中
だけに情報を絞る
案内の主役は写真です。
- 改札直後に見る景色
- 道中で目印になる景色
- 出口直前の景色
を順に提示することで、
- 立ち止まらない
- 引き返さない
- 「合っているか不安」にならない
状態を作ります。
実際の画面について
ホーム画面
検索画面
道案内画面
動画
※ 本来は実際の操作動画を掲載する予定ですが、現在準備中のため後日追加します。
MVPについて
今回のMVPでは、以下の状態をゴールに設定しました。
JR新宿駅を利用した人が、
自分の行きたい目的地を選ぶだけで、
出るべき改札から最適な出口までを
写真と最小限の文章だけを頼りに、
迷わず到達できる状態
MVPの条件は以下です。
- 対応駅は新宿駅のみ
- 目的地は主要なものに限定
- ただし
- 目的地の追加
- 他駅への展開
- ユーザーが任意の目的地を選べる構造
を前提とした設計にする
「作り切れる範囲」と「拡張可能性」の両立を意識しました。
※ MVPでは、駅構内での実利用を想定し、スマートフォンでの使用体験を最優先しています。
差別化ポイント
既存の案内手段との違いは明確です。
-
Googleマップや駅アプリ
→ 地図・文字・方向に依存 -
Dexit
→ 写真による視覚的な一致で判断
つまり、
- 検索しない
- 読まない
- 考えない
一瞬で「これだ」と分かる体験を重視しています。
想定ユーザー
- 巨大駅をたまに使う人
- 地方・海外から来た人
- 旅行者・観光客
- 地図が苦手な人
- 急いでいる人
- 駅で迷うのがストレスな人
学び・気づき
1. 機能を足すより、削る方が難しい
最初は、
- ルート表示
- 現在地表示
- 方角ナビ
なども検討しました。
しかし検討するほど、
それは本当に「出口判断」に必要か？
という疑問が生まれました。
最終的に
出口判断に不要な要素はすべて削る
という判断をしたことで、コンセプトが明確になりました。
2. UXは「正しさ」より「確信」
地図や方角は論理的に正しいですが、
ユーザーが求めているのは 確信 です。
- 今の行動が合っているか
- 迷っていないか
写真による案内は、この点で非常に強いと感じました。
3. 個人開発でも「使われる前提」で考えると設計が変わる
将来の展開を意識したことで、
- データ構造
- 駅・出口の拡張性
- UIの汎用性
を最初から考えるようになりました。
単なるデモではなく、
プロダクトとして設計できたのは大きな学びです。
4. SEOを前提にNext.jsを選択した理由
今回のDexitは、アプリとしての体験だけでなく、
「検索から使われること」も重要だと考えました。
巨大駅で迷う体験は、
・新宿 駅 出口
・新宿 駅 〇〇 行き方
のように、検索から解決されるケースが非常に多いためです。
そのため、初期段階からSEOを意識し、
サーバーサイドレンダリングや静的生成に強いNext.jsを採用しました。
単なるSPAではなく、
「検索 → ページ閲覧 → そのまま案内に使える」
という導線を作ることで、
迷っている瞬間に自然と届くプロダクトを目指しています。
今後の展望
今後は以下を検討しています。
- 対応駅の拡大
- 多言語対応（旅行者向け）
- 駅周辺施設・店舗との連携
- 鉄道会社・商業施設向けのB2B提供
- 駅内動線データの活用
- ユーザーが自由に目的地を指定できる仕組みの拡充
Dexitは ユーザー数が価値になるタイプのプロダクト なので、
まずは「迷わない体験」をどこまで磨けるかに集中したいと考えています。
使用技術
- Next.js
- TypeScript
- Tailwind CSS
- Turbopack
- Vercel
- Vitest
- React
おわりに
駅で迷う体験は、小さいですが確実にストレスです。
Dexitはそのストレスを、
「考えなくていい体験」 に置き換えることを目指しました。
個人開発ではありますが、
UX・設計・拡張性まで含めて多くの学びがありました。
同じように「日常の小さな不便」をテーマに
個人開発している方の参考になれば嬉しいです。