PROJECT 01 / MENTAL HEALTH CHECK

気分の波を、
自分のペースで記録する。

復職支援(リワーク)プログラムに通っていたとき、毎日紙に書いていた 体調管理シートと活動記録表を、スマホからでも気軽につけられるように Webアプリにしました。その日の気分や出来事を記録して、あとから グラフで振り返れるようにしています。

STATUS
Demo available
PERIOD
2023年6月〜
ROLE
個人開発(設計・実装・運用すべて担当)
デモアカウント
メール: test@ll-bear.net / パスワード: o9rgt3Er
サンプルデータが入っているので、そのままログインして触ってみてください。 もちろん新規登録して自分のデータで試すこともできます。
体調管理シートの履歴グラフ画面

体調管理シートの履歴グラフ(気分スコアと抑うつ・軽躁サインの推移を重ねて表示)

01 / BACKGROUND

課題設定

リワーク(復職支援)プログラムでは、その日の気分や体調を 「体調管理シート」「活動記録表」という紙のフォーマットに毎日記入する 習慣がありました。とても大事な記録なのですが、紙だとその場で すぐ書けなかったり、後から見返すのが面倒だったりします。 「もっと気軽に、スマホからでもサッと記録できたらいいのに」 というのが、そもそもの発想でした。

リワーク参加中は、コードを書く機会が減ってスキルが落ちる 不安もあったので、「実際に自分が使うもの」を題材に手を動かして みようと考えました。せっかく作るなら、同じように記録に苦労している 他の参加者の役にも立てたら、なお良いなと思っていました。

02 / ARCHITECTURE

設計・アーキテクチャ

バックエンド
Laravel9で構築。開発はDocker(Laravel Sail)上のMacOSで行い、 公開環境ではPHP8.1 + MariaDBの構成で動かしています。
データの持ち方
体調管理シートの回答と、活動記録表の時間帯データを、それぞれ日付ごとに 紐づけて保存。1日1件ずつ積み上がっていく構造にして、 月単位・期間単位でグラフや一覧に集計しやすくしています。
紙のフォーマットを再現した出力
「結果を出力する」を押すと、通っていたクリニックで使われていた 紙のフォーマットに近いレイアウトを別タブに表示。 そのまま印刷して、診察や面談に持っていけるようにしています。
カレンダーからの振り返り
入力済みの日付をカレンダー上でハイライトし、クリックするとその日の チェック結果とメモがまとめて表示されます。そこから体調管理シートや 活動記録表を直接編集し直すこともできます。
03 / TECHNICAL HIGHLIGHTS

技術的な工夫

01

一度書いたことは、次回から聞かない

抑うつ・軽躁のチェック項目は20問以上ありますが、内容が固定の項目は 一度入力すればその内容が保存され、次回からは入力不要(あとから変更も可能)。 毎日書くものだからこそ、入力の手間を最小限にしています。

02

1日1回までの入力に制限

その日のチェックを終えると「記入する」ボタンが押せなくなり、 翌日にまた押せるようになる仕組みにしています。 直したいときはカレンダーから該当日を選んで修正できます。

03

活動記録表の項目を自分好みにカスタマイズ

「睡眠」「食事」などデフォルトの6項目は名前を固定しつつ色だけ変更可能、 それに加えて「リワーク」のような項目を自由に追加できるようにしました。 追加した項目は、入力画面にもグラフの凡例にもそのまま反映されます。

04

気分スコアはスライダーでも数値でも

0〜120の気分スコアは、スライダーを直感的に動かしても、 数値を直接入力しても、どちらでも記録できるようにしています。 スコアの目安(「意欲的」「抑うつ・不安」など)も画面内に表示。

体調管理シートのチェック入力画面

抑うつ・軽躁サインのチェック入力画面

活動記録表の結果出力画面

活動記録表の結果出力(複数日をまとめて振り返り)

04 / IN PRACTICE

運用エピソード

作って終わりにせず、実際にクリニックのスタッフの方に相談し、 他のリワークプログラム参加者にも使ってもらえるよう公開環境を用意して、 しばらく運用していたことがあります(現在は停止中です)。

他の人にも使ってもらい、フィードバックをもらって改定していく工程は 個人開発では味わえない緊張感がありました。 デモ環境に用意しているアカウントも、当時のダミーデータをもとにしています。

05 / STACK

使用技術

Laravel 9 PHP 8.1 MariaDB Tailwind CSS Laravel Sail (Docker) AWS Lightsail X-Server
NEXT PROJECT
ブックマーク・認証情報管理アプリ
詳細を見る