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

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

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）

3 © 2012-2022 BASE, Inc. #front_okinawa 自己紹介個人開発が好きプログラミングをするパンダ（@Panda_Program）ブログ書いてます
https://panda-program.com/ ビールの画像投稿サイト作りました https://beerbreak.info/ Next.js + Vercel + Supabase

10 © 2012-2022 BASE, Inc. #front_okinawa 本発表の構成個人開発の目的を決める１無料で続けるための技術選定
２３個人開発の楽しさとメリット

13 © 2012-2022 BASE, Inc. #front_okinawa TO RELEASE OR NOT
TO RELEASE, THAT IS THE QUESTION.

15 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の目的を決める • リリースの有無で行動が大きく変わる ◦
技術選定 ◦ 作りたいもの ◦ 解決したい課題 ◦ 日常生活の中の優先順位 etc. • 開発期間が長いほど自信が減る ◦ 空振りした時のダメージリリースするか、しないのか

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

22 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の目的を決める • ゴールを決めよう ◦
リリースしなくてもいい ◦ 馴染みのない技術・手法がオススメ ▪ Rust でも DDD でも何でも ◦ GitHub にコードを上げよう ◦ 技術ブログを書こう • 気楽にやろう ◦ CRUD のある Blog や TODO リストが丁度いい目的が学習の場合

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

28 © 2012-2022 BASE, Inc. #front_okinawa Quoted by t_wada Simulator
にて生成　 https://unit8.net/quoted/index.html

32 © 2012-2022 BASE, Inc. #front_okinawa × お金 💰 ×
スキル 💻

33 © 2012-2022 BASE, Inc. #front_okinawa ◦ 時間 🕑 ◦
モチベーション 💪

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. フロントエンド

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

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

50 © 2012-2022 BASE, Inc. #front_okinawa 無料で続けるための技術選定 • PlanetScale ◦
YouTube 出身の人が作った • アイデア次第で何でもOK ◦ Google Sheets（旧 SpreadSheet） ◦ Notion ◦ microCMS, WordPress etc. データベース

54 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット • 初心にかえれる •
思い通りに作れる楽しさ • 何かに熱中するのは幸せ ◦ 人生の幸福３種類 ▪ 何かを作ること • ex. 創作 ▪ 良質な作品を味わうこと • ex. 美術館、小説 ▪ 暇潰しすること • ex. Twitter 個人開発の楽しさ＝ものづくりの楽しさ

58 © 2012-2022 BASE, Inc. #front_okinawa 何を作るべきなのか知りたい！イケてるサイトを作りたい！人に使ってもらいたい！お金を稼ぎたい！
〇〇を学ぶことになる〇〇を学ぶことになる〇〇を学ぶことになる〇〇を学ぶことになるヒットするサービスを作るために... 個人開発の楽しさとメリット

59 © 2012-2022 BASE, Inc. #front_okinawa 何を作るべきなのか知りたい！イケてるサイトを作りたい！人に使ってもらいたい！お金を稼ぎたい！
イノベーションを学ぶことになる〇〇を学ぶことになる〇〇を学ぶことになる〇〇を学ぶことになるヒットするサービスを作るために... 個人開発の楽しさとメリット

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

62 © 2012-2022 BASE, Inc. #front_okinawa 何を作るべきなのか知りたい！人に使ってもらいたい！イノベーションを学ぶことになるマーケティングを学ぶことになる
ヒットするサービスを作るために... イケてるサイトを作りたい！お金を稼ぎたい！〇〇を学ぶことになる〇〇を学ぶことになる個人開発の楽しさとメリット

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

65 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリットマーケット（市場）セグメンテーション - コーヒー
『ブランディングの教科書』羽田康祐ほか（p.192 ~ 198）

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

68 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリットマーケット（市場）セグメンテーション - コーヒー
『ブランディングの教科書』羽田康祐ほか（p.192 ~ 198）

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

ヒットするサービスを作るために... イケてるサイトを作りたい！お金を稼ぎたい！デザインを学ぶことになる〇〇を学ぶことになる個人開発の楽しさとメリット

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

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

ヒットするサービスを作るために... イケてるサイトを作りたい！お金を稼ぎたい！デザインを学ぶことになるビジネスモデルを学ぶことになる個人開発の楽しさとメリット

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

82 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット • リーン開発 ◦
MVP リリース = 市場の反応を見る ◦ 無駄をなくす • 顧客参加 ◦ アジャイルのプラクティス ◦ XP -> 本物の顧客参加 ◦ スクラム -> スプリントレビュー • 「本当に顧客の欲しいものを作っているか？」開発者の視野を広げる

88 © 2012-2022 BASE, Inc. #front_okinawa HTML・CSS って何？状態 →学習へ <div></div>
ばかりローコードツールを使ったどこにデプロイしたのかもわからないリリースしても（もちろん）無風習作のつもりで作った挑戦と挫折「ウィスキー工場の見学予約を楽に」が目的個人開発の楽しさとメリット次はログインしたり投稿したり、動きのあるサイトを作ろうと考える

90 © 2012-2022 BASE, Inc. #front_okinawa 1社目 2社目サーバーサイドエンジニアとしてWordPressの受託会社に入社サーバーサイドエンジニアとして転職、個人開発で
React に興味を持つキャリアが広がる個人開発の楽しさとメリット

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

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

React に興味を持つキャリアが広がるフロントも任せてもらい、Next.js（React）と PHP で新規開発を担当個人開発の楽しさとメリット

React に興味を持つキャリアが広がる現職フロントも任せてもらい、Next.js（React）と PHP で新規開発を担当フロントに専念したいと思い、フロントエンドエンジニアとして転職個人開発の楽しさとメリット

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 公開中

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

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/

114 © 2012-2022 BASE, Inc. #front_okinawa Special Thanks 資料のレビューありがとうございました！（時系列順） 02さん
（@cocoeyes02）がっちゃんさん（@gatchan0807）ジャバ・ザ・ハットリさん（@nodenodenode1） catnoseさん（@catnose99）

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

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

More Decks by panda_program

Other Decks in Programming

Featured

Transcript