MENU

未経験者がバイブコーディングでアプリケーション作成してみた(Project1-2)

記事サムネイル。「未経験者がバイブコーディングでアプリケーション作成してみた(Project1-2)」

こんにちは!Tomoyaです!

今回は前回の記事の続きでセクション2(機能の追加と調整)を行っていきます。

ここでは、追加したい事が多くなって「あれも欲しい」「これも欲しい」とならないようにアイデアをリストアップした後、どれを追加するのかを評価し選定してからセクション2を行いたいと思います。

機能の追加は、2組×3回=6つで機能を追加していきたいなと考えています。

理由としては、多すぎても管理が大変になってしまいますし、少なすぎても物足らない感じがあると思うからです。まずは6つに絞る事で【最低限+α】を取り入れる事ができアプリとして機能すると推測します。その後ほんとに必要な事があればアップデートの形で1つずつ追加していくのが私なりの定石と考えています。

以下に【時間ログアプリ】に実装したら使いやすいかもなという機能をリストアップしていきました。

リストアップ候補
  • ダッシュボード機能
  • スタートボタンを大きくして1回押したらTimeが隠れる
  • プロジェクト管理機能:最大3つ(何のために使うのか?)
  • オフライン可能
  • 日本語化
  • ラップボタン
  • 小型化して画面の隅に位置する。
  • タイムの編集可能。
  • 匿名利用:authentication
  • ページを再読み込みしたらタイマーがリセットされちゃうのを防ぎたい

このリストアップした内容から今回は6つ評価をして選定していきます。


目次

Session 1: 信頼と個人の確立

図形で「信頼と個人の確立」を表現。中身はぐるぐると混雑しているが個々のデータが守られて存在している。
図形で「信頼と個人の確立」を表現。中身はぐるぐると混雑しているが個々のデータが守られて存在している。

まず始めに追加する機能として、この2つ選択しました。

1.匿名利用(auth認証とデータ分離)

現状、全てのデータログが混ざっています。「自分だけのログが見える」状態にしないとアプリとして成立しないのが理由です。Firebase Auth機能の「匿名ログイン」で実装を行おうと思います。

Auth機能を実装しておくことで個人を確保できるのはもちろん、今後他の認証(Google認証)を導入する事もできるのでより強固な紐づけが可能になるとも認識しています。

※もしブラウザのキャッシュを完全に削除すると、新しいIDが発行されて前のデータが見えなくなります(これは後のフェーズで「Googleログイン」などを足して解決します)。

2.日本語化(日本語化と日時フォーマット)

現在の「2026/01/27 16:18:47」を馴染みのある形「1月27日(火) 14:30」にしようと思います。またアプリ全体も英語から日本語にし、フォント周りも整えて「親しみやすい」印象を持ってもらえるようにしたいと思いました。

どの国に向けてのアプリなのかをわかりやすくしておく事は重要だと評価しました。日時フォーマットに関してもログを見る時に秒数まで見る人は少数だと判断し、普段から目にしている表記の方が見やすさと計算が行いやすいと思いました。

+α: Offline Persistence (Firestoreのオフライン対応を明示的にONにする)

理由:Reason

日本語のフォーマット化と個人で使えるように認証機能です。利用するユーザーごとに管理できていないとデータは混ざりに混ざってぐちゃぐちゃになってしまいます。そんなのでは信頼もなくなりログを残した意味も失われてしまいます。また、英語では慣れていないユーザーはいちいち翻訳で調べないといけなかったり理解するまでラグが発生してしまう事があるので日本語のフォーマットは必須と評価しました。


Session 2: 没入と補正

「没入と補正」を表現。薄黄色の皿の中に一つの白が存在(集中)している。いつでも薄黄色に成れる補正の有無の表現。
「没入と補正」を表現。薄黄色の皿の中に一つの白が存在(集中)している。いつでも薄黄色に成れる補正の有無の表現。

ここでは、ユーザー体験(UX)を劇的に向上させる狙いを持って機能を選びました。

3.集中(没入モード:Big Button + Hide Time)

私自身、時計が動いていると気が散ると感じるので「時間の経過を気にせず集中したい」というVibeを形にしていきます。計測中は時間を隠して、背景がゆっくり呼吸するように明滅するなどの演出(※現状)を作りたいと考えます。

「一回押してしまえば気にならない、しかし終了後は気づいて止める」こんな理想を持って集中を作るフェーズを作りたいと考えます。ログを残すことに気を取られてしまわないように生活の一部として使ってもらえるようなユーザー体験を作りたいと思っています。

4.ログの操作(編集機能:ログの修正)

人間は必ずストップボタンを押し忘れます。「あとから時間を修正できる」機能は必要だと感じたからです。

正確な時間でなくても大体の時間で編集できれば十分ログになります。せっかく取ったログを削除で消してしまうのはもったいないです。人間の性質も加味した編集機能を設ける方が続けやすいと感じます。

3の項目の対策としての編集機能です。理想はありますが毎日そうはならないと理解しているからこそ、この機能は補完として必要だと考えます。

理由:Reason

ここでは核となる「集中」を促す機能とそれを補完する機能を選択しました。シンプルであるがゆえにここには力を入れて作りたいなと感じます。見た目や使いやすさは、多くのユーザーの第一印象にとって重要でここで「良いかも」と思ってもらえる事がリピートに繋がって積み上がっていくと思うからです。


Session 3: 意味づけと可視化

「意味づけと可視化」の表現。シンプルな図形の組み合わせによって一目で「野球」と可視化され意図がわかる。
「意味づけと可視化」の表現。シンプルな図形の組み合わせによって一目で「野球」と可視化され意図がわかる。

ここでは、溜めたデータを意味のあるものにするための機能を加えたいと思い選択しました。

5.プロジェクト管理(簡易管理:タグ付け)

主に「何の時間だったか?」を記録します。複雑なプロジェクト管理ではなく、3つの固定ボタン(例:仕事・学校 / 学習 / 生活)で切り替えるようなシンプルな管理の方が自分の時間を把握しやすいと思います。

そもそもこのアプリで何がしたいのかを簡潔にしておくことはふとした時に必要と感じます。その内容に関しても複雑に「あれもこれも」をすると細かくなりすぎて逆にやる気が落ちてしまうと考えるので、ここでは3つくらいの主要なカテゴリが良いかなと感じます。

6.ダッシュボード機能(シンプルな集計と可視化)

ダッシュボードページは、自分が取ったログを可視化する良い機能になると思っています。

「今日は何時間集中したか?」や「どこに時間を使っているのか?」を把握できそれを基に対策を行うことが容易になると考えています。

ログは残せても活用できなければ水の泡と化してしまいます。そうならない為にもダッシュボードページで自分の時間を可視化できるのは欲しいなと思います。

理由:Reason

何のためにログを残すのかを考えた時に自分の時間の使い方について把握してもらいたい。そしてそれを基に推測して対策を取るようになったら理想的だなと考えます。その時にデータの羅列だけでは「めんどくさい」となってしまいますし、何のログかわからなければ「もういいや…」となってしまうと思います。その為にシンプルなカテゴリと可視化するダッシュボードを設ける事で対策になると思ったので選択しました。


補足:却下した機能とその理由

ラップボタン: 構造が複雑になり、ライフログとしての直感性が下がるため今回は見送り。

小型化: ブラウザの仕様に依存しすぎるため、まずは「Webアプリ」としての完成度を優先。

まとめ:次回機能の実装フェーズ

今回は、セクション2欲しい機能のリストアップと評価・選定を行っていきました。

流れとしては、Auth → Update処理 → 集計クエリのような形になりました。

順序としては、私としてもしっくりくるもので、これを実装できればアプリとして機能するなと見えてきました。

次回は、これを基に順番にFirebase Studioで実装フェーズに入ります。

ここまで読んでいただきありがとうございました。次回の実装フェーズもご覧になってどうなっていくのか見守ってくれると幸いです。

前回の記事をご覧になっていない方は以下からどうぞ!アプリのアイデア選定からプロジェクトの始動内容です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

始めまして。このブログを運営するTomoyaです。
未経験個人開発者。AI×個人開発(Vibe Cording)で学習して参入してくれる人が増えて広がっていくと良いなと思って始めました。

実際に作成→デプロイ(公開)→運営を行ってそれについての問題や疑問を記録していきます。
また行っていく上で内容(セキュリティ・制限など)にもこだわっていきたいなと思っています。

コメント

コメントする

目次