🚀

１００万円失いながらハッキングを乗り越え誰でも１分で切り抜きを作れるサービスを公開するまでの失敗と学び

2021/07/13に公開

AWS

先日、誰でも最短1分でYouTubeの切り抜きを作れるウェブサービスを公開しました。

私はプログラミングの勉強を始めて1年半の初学者ですが、個人開発でサービスを公開するまでに、数多くの失敗と苦労をしてきました(そして今もしてます笑)。後ほど詳しく書きますが、以下のような経験をしました。

ハッキングを受けデータを盗まれる
α版をリリースするも作り直しを決意する
巻き返しのため海外フリーランサーを雇うも無駄金となる
公開前に本家が同じ機能を発表し諦めかける
β版をリリースするも使われない

同じようにプログラミングの勉強をし始めたばかりの方や、個人開発でいつかはサービスを公開したいと考えている方の「転ばぬ先の杖」として、私の経験が役に立てばと思っております。

開発したサービス

YouTubeの公式APIを利用してウェブ上で切り抜きを作成・紹介できるウェブサービス「YouClip」を開発しました。

👇ここから実際に触れます

私自身が所属するスポーツチームの動画をYouTubeにアップすることが多くあり、試合やプレーの振り返りをするのにあったら便利だなと思ったのが着想のきっかけです。考えてみると、これはスポーツのプレー分析以外にも色々と用途があるのではないかと思い、プログラミングの学習も兼ねて一般向けのサービスとして開発を始めました。

今までの失敗と学び

１．ハッキングを受けデータを盗まれる

開発を始めて間もないある日、いつものように本番サイトを開こうとするとエラーでページが表示されません。おかしいなと思いサーバ上のDBを確認すると、あったはずのテーブルが全て消えており、見慣れないWARNINGと言う名のテーブルが１つだけありました。そこにはデータが１つだけ入っており、「データを復元して欲しければビットコインを振込め」との脅迫文が書かれていました。
YouClip demo
(テーブルに入っていた全文)

To recover your lost databases and avoid leaking it: visit xxxx and enter your unique token xxxx and pay the required amount of Bitcoin to get it back. 
Databases that we have: xxxx, xxxx. Your databases are downloaded and backed up on our servers. 
If we dont receive your payment in the next 9 Days, we will sell your database to the highest bidder or use them otherwise.

(日本語訳)
失ったデータを復元し漏洩したくなければ、xxxxのサイトを訪れ、記載のトークンを入力した上で指定された金額のビットコインを支払え。お前のデータベースはダウンロードし、我々のサーバにバックアップしてある。９日以内に支払いがなければ、誰か高く買ってくれる人に売るか、別の方法で利用するだろう。

そこではじめて何者かがDBをハッキングし、データを人質にビットコインを身代金として要求しているのだと分かりました。幸いまだ開発初期で、ユーザーは身内と知り合い数人しかいなく、個人情報もメールアドレスくらいだったので、彼らにはお詫びをしてデータは諦めることにしました。まさかサーバに上げてすぐにハッキングされるとは思ってもおらず、衝撃でした。

原因は、あまり深く考えずサーバにphpMyAdminを入れていたのですが、アカウント名やパスワードが単純だったためブルートフォースアタック(総当り攻撃)でハッキングされたのだと思います(アホすぎるorz)。セキュリティに無知だった自分が悪いのですが、これが正式なリリース後だったら・・とゾッとしました。リリースする際には十二分にセキュリティ対策をしようと、苦い教訓となりました。(当然現在はphpMyAdminも入れてません)

２．α版をリリースするも作り直しを決意する

当初作ろうと思っていた機能とデザインを一通り実装し終えたので、α版として身近な友人や親戚に使ってもらうことにしました。Adobe XDでUI案を作った段階で友人などからフィードバックはもらっていたし、自分でも使いやすく作ったつもりだったので、それほど大きな問題はないだろうと思ってました。しかし、いざ使ってもらうと肝心の切り抜き機能が使いづらいと感じる人が多いことが分かりました。そのため、切り抜き機能のフローやUIを抜本的に見直すことを決意し、その影響はサービス全体にも及んで結果として大改修をする羽目になりました。

Adobe XDでUI案を作った段階で友人からフィードバックをもらっていたのですが、それでも今回の問題に気付けなかったのは、２つ陥りがちな罠にはまっていたと思います。

画面デザインを見せて意見を聞くだけで、ユーザーが操作しているところを観察しなかった
元からサービスの内容を知っている友人に意見を聞くだけで、完全に初見の人からフィードバックをもらわなかった

やはり実際に操作するのを見て初めて気が付くことが多くあり、XDの画面デザインを見せるだけでなく、プロトタイプ機能を使って模擬的に操作してもらうべきでした。また、サービスの前提知識がある人やITリテラシーが高い人だと、多少分かりにくくても使いこなせてしまいます。実際にこれから使うターゲットユーザーに合わせ、初見でITリテラシーもそこまで高くない人からもフィードバックをもらうべきでした

３．巻き返しのため海外フリーランサーを雇うも無駄金となる

３−１．Crowdworks経由で中国人のエンジニアと働く

大改修により、当初の予定よりだいぶリリース時期が遅れることが見込まれたため、巻き返しにスポットで外部のエンジニアを雇えないか考えました。知り合いをはじめ、Twitterや、クラウドワークス、ランサーズなどのクラウドソーシングサイトを利用して、フリーランスエンジニアの方々に連絡してみましたが、いいなと思う人はやはり時給にすると5,000円以上といった感じでした。自腹を切る上に、どれぐらい開発に時間がかかるかも読み切れない中で、言い方は悪いですが少しでもコストパフォーマンスの良さそうな人を必死に探しました。

そんな中、クラウドワークスに登録していたエンジニアの1人が、技術スタックや経験、公開しているポートフォリオの観点からも良さそうで、かつ時給3,000円程度のオファーだったので、その人にお願いしてみることにしました。やりとりしている段階で気が付きましたが、登録してある情報は日本語でしたが実際には彼は中国人で、英語と中国語しか使えないようでした。私自身は留学経験もあり、英語でやりとりするのに抵抗はなかったのでそのまま彼と契約することにしました。

彼とは作業時間に応じて支払いをする形(プロジェクト形式)で、途中休暇を挟みながらも足掛け2ヶ月程度リモートで一緒に働いたのですが、完成前に契約を打ち切りました。今も使っている有用なライブラリを紹介してくれたり、技術力はある程度期待通りだったのですが、次第に胡散臭いところや、面倒な交渉が多く発生するようになったのが原因です。

例えば、タスク量はそれほど変わっていないはずなのに、後半になるにつれ作業時間がなぜか右肩上がりで増えていました。また、兄弟がコロナにかかって重症で大変なのでボーナスをくれないかと交渉されたり、契約の終わりの方には次のクライアントを見つけるのに海外のフリーランスサイトに登録したいが出来ないので、アカウントを貸してくれないかとお願いされたりしました。このようなことが積み重なって、次第に信用できなくなっていきました。

３−２．海外のクラウドソーシングサイトでインド人・ウクライナ人・スペイン人と働く

ただ、作業自体はある程度スピードアップしたのは確かだったので、もう少し試してみようと、今度は直接海外のクラウドソーシングサイトを利用してみることにしました。前回の反省を活かして、数時間で出来る小さいタスクに対するコンペ方式で支払いを抑えつつ、何人か試してみていい人がいたら継続しようと考えました。

海外のクラウドソーシングサイトで有名なFreelancer.comやUpworkを使って、インド人、ウクライナ人、スペイン人と働いてみることにしました。確かに金額的には日本よりだいぶ低く抑えられましたが、お願いした仕様と全く違うものを作ってきたり、その多くが自分でやり直さなければいけないことになりました。

結局トータル１００万円近く掛けましたが、果たしてその価値があったかと聞かれると「はい」とは素直に言えない感じになりました。日本のフリーランスの方と働いたことがないため一概には言えないものの、(中国・インド等の)海外エンジニアだからコスパ的に良いといったことはないというのが今回の感想です。

４．公開前に本家が同じ機能を発表し諦めかける

改修も終えそろそろリリースできそうだなと考えていたある日、YouTube本家が動画の一部を切り取ってSNSでシェアできるクリップと言う機能を実験的に米国で開始したと言うニュースが流れてきました。

本家が、名前もほぼそのまま、同等の機能を出してくるとは思ってもおらず、リリースしても本家に勝てるはずがないと諦めかけました。しかし少し冷静になって考えてみると、まだ実験的な位置付けで本当に追加されるかもわからないことに加え、そもそも本家は１つの場面しか切り抜けないが、YouClipは複数の場面を切り抜いて繋げられることなど、機能面でも違いがありました。

そこで、この機能面の違いに目を向ければ、特定のユースケースでYouClipにも需要がまだあるのではないかと考え直し、そのユースケースに集中しようと考え直しました。具体的には、複数の場面を切り抜いて繋げる必要があるような、長時間のライブ配信がメインのVTuber動画や、ゲーム実況配信にサービスの主眼を置くことにしました。

５．β版をリリースするも使われない

そうやって何とかβ版のリリースに漕ぎ着け、知り合いやTwitter経由でユーザーを集め始めたのですが、一度はサイトに訪問してくれるものの、そのまま何もせずに帰ってしまう人がほとんどでした。Google Analyticsで見てみると、ホーム画面や再生画面の直帰率が70%近くあり、全く以て穴の開いたバケツのような状態であることがわかりました。

そこからは直接ユーザーに意見を聞いたり、Analyticsで取れる各種KPIやMicrosoft Clarity(※)の画面レコーディングデータを見つつ、仮説を立てて離脱率が下がるよう改善を繰り返しました。

例えば、再生画面の画面レコーディングを見ると、ミュート解除ボタンに気づかず、そのままミュート状態で見続けているユーザーが多くいることに気づきました。ミュート状態だと面白さは半減するため、ミュート解除ボタンをより目立つ位置と見た目に変えることで、再生画面の離脱率を10pt%近く下げることができました。
ミュート解除の改善

まだまだ十分とは全く言えない状態ですが、このような小さな改善を繰り返すことで、バケツの穴を少しずつ塞いでいっています。

（※）Microsoftの無料ヒートマップツール「Clarity」について
Clarityは、ユーザーの行動を無料で把握できる分析ツールで、匿名化されたユーザーの画面操作記録を見ることが出来ます。

詳しくは以下のサイトなどを見てもらうと良いと思いますが、実際にユーザーがどんな風にサービスを使っているのかを知るのにとても役立ちます！

https://sogyotecho.jp/clarity/

最後に

このようにたくさん失敗をし、正直こんなことやって意味あるのか自問自答することもありましたが、長年やってみたいと思っていた個人開発でサービスを作れた事は楽しかったし良い経験となりました。

こんなこと出来ないかと空想することから始まり、そこからどうやったら実現出来るか1つずつ考え・調べて・学びながら実装していく作業はとても楽しかったです。そうやって苦労して作ったサービスが誰かに使われているのを見るのはとても嬉しく、新しく投稿があると思わず全部いいねしてしまいます笑

また、当然サービスをリリースしても知ってもらわなければ意味がないので、苦手なSNSの運用やマーケティングについても現在進行系で試行錯誤しながら学んでいます。(こちらも現在進行系で失敗?!しているので、いつか振り返りたい)

以上が個人開発でサービスを公開するまでの私の失敗と学びです。
何かしら個人開発をしている人、これからしたい人の参考になれば嬉しいです！