2021年に個人開発したサイトとツールを振り返る
2021年の活動を振り返る
2021年も年の瀬です。今年も家で過ごす時間は少なくありませんでした。
結果、通勤時間がなくなったことにより個人開発と技術記事の執筆に充てる時間を今までより確保できました。そんな今年のことを振り返ってみます。
個人開発の記録
2021年は3つの開発に取り組みました。 2つのツールを開発し、1つのサイトは現在開発中です。最後のものは来年1月末にはリリースできそうです。
技術スタックはどれも自分が一番慣れている Next.js + TypeScript + Tailwind CSS + Vercel を採用しています。
以下で簡単に紹介していきます。
Panda Editor（2021年1月中旬~2月初旬）
1つ目は、個人用のツール「Panda Editor」です。 このツールは技術記事執筆に役立つ自分用のエディタです。概要は以下の記事にまとめたり、当時所属していた会社の勉強会で発表しました。
Electron + Next.js + Tailwind CSS で Markdown エディタを作った
技術としては、Electron、Next.js、Tailwind CSS に加えて Textlint を採用しており、自分が書いた文章に対してリアルタイムで日本語の表記チェックが入ります。
Electron を使ってデスクトップアプリを作ってみたかったことが技術的なモチベーションでした。
また、開発の動機は PhpStorm や VSCode といったエディタが技術記事を書くに当たり少し物足りないと感じたことでした。
解決したかった課題は、文章執筆の過程でほとんど必須になるリサーチを簡単にすることです。 つまり、文章を書きながら、自分の知識を確認したり外部の著作物を引用するために Google 検索することを楽にして、書くことと調べることをシームレスにしようと試みていました。
工夫した点
この考え方をツールに反映するために、文章を記述するための入力欄は常に画面の左半分に表示しています。 また、右半分を「マークダウンのプレビュー」、「Google のトップページ」、「PDF などローカルのファイルを表示する画面」、「Textlint のエラーを表示する画面」に割り当てました。
それぞれの機能に対してプレビューモード、検索モード、閲覧モード、校正モードと名前でユースケースに応じて呼び分けました。 これがこのエディタの特色です。
このツールを作っていた2021年の1〜2月は、「人がこぞって使いたくなるツールのアイデアを自分は何も思い浮かばない。しかし、個人開発はしたい」という時期だったため、プライベートレポジトリで開発していました。今も公開はしていません。
結局自分でも今はこのツールを使っておらず、この記事は PhpStorm で書いています。この時期、仕事は忙しかったですが、個人開発の時間を捻出できたことや Electron の勉強ができたことに意義がありました。
また、前年の2020年は個人開発に対して大きく自信を失っていたため、2週間でそれなりのものが作れるんだという自信を取り戻したので振り返ると自分にとっていい経験になりました。
なお、Electron + React の実装に関しては azu さんの faao という GitHub Client の内容を参考にしていました。
レポジトリを見ると約 100 commit で作っています。
note PDFy(2021年6月末 ~ 8月上旬)
次に、note PDFy というツールを作ってみました。これは note の記事を PDF 化してダウンロードできるようにするツールです。 エンジニアの方は「Chrome の印刷機能で PDF 化できる」と思われるかもしれませんが、保存して手元に置いておきたい記事がいくつもある時にその作業は少し面倒なんです。
そこで、記事の URL を入力するだけで、自動で PDF が生成できるようにしました。 なお、後述するように初期の仕様は「note のユーザー名を入力すると、その著者の記事を zip でダウンロードできる」というものでした。
使用技術は、フロントエンドは Next.js + TypeScript + Tailwind CSS + Vercel。バックエンドは Node.js + TypeScript + Puppeteer + Cloud Functions for Firebase です。
課題発見の方法としては、自分が note で特定の著者の記事を一気に読みたいと思ったことです。 特に PDF で保存して iPad で読みたいと思ったので、以下の記事で紹介したツールを使って note の特定の著者の無料記事を全部にダウンロードして、ローカルでPDF 化するシェルスクリプトを4月に書いてみました。
その内容は以下のブログ記事に記述しています。
Rust製CLIツールmonolithでnoteの記事を簡単に保存する
これが note PDFy のアイデアの原型になり、そのまま同じことを Web アプリケーションでできるようにしようと考えました。 ちなみに、一気読みした note の著者は LayerX の福島さんです。
自分にとって新しい試み
さて、このツールを作る際に初めて取り入れた手法があります。それは需要を探るためのインタビューと、自分用の UI コンポーネント集の作成です。
前者に関しては、アルファ版、ベータ版の時点で感想を聞きました。具体的には、note のユーザー名を入力してもらい、ダウンロードボタンを押すとダミーの zip をダウンロードできるサイトを友人に見せて反応を伺いました。 質問事項としては、「note を普段読むか」「サイトに対してどんな印象を受けたか」がメインです。
計6名にフィードバックを貰ったものの、誰も習慣的に note を読む人はいませんでした。 友人のうち1人が非エンジニアで残りが全員エンジニアとサンプルが偏っていたこともあるかもしれません。ただ、よくないとわかっていも失敗するのが恥ずかしいので個人開発に理解のあるエンジニアを優先していました。そもそも感想を貰えるだけありがたいです。
この画像に書かれている感想を見てもわかるように、はっきりいって note を PDF で保存するという需要はなかったです。 しかし、その段階で目標を「とりあえず作り切ること」と「自分用の UI コンポーネント集を作ること」に切り替え、「note のユーザー名をどこから取得すればいいかわからない」と評判が悪かった note の著者名を入力する仕様を変え、note の 記事 URL を入力する仕様に変更しました。
特にこのツールのユースケースをサイトに記載したところ、使う場面や目的がわかりやすいと評判が良かったです。
このツールは公開まで持っていきましたが、やはり使ってもらえる数は多くありません。 2021年12月のアクセス数は10だけです。実際、「note PDF 化」という検索ワードでも Google 検索の上位にきていないため検索流入も期待できません。
しかし、UI コンポーネント集は手元に残りました。次にサイトを作る際にもゼロからのスタートではありません。 今までは新しくサイトを作るときにゼロベースで作っていたため、次につながる資産を残そうと最初から考えていました。そして、これが次の Beer Break 開発で役立っています。
なお、note PDFy の開発後、多くの人に使ってもらえるサービス開発に必要なのはマーケティングの知識と実践ではないかと考え始めました。 そこで note の記事「【1時間で分かる】P&G流マーケティングの教科書」を読んだり（何度も読みたいのでもちろん note PDFy で PDF として保存しました）、 USJを立て直したマーケターの森岡さんの本や ジョブ理論、 ブランディングの教科書を読みました。
ここでは深く踏み込みませんがマーケティングの考え方を知った結果、市場や消費者に対する考え方が変わりました。 また、エンジニアというクリエイター職をマーケターがどうのように見ているかも理解できました。
レポジトリを見ると360コミット（フロントエンド 300 commit、バックエンド 60 commit）でした。
Beer Break(2021年9月上旬~現在)
現在は Beer Break というビールのレビュー投稿サイトを開発しています。
使用技術は Next.js + Tailwind CSS ですが、バックエンドに Firebase に代替である BaaS である Supabase を利用しています。 また、基本的な UI は note PDFy で作成した UI コンポーネントをそのまま流用しています。
note PDFy に比べて画面数もコンポーネント数も増えたので、さらに多くのコンポーネントを UI コンポーネント集に追加しています。 UI コンポーネント集は段々と育ってきており、Storybook のコンポーネントも多様になりました。
Beer Break 開発のモチベーションは、ちゃんとした UGC のサイト（User generated content。ユーザーの投稿がコンテンツになるサイトのこと）を作ることでした。 そこで、Supabase でフィジビリティ調査を1ヶ月ほど実施し、機能的に問題ないことを確認しました。
その過程で Postgres の DB のテーブル設計をしたり、Supabase の使い方を調査した結果を Zenn のスクラップ にまとめています。
現在サイトは完成しておらず、また機能としては一般的な UGC であるため、プロダクト自体に特筆するところは今のところありません。 そこで、開発の過程で工夫した点を紹介します。
工夫のポイント4点
1. Changelog 駆動開発
今は Changelog 駆動開発（Changelog に TODO リストを記述し、1つずつタスクを処理すること）で開発しています。
この効用は、パソコンを開いた時に次にやることが明確であることです。 もし TODO リストがないと「今日は何をやろうかな」と考えながらエディタではなくブラウザを開いてネットサーフィンが始まるでしょう。それは時間の浪費です。
自分の時間というリソースを上手に活用するため、タスクに優先順位をつけて着実に開発を進めることを意識した結果、この形になりました。 初めは Trello や GitHub Issue を使ってタスク管理していたのですが、個人開発である限り他人に詳細を共有する必要がないのでシンプルな TODO リストに落ち着きました。
2. 個人開発に取り組んだ時間を記録する
また、個人開発に充てている時間を記録するようにしました。 これは心理学でいうところの「認知の歪み」を矯正するために有効な手段です。
具体的には、このシートで作業を振り返ることで「たくさん時間をかけたのに少ししか進んでいない」、「やらないといけないのにもう何日間もサボってしまっている」という思い込みを修正することが可能です。
前者に対しては、工数という客観的な数字を見返すことにより「大変な実装だったから時間をロスしてしまった。自分に実力が足りないからだ。だけどシートを見ると6~8時間しか使っていない。これは1人日だからそこまで大変じゃなかったな」と自分を納得させられます。
後者は、「何日もサボってるように思ったけど、シートを見ると1日や2日しか休んでいない。しかもこの2日間は飲み会や家族と過ごす時間に充てたからリアルな人間関係を重視することはいいことだ」と、記録のおかげで明日からまた取り組もうという気力が湧いてきます。
ただし、絶対にしてはいけないのは取り組んだ時間を時給で計算することですね（笑）。 フロントエンドエンジニアなら3000円から3,500円が相場かなと思いますが、単純に時間と単価を掛け算をしたらかなりの金額を稼げています。ただ、副業と個人開発ではプレッシャーと責任が全然違うので、実のところ単純な比較はできないですが。
3. 開発者ギルドの Slack に参加する
個人開発者の集まりである運営者ギルドの Slack に参加しました。 目的は個人開発を継続する仲間の姿を見たかったからです。
個人開発の鬼門は、技術的な課題の解決やマーケティング課題の解決ではなくモチベーションの維持です。
おそるおそる Slack に入ってみると、自分がエンジニアになる前にブログを読んでいたジャバ・ザ・ハットリさんや Zenn を開発した CatNoseさん、個人開発したサイトを売却した nabettuさん、英単語辞書&暗記アプリ BooQs のかわんじさん、投げ銭アプリ Baskadia の小林さん（いつも Slack の投稿に対してスタンプありがとうございます☺️）などなど、ここに挙げきれないほどの個人開発のスタープレイヤーと話す機会がありました。
毎月のユーザーの増加具合やサブスクの売上データ、投資家にアプリを見せて出資を募ったことやサイトをリリースした週に100万 PV があったことなどの投稿が日々されているため、自分も頑張ろうというモチベーションが湧いてきます。
4. マーケティングの手法を取り入れる
note PDFy の反省を踏まえてマーケティングの書籍をいくつか読んだため、早速その手法を実践することにしました。 例えば、以下のツイートはテストマーケティングの手法です。
自分の Twitter のフォロワーはほとんどがエンジニアの方なのですが、それでも目標としたいいね数、RT数を超えたので開発しようと決めました。
本当は、初速の PV 数がすごいねと言われるサイトの告知ツイートは3000いいねくらい貰っているのは知っています。このため、自分のツイートは全然人の興味を惹けていないと思うのですが、今は Twitter での宣伝のみならず違う媒体で宣伝して認知をもっと広げれば使ってくれる人も増えるのではないかという仮説を立てているのであまり気にしていません。
認知率という言葉はキーワードです。 note PDFy も認知を広めていなかったためユーザー数が増えていないと推測しています。実際、note を使っているユーザーのためのツールなのに、Twitter で告知しかしていなかったです。 このため、今はツールを必要としている人に認知されていないからユーザー数が増加しないと考えています。
マーケティングの考え方を知る前は、自分のツールがイケてないからだ、Chrome の機能で十分だとみんな思っているからだ、機能が足りないから使ってもらえないのだと思っていました。 しかし、実際は認知率を上げるところから市場との勝負が始まるのです。
下に掲げる消費者のマインドフローを考慮すると、サイトやツールを使ってもらうためにはまず認知をとる、つまり多くの人に知ってもらう必要があります。 認知がなければいくらいいプロダクトを作っても成長は始まりません。
マインドフローは実戦マーケティング思考という本に記載されていたフレームワークです。
このフレームワークに従って、Beer Break はリリース後、しっかり宣伝をしようと思っています。
今考えている具体的な案は Facebook、note で記事を執筆、Pinterest でサイトの画像を投稿、自分の Instagram のアカウントで投稿、企業の Slack の「ビール部」に投稿をお願いするくらいですが、何かいい案があれば自分の Twitter までご提案いただければ幸いです。
色々考えることはあるのですが、まずは Beer Break のリリースに向けて一歩ずつ実装を進めていきます。 ビールを飲んだら写真を撮る、という方はぜひリリースしたら Beer Break に投稿していただければとても嬉しいです！
なお、Beer Break のコミット数は現時点で既に 1,200 です。
2021年の個人開発まとめ
2021年は今まで以上に時間的、精神的に時間を個人開発に割くことができた年でした。
今年の個人的なトピックとしては、2年半勤めた会社からの転職したり、イーサリアムを買ってNFTを1つ買ってみたり、住宅ローンを組んで家を購入しました。そのようなパーソナルな話もそのうちエッセイの形で記事にしたいと思っています。
2022年はエッセイを書くパンダというアカウントで、技術記事以外にも IT業界での働き方や個人開発・プログラミング、旅行、お金の話、家族の話など日々のことをエッセイを書いていきます。
ぜひ note のアカウントのフォローや記事に対するいいねもお願いします！
以上、プログラミングをするパンダでした。
Happy Coding 🎉
