今回私が開発したwebサービス「行きたいとこリスト」を紹介します。
概要
サービス概要
行きたい場所のリストをTwitterで共有し、一緒に行く友人を探せるwebサービスです。
上の画像のようなリストを作成して共有することが出来ます。リストを見た人は、いいねボタンからTwitterのDMにリアクションを送信することが出来ます。
背景
コロナ禍の影響から、大学での活動は大きく制限されてしまいました。授業はオンラインになり、サークル活動も制限されました。特に新入生はその影響を大きく受け、大学での交友を広げられずに失望感を抱えていました。
そんな大学生を少しでも助けたいと思い、今回このようなサービスを企画するに至りました。
目的
大学での組織的な活動は制限されてしまうため、個人同士が大学での知り合いをカジュアルに遊びに誘えるような環境をつくることを目的としました。
相手の行きたい場所がわかれば、仲良くなりたい人を遊びに誘うのがとても簡単になると考え、「行きたいとこリスト」を考案しました。
今後の展望
おすすめスポット機能
行きたい場所が思いつかない！という声を多く頂いています。そう思います。
google mapから周辺の人気スポットや、その人が興味ありそうな場所を取得、表示して、簡単にリストに追加していけるようにしたいと思っています。乞うご期待。
フォロー・DM機能
現状Twitter上でリストの共有、リアクションを行っているものを、「行きたいとこリスト」内で完結できるようにします。instagramしか使ってない、LINEのみ、という人とも一緒に使えるようにするため、Twitterに依存しないシステムに徐々に変更していきます。
行った場所の記録としてを残せるようにする
現状、達成した場所はチェックをつけて下にソートしていきます。
これを、行った時の写真やコメントを残せるようにし、思い出を振り返られるようにしていきたいと考えています。
レビューとして他の人も見やすくすると、よりサービスの質を高めていけると考えます。
一つのSNSとして独立させる
過去を共有するfacebookやinstagram、今を共有するTwitter。「行きたいとこリスト」は未来を共有する新しいSNSとしてのポテンシャルがあると思っています。
これから「行きたいとこリスト」がどこまで行けるのか。楽しみにしていてください。
制作情報
基本情報
リンク : 行きたいとこリスト ※スマホのみ対応です。
ソースコード : 佐々木かなるのgithubページ
公開日 : 2022 / 1 / 29
制作期間 : 2ヶ月 (初回リリースまで、アップデートは含まず)
初期費用 : 0円 ランニングコスト : 136円 / 月 ~ (サーバー代従量課金 ドメイン代136円)
今のところアクセス少ないのでサーバー代0円です。嬉しいような悲しいような。
構成要素
- ログイン機能
- リスト作成・編集機能
- Tweet共有機能
- リスト閲覧機能
- TwitterDMへのリアクション送信機能
- ヘルプページ
とりあえず最小構成でこのようになりました。
作業範囲
- 企画提案
- UIデザイン
- 開発全般
- 運用
- 宣伝
ロゴのみ外注しています。
制作環境
- サーバー : firebase v9
- DB : cloud firestore
- ログイン認証 : firebase auth
使用ツール
- デザイン : adobe XD
- サーバーサイド処理 : firebase v9
- バンドル : webpack5
- ソースコード管理 : git github
- デプロイ : firebase tools
設計
バックエンド
制作期間をできるだけ短く抑えたかったため、firebaseでホスティング、データベース、ログイン認証処理を実装しました。
firebaseはアクセスが増えた場合のスケールも自動なので楽ですね。
フロントエンド
ライブラリは全く使っていません。生のjavascriptのみで開発しています。iphoneアプリ風の削除、並べ替えUIのアニメーションを実装にこだわったのでリアルタイムアニメーションに弱いReact等は使わずに開発しました。
ブラウザでここまで高級なUIを実装しているサイトは正直見たことないです。ぜひ触ってみて欲しいです。感動します。
ツール
gitとgithubでソースコードを管理。developブランチで開発し、mainブランチを本番と同一のコードになるように作業しています。
ユーザー体験
初利用者の場合
- Twitterで共有された友達の行きたいとこリストを見にいく
- 一緒に行きたい場所を見つける
- いいねボタンからTwitterDMにリアクションを送る
- TwitterDMでやりとりし、予定を合わせて遊びに行く
登録する流れ
- 友達のリスト閲覧時に画面に表示されている”リスト作成”ボタンを押し、マイページに遷移
- Twitterログイン
- 行きたい場所を登録する
- Twitterでリストを共有
継続利用者の場合
- Twitterのリンクからマイページにアクセス
- 編集ボタンを押し、行った場所にチェック
- 新しいリストを追加
- Tweetで更新を共有
画面構成
- 閲覧ページ(リスト閲覧、TwitterDMへのリアクション送信)
- マイページ (ログイン、リス編集、Tweet共有)
デザイン
お願い
多くの人が使ってくれる事で初めてこのサービスの目的である、カジュアルに遊びに誘えるような環境作りを達成する事が出来ます。ぜひあなたの行きたいとこリストをTwitterで共有してみてください。
また、サービスを改善していくために、たくさんの意見を必要としています。欲しい機能、困りごとなど、なんでも結構ですので下の質問箱までお寄せください。
では、ここまで読んで頂いてありがとうございました。今後とも「行きたいとこリスト」をよろしくお願いいたします。