/pre-03

SINKEN

Primary LanguageVue

image

P2HACKS2023 アピールシート

プロダクト名

Webアプリケーション「ひんやりあるばむ」

コンセプト

ひんやりを共有して函館を盛り上げる。
「ひんやり」それは気持ちのいい涼しさ。誰もが体験したい「ひんやり」を共有させ、函館を盛り上げる。

対象ユーザ

函館市民、函館に来た観光客、ひんやりを求める人。
具体的なペルソナとしては若い女性をターゲットとし、しろくまの育成を用いたゲーミフィケーションを実装した。

利用の流れ

URLからWebアプリケーションにアクセスします。（ https://hinnyari-album.web.app/ ）
すると、今までの利用者が投稿した「ひんやり」に関する飲食物、場所などについての情報を閲覧し、ひんやり具合について評価することができます。
もし「ひんやり」を投稿したい場合は「ひんやりあるばむ」にログインする必要があります。
もし初めてログインをする場合はアカウントを新規作成をしていただきます。
アカウントはユーザネームとパスワードを利用者ご自身で設定してください。
Googleアカウントからも登録することができます。
既に作成している場合はログインを選択します。
もちろんGoogleアカウントでのログインも可能です。

推しポイント

テーマ

ひんやりとは主に清潔感のある涼しさ、清涼な、などのようにプラスの意味で涼しい場合に用いられる言葉です。
つまり、真に気持ちのいい涼しさを得るには心地の良い暖かさ、「ほっこり」した状態から冷やすのが一番の「ひんやり」となるのではと私たちは考えました。
この「ひんやりあるばむ」はそれを実現します。「ひんやりあるばむ」は主に二つの使い方があります。
一つは自ら見つけた「ひんやり」をアルバムとして登録すること。もう一つは他の人が見つけた「ひんやり」の情報をアルバムとして閲覧することです。
ただ涼しい情報を共有するだけならばX（旧：twitter）、涼しい飲食物を知りたいだけならば口コミがあります。
しかし「ひんやりあるばむ」で、「ひんやり」に触れた人のアルバムを見ると、心が少し「ほっこり」します。
さらに、実際にそのアルバムに書かれた「ひんやり」を体験しに行くことで気持ちのいい涼しさ、真の「ひんやり」を体験することができるのです。

技術面

Webアプリとして開発したことにより、インストールの必要がないことや、様々な端末で利用することができます。
SPAで作成しているため、ページ遷移が高速に行われUXが向上します。
「ひんやり」の追加と削除を常時監視しているため、ページを再読み込みしなくてもリアルタイムで「ひんやり」が共有されます。

スクリーンショット(任意)

  • トップページ
    スクリーンショット 2023-12-17 104606
  • マイページ
    image
  • ゲームページ
    image
  • ログインページ
    image
  • サインインページ
    image
  • お問い合わせページ
    スクリーンショット 2023-12-17 105312
  • 利用規約ページ
    image
  • UML図
    ひんやりあるばむUML図
  • お問い合わせ後のメール
    image

開発体制

役割分担

  • リーダー、フロント、マネジメント担当：b1022069 金子康一
    • 副リーダー、バックエンド担当：b1022076 河西叶大
    • デザイン担当：b1022173 成田伊吹
    • フロント担当：b1022024 井田和樹
    • フロント担当：b1022054 大久匠士

開発における工夫した点

事前に全員のスキルセットと、今まで自身が行ってきたことを確認した。
その後p2hacksが始まる前の1週間で疑似ハッカソンを行い、githubのチーム開発での使い方や、基本的なNuxtの書き方について確認をハッカソンで使えそうな技術についての検証を行った。
実際にP2HACKS2023が始まってからはお題が発表された後、最初にブレインストーミングを行い、KJ法によるクラスタリングを行い、そこからアコモデーション、インサイトと具体的に絞っていき制作物を決めた。
制作物が決まった後、ペルソナを設定し、要件定義を行った。
要件定義の結果、必要機能について洗い出し、それぞれ分担し、話し合いながらUML図を作成することで、全員がどんなものをどのように実装していくのかを細かく決め、認識を全員で共通化した。
それにより、開発していく中でメンバー間でのずれが起こらずに開発に集中することができた。 タスクを細かく分割し、マイルストーンを設定し、GitとDiscordを使い進捗状況の報告を徹底した。
その進捗状況を見てフォローができる場合はフォローをする心構えを事前に取り決めていた。
オンラインMTG、対面MTGの日時をあらかじめ決めておくことによって、さらに円滑に進捗状況を共有できるようにした。
開発では、スクラム開発風チケット駆動開発を行うことでタスクごとにチケットを切って効率的に開発を行うとともに、スクラム開発の企画・イテレーション・リリースを繰り返しタスクの進捗の見える化を行うことで、遅れているタスクを把握し、手の空いているメンバーにタスクを回し、マイルストーン通りに進めることができた。
また、issueをTwitter感覚で大量に書くことを意識し、少しでも開発に詰まりや問題が起きたら起きたことや解決方法について書き残すようにした。
また、githb Projectsを最大限活用し、タスクの進行状況の見える化を行った。

開発技術

利用したプログラミング言語

  • Vue3
  • SCSS
  • typescript
  • html

利用したフレームワーク・ライブラリ

  • Nuxt3
  • Vuetify
  • Font Awesome
  • emailJS
  • nuxt-rating
  • Firebase Cloud Firestore
  • Firebase Storage
  • Google Maps Platform

その他開発に使用したツール・サービス

  • Figma
  • Visual Studio Code
  • Lucid
  • Git
  • GitHub
  • Miro
  • Discord
  • Googleドキュメント
  • MediBangPaintPro
  • GIMP
  • PowerPoint