PortNavi

R

Student App

ReadHabit

読書の習慣化アプリ

制作者H・S

使用技術React,

アプリ種別 Webアプリ

ReadHabit

スクリーンショット

ReadHabit
ReadHabit

アプリ概要

読書を習慣化していきたいが、継続していくのが苦手。
既存のアプリでは、読書を記録するだけのものがほとんど
で、習慣、継続が可視化でき継続できていることがわかる
ものを自作したい。

主な機能

  • カレンダーヒートマップ
  •  日付のセルに色付けすることで継続を可視化
  • 記録数値の可視化
  •  これまで読んだページ数や時間の記録を可視化
  • 読書の記録・メモ
  •  読んだ本の感想やメモページ数を記録
  • タイマー機能
  •  時間を計測

こだわり・制作で意識したこと

❶カレンダーを見るだけで分かる習慣化

❷色の濃さでページ数(時間)を簡易的に把握

❸タイマーリングで残り時間を直観的に視認

上記から、見ただけで直感的に分かるUIにしました。

❶カレンダーライブラリの編集

❷コンポーネント設計

❸TailwindCSSの活用

上記から、保守性の向上、効率化できるように意識しました