はじめに
はじめまして！
おーが（@ouga-engneering）と申します！
未経験からWebエンジニアになるため、プログラミングスクール RUNTEQ で学習してきました。
今回は卒業制作として「kocolog」を制作したため、紹介させてください！
👉 画像クリックでアプリに飛べます
目次 📌
制作背景 📝
なんとなく体調が悪いなとか、頭では分かってるのにやるべきことができない……そんな日ってありませんか？
僕はめちゃくちゃあります笑
「やれば気分が良くなる」と分かってるのに動けない。毎日、頭の中で自分と戦ってました。
そんな状況を少しずつ乗り越えられたきっかけが、やったこと（行動）とその時の気分を記録して、あとから見返せるようにしたことです。
書き出して“見える化”すると、
「こういう時に崩れやすい」「この行動をすると持ち直す」
というように傾向が見えてきました🔎
そこで、習慣改善のために自分がやってきた “気分×行動の見える化” を、
もっと簡単に・いつでも振り返れるようにするため、気分×行動ログアプリ「kocolog」 を作成しました！
kocolog ってどんなアプリ？ 🤔
kocologは、**行動（やったこと）と気分（その時の状態）**を関連付けながら記録できるアプリです。
✅ 行動を記録するときに、行動の前後の気分も一緒に残せる
✅ その結果、1日の気分の流れが「点」ではなく「流れ」として見える化できる
「何をしたか」だけじゃなく、「その時どう感じたか」もセットで残すことで、
習慣改善のヒントを掴めるようにしています🌱
主な機能
気分ログ
今の気分を、サクッと記録できます。
行動ログ
行動ログは、行動に加えて前後の気分も一緒に記録できます。
ログリスト 📋
登録したログはホーム画面に即時反映！
モーダルから簡単に編集できます。
カレンダー・振り返り 📅
カレンダーから日ごとのログに簡単アクセスできます。
振り返り（Xシェア） 📈🐦
一日の気分をグラフで確認できます。
振り返りは Xでシェアもできます！
技術スタック 🛠
- Backend：Ruby on Rails
- Frontend：Hotwire（Turbo / Stimulus）
- UI：Tailwind CSS（＋DaisyUI）
- DB：PostgreSQL
- Auth：Devise + Google OAuth
- Deploy：Render / Neon
- Chart：Chart.js（気分グラフ）
こだわりポイント（UX / ホーム画面）
一番こだわったのは、ホーム画面のスムーズな画面遷移とUXです。
kocologは「記録→振り返り」を日常的に回してほしいアプリなので、
**“気軽さ”と“途切れない体験”**が最重要だと考えました。
- ページ遷移や更新でテンポが崩れると、記録そのものが面倒になる
- 逆に、画面がスッと切り替わるだけで「もう1件記録するか」が起きる
この思想を実現するために、ホーム画面は特に「操作感」を重視して作り込みました⚡
技術選定理由（Hotwire を選んだ理由）
UXとして「スムーズな画面遷移」を実現するために、フロントは Hotwire（Turbo / Stimulus） を選びました。
Hotwireを選んだ理由は大きく3つです。
-
SPAっぽい体験を、Railsの延長で作れる
Turboで画面遷移・部分更新が自然にでき、記録アプリに必要な“テンポ”を出しやすいと感じました。 -
状態管理を最小化できる
React等の状態管理が必要な領域を増やしすぎずに、Railsのサーバサイドを軸に開発できます。
個人開発では「作る→改善」の回転が重要なので、全体の複雑性を抑えたかったです。 -
改善サイクルを回しやすい
Turbo Streamで「保存→UI更新」を素直に書けるので、UX改善を小さく早く試しやすいです。
反省点
ホーム画面でできることが多く、読み込みが遅くなった
ホーム画面に「気分ログ」「行動ログ」「グラフ」「サマリ」など、できることを集約した結果、
データ取得や描画が重くなり、読み込みが遅くなる場面がありました。
「最短で記録できる」が理想なのに、待ち時間が出るのは良くないので改善対象にしています。
行動の登録フォームが多くなってしまい、気軽さが落ちた
行動ログに必要な入力項目を増やした結果、フォームが長くなってしまいました。
記録アプリは“気軽さ”が命なので、入力は最小であるべきでした。
（例：必須項目の見直し／段階入力／デフォルト値の工夫など）
今後の改善案 🚧
行動ごとの気分グラフを出して、相関を見える化したい
現状は「1日の気分の流れ」を中心に見える化していますが、次は
- 行動Aをした日は気分が上がりやすい
- 行動Bをした後は落ちやすい
といった “行動と気分の相関” をもっと分かりやすくしたいです。
具体的には、行動（習慣）ごとの気分グラフを作り、
「この行動は自分に効くのか？」が判断できるようにするのが目標です📊
感想
未経験からWebエンジニアを目指す中での個人開発だったので、分からないこと・大変だったこともありました。
それ以上に、使ってくれるユーザーを思いながらアプリ開発することがワクワクして、楽しかったです！
実際に完成して、フィードバックも貰えて、大変貴重な経験になりました！
特に、作って終わりではなく、
「ユーザーの導線や使いやすさを考えながら実装する・改善する」
ということを経験できたことが一番の収穫でした。
ここまで読んでいただき、ありがとうございました！
（もしよければ触ってみた感想や改善案なども頂けると嬉しいです😊）