【個人開発】ストーリー感覚で進める目標管理ツールを作った

![your-story-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/7af71466-6691-156e-4cdd-68c58ac90fcc.png)

# はじめに

<h3>こんにちは！！ Watanabe Jin (@Sicut_study)です！</h3>

**2024年が始ろうとしています** (2ヶ月経ちましたが、当時は12月25日です)


|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![C233B6CB-CF08-4E29-A673-A29CD96172BA.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/00091a3b-db89-096c-cc07-1dba20a7d799.jpeg)
カレンダーも残り5日になっていた


毎年この時期になると<font color="red">**「2024年は〇〇をやるぞ」**</font>と**闘志を燃やしている方**も多いかと思います

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![IMG_3403.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/9f565860-228a-fb34-f6dd-76e4cdbf1009.jpeg)
来年の目標をリストアップ

2024年にやることを**リストアップしている**ときふと思いました。
普段から[Lapras](https://lapras.com/)で可視化される自分の技術力をみながらニヤニヤしている私にとって、<font color="red">**この目標も可視化すれば今年こそはやりきれるのではないか？**</font>

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![F914FAE3-F354-4B7A-90C9-0430983B43C5.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/bb14647d-d180-981d-c07a-d4de7e9ad418.jpeg)
毎日数値が上がっていないか欠かさずチェック


今回は<font color="blue">**目標管理ツールを作って**</font>、来年の自分が<font color="red">**目標を達成できる手助けをするアプリ**</font>を作成していきます。

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![Peek 2023-12-26 07-02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/a61aba36-a326-370a-6ab5-b36a9488b830.gif)

# 問題点を考える
アプリストアを覗くと**多くの目標管理ツールが乱立**しており、世はまさに目標管理アプリ戦国時代。
今回作ろうとしている目標管理ツールを使う理由を作らないと<font color="blue">**ユーザー価値のあるアプリ**</font>にならないのは明らかです

まずは、**目標を達成できなくなる原因や既存アプリの欠点**を洗い出します。

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![54E74C0C-466A-4BFF-B3C0-FBA0BD172A7A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/fffc1d7a-3a29-d073-0ed9-fdd4861fb024.jpeg)
まずは既存の欠点を洗い出す


ある程度今回の方向性が決まってきました。

<font color="red">**1. シンプルに達成状況を可視化をする**</font>
<font color="red">**2. 毎日アプリをみる工夫をいれる**</font>

多くのアプリが差別化を測るために余計な機能をいれています。しかし、私が**Lapras**を使うときにはあまり他の機能は使わずシンプルに数字だけをみるというところから<font color="blue">**色々機能はいれないことを決めました**</font>

そして、私の習慣となっている<font color="blue">**毎日数値をみてニヤニヤする**</font>というのを他の人にも体験してもらうべく、<font color="red">**アプリを毎日使いたくなるような仕組み**</font>を入れたいと考えました。

# 差別化を考える

そう決まれば、まずは **「毎日使ってもらう工夫」** について考えることに。
6分ほど熟考した結果、以下のアイデアが生まれました

![your-story-concept.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/3b966a51-ab32-b7f5-1623-38fe7fa85ab5.png)

例えば、 **「Youtubeを100本投稿する」** という目標を立てたときに、Youtube100本投稿する主人公の物語が目標達成する期日まで毎日アプリに表示されます
アプリには常に<font color="red">**結末も表示**</font>されています。 

**「Youtube100本投稿を達成した主人公は有名配信者としてて名をとどろかせて、テレビなどにも出演していまでは愛されるタレントになりました。おわり」** 

結末を常に表示することで <font color="red">**掲げた目標を達成したときの未来</font>** がみえるような工夫がされています。

結末に関してはより<font color="blue">**没入感**</font>をもってもらうために更に工夫をしています

![your-story-concept-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/e29fd763-0ebb-2760-c8ec-b62a0400fdc4.png)

進捗ごとに結末が変わっていくので、 **「やらないとまずい」** というのを感じることができます。

# 物語型目標管理ツールYour Story

![your-sotry-image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/3bba657a-415c-98d1-854c-40aff1159d87.png)

目標を可視化するツール
物語の主人公になりきって理想の未来を描きましょう

## 機能の紹介

### 1. 目標可視化

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/a3c1c3fb-113a-3387-954e-6abae4eda124.png)
目標の進捗がひと目でわかる

シンプルでひと目でわかりやすいデザインを意識しました
目標量に対してどれくらい終わっているか、どれくらいのペースでやればよいか、残り日数などが表示されています。

### 2. 目標登録/解除

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/692b523b-485c-5a55-71a6-f35867ad73bc.png)
目標を登録/解除可能

目標の登録と解除が可能です
解除ができる理由としては毎日物語が更新されてしまうため、解除することで物語の更新を止められるように機能をいれています

### 3. 今日の物語

毎日更新される今日の物語が表示されています

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/a4598686-50df-cb23-1217-4c51c0dd5576.png)
魔法の本をを見つけた模様

### 4. 結末

常に表示されるようになっています。毎日進捗に応じて更新がされており、ペースが遅いとバットエンド、普通ならニュートラルエンド、早いとハッピーエンドになります

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/e5ff62be-231d-8603-10d4-f16550444655.png)

### 5. 過去の物語

いままで読んできた物語をまとめて読めるようになっています

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/e21616f3-939f-a234-b6a5-562946eaab56.png)
プロンプトにカイゼン余地あり

### 6. ユーザー情報登録

このアプリでは**物語の没入感**が大切になるので<font color="blue">**ユーザー情報登録**</font>が可能です

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/1f64e24c-ee50-14e5-26cc-488168b9ed65.png)
まだ項目は少ないです

自分の情報をいれることで物語生成時に情報が渡されるため、より自分だけの物語を読むことが可能になっています。

これは会社の同僚との1on1での壁内で生まれたアイデアです。<font color="blue">**アイデアの壁打ちは本当に大事です**</font>


## 技術スタック

開発期間 : 14時間
開発人数 : 1人
フロントエンド : React, TypeScript
バックエンド : Firebase
API : ChatGPT API
ライブラリ : Tailwind, react-modal, react-hook-form, tremor

私は<font color="blue">**必要な知識がでてきたときに新しいインプットを入れる**</font>という手法をとっているためこの機会に初めて **「ChatGPT API」** を試すことができました

https://openai.com/blog/introducing-chatgpt-and-whisper-apis

手軽に使えるため<font color="red">**個人開発で価値を出す可能性が広がる**</font>と感じました
プロンプトに関しては知見やテクニックも必要になっており、全然ブラッシュアップできていないので今回の反省になっています

# 今後やりたいこと

ChatGPTで物語を生成していますが、これを**実際の作家さんが書いた物語に変更**して使うこともでるので、そこでの可能性がないかを模索しています
作家さんの書いた物語を使うときにエンディングが変わる仕組みをどうやっていれるかに悩んでいます

# 開発で思ったこと

<font color="red">**なぜそのアプリを自分が作らないといけないのか**</font>
ここをしっかり考えて作ることがとても大切だなと感じました

**来年の目標はこのアプリで達成できるのかお楽しみに！！！**

私は今回このアプリをモック版を自分が使える程度で開発を終えてしまいましたが、もし本当に作って世の中に価値を届けたいと感じた方がいらっしゃいましたら@Sicut_studyまでご連絡いただければと思います。

アイデアは世の中に同じことを考えている人が誰かはいると思ったほうがよいです。しかし、カタチにできるかは別なので、<font color="red">**最速でカタチにして価値を出す**</font>というのが大切になります。やはりReactはすぐに作れるので良いフレームワークだなと毎度感じます。

# おわりに

今回は個人開発の第15弾として「物語型目標管理ツールYourStory」を紹介しました。1ヶ月ごとに新しいオリジナルアプリを作成していますので、次回もお楽しみに！

ここまで読んでいただけた方は**いいね**と**ストック**よろしくお願いします。
@Sicut_study を**フォロー**いただけるととてもうれしく思います。

今週もプログラミング頑張りましょう！

![jisou-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/217ea52d-8130-3266-0619-990fa968408a.png)

# 2024年個人開発

https://qiita.com/Sicut_study/items/1e82ea0daf964d4b1fa5

https://qiita.com/Sicut_study/items/830d1edbf95e77390690

# おすすめ記事

https://qiita.com/Sicut_study/items/cbf1a15fa31727a74514

# About Me

Webエンジニア転身して1年間本気で勉強
転職ドラフトで高額オファーを複数獲得
そこでの経験からアウトプットやマインドセットの発信に強みがある
エンジニアをやりながら、起業に挑戦中
アイデア作りやパブリックスピーキングを得意としてる

■ Twitter
https://twitter.com/Sicut_study
■ Instagram
https://www.instagram.com/himariajin
■ Youtube
https://www.youtube.com/channel/UCBFrGAJhPuuaoLwUIHBILsA
■ TikTok
https://www.tiktok.com/@sicut_study
■ プログラミングコーチングJISOU
https://projisou.jp
■ 登壇依頼などご依頼はこちらから
himaria.jin.watanabe@gmail.com

# 参考

https://lapras.com/

https://openai.com/blog/introducing-chatgpt-and-whisper-apis