個人開発の失敗を避けるイケてる考え方 / tips for indie hackers

by panda_program

Slide 1

Slide 1 text

個人開発の失敗を避けるイケてる考え方フロントエンドカンファレンス沖縄2022（2022.11.19）プログラミングをするパンダ (@Panda_Program)

Slide 2

Slide 2 text

2 © 2012-2022 BASE, Inc. #front_okinawa 自己紹介 ● BASE株式会社 ● 所属：BASE / Product Dev / CRM3 ● 現在のお仕事：シニアエンジニア ○ フロントエンドで React（Next.js）を書いたり Vue.js を書いたり ○ バックエンドでは PHP を書いてます ○ 最近は顧客管理機能（CRM）を開発してます ● 好きなことと活動 ○ DevOps とアジャイルの開発プロセス（特にXP）が好き ○ Software Design 2022年3月号で TDD 特集の2,3部を執筆しました ○ twitter: @Panda_Program プログラミングをするパンダ（@Panda_Program）

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

19 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の目的を決める ● 最短でリリースしよう ○ 時間というリソース配分がキモ ■ 慣れた技術がオススメ ■ 仕様を考える時間 ■ デザインする時間 ■ 利用規約 etc. ● 果たすべき責任がある ○ セキュリティは問題ないか ○ 他サービスに対する違反ではないか ■ ex. スクレイピングでのデータ取得が規約違反だった目的がリリースの場合

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

27 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の目的を決める ● 技術の勉強になってるから十分だ ○ だからリリースしなくてもいい ● 使ってくれる人がいるかわからない ○ だからリリースしたくない ● デザインがイケてないから見せたくない ○ だからリリースしたくない ● ダサいプロダクトを出して大外れしたと思われたくない ○ だからリリースしたくない言い訳の悪魔

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

45 © 2012-2022 BASE, Inc. #front_okinawa 無料で続けるための技術選定 ● 好きなものを使う ○ Web なら、React, Vue, Svelte ■ Next.js, Remix, Nuxt.js, Svelte Kit ○ Astro, Qwik、Rust で WASM etc. ● モバイルアプリでもOK ○ Flutter ○ React Native etc. ● デスクトップアプリでもOK ○ Electron ○ Tauri etc. フロントエンド

Slide 46

Slide 46 text

46 © 2012-2022 BASE, Inc. #front_okinawa 無料で続けるための技術選定 ● Firebase ○ 認証、DB（NoSQL）、ストレージ ○ ホスティング、サーバーレス関数 etc. ● Supabase ○ 認証、DB（PostgreSQL） ○ ストレージ（S3） ○ GraphQL も ● Hasura ○ GraphQL、認証、DB（PostgreSQL）バックエンド - BaaS

Slide 47

Slide 47 text

Slide 48

Slide 48 text

48 © 2012-2022 BASE, Inc. #front_okinawa 無料で続けるための技術選定 ● 静的サイト ○ Github Pages ○ Cloudﬂare Pages ○ Netlify、Firebase ● Node.js 環境 ○ Vercel、Netlify ● 様々な環境 ○ Heroku（11/28から有料化へ...） ○ render（コンテナ） ○ AWS Lamda ○ 言語に応じて調べてみてくださいデプロイ先

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Slide 61

Slide 61 text

61 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット ● イノベーションとは「新結合」である ○ 既存のものを組み合わせること ○ 一概に「これを作れ」とは言えない ● 「自分の困りごとを解決しよう」 ○ 何を作るべきかというよくある問い ○ 大企業がトライできないこと - nits ● アイデア = 多産多死モデル ○ 数打ちゃ当たる - 1000に3つ ○ cf. 産業革命とIT革命 ■ 機械（ハード）とソフトウェア ■ 寝ながらコーヒーを飲む機械イノベーションを学ぶ

Slide 62

Slide 62 text

Slide 63

Slide 63 text

Slide 64

Slide 64 text

64 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット ● ものづくりはマーケティングと対局 ○ マーケティングは戦略 ■ What, Who（誰に何を売るか） ○ ものづくりは実行 ■ How（どうやって作るか） ● 市場機会を発見する ○ 個人開発の市場はレッドオーシャン ■ ブルーオーシャンまだあります？ ○ セグメントに分ける ■ 消費者 - ペルソナはここ ■ マーケット（市場）マーケティングを学ぶ

Slide 65

Slide 65 text

Slide 66

Slide 66 text

Slide 67

Slide 67 text

67 © 2012-2022 BASE, Inc. #front_okinawa 家庭用 vs 屋外用ホットコーヒー vs アイスコーヒー自分達用 vs ギフト用ファミリー世帯 vs 少人数世帯女性用 vs 同僚用 vs 男性用作業場 vs オフィス用コーヒー市場セグメント化の軸個人開発の楽しさとメリットプライベート時間 vs 仕事時間『ブランディングの教科書』羽田康祐ほか（p.192 ~ 198）

Slide 68

Slide 68 text

Slide 69

Slide 69 text

Slide 70

Slide 70 text

70 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット ● 本物の顧客志向になる ○ 必ずニーズから出発する ■ 課題は自分だけ？他の人は？ ○ 顧客の Job を解決する ■ Jobとは不満、不便、不平 etc. ● 「良いものを作れば売れる」は間違い ○ 「良い」の定義は顧客の課題から ○ エンジニアと顧客の「良い」は違う ■ PHP / Rust, jQuery / React マーケティングを学ぶ

Slide 71

Slide 71 text

Slide 72

Slide 72 text

Slide 73

Slide 73 text

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Slide 76

Slide 76 text

76 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット ● いいデザインを知る ○ デザイナーが見ているサイトを見る ■ dribbble, Cocoda etc. ● デザインはセンスではない ○ デザインの4原則 ○ 近接 / 整列 / 反復 / コントラスト ● look and feel（見た目と雰囲気） ○ 「使いやすい」だけでは売れない ○ ブランド戦略 ■ マーケティングの重要な要素 ■ ex. 純粋想起デザインを学ぶ

Slide 77

Slide 77 text

77 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット ● オススメのブログ ○ 「Redesigning Laravel.io」　　　（medium） ○ Tailwind CSS の作者が Laravel のホームページを再デザインする思考過程デザインを学ぶ https://medium.com/refactoring-ui/redesigning-laravel-io-c47ac495dff0

Slide 78

Slide 78 text

Slide 79

Slide 79 text

79 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット ● ビジネス = 役務・物品の提供 + 対価 ○ 個人開発は役務（サービス）の提供 ● ビジネスモデルを知るために ○ 「図解ビジネスモデル大全」etc. ○ 有価証券報告書 ● 個人開発でマネタイズ ○ 都度・定額課金、広告、アフィ etc. ● お金の話をするのはイヤですか？ ○ 「ロマンとソロバン」 ○ OSS も会社でやる時代 ■ Next.js, Nuxt.js, Rome etc. ビジネスモデルを学ぶ

Slide 80

Slide 80 text

Slide 81

Slide 81 text

Slide 82

Slide 82 text

Slide 83

Slide 83 text

Slide 84

Slide 84 text

Slide 85

Slide 85 text

Slide 86

Slide 86 text

Slide 87

Slide 87 text

Slide 88

Slide 88 text

ばかりローコードツールを使ったどこにデプロイしたのかもわからないリリースしても（もちろん）無風習作のつもりで作った挑戦と挫折「ウィスキー工場の見学予約を楽に」が目的個人開発の楽しさとメリット次はログインしたり投稿したり、動きのあるサイトを作ろうと考える

Slide 89

Slide 89 text

Slide 90

Slide 90 text

Slide 91

Slide 91 text

Slide 92

Slide 92 text

92 © 2012-2022 BASE, Inc. #front_okinawa React + Material UI + Atomic Design Laravel、EC2 + Docker バックエンドの改修がしづらい → オブジェクト指向設計に興味を持つ YouTube API を利用、定期的にチャンネルごとの最新動画を取得してDBに保存デザインが苦手なのでMaterial UIを使ったら、友人から「Googleのサービス？」と言われた需要もないし宣伝も足りなかったリリースしても（もちろん）無風挑戦と挫折「日本語ラップ動画の視聴をラクに」が目的個人開発の楽しさとメリット気合い入れたのに無風だったので、喪失感からバーに行って一人で飲んだ

Slide 93

Slide 93 text

Slide 94

Slide 94 text

Slide 95

Slide 95 text

95 © 2012-2022 BASE, Inc. #front_okinawa GatsbyJS + Scss + Tailwind CSS 記事一覧やランキングなど改修して Reactを学んだ GatsbyJSのスターターを使った GraphQL のクエリの書き方を学べたサービスは「ガワ」と「コンテンツ」から成ることに気づくリリースしても無風だったが、たまにバズった挑戦と挫折「自分のサイトを持ってみること」が目的個人開発の楽しさとメリット WPもCreate React Appも選ばなかった

Slide 96

Slide 96 text

Slide 97

Slide 97 text

Slide 98

Slide 98 text

98 © 2012-2022 BASE, Inc. #front_okinawa 1社目 2社目サーバーサイドエンジニアとしてWordPressの受託会社に入社サーバーサイドエンジニアとして転職、個人開発で React に興味を持つキャリアが広がる現職フロントも任せてもらい、Next.js（React）と PHP で新規開発を担当フロントに専念したいと思い、フロントエンドエンジニアとして転職個人開発の楽しさとメリット

Slide 99

Slide 99 text

Slide 100

Slide 100 text

100 © 2012-2022 BASE, Inc. #front_okinawa Next.js + Tailwind CSS + Cloudﬂare Pages Tailwind UI を買ったので使ってみたプロトタイプは6時間、完成まで10日 Vercel を使っていたが、無料枠超過により Cloudﬂare Pages に移行 RSSでzenn、はてブ、noteの投稿を集約別のサイトの個人開発の息抜きに作った挑戦と挫折「自分のブログをモダンなデザインにリニューアルすること」が目的個人開発の楽しさとメリット Storybook 公開中

Slide 101

Slide 101 text

Slide 102

Slide 102 text

Slide 103

Slide 103 text

Slide 104

Slide 104 text

Slide 105

Slide 105 text

Slide 106

Slide 106 text

106 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット ● 学習対象に設計を加える ○ すぐにリリース = その後はひたすら改善 ○ しっかり設計 = 改善の速度が落ちない ● 学習対象にテストを加える ○ テストの視点があるときれいな設計に繋がる ○ 複雑なところだけでいいかも ● アーキテクトの視点を持つ ○ 変化に強い技術選定個人開発を仕事に活かすコツ

Slide 107

Slide 107 text

Slide 108

Slide 108 text

Slide 109

Slide 109 text

Slide 110

Slide 110 text

Slide 111

Slide 111 text

Slide 112

Slide 112 text

Slide 113

Slide 113 text

113 © 2012-2022 BASE, Inc. #front_okinawa Special Thanks おすすめの資料「Cloudﬂare Pages・Vercel ・Netlify の違いや使い分けをまとめる」by @catnose99 さん（各サービスのスペックや使用感が詳しく書かれている） https://zenn.dev/catnose99/scraps/6780379210136f 「イケてる個人開発の進め方」 by @yuno_miyako2 さん（個人開発における時間配分の話が載っている） https://www.docswell.com/s/6649915/ZG7885-yuno_miyako 運営者ギルド（個人開発者のコミュニティ） https://qiita.com/organizations/admin-guild Indie Hackers（海外の個人開発者のコミュニティ） https://www.indiehackers.com/

Slide 114

Slide 114 text