【個人開発】メンタルヘルス VS メンタルヘルスマネジメント！【IKEMENTAL】作成しました。

はじめに

皆さん、笑って働けていますか？

昨今、組織内のメンタルヘルスの問題は増加の一途を辿っています。

私が前職で労務を担当していた際も改善の糸口が見えず頭を悩ませていました。
ハラスメントを行ってしまった社員と被害にあった社員の言い分を聞くに、単に個人間の問題だけでなく、企業風土や社内教育、業務形態など様々な問題が絡んでいたからです。
この問題を解決するためには社員一人一人が適切な知識と指導方法、自身をストレスから守る術を身につける必要があると感じました。

そこで今回、そんな私の経験もふまえメンタルヘルスマネジメントを知り、組織全体でメンタルヘルスに立ち向かう意識を作るアプリを作成しました。

【今回作成したサービス】
https://www.ikemental.com
(✴︎PC専用アプリとなっております)

【Twitterアカウント】
https://twitter.com/kosuke54177851

サービス概要

メンタルヘルスマネジメントをゲーム感覚で体感しながら出世街道を駆け上がり社長を目指す「IKEMENTAL」(イケメンタル)を作りました！

アプリの構成・遊び方

#####１、トップページ
シンプルでポップなデザインで全体を統一しました。

#####２、チュートリアル
ログインせずに操作や機能の説明をうけることができます。
最後まで確認して是非！本編でも遊んでみてください。

#####３、本編
ログインするとゲームが始まります。
新入社員編から経験値とメンタル値をコントロールしながら役職を上げていきましょう！

#####4、遊び方
１、チュートリアルで遊び方と機能を確認
２、ユーザー作成、ログイン
３、クイズに答えて経験値を上げ、昇進を目指す！(全3ステージ)

以上！笑
あまり操作や設定に凝りすぎると操作がめんどくさくなってしまうと思いシンプルでわかりやすいアプリを目指しました！

#こだわった点

#####１、メンタルゲージと経験値ゲージ
問題をスタートするとメンタルゲージが減り、回答によって経験値が増加します。
自分の回答の選択が蓄積していく感覚が視覚的に認識できるようchart.jsとJqueryを用いて非同期で実装してみました。
コントローラー側で保存しjs側でフロントの処理を同時に行うことで誤差が生じないように実装することに苦戦しましたが上手く実装することができました。
一応、SPAを意識しましたが要所でリロードすることで差が生じないようにしています。

#####２、回答によって変わるキャラクターと吹き出し
あなたの回答が人間の心にどういう影響を与えるかをイラストで表しました。
ゲーム性を持たせるためにわかりやすく楽しい雰囲気を目指しました。
jQueryで回答がクリックされると同時に様々な機能が同時に発火するようロジックを組みました。
当初は700行近くコードを書いていたのですがリファクタリングしてなんとか100行まで削ることができたので今後も学習を重ねながらリファクタリングに努めていこうと思います！

・ メンタルヘルスマネジメントに即した問題構成

メンタルヘルスマネジメントは大きく二つの分野で構成されます。

Self Care :自身のストレスケア
Line Care :部下や組織のメンタルヘルスマネジメントを行う

このアプリではこの二つの分野のクイズを解きながらクリアを目指す仕様になっています。

#####１、Self Care
メンタルゲージが一定数以上減るとタスクが行えなくなるので回復タスクで回復します。
現実でもストレスが溜まった時は休んだり、リフレッシュしてうまく付き合っていかなくてはなりません。
このアプリでもその状況に即した実装にしました！

#####2、Line Care
新入社員編では簡単なマネジメントと基礎知識を解いていただきます。
役職が上がると問題の難易度や部下の教育面でのマネジメントの問題が中心に出題されます。
現在、部下を持っていない方も将来もった時のことを想像しながら解いてみましょう。

使用技術

#####・ バックグランド　

Ruby
Rails
JavaScript

#####・ 主なgem

sorcery
seed-fu
chart-js-rails
dotenv-rails
enum-help
meta-tags
bullet
rubocop

#####・ テスト

Rspec

######・ フロントライブラリ

jQuery
slick.js
chart.js

#####・ ストレージサービス

ActiveStorage

今後の実装、改善したいこと

####・ 改善面

#####chart.jsの非同期処理の改善
現在、問題を解き昇進したタイミングでモーダルが表示されるのですが、モーダルを閉じた直後に問題の続きを行うと経験値のゲージが変動しないようになっています。
ユーザーファーストで使っていて楽しいサービスを目指しているので改善し、常にゲージに反映されるよう実装しようと思っています。

####・ 実装面

SNSログイン機能
メンタルヘルスマネジメント問題の充実化
全問題の回答表示画面

#終わりに

初めて個人サービスをポートフォリオとして作ってみて詰まったところや自分の知識の浅さを痛感した点など様々な発見がありました。
今後も何らかのかたちでアウトプットしていければと思います。
メンタルヘルスは社会問題であり、一長一短で解決する問題ではないですが少しでも笑って元気に働ける人が増える一助になればと思います！
よかったら遊んでみてください！
https://www.ikemental.com
最後まで目を通していただきありがとうございました！