はじめに

はじめまして！
おーが（@ouga-engneering）と申します！

未経験からWebエンジニアになるため、プログラミングスクール RUNTEQ で学習してきました。
今回は卒業制作として「kocolog」を制作したため、紹介させてください！

👉 画像クリックでアプリに飛べます

目次 📌

制作背景
kocolog ってどんなアプリ？
主な機能
技術スタック
こだわりポイント（UX / ホーム画面）
技術選定理由（Hotwire を選んだ理由）
反省点
今後の改善案
感想

制作背景 📝

なんとなく体調が悪いなとか、頭では分かってるのにやるべきことができない……そんな日ってありませんか？
僕はめちゃくちゃあります笑

「やれば気分が良くなる」と分かってるのに動けない。毎日、頭の中で自分と戦ってました。
そんな状況を少しずつ乗り越えられたきっかけが、やったこと（行動）とその時の気分を記録して、あとから見返せるようにしたことです。

書き出して“見える化”すると、
「こういう時に崩れやすい」「この行動をすると持ち直す」
というように傾向が見えてきました🔎

そこで、習慣改善のために自分がやってきた “気分×行動の見える化” を、
もっと簡単に・いつでも振り返れるようにするため、気分×行動ログアプリ「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エンジニアを目指す中での個人開発だったので、分からないこと・大変だったこともありました。
それ以上に、使ってくれるユーザーを思いながらアプリ開発することがワクワクして、楽しかったです！
実際に完成して、フィードバックも貰えて、大変貴重な経験になりました！

特に、作って終わりではなく、
「ユーザーの導線や使いやすさを考えながら実装する・改善する」
ということを経験できたことが一番の収穫でした。

ここまで読んでいただき、ありがとうございました！
（もしよければ触ってみた感想や改善案なども頂けると嬉しいです😊）