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
860
「困りごと」から始める個人開発
#さくらのマイクロコミュニティ (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
790
いまさらのStorybook
ikumatadokoro
0
650
これで最後にしたい! Astroと立ち向かう 6度目の個人ブログ再開発
ikumatadokoro
5
1.5k
Panda CSS と Ark UI ではじめる個人開発
ikumatadokoro
4
2.1k
見た目から始める生産性向上
ikumatadokoro
11
5.7k
ぼくが 美容師さんに伝えたかった バンドの話
ikumatadokoro
0
260
Railsアプリをコスパよく読むための環境整備
ikumatadokoro
2
1.1k
HTTPを手で書いて学ぶ ファイルアップロードの仕組み
ikumatadokoro
80
31k
たどころくん1号を支える技術
ikumatadokoro
1
290
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
930
freeeにおけるAIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
2
460
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
190
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
980
#QiitaBash MCPのセキュリティ
ryosukedtomita
2
1.5k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.6k
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
100
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
650
AIのメモリー
watany
6
260
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
410
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.9k
PHPカンファレンス関西2025 基調講演
sugimotokei
5
870
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
How to Ace a Technical Interview
jacobian
278
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
For a Future-Friendly Web
brad_frost
179
9.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building Adaptive Systems
keathley
43
2.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
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 人に説明する時も堂々と説明できる
自分の「困りごと」から 個人開発を始めてみよう!!
ありがとうございました