「困りごと」から始める個人開発

#さくらのマイクロコミュニティ （Webサービス開発者の会） #2 登壇資料です

https://sakura-tokyo.connpass.com/event/254064/

Transcript

1. 2022/07/25 ikuma-t 「困りごと」から始める個人開発 さくらのマイクロコミュニティ（Webサービス開発者の会） #2
2. 目次 3" 自己紹2 1" quitcostサービス紹2 " どうやってサービス開発を進めていったか
3. 自己紹介 ikuma-t ・SIerでパッケージコンサル → 株式会社エンペイでエンジニア ・プログラミングはFJORD BOOT CAMPで学びました！ ・趣味：ドット絵、ツール探し、製菓・製パン SUZURIで 販売中     @ikuma-t ikuma-t セットプチフォッカ ikuma-t.work ikuma-t IkumaTadokoro
4. サービス紹介
5. 「無職になったらいくらかかる？」をいますぐ計算
6. quitcostとは いくつかの質問に答えるだけで、無職期間にかかるお金がわかるサービスです  2. 『どんな』お金が『いくら』かかるのかわかる！ ar ステップバイステップで質問項目を入力       社会保険料    国民年金 住民税 国民健康保険 給与 年齢 就職予定月 郵便番号 退職予定月 質問は 6種類 計算 対象
7. サービスデモ
8. 技術スタック Ruby 3.0 Ruby on Rails 7.0 JavaScript Vue 3.2 TailwindCSS Docker GitHub Actions Heroku PostgreSQL PostgreSQL （CompositionAPI） ※webpackerを使用 バックエンド 言語 言語 フレームワーク フレームワーク フロントエンド インフラ 自動テスト Cypress Jest RSpec
9. そこそこバズりました
10. どうやってサービス開発を進めていったか
11. サービス開発の進め方 サービス開発の進め方 FJORD BOOT CAMPに参加していたので、このスタイルで進めました！ 技術検証 ペーパープロトタイプ作成 エレベーターピッチ作成 開発・デプロイ カンバン作成 リリース作業 ・どんなサービスを作るか ・端的にまとめたピッチを作る ・コアとなる技術の素振り ・Vue3やTailwindなどの最新 　技術の適合性チェックなど ・どんな機能・画面が必要か ・デザインをどうするか ・Figmaで作成 ・GitHubを使いながら開発 ・デプロイはHeroku ・リリースまでに必要なタスクを 　全て洗い出し ・GitHub Projectを利用 ・リリースブログの作成 ・リリースツイート・動画作成 ・リリースを楽しむ リリースまでのロードマップ
12. エレベーターピッチを考える〜どんなサービスを作るか決める〜 自分がサービス案を考えた時の3つのポイント b‰ 日常のふとした困りごとを見逃さなa †‰ 実現性度外視でとにかくアイデアを出` ˆ‰ 一番熱量を注げそうな困りごとに目をつける
13. エレベーターピッチを考える〜どんなサービスを作るか決める〜 ・FinDest：出発地と所要時間を入力すると、その範囲で適当に目的地を見繕ってくれるサービス ・CHUKAN：mediumで英語を学びたい人のためのサービス ・おなまえクック：食材、調味料、調理法を選ぶとそれっぽい料理名を出してくれるサービス ・∞タイピング：キーを入力すると（見かけ上は）画面にソースコードが入力されていくタイピングアプリ ・カンケツセン：登録している漫画が完結したら教えてくれるサービス ・Zine：ZennとかQiitaとかはてなブログとかいろんなとこに書いている記事をRSSでひとまとめにして発信できる ・AmaWant：Amazonのほしい物リストをドラッグ＆ドロップで作れるようにするやつ ・ハッカソンカレンダー：地域rbカレンダーのハッカソンイベント版 ・SpeakerDeckGallery：SpeakerDeckのスライドをまとめてイベントページにできるサービス ・日めくりカレンダー：ありそうでなかったシンプルなデジタルひめくりカレンダー 実際に出てきたサービス案の例 日常で感じたことをメモ → 名前をつけることで取り組みへのモチベーションUP！！
14. エレベーターピッチを考える〜どんなサービスを作るか決める〜 ・FinDest：出発地と所要時間を入力すると、その範囲で適当に目的地を見繕ってくれるサービス ・CHUKAN：mediumで英語を学びたい人のためのサービス ・おなまえクック：食材、調味料、調理法を選ぶとそれっぽい料理名を出してくれるサービス ・∞タイピング：キーを入力すると（見かけ上は）画面にソースコードが入力されていくタイピングアプリ ・カンケツセン：登録している漫画が完結したら教えてくれるサービス ・Zine：ZennとかQiitaとかはてなブログとかいろんなとこに書いている記事をRSSでひとまとめにして発信できる ・AmaWant：Amazonのほしい物リストをドラッグ＆ドロップで作れるようにするやつ ・ハッカソンカレンダー：地域rbカレンダーのハッカソンイベント版 ・SpeakerDeckGallery：SpeakerDeckのスライドをまとめてイベントページにできるサービス ・日めくりカレンダー：ありそうでなかったシンプルなデジタルひめくりカレンダー 実際に出てきたサービス案の例 「実際に自分が経験して困った！」 「他に類似のサービスがない！」 「もしこの問題を解けたならワクワクする！」 最終的な判断基準
15. それが自分にとっては「quitcost」というサービスだった 質問は 6種類 自分も仕事をやめて無職になって調べまくったから ・自分が実際に仕事をやめて、かかるお金を調べる際にめんどくさかった & わかりづらかった ・私たちの生活の中には「使いづらい」「わかりづらい」と不満を感じるような仕組みがまだまだたくさんある ・退職はそれ自体が結構エネルギーのいる & 頻繁に発生するイベントではない ・「誰かがどうにかしてくれるのを待つんじゃなくて、自分でなんかいい感じにしたい！」 ・「もしこのわかりづらい退職周りのお金の計算を、今風にわかりやすく見せられたらすごいいいかも！！！」 ・FJORD BOOT CAMPでも仕事をやめてエンジニアになる人が結構いた 「わかりづらさ」「煩雑さ」に対して自分にできることをしていきたい
16. 「無職になったら、『どんな』個人負担が『いくら』増えるのかがわかりづらいという問題」を解決したい 「年収と基礎データ（年齢、郵便番号など）、無職期間を入力すると、 個人負担となる保険、年金、税金の額を知ること」 ができ、 「計算ツール」です。 「転職準備のためにしばらく無職になる人」 向けの、 「各料金ごとに手計算やシミュレータで算出するの」とは違って、 「計算式を意識せずに、全料金を一括で計算できる機能」が備わっている事が特徴です。 というサービスは、 ELEVATOR PITCH
17. ペーパープロトタイプ Figmaで作成しました（画面全部 + 初期ロゴ）
18. カンバン作成と進捗のコツ① GitHub Projectでざっくりとしたリリースまでのタスクを作成 インボックス 思いついたやりたいこと全部 とりあえずぶちこみます！ インボックスのうち、リリースまでに やることをここに移動します インボックスのうち、リリースまでに やることをここに移動します 今週終わった分です。週1の進捗 報告会で報告します 報告が終わった分を移動します やること 作業中 今週やったこと 完了
19. カンバン作成と進捗のコツ② UE やりたいことは全部インボックスA SE リリースまでに「やらないこと」を決め DE 進捗がないのも進捗。現実から逃げない
20. 技術検証・開発 総制作期間（日報単位） 開発スケジュール エレベーターピッチ ペーパープロトタイプ 技術検証 DB・URI設計 Gem開発編 環境構築編 管理機能編 API作成編 フォーム作成編 リファクタリング レビュー対応 日 commit PR 136 502 320 総作業量（コミット単位） 総作業量（Pull Request単位） 10/21 04/19   26回 18回 27回 14回 14回 37回
21. リリース作業 想定利用者は無職になりそうな人、無職の人 直接ターゲットにすると、利用者がかなり限られてしまう... リリースはZenn & Twitterで告知 OGPっぽいけど、これが動画
22. リリース作業 想定利用者は無職になりそうな人、無職の人 直接ターゲットにすると、利用者がかなり限られてしまう... ・誰しも皆、潜在的に無職になる可能性のあるユーザー ・「なんか良さそう」と思ってクリックしてもらって、いつの日か 　使ってもらおうという魂胆 ・リリース前日にAdobe Premier Proを契約して、 リリース当日に解約しました ツイートに動画を埋め込み、15秒でアプリの全機能を盛り込む！ リリースはZenn & Twitterで告知 OGPっぽいけど、これが動画
23. 補足：Twitter Media Studio ツイートに動画をつけるときに便利 ・アナリティクスで有効にすると使えるようになる ・Media Studioにアップロードした動画は、タイトルやサムネイル、 　リンクを設定できるように！ ・OGP相当の情報量 + 実際に動くアプリを、1つの動画欄だけで 　見せることができるように！ リンク 動画 タイトルと説明
24. そこそこの期間開発してきた （厳密には別のこともやってたけど）
25. 新仕様考案したりとか ロゴをリニューアルしたりとか 住民税の計算勉強したりとか はじめはなかった機能を途中で思いつき、 デザインから作り直しました もっとわかりやすいロゴを！ と思って、突然ロゴとOGPをリニューアル 資格試験の書籍自腹で買いました （4000円くらいする） ＄ ただ就職のために作るのではなく 色々と意欲的にリリースまで取り組めたのは...
26. 自分の「困りごと」を解決する サービスだったから！
27. 自分の「困りごと」を解決するサービスを作るメリット bX 自分がユーザーだから解像度が高7 UX 自分の課題が解決できるのでモチベが続きやす7 WX 人に説明する時も堂々と説明できる
28. 自分の「困りごと」から 個人開発を始めてみよう！！
29. ありがとうございました