Works / バイタル記録ノート

バイタル記録ノート

血圧・脈拍・体重・体温をスマートフォンで記録し、履歴を振り返るための軽量Webアプリです。

毎日続けやすいよう、「記録する」と「見る」の画面をシンプルに分けています。

担当
個人制作(企画・画面構成・UIデザイン・コーディング)
技術
HTML / CSS / JavaScriptPWA(manifest / service worker)

画面イメージは制作時点のものです。クリックで拡大できます(+/−、または Ctrl+ホイール。Macは Command)。

課題

  1. 記録のしづらさ 紙だと字が読みにくく、あとから数値を追いづらい。
  2. きっかけ 手描きの推移では変化が伝わりにくく、母から印刷して医師に見せられるようにしてほしいと言われた。
  3. 目指したこと スマホで入力し、期間のまとめやチャート、PDFで状態を分かりやすく確認できるようにする。
記録するクリックで拡大
バイタル記録ノートの記録画面。血圧と脈拍を入力するスマホUI。
カレンダーで振り返るクリックで拡大
カレンダーで日付を選び、その日の記録を確認する画面。

工夫した点

  • 「記録する/見る」の2画面に絞り、操作を単純にする
  • スマホ表示を前提に、文字を大きめ・余白広め・ボタンを押しやすくし、高齢の方でも入力しやすいレイアウトにする
  • Chromeで開いて、スマートフォンにアプリとしてインストールできるようにする(PWA
  • CSVでバックアップ/復元できるほか、必要なときはバックアップ画面から全記録を削除できる
  • 選択した期間のまとめ・グラフ・測定一覧をPDFとして保存・印刷できる
  • 入力した数値から注意・確認の目安を表示し、必要に応じて受診を検討するよう促す

使ってみる

Chromeで開き、必要ならインストール。動作確認にはデモ用CSVも使えます。

  1. 試す アプリを開き、必要ならインストールして動作を確認します。
  2. リセットする 確認後は、バックアップ画面から記録を削除できます。
  3. 自分用に使う そのあと、自分や家族の記録用として使い始められます。

同種のアプリ制作やご相談があれば、 Contact からお気軽にご連絡ください。

グラフで推移を確認クリックで拡大
血圧・脈拍・体重の推移グラフ画面。

← Works一覧