Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「困りごと」から始める個人開発
Search
ikuma-t
July 25, 2022
Programming
5
790
「困りごと」から始める個人開発
#さくらのマイクロコミュニティ (Webサービス開発者の会) #2 登壇資料です
https://sakura-tokyo.connpass.com/event/254064/
ikuma-t
July 25, 2022
Tweet
Share
More Decks by ikuma-t
See All by ikuma-t
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
540
いまさらのStorybook
ikumatadokoro
0
410
これで最後にしたい! Astroと立ち向かう 6度目の個人ブログ再開発
ikumatadokoro
5
970
Panda CSS と Ark UI ではじめる個人開発
ikumatadokoro
4
1.6k
見た目から始める生産性向上
ikumatadokoro
11
5.5k
ぼくが 美容師さんに伝えたかった バンドの話
ikumatadokoro
0
200
Railsアプリをコスパよく読むための環境整備
ikumatadokoro
2
940
HTTPを手で書いて学ぶ ファイルアップロードの仕組み
ikumatadokoro
80
29k
たどころくん1号を支える技術
ikumatadokoro
1
250
Other Decks in Programming
See All in Programming
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
250
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
130
Grafana Cloudとソラカメ
devoc
0
180
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
920
Immutable ActiveRecord
megane42
0
140
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
動作確認やテストで漏れがちな観点3選
starfish719
6
1.1k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
390
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
2
600
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
970
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Building Your Own Lightsaber
phodgson
104
6.2k
Thoughts on Productivity
jonyablonski
69
4.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing for Performance
lara
604
68k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Docker and Python
trallard
44
3.3k
Transcript
2022/07/25 ikuma-t 「困りごと」から始める個人開発 さくらのマイクロコミュニティ(Webサービス開発者の会) #2
目次 3" 自己紹2 1" quitcostサービス紹2 " どうやってサービス開発を進めていったか
自己紹介 ikuma-t ・SIerでパッケージコンサル → 株式会社エンペイでエンジニア ・プログラミングはFJORD BOOT CAMPで学びました! ・趣味:ドット絵、ツール探し、製菓・製パン SUZURIで
販売中 @ikuma-t ikuma-t セットプチフォッカ ikuma-t.work ikuma-t IkumaTadokoro
サービス紹介
「無職になったらいくらかかる?」をいますぐ計算
quitcostとは いくつかの質問に答えるだけで、無職期間にかかるお金がわかるサービスです 2. 『どんな』お金が『いくら』かかるのかわかる! ar ステップバイステップで質問項目を入力
社会保険料 国民年金 住民税 国民健康保険 給与 年齢 就職予定月 郵便番号 退職予定月 質問は 6種類 計算 対象
サービスデモ
技術スタック Ruby 3.0 Ruby on Rails 7.0 JavaScript Vue 3.2
TailwindCSS Docker GitHub Actions Heroku PostgreSQL PostgreSQL (CompositionAPI) ※webpackerを使用 バックエンド 言語 言語 フレームワーク フレームワーク フロントエンド インフラ 自動テスト Cypress Jest RSpec
そこそこバズりました
どうやってサービス開発を進めていったか
サービス開発の進め方 サービス開発の進め方 FJORD BOOT CAMPに参加していたので、このスタイルで進めました! 技術検証 ペーパープロトタイプ作成 エレベーターピッチ作成 開発・デプロイ カンバン作成
リリース作業 ・どんなサービスを作るか ・端的にまとめたピッチを作る ・コアとなる技術の素振り ・Vue3やTailwindなどの最新 技術の適合性チェックなど ・どんな機能・画面が必要か ・デザインをどうするか ・Figmaで作成 ・GitHubを使いながら開発 ・デプロイはHeroku ・リリースまでに必要なタスクを 全て洗い出し ・GitHub Projectを利用 ・リリースブログの作成 ・リリースツイート・動画作成 ・リリースを楽しむ リリースまでのロードマップ
エレベーターピッチを考える〜どんなサービスを作るか決める〜 自分がサービス案を考えた時の3つのポイント b 日常のふとした困りごとを見逃さなa 実現性度外視でとにかくアイデアを出` 一番熱量を注げそうな困りごとに目をつける
エレベーターピッチを考える〜どんなサービスを作るか決める〜 ・FinDest:出発地と所要時間を入力すると、その範囲で適当に目的地を見繕ってくれるサービス ・CHUKAN:mediumで英語を学びたい人のためのサービス ・おなまえクック:食材、調味料、調理法を選ぶとそれっぽい料理名を出してくれるサービス ・∞タイピング:キーを入力すると(見かけ上は)画面にソースコードが入力されていくタイピングアプリ ・カンケツセン:登録している漫画が完結したら教えてくれるサービス ・Zine:ZennとかQiitaとかはてなブログとかいろんなとこに書いている記事をRSSでひとまとめにして発信できる ・AmaWant:Amazonのほしい物リストをドラッグ&ドロップで作れるようにするやつ ・ハッカソンカレンダー:地域rbカレンダーのハッカソンイベント版 ・SpeakerDeckGallery:SpeakerDeckのスライドをまとめてイベントページにできるサービス
・日めくりカレンダー:ありそうでなかったシンプルなデジタルひめくりカレンダー 実際に出てきたサービス案の例 日常で感じたことをメモ → 名前をつけることで取り組みへのモチベーションUP!!
エレベーターピッチを考える〜どんなサービスを作るか決める〜 ・FinDest:出発地と所要時間を入力すると、その範囲で適当に目的地を見繕ってくれるサービス ・CHUKAN:mediumで英語を学びたい人のためのサービス ・おなまえクック:食材、調味料、調理法を選ぶとそれっぽい料理名を出してくれるサービス ・∞タイピング:キーを入力すると(見かけ上は)画面にソースコードが入力されていくタイピングアプリ ・カンケツセン:登録している漫画が完結したら教えてくれるサービス ・Zine:ZennとかQiitaとかはてなブログとかいろんなとこに書いている記事をRSSでひとまとめにして発信できる ・AmaWant:Amazonのほしい物リストをドラッグ&ドロップで作れるようにするやつ ・ハッカソンカレンダー:地域rbカレンダーのハッカソンイベント版 ・SpeakerDeckGallery:SpeakerDeckのスライドをまとめてイベントページにできるサービス
・日めくりカレンダー:ありそうでなかったシンプルなデジタルひめくりカレンダー 実際に出てきたサービス案の例 「実際に自分が経験して困った!」 「他に類似のサービスがない!」 「もしこの問題を解けたならワクワクする!」 最終的な判断基準
それが自分にとっては「quitcost」というサービスだった 質問は 6種類 自分も仕事をやめて無職になって調べまくったから ・自分が実際に仕事をやめて、かかるお金を調べる際にめんどくさかった & わかりづらかった ・私たちの生活の中には「使いづらい」「わかりづらい」と不満を感じるような仕組みがまだまだたくさんある ・退職はそれ自体が結構エネルギーのいる &
頻繁に発生するイベントではない ・「誰かがどうにかしてくれるのを待つんじゃなくて、自分でなんかいい感じにしたい!」 ・「もしこのわかりづらい退職周りのお金の計算を、今風にわかりやすく見せられたらすごいいいかも!!!」 ・FJORD BOOT CAMPでも仕事をやめてエンジニアになる人が結構いた 「わかりづらさ」「煩雑さ」に対して自分にできることをしていきたい
「無職になったら、『どんな』個人負担が『いくら』増えるのかがわかりづらいという問題」を解決したい 「年収と基礎データ(年齢、郵便番号など)、無職期間を入力すると、 個人負担となる保険、年金、税金の額を知ること」 ができ、 「計算ツール」です。 「転職準備のためにしばらく無職になる人」 向けの、 「各料金ごとに手計算やシミュレータで算出するの」とは違って、 「計算式を意識せずに、全料金を一括で計算できる機能」が備わっている事が特徴です。 というサービスは、
ELEVATOR PITCH
ペーパープロトタイプ Figmaで作成しました(画面全部 + 初期ロゴ)
カンバン作成と進捗のコツ① GitHub Projectでざっくりとしたリリースまでのタスクを作成 インボックス 思いついたやりたいこと全部 とりあえずぶちこみます! インボックスのうち、リリースまでに やることをここに移動します インボックスのうち、リリースまでに やることをここに移動します
今週終わった分です。週1の進捗 報告会で報告します 報告が終わった分を移動します やること 作業中 今週やったこと 完了
カンバン作成と進捗のコツ② UE やりたいことは全部インボックスA SE リリースまでに「やらないこと」を決め DE 進捗がないのも進捗。現実から逃げない
技術検証・開発 総制作期間(日報単位) 開発スケジュール エレベーターピッチ ペーパープロトタイプ 技術検証 DB・URI設計 Gem開発編 環境構築編 管理機能編
API作成編 フォーム作成編 リファクタリング レビュー対応 日 commit PR 136 502 320 総作業量(コミット単位) 総作業量(Pull Request単位) 10/21 04/19 26回 18回 27回 14回 14回 37回
リリース作業 想定利用者は無職になりそうな人、無職の人 直接ターゲットにすると、利用者がかなり限られてしまう... リリースはZenn & Twitterで告知 OGPっぽいけど、これが動画
リリース作業 想定利用者は無職になりそうな人、無職の人 直接ターゲットにすると、利用者がかなり限られてしまう... ・誰しも皆、潜在的に無職になる可能性のあるユーザー ・「なんか良さそう」と思ってクリックしてもらって、いつの日か 使ってもらおうという魂胆 ・リリース前日にAdobe Premier Proを契約して、 リリース当日に解約しました
ツイートに動画を埋め込み、15秒でアプリの全機能を盛り込む! リリースはZenn & Twitterで告知 OGPっぽいけど、これが動画
補足:Twitter Media Studio ツイートに動画をつけるときに便利 ・アナリティクスで有効にすると使えるようになる ・Media Studioにアップロードした動画は、タイトルやサムネイル、 リンクを設定できるように! ・OGP相当の情報量 +
実際に動くアプリを、1つの動画欄だけで 見せることができるように! リンク 動画 タイトルと説明
そこそこの期間開発してきた (厳密には別のこともやってたけど)
新仕様考案したりとか ロゴをリニューアルしたりとか 住民税の計算勉強したりとか はじめはなかった機能を途中で思いつき、 デザインから作り直しました もっとわかりやすいロゴを! と思って、突然ロゴとOGPをリニューアル 資格試験の書籍自腹で買いました (4000円くらいする) $
ただ就職のために作るのではなく 色々と意欲的にリリースまで取り組めたのは...
自分の「困りごと」を解決する サービスだったから!
自分の「困りごと」を解決するサービスを作るメリット bX 自分がユーザーだから解像度が高7 UX 自分の課題が解決できるのでモチベが続きやす7 WX 人に説明する時も堂々と説明できる
自分の「困りごと」から 個人開発を始めてみよう!!
ありがとうございました