会員コミュニティサイト

※個人情報が含まれるため、一部加工をしています。

トップページ

会員が動画を投稿できます。
ストレージを圧迫しないように、動画はVimeoにアップロード・取得しています。

メンバー管理ページ

各参加グループの管理者が、メンバーの追加・編集・削除ができます。
ページ遷移をせずにメンバー編集をできるようにしたことで、操作へのストレスを軽減しました。編集・削除の際は、確認ダイアログが表示されるので、誤編集も防げます。

運営事務局管理ページ

「事務局からのお知らせ」「参加会社」等の管理ができます。

ログイン・マイページ

ログインページには、パスワード変更機能も付与しました。
マイページでは、プロフィールや会社の情報を編集できます。こちらも、画面遷移せず、編集を可能にしました。

会員コミュニティサイト

Site Design / adobe XD / Photoshop
Cording / HTML / CSS / JavaScript
React / Material-UI
Firebase / Realtime Database / Storage / Authentication / Functions
Vimeo

会社のブランドカラーをもとに、ネイビーとオレンジで色をまとめました。また利用者の年齢が幅広く、60歳を超える方もいるので、ボタンはシンプルにして押しやすく、細かい説明も記載して、使いやすいように工夫しました。

利用者は、携帯で利用することが多いと想定して、モバイルファースト・レスポンシブに構築しています。

画面遷移を少なくしたほうが、利用者のストレスが軽減されるので、不要な画面遷移は極力削りました。

反省点は、 Realtime Databaseを利用したことです。速さを重視してDBを選定しましたが、複数機能を持つサイトは、Firestoreのほうが管理しやすいと感じています。