Behindlog
HinaBehindlogについて
Behindlogは、日々の学習や努力を記録し、友達と共有することで継続をサポートする記録アプリです。
コンセプトは、「継続は力なり × 日報 × 交換日記」
勉強や新しいことへの挑戦は、すぐに結果が見えるものばかりではありません。特に仕事や日々の生活と両立しながら何かに挑戦する大人にとって、努力を継続することは簡単ではないと感じています。
Behindlogでは、
目標
ToDo
学習時間
日々の記録
をまとめて管理できます。
さらに、友達とつながることで、お互いの記録や頑張りを見ることができます。
「誰かに見られている」「一緒に頑張っている人がいる」という感覚を通して、日々の小さな努力を続けやすくすることを目指しました。
開発の経緯
Behindlogのアイデアは、実際に友達とNotionを使って「交換日報」のようにお互いの記録を共有していた経験から生まれました。
私はプログラミング学習について、友達はネイルサロンを始めるための準備について、それぞれその日に取り組んだことをNotionのカレンダーに記録していました。
取り組んでいることは違っていても、友達の記録を見ると、
「私ももう少し頑張ろう」
と思うことがあり、誰かと努力の過程を共有することが、継続するモチベーションにつながると実感しました。
一方で、Notionは自由度が高いからこそ、自分たちがやりたい「毎日の努力を記録して共有する」という目的には少し機能が多く、もっと簡単に記録できて、お互いの頑張りが見やすいものがあればいいなと感じるようになりました。
そこで、
「記録する」「振り返る」「身近な人と共有する」
という必要な機能に絞り、忙しい毎日の中でも気軽に続けられるサービスとしてBehindlogを開発しました。
実際に自分たちが使っていた方法をベースに、「もっと簡単だったら」「もっと見やすかったら」という実体験から感じた課題を、自分でアプリとして形にしたことがBehindlog開発の出発点です。
主な機能
🏠 ダッシュボード
現在の目標、今日のToDo、学習時間、カレンダーなど、学習状況をまとめて確認できます。
毎回複数のページを確認しなくても、「今何を頑張っているのか」「どれくらい進んでいるのか」が分かるようにしました。
📝 日々の記録
その日の学習時間やメモを記録できます。
過去の記録も日付ごとに振り返ることができ、自分が積み重ねてきた努力を確認できます。
⏱ Commit Time
期間と目標学習時間を設定して、一定期間の学習に取り組むことができます。
期間中の学習時間を記録し、目標に対してどのくらい取り組めているかを確認できます。
📅 カレンダー
記録した日をカレンダー上から確認できます。
日付を選択することで、その日の学習内容を振り返ることができます。
👥 フレンド・記録共有
メールアドレスを使って友達を招待し、承認するとお互いの記録を見ることができます。
友達のダッシュボードやカレンダー、日々の記録を閲覧できますが、編集はできないようにしています。
自分の努力を管理するだけではなく、身近な人と頑張りを共有できることをBehindlogの大きな特徴にしています。
🎨 カラーテーマ
好みに合わせて複数のカラーテーマからアプリのテーマを変更できます。
毎日使う記録アプリだからこそ、自分が使いたくなるデザインに変更できるようにしました。
開発で工夫したポイント
🌏 タイムゾーンを考慮した記録共有
Behindlogでは、異なる国にいるユーザー同士でも記録を共有できるようにしています。
そのため、「記録した本人にとって何月何日の記録なのか」を保ったまま表示できるよう、ユーザーごとのタイムゾーンを考慮して日付を扱っています。
例えば、オーストラリアで6月1日に作成した記録を日本にいる友達が確認した場合でも、時差によって5月31日や6月2日にずれるのではなく、6月1日の記録として確認できることを意識して実装しました。
🤝 閲覧する人と記録する人を分けた設計
友達の記録を表示するときは、閲覧しているユーザーではなく、記録を所有しているユーザーを基準にデータを扱うことを意識しました。
自分の記録と友達の記録で同じUIを活用しながら、友達側では編集できないようにするなど、表示と権限を分けています。
📸 過去の状態を残す記録設計
目標やToDoなど現在の設定だけを参照すると、設定を変更した際に過去の記録まで変わってしまいます。
そのため日々の記録では、その日に設定されていた情報を残し、後から振り返ったときにも**「その日に何を目標にして、何をしていたのか」**が分かるようにしました。
使用技術
フロントエンド
Next.js（App Router）
React
TypeScript
Tailwind CSS
フォーム・データ取得
React Hook Form
Zod
SWR
バックエンド・データベース
Next.js API Routes
Prisma
PostgreSQL（Supabase）
認証・外部サービス
Supabase Auth
Resend
開発環境・インフラ
Visual Studio Code
Git / GitHub
Vercel
Figma
シェア！
