要約
この記事は、大学生活で直面した問題、教室迷子を解決するために作成したアプリの紹介記事です。専門的すぎる内容は省いて、新しい価値・機能についてジェネラルに書いていきます。
対象読者
- 個人開発のアイデア出しや、UI/UXに興味がある人
はじめに
こんにちは。私です。
Qiitaの記事は初めて書くので名声もなにもまだないですが、我ながら良いアプリができたので、今回はその概要とこだわりを紹介していければと思います。
初めての大学生活と課題
今年の春、初めて大学生になって右も左もわからない環境に放り出されました。あれやこれやと覚えないといけないことがあって、学校の資料もちょっとわかりづらい。その中でも特に苦労したことが、教室の場所を調べることでした。いきなり「○○棟7号館の71AB室」と言われてもどこ？って感じです。解決手段を色々模索したことはあるのですが、
- 方法1 大学HPのフロアガイド
＋すべての建物情報が正確に載っている
ー教室の検索機能が無くて探しにくい - 方法2 有志の方が作ったルート案内アプリ
＋検索機能がある、ルート案内機能があり建物との位置関係がわかりやすい
ー具体的な教室の位置までは案内してくれない。
...と、かゆいところの周囲2cmをかいている感覚。
そこで、私はこの問題に対する新しい解決手段の必要性を感じました。教室を検索出来て、教室までのルートが案内されて、かつ見た目が直観的でわかりやすいアプリ。そんなアプリを実際に作ってみましたというのが本題になります。
アプリの内容
概要
改めて今回作成したものは、教室までのルート案内アプリです。
教室を検索するー＞ルート案内が始まる
というシンプルな内容になっています。
↓こちらから体験できます。↓
https://saidai-roomfinder.web.app/
ルート案内機能
- 教室の検索
目的の教室をキーワードで検索できて、建物のカテゴリごとに絞り込みもできます。教室が見つかったら選択するだけでルート案内が始まります。
- ルート案内
建物入口から教室までの最短ルートを矢印のアニメーションで教えてくれます。直観的な操作で階層を切り替えたりマップを動かしたりできます。
入口を変えたり、案内先の教室を変えたりもこの画面で完結します。
編集機能
フロアマップのデータを作成できる、管理者専用のモードがあります。一般に公開するものではないものの、データを簡単にかつ素早く作成するために用意しています。
こだわり
エレベーター・階段の選択
バリアフリーな建物のルート案内をするならばと、上下の移動手段としてエレベーターを使用するか、階段を使用するか、はたまた両方かを選べるようにしています。バリアフリー関係なく、一定の需要もありそうですし。
経路表示のアニメーション
ただ矢印の表示を置いておくだけだと移動方向がわかりにくいと感じたので、動きをつけています。画像ではなくアプリだからこそ搭載できる機能ですね。
カラーパレットの設定
ルート案内に関する機能がたくさんあると、どの項目に注目すべきかわからない...という問題を解決するために、カラーパレット（配色）は慎重に決定しました。背景と文字のコントラストの強さなどでどこが重要かを示しています。
パフォーマンス設定
せっかく便利アプリができたのに、アプリがカクカクすぎて使えないと意味がないので、アプリの軽量化に力を入れています。パフォーマンスの設定項目を追加したり、詳細は省きますが、技術的な面で無駄を省いたりしています。
感想
今回このアプリの制作をすることで、色々学びを得られたと思います。プログラミングはもちろんですけど、課題を解決するにあたって、どんな方向性の"こだわり"が効果的に作用するのか。ただその場で思いついては作ってみて、いらなそうであれば消して作り直すという無駄の多い開発でしたが、開発コストと需要、画面の情報量、配色・デザインなど、少なくとも着目すべき点は明らかになった気がしますね。
仕様書を作る時点で200点満点の設計ができるのなら関係ない話ですが、私のように試行錯誤が必要な人間であれば、自分のこだわりを見せる、力を入れる方向性や指針があるとよいのではないでしょうか。
そうすれば、よくわからないヘンテコ要素を追加することや、自身の類まれなる芸術センスを発揮することも減る...はずです。